布局容器
.container
类用于固定宽度并支持响应式布局的容器。.container-fluid
类用于 100% 宽度,占据全部视口(viewport)的容器。
注:由于 padding 等属性的原因,这两种容器类不能互相嵌套
栅格系统
.col-xs-
超小屏幕 手机 (<768px).col-sm-
小屏幕 平板 (≥768px).col-md-
中等屏幕 桌面显示器 (≥992px).col-lg-
大屏幕 大桌面显示器 (≥1200px)
注:每一个列的每边分别 15px,共30px.row
所有“列(column)必须放在 ” .row 内
列偏移
.col-*-offset-*
列偏移,第一个*
是xs
,sm
,md
,lg
中的一个,第二个*
是偏移量,范围0-12
列排序
.col-md-push-*
向右边推几个单位,其中*
范围是从 1 到 11。.col-md-pull-*
向左边推几个单位,其中*
范围是从 1 到 11。
排版
.h1
到.h6
效果和<h1>
到<h6>
相同,为的是给内联(inline)属性的文本赋予标题的样式。.small
效果和<small>
相同,可以用来标记副标题.lead
给段落添加强调文本,这将得到更大更粗、行高更高的文本
对齐
.text-left
向左对齐文本.text-center
居中对齐文本.text-right
向右对齐文本.text-justify
两端对齐文本.text-nowrap
不换行文本
改变大小写
.text-lowercase
全部小写.text-uppercase
全部大写.text-capitalize
首字母大写
图片
.img-responsive
使图片支持响应式布局.center-block
让使用了.img-responsive
类的图片水平居中.img-rounded
圆角图片.img-circle
圆图.img-thumbnail
缩略图
辅助类
情境文本颜色
.text-?
后面可以拼接muted,primary,success等
情境背景色
bg-?
后面可以拼接primary,success等
关闭按钮
.close
象征关闭的图标
三角符号
.caret
清除浮动
.clearfix
显示与隐藏
.show
显示
.hidden
隐藏
响应式工具
只在某一端显示
.visible-*-*
第一个*
是xs
,sm
,md
,lg
中的一个,第二个*
是block
,inline
,inline-block
中的一个
只在某一端隐藏
.hidden-*
*
是xs
,sm
,md
,lg
中的一个