<!--粗体--> <p>普通文本<b>粗体</b>普通文本</p> <p>普通文本<strong>粗体</strong>普通文本</p> <!--斜体--> <p>普通文本<em>斜体</em>普通文本</p> <p>普通文本<i>斜体</i>普通文本</p>
4）文本对齐
Bootstrap通过定义四个类名来控制文本的对齐风格：
<p>我居左</p> <p>我居中</p> <p>我居右</p> <p>我两端对齐</p>
6.Bootstrap的列表
Bootstrap根据平时的使用情形提供了六种形式的列表：普通列表、有序列表、去点列表、内联列表、定义列表、水平定义列表。
1）普通列表
<!--普通列表--> <ul> <li>普通列表1</li> <li>普通列表2</li> </ul>
2）有序列表
<!--有序列表--> <ol> <li>有序列表1</li> <li>有序列表2</li> </ol> <!--有序列表嵌套--> <ol> <li>有序列表1</li> <li>有序列表2 <ol> <li>有序列表2.1</li> <li>有序列表2.2</li> </ol> </li> <li>有序列表3</li> </ol>
3）去点列表
给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
<ol> <li>有序列表1</li> <li>有序列表2</li> </ol>
4）内联列表（为制作水平导航而生）
像去点列表一样，通过添加类名“.list-inline”来实现内联列表，把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。
<ul> <li>导航栏条目1</li> <li>导航栏条目2</li> </ul>
5）定义列表
Bootstrap定义列表只是调整了行间距，外边距和字体加粗效果。
<dl> <dt>北京</dt> <dd>中国的首都。</dd> <dt>上海</dt> <dd>国家中心城市，超大城市。</dd> </dl>
6）水平定义列表
水平定义列表就像内联列表一样，Bootstrap可以给dl标签添加类名“.dl-horizontal”给定义列表实现水平显示效果。
<dl> <dt>北京</dt> <dd>中国的首都。</dd> <dt>上海</dt> <dd>国家中心城市，超大城市。</dd> </dl>
7.Bootstrap的表格
Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。具体如下：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>基础表格</title> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <h3>基础表格</h3> <!-- 主要源码查看bootstrap.css文件第1402行～第1441行 --> <table> <thead> <tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr> </thead> <tbody> <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr> <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr> </tbody> </table> <h3>斑马线表格</h3> <!-- 主要源码查看bootstrap.css文件第1465行~第1468行 --> <table> <thead> <tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr> </thead> <tbody> <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr> <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr> </tbody> </table> <h3>带边框的表格</h3> <!-- 主要源码查看bootstrap.css文件第1450行~第1464行 --> <table> <thead> <tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr> </thead> <tbody> <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr> <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr> </tbody> </table> <h3>鼠标悬浮高亮的表格</h3> <!-- 主要源码查看bootstrap.css文件第1469行~第1472行 --> <table> <thead> <tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr> </thead> <tbody> <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr> <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr> </tbody> </table> <h3>紧凑型表格</h3> <!-- 主要源码查看bootstrap.css文件第1442行~第1449行 --> <table> <thead> <tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr> </thead> <tbody> <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr> <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr> </tbody> </table> <h3>响应式表格</h3> <!-- Bootstrap提供了一个类名为.table-responsive的容器，置于此容器的表格就具有响应式效果 --> <div> <table> <thead> <tr><th>表格标题</th><th>表格标题</th><th>表格标题</th></tr> </thead> <tbody> <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr> <tr><td>表格单元格</td><td>表格单元格</td><td>表格单元格</td></tr> </tbody> </table> </div> </body> </html>
这部分代码包含了Bootstrap常用的表格，效果图如下所示：
