一、排版
1、标题(.page-header)
从<h1>到<h6>均可使用page-header样式。
<body><div><h1 class="page-header">h1. Bootstrap heading</h1><p class="lead">有lead样式</p><p>没有lead样式</p></div></body>
效果:
2、段落(.lead)
p标签:p标签与生俱来外上边距、外下边距都改了。(见上面)
3、<mark></mark>标记
4、<del></del>删除线
5、<s></s>删除线
6、<ins></ins>下划线
7、<small></small>小号字体
8、文本对齐
.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
9、文本大小写
.text-lowercase:小写
.text-uppercase:大写
.text-capitalize:首字母大写
10、无样式列表(.list-unstyled)
没有小点点。
<body><ul class="list-unstyled"><li>linux</li><li>linux</li><li>linux</li><li>linux</li><li>linux</li></ul></body>
11、内联列表(.list-inline)
通过设置display: inline-block;把块标签变成行标签。
12、自定义列表
<dl><dt>选择题:</dt><dd>A. xxx</dd><dd>B. xxx</dd><dd>C. xxx</dd><dd>D. xxx</dd></dl>
13、水平排列列表(.dl-horizontal)
二、代码
1、<code></code>内联代码
2、<pre></pre>代码块
3、<kbd></kbd>用户输入
三、表格
1、基本格式(.table)
从原本挤在一起,瞬间分开了。
2、条纹状(.table-striped)
增加了明暗条纹。
3、带边框(.table-bordered)
4、鼠标悬停(.table-hover)
鼠标放上去会有移动效果。
5、紧缩表格(.table-condensed)
<body><div class="container"><h1 class="page-header">bootstrap前端框架</h1><table class="table table-striped table-bordered table-hover table-condensed"><tr><th>ID</th><th>用户名</th><th>密码</th></tr><tr><td>001</td><td>002</td><td>003</td></tr><tr><td>001</td><td>002</td><td>003</td></tr><tr><td>001</td><td>002</td><td>003</td></tr><tr><td>001</td><td>002</td><td>003</td></tr><tr><td>001</td><td>002</td><td>003</td></tr></table></div></body>
6、响应式表格(.table-responsive)
将table包裹在<div class="table-responsive"></div>中,缩小屏幕会出现水平滚动条。
四、按钮
1、按钮样式(.btn)
2、白色(.btn-default)
3、蓝色(.btn-primary)
4、绿色(.btn-success)
5、青色(.btn-info)
6、红色(.btn-warning)
7、黄色(.btn-danger)
8、把按钮做的和a链接一样(.btn-link)
9、大按钮(.btn-lg)
10、小按钮(.btn-sm)
11、微小按钮(.btn-xs)
12、button变为块标签,独占一行(.btn-block)
13、禁用按钮(disabled属性)
14、哪些标签可以做按钮
<button class="btn btn-primary btn-block btn-lg">个人信息</button><a class="btn btn-primary btn-block btn-lg" href="">个人信息</a><input type="button" class="btn btn-primary btn-block btn-lg" value="OK" /><input type="submit" class="btn btn-primary btn-block btn-lg" value="OK" /><input type="reset" class="btn btn-primary btn-block btn-lg" value="OK" />