1.标题
- 提供 .h1~.h6的样式名，标签设置对应的样式名则会有对应的标题效果
- 提供 .small的样式名，有副标题的效果。
<h1>h1. Bootstrap heading<small>副标题</small></h1> <div class="h1">Bootstrap标题1<span class="small" >副标题</span></div>
2.段落
- 通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
<small>:小号字 <b><strong>:加粗 <i><em>:斜体
<p>以后的你会感谢现在努力的你</p> <p class="lead">以后的你会感谢现在努力的你</p> <p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p>
3.强调（颜色分层）
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
<span class="text-warning">警告</span>
4.对齐
Bootstrap通过定义四个类名来控制文本的对齐风格：
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐
5.关于表格
样式：
- .table-striped：斑马线表格
- .table-bordered：带边框的表格
- .table-hover：鼠标悬停高亮的表格
- table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小
可以一次性多次调用多个样式，合并使用
<table class="table table-bordered table-striped table-hover table-condensed"> <tr class="info"> <th>JavaSE</th> <th>数据库</th> <th>JavaScript</th> </tr> <tr class="active"> <td>面向对象</td> <td>oracle</td> <td>json</td> </tr> <tr class="danger" > <td>数组</td> <td>mysql</td> <td>ajax</td> </tr> <tr class="warning"> <td>面向对象</td> <td>oracle</td> <td>json</td> </tr> <tr class="success"> <td>数组</td> <td>mysql</td> <td>ajax</td> </tr> </table>
最后显示图像如下
6.关于列表
- 去点列表
class=“list-unstyled” - 内联列表
class=“list-inline”
功能主要是将原来的很多行的文字转化为同一行当中
- 定义列表
使用样式 class=“dl-horizontal” 制作水平定义列表 : 当标题宽度超过160px时，将会显示三个省略号
去点列表和内联列表示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="dist/css/bootstrap.css"> <script type="text/javascript" src="dist/js/jquery.js"></script> <script type="text/javascript" src="dist/js/bootstrap.js"></script> <title>无标题文档</title> </head> <body style="margin:200px;"> <div class="container"> <p>这个是list-unstyled的列表样式标签</p> <ul class="list-unstyled"> <li>11111111111111</li> <li>11111111111111</li> <li>11111111111111 <ul> <li>2222222222222222222</li> <li>2222222222222222222</li> <li>2222222222222222222</li> </ul> </li> <li>11111111111111</li> </ul> ---------------------------------------我是分割线---------------------------------------------- <p>这个是list-inline的列表样式标签</p> <ul class="list-inline"> <li>11111111111111</li> <li>11111111111111</li> <li>22222222222222</li> <li>22222222222222</li> <li>23333333333333</li> <li>33333333333333</li> </ul> </div> </body> </html>
代码运行结果：
