Bootstrap精华⼀页纸
Bootstrap 是基于H5利⽤ JS和CSS 进⾏布局、提供插件、动画的⼀个框架。使⽤了JQuery进⾏DOM控制。
1、布局部分
采⽤了 ⽹格式布局（本质上是table布局，把页⾯按照⽹格进⾏布局）
I、把设备分为了四种- 按媒体查询，实现响应式布局(按照 max-width/min-width进⾏区分)
I、把设备分为了四种
xs 768导航页源码
sm 768 - 992
md 992 - 1200
lg 1200 -
II、把⼀个空间分成 12 列
col-设备-列宽度
⽹格布局可以嵌套，每⾏⼀都是 12，可以⼩于 12 但不能⼤于 12
III、除了规整布局外，还可以偏移
col-xxx-offset-xx 跳过起始列
col-xxx-push-xx 向右推⼏列
col-xxx-pull-xx 向左推⼏列
IV、还提供了响应式布局的控制
visibile-xs-xxx
hide-xs-xxx
visibile-xs-block/inline/block-inline
2、组件
所有的布局组件基本都提供了如下的样式
I、四种类型的样式 success/info/warning/danger 来区分不同场景下的显⽰
II、提供了状态： active/disable 激活和禁⽌的 样式; 提供了 show和 hide
III、提供了控件⼤⼩ xxx-md/xs/lg/sm
3、基本组件 - 样式
I、⽂本类样式
Bootstrap 为⽂本提供了，类似于Word 排版功能的样式
a、各种主标题、副标题、⼦标题 .head .small ...
b、⽂本对齐 .text-left/right/center
c、⾃定义了⼀些元素标签
address 地址
abbr 带提⽰的⽂本
应⽤ blockquote & small cite q
复杂列表 dl/dt （增强 ul/ol)
d、提供了H5源代码的显⽰
code pre 元素
II、表格
.table
.table-border
.table-hover 提供悬停样式
还有⼀些其他背景样式 .table-stripped 紧凑表格.table-condensed 响应式布局.table-responsive
结合 .success 等四种样式，还能对表格数据实现 差异化的展⽰(⽐如通过 js，angularjs对数据进⾏处理、ng-class 动态添加class）III、表单
a、在 元素中提供 .form 的 role属性 类，提供样式 （这边⾃定义了⼀个role属性，⽽不是样式)
b、在每⼀组(label + 控件) 提供 .form-group 的class类提供样式，包括间距等等
c、默认是 垂直布局，如果需要 内联/⽔平 在 元素 提供 .form-inline/.form-horizontal 样式
这三种布局的区别是
垂直，所有元素都是占据⼀⾏，即使是 .form-group 组内的也是
内联，所有元素都合并到 同⼀⾏
⽔平，指的是 .from-group 同⼀组内的元素是同⼀⾏
d、提供了以下表单控件
Input输⼊框 (text/password/dattime/number/email/url ...)
⽂本框 Textarea
选择框 (复选 checkbox/单选 radio)
静态控件 -- ⽤于⼀些标签后的纯⽂本显⽰ 提供了⼀个 form-control-static 类
e、表单状态和验证
除了基本状态active/disable 外，还有 focus状态 .focus
验证？？(has-error/warning/success 只是样式？）
IV、按钮
a、⾸先使⽤ .btn .btn-default 使⽤基本样式，⽐如圆⾓等等；然后可选各种按钮属性
b、最终的按钮属性 .active / .disabled 这些，原始的就可以标注按钮是否点击过，通过 angularJS的⽐如 ng-class/ ng-click 这些来达到按钮的丰富控制
c、a 链接元素也可以使⽤按钮样式
V、图⽚
图⽚样式⽐较简单就是普通图⽚，很难有什么特别的样式处理
a、增加了 圆⾓ img-rounded 原型 img-circle
b、提供类似 缩略图的样式 img-thumbnail
其他⼀些功能
a、提供了布局的⼀些控制 .pull-left .pull-right .center-block .clearfix 清除浮动
b、屏幕专⽤ sr-only
c、.close .caret 提供了 关闭和下来的类似按钮的样式
4、增强版组件 - 样式
增强版功能，主要是在 ⼀些基本组件上进⾏功能叠加，形成⼀些常⽤的组件
I、字体图标
⼏乎所有常见的图标都有，建议所有图标尽量使⽤字体图标，⽽不是 icon 图⽚，⼀是因为性能；⼆是因为字体图标可以任意控制
II、基于列表ul(ol)/li 实现的⼀些控件
a、基本菜单
通过 display:inline 把列表在⼀⾏显⽰，并且设置边框，背景，阴影等⼀系列效果
b、导航元素 -- 就是⼀个Tab控件
使⽤ .nav 类 + .nav-tabs
把Tab控件变成 胶囊导航
.nav-pills
使⽤垂直的导航菜单 .nav-stacked
两端对齐 .nav-justified
c、导航栏 -- 类似菜单效果
在导航元素的基础上增加⼀个 .navbar-nav 的类，就可以实现 导航栏的效果
navbar-header/navbar-brand
使⽤icon-bar 多个叠加可以形成特殊效果的 汉堡按钮 （把他放在按钮⾥⾯，响应点击事件）
导航中的组件对齐⽅式 : .navbar-left/right 都是基于 float的浮动
导航中的位置:
固定位置 .navabar-fixed-top/bottom， 不管滚动条如何滚动都是 当前浏览器的顶部（这个就可以做成现在⽹站的 顶部导航功能，表格导航）静态位置 .navbar-static-top 随着滚动条，导航菜单就移动到画⾯外
倒置导航栏 -- 主要指颜⾊的对⽐，类似于 负⽚
d、⾯包屑导航
.breadcrumb
e、分页 & 翻页
f、列表组
还是使⽤的列表，功能类似于 下拉菜单，或者导航
III、按钮组
通过.btn-group 提供按钮组的功能； .btn-toolbar 再把分组的按钮组结合在⼀起。按钮组也可以嵌套使⽤ 按钮组和 直接多个button连在⼀起的区别是（1、内联；2、按钮间距）
IV、表单增强 - 输⼊框组
a、简单分组 input-group 和btn-group类似，功能提供不多
b、input-group-addon 提供⾯板功能，利⽤这个⾯板可以提供⾮常丰富的组合功能
按钮|⽂本|复选框|下来菜单|分隔式下来菜单... 甚⾄图⽚也可以
V、表单增强 - 标签 & 徽章
标签功能很简单 .lable .label-default ...
徽章功能不简单
VI、图⽚增强 - 直接增加缩略图
取代了img-xx 的样式，直接使⽤ .thumbnail
VII、容器（⾯板 & 警告 & well）
提供⾯板功能，⼀般对于⼀个单独的组件，⼀个弹出框，就⽐较有⽤了
.panel
.panel-heading
.panel-title
.panel-body
.panel-footer

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。