一、排版
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" />