1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
转自:http://blog.sina.com.cn/s/blog_537517170102v23b.html
一、 常用类
rol="form" rol="navigation"
1、container
居中的内容展示
2、row 行内容显示3、col 列内容显示, 列必须在row 中xs 宽度小于768 ,sm宽度小于990 大于768 ,md 宽度大于990,小于1200,
lg宽度大于1200col-xs-4 代表 小屏下显示为4列,col-xs-4 col-md-2 代表小屏下占4列,大屏下占2列
4、h1-H6 排版
5、pageHeader
6、small 小一号的深灰色 ,用作副标题。
7、lead 处理一个段落的文字,让其显示效果显著。
8、文字class
text-muted[object Object]
text-primary
text-success
text-info
text-warning
text-danger
9、list-unstyled 无样式的列表
10、list-inline 横向水平列表
11、table 基本使用一致。table-hover 某行鼠标变色;table-condensed 表格紧缩,实际padding减半
.table包裹在.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。
12、class="form-inline" 将表单内容横向紧缩排列 。
input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> 设为不可用。
Bootstrap对表单控件的校验状态,如error、warning和success状态,都定义了样式。使用时,添加.has-warning、.has-error或.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block都将接受这些校验状态的样式。
13、img
class="img-rounded"> 圆角
class="img-circle"> 圆形
class="img-thumbnail 缩略图
class="img-responsive" 响应
为图片赋予了max-width: 100%;和height: auto;属性,可以让图片按比例缩放,不超过其父元素的尺寸
|
本文转自Ansue 51CTO博客,原文链接:http://blog.51cto.com/ansue/1615488
,如需转载请自行联系原作者