Bootstrap

特点

• 跨设备、跨浏览器
• 响应式布局
• 提供了全面的组件
• 内置jQuery插件
• 支持HTML5、CSS3
• 支持LESS动态样式（LESS使用变量、嵌套、操作混合编码，编写更快、更灵活的CSS）

全局CSS样式

概览

移动设备优先

布局容器

• .container：固定宽度；.container-fluid：100%宽度

栅格系统

列偏移

• 使用.col-md-offset-*类可以将列向右侧偏移

嵌套列

列排序

• 通过使用.col-md-push-*和.col-md-pull-*类就可以改变列的顺序

排版

标题

• 提供了.h1到.h6类，为的是给内联属性的文本赋予标题的样式
• 在标题（h1-h6）内包含一个small标签或赋予.small类来作为副标题

页面主体

• 将全局font-size设置为14px，line-height设置为1.428（即20px）。p元素设置了1/2行高（即10px）。设置颜色为#333

内联文本元素

对齐

• text-left：左对齐；text-center：居中对齐；text-right：右对齐

改变大小写

• text-lowercase；text-uppercase；text-Capitalize：首字母大写

列表

• list-unstyled：移除默认样式；list-inline：通过设置成inline-block，将所有元素放置于同一行

表格

基本实例

• .table类赋予了padding和水平方向的分隔线

条纹状表格

• .table-striped类给tbody内的每一行增加斑马条纹样式

带边框的表格

• 添加.table-bordered类为表格和其中的每个单元格增加边框

鼠标悬停

• 添加.table-hover类可以让tbody中的每一行对鼠标悬停状态做出响应

状态类

• 通过状态类可以为行或单元格设置颜色。
• .active、.success、.info、warning、.danger

响应式表格

• 将任何.table元素包裹在.table-responsive元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动

表单

基本实例

• 所有设置了.form-control类的input、textarea和select元素都将被默认设置宽度属性为width=100%
• 将label元素和表单控件包裹在.form-group中可以获得更好的排列

内联表单

• 为form元素添加.form-inline类可使其内容左对齐并且表现为inline-block级别的控件

表单合组

• 子级添加.input-group-addon类，父级添加.input-group类

水平排列的表单

• 为表单添加.form-horizontal类，并且配合栅格类，可以将label标签和控件组水平并排布局

lebel标签同步相应状态

• 给label标签添加.control-label类

添加额外的图标

• 只需设置相应的.has-feedback类并添加正确的图标即可
• 文本框右侧内置文本图标，.glyphicon-ok：成功状态；.glyphicon-warning-sign：警告状态；.glyphicon-remove：错误状态

控件尺寸

• 通过.input-lg类似的类设置控件的高度，通过.col-lg-*类似的类设置控件的宽度

按钮

可以作为按钮使用的标签或元素

• a、button、input。（添加.btn即可）

预定义样式

• btn-default：默认样式、btn-primary：首选项、btn-success：成功、btn-info：一般信息、btn-warning：警告、btn-danger：危险、btn-link：链接

尺寸

• btn-lg：大按钮、btn-primary：默认尺寸、btn-sm：小尺寸、btn-xs：超小尺寸

块级按钮

• 添加.btn-block类

激活状态

• 添加.active类

禁用状态

• 添加.disabled类

图片

响应式图片

• 为图片添加.img-responsive类即可

图片形状

• 添加.img-rounded类、.img-circle类或.img-thumbnail类即可

辅助类

情境文本颜色

• .text-muted：柔和灰、.text-primary：主要蓝、.text-success：成功绿、.text-info：信息蓝、.text-warning：警告黄、.text-danger：危险红

情境背景色

• .bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger

关闭按钮

• 添加内容×和.close类

三角符号

• .caret

快速浮动

• .pull-left：左浮动；.pull-right：右浮动

让内容块居中

• .center-block

清除浮动

• .clearfix

显示或隐藏内容

• .show、.hidden

响应式工具

可用的类

• .visible-*-*和.hidden-xs，示例：.visible-xs-*、.visible-sm-*、.visible-md-*、.visible-lg-*、.visible-*-block、.visible-*-inline、.visible-*-inline-block

组件

Glyphicons 字体图标

实例

• 可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方

下拉菜单

实例

• 将下拉菜单触发器和下拉菜单都包裹在.dropdown里
• 通过为下拉菜单的父元素设置.dropup类，可以让菜单向上弹出
• 设置class="caret"表示箭头，可上可下；
• 被点击的按钮需要设置data-toggle=“dropdown”、对于菜单需要设置.dropdown-menu

对齐

• 添加.dropdown-menu-right类可以让菜单右对齐，默认是.dropdown-menu-left

标题

• 设置菜单的标题，不要加超链接，加.dropdown-header类

分割线

• 设置菜单的分割线，加.divider类

禁用的菜单项

• .disabled

让菜单默认显示

• .open

按钮组

基本实例

• 通过按钮组容器把一组按钮放在同一行里：.btn-group

按钮工具栏

• 将多个按钮组整合起来便于管理：.btn-toolbar

尺寸

• 只要给.btn-group加上.btn-group-*类即可

嵌套（即按钮式下拉菜单）

• 只需把.btn-group放入另一个.btn-group中，再加.dropdown-toggle即可

垂直排列

• 设置按钮组垂直排列：.btn-group-vertical

两端对齐排列的按钮组

• .btn-group-justified，使用a标签

输入框组

基本实例

• .input-group、.input-group-addon、.form-control

尺寸

• 为.input-group添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸（lg、默认、sm、xs）

