加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

分享bootstrap学习笔记心得(组件及其属性)

发布时间:2020-12-18 00:42:52 所属栏目:安全 来源:网络整理
导读:Bootstrap是一种web框架,是基于HTML,CSS和JS的一种目前较为流行的前端框架。 Bootstrap包含有丰富的组件,根据提供的组件,开发者可以更加快速、便捷地搭建自己心仪的网站。通常包括有以下常用组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、

1.4列表:

class属性:ul:list-group

li:list-group-item 徽章:span:badge

列表项颜色:list-group-item-(success/warning/danger)

  • 1.5表单:

    表单分组:form-group

    表单项:(input/span/textarea):form-control

    .container{ width:450px; height:300px; background:#ffffff; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:20px; }

    (编辑:李大同)

    【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    Bootstrap是一种web框架,是基于HTML,CSS和JS的一种目前较为流行的前端框架。

    Bootstrap包含有丰富的组件,根据提供的组件,开发者可以更加快速、便捷地搭建自己心仪的网站。通常包括有以下常用组件:下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、警告对话框、进度条、媒体对象等。此外,bootstrap还包含有众多jQuery插件:莫泰局昂、标签页、滚动条、弹出框等。

    有关bootstrap的下载和文档可到bootstrap中文网:查看。

    那么使用bootstrap的优势在哪里?第一、利于开发响应式网站,解决不同设备的兼容性问题。第二、提高了网站的开发速度和开发效率。

    参考:

    本篇文章将总结常用组件及其属性。

    1.1栅格系统

    1、栅格系统是一种行和列构成的一种布局。随着,屏幕分辨率的变大,最多可展示12个列。

    PC端:

    PAD端:

    手机终端:

    2、栅格参数:

    col-lg-*:(屏幕>=1200px) PC col-md-*:(992px-1200px) col-sm-*:(768px-992px)小平板 col-xs-*:(小于768px)手机

    3.代码示例:

    靠谱研究所

    我们的口号是:靠谱、有趣、有料

    靠谱研究所

    我们的口号是:靠谱、有趣、有料

    1.2辅助类

    1.文本颜色:

    2、背景颜色:

    3、关闭按钮&三角图标:

    4、快速浮动:

    左浮动:pull-left

    右浮动:pull-right 清除浮动:clearfix

    浮动会将块元素转换成行内元素

    5、块元素居中、文字居中:

    1.3表格

    1.表格颜色:active,warning,danger,info,danger

    2.鼠标悬停效果:table-hover

    3.带边框表格:table-bordered

    4.各行换色:table-striped

    姓名: 性别: 年龄:
      推荐文章
        热点阅读