作为额外元素的多选框和单选框

作为额外元素的按钮

• .input-group-btn

作为额外元素的按钮式下拉菜单

• .input-group-btn

导航

标签页

• .nav
• .nav-tabs类依赖.nav基类

胶囊式标签页

• .nav-pills，添加.nav-stacked类既可垂直方向堆叠排列

两端对齐

• 导航两端对齐：.nav-justified

禁用的链接

• 禁用导航中的项目：.disabled

添加下拉菜单

导航条

默认样式的导航条

• .navbar、navbar-default

品牌图标

• .navbar-header：标题区域（左浮动）
• .navbar-brand：标题（logo），自带左浮动
• .nav、.navbar-nav：导航条里的导航
• .active：首选项

表单

• .navbar-form、.navbar-right：对齐方式（右对齐）

按钮

• 导航中使用按钮：.navbar-btn

文本

• 导航中使用一段文本：.navbar-text

非导航的链接（一般需要置入文本区域）

• .navbar-link

组件排列

• 导航中使用对齐方式：.navbar-left、.navbar-right

固定在顶部

• .navbar-fixed-top

固定在底部

• .navbar-fixed-bottom

静止在顶部（即100%宽，去掉了圆角）

• .navbar-static-top

反色的导航条

• .navbar-inverse

路径导航（面包屑导航）

• .breadcrumb

分页

默认分页

• .pagination

禁用和激活状态

• .disabled、.active

尺寸

• .pagination-lg、.pagination-sm

翻页

默认实例

• .pager

对齐链接

• .previous、.next

标签

实例

• .label、.label-default

可用的变体

• .label label-default、.label label-primary、.label label-success、.label label-info、.label label-warning、.label label-danger

微章

• .badge：未读的信息条目

巨幕（主要展示网站的关键性区域）

• 在固定的范围内，有圆角：.jumbotron包括在.container里
• 100%全屏，没有圆角：.container包括在.jumbotron里

页头

• .page-header

缩略图

默认样式的实例

• .thumbnail

自定义内容

• .caption

警告框

实例

• .alert alert-success、.alert alert-info、.alert alert-warning、.alert alert-danger

可关闭的警告框

• .close、×、data-dismiss="alert"

警告框中的链接

• .alert-link

进度条

基本实例

• .progress、.progress-bar、style="width:一个百分比值或像素值"、style="min-width:一个百分比值或像素值"：最小值

根据情境变化效果

• .progress-bar-success、.progress-bar-info、.progress-bar-warning、.progress-bar-danger

条纹效果（IE10+）

• .progress-bar-striped

动画效果

• .active

堆叠效果

媒体对象

默认样式

• .media、.media-left、.media-body、.media-object、.media-heading

媒体对象列表

列表组

基本实例

• .list-group、.list-group-item

微章

链接

按钮

情境类

• .list-group-item-success、.list-group-item-info、.list-group-item-warning、.list-group-item-danger

定制内容

面板

基本实例

• .panel、.panel-default、.panel-body

带标题的面板

• .panel-heading

带脚注的面板

• .panel-footer

情境效果

• .panel-primary、.panel-success、.panel-info、.panel-warning、.panel-danger

具有响应式特性的嵌入内容

• .embed-responsive、.embed-responsive-16by9、.embed-responsive-4by3

well组件

• .well
• 有.well-lg和.well-sm两种可选值

JS插件

模态框

实例

• .modal：模态声明层、.dialog：窗口声明层、.content：内容层、.modal-header：头部、.modal-body：主体、.modal-footer：注脚、.modal-title
• data-dismiss="modal"、id、tabindex="-1"、data-toggle="modal"、data-target="#id"

可选尺寸

可设置淡入淡出效果

• .fade

用法

• 通过data属性，data-toggle表示触发类型，data-target表示触发的节点

参数

方法

事件

下拉菜单

声明式用法

JS方式（在JS调用中，没有属性，方法并不好用）

滚动监听

• data-spy="scroll"：设置滚动容器监听、data-offset：默认值为10，固定内容距滚动容器10像素以内，就高亮显示所对应的菜单、data-target：指定监听的菜单

标签页（选项卡）

实例

• .tab-content、.tab-pane、id、data-toggle="tab"
• 可以设置淡入淡出效果fade，而in表示首选的内容默认显示
• 也可换成胶囊式：.nav nav-pills

事件

• show.bs.tab：在调用tab方法时触发；shown.bs.tab：在显示整个标签时触发

工具提示

实例

• title、data-toggle="tooltip"
• JS部分需要声明：tooltip()

参数

弹出框

实例

• data-toggle="popover"、title、data-content、popover()

参数

警告框

实例

• .alert-warning、data-dismiss="alert"、.fade、.in、

按钮

单个切换

• data-toggle="button"

单选/复选

• data-toggle="buttons"

方法

• data-自定义内容-text

Collapse（折叠）

实例

• data-toggle="collapse"、data-target、id、.collapse、.well

手风琴折叠

• .panel-group、.panel、.panel-heading、.panel-title、id、.panel-body、.panel-collapse、.collapse、data-parent

Carousel

实例

• id、.carousel slide、 .carousel-indicators、data-target、data-slide-to、.active、.carousel-inner、.item、.carousel-control left、.carousel-control right、data-slide="prev"、data-slide="next"、‹、›、data-ride="carousel"：设置自动播放

Affix（附加导航）

• data-spy="scroll"、data-target、id、.container、.jumbotron、.nav nav-pills nav-stacked、data-spy="affix"、.active

结束语

如果喜欢本文，记得点赞并加关注哟。