1.标题
bootstrap对h1到h6的标题效果进行覆盖提供了对应的类名，为非标体元素设置样式、h1-h6副标题 small标签 或 .small类名
示例：
2.段落
<!-- 标题 --><h1>标题1 <small>副表题</small></h1><h2>标题2 <span class="small">副标题2</span></h2><h3>标题3</h3><div class="h1">你好</div><hr>
运行结果：
2.段落
通过.lead来突出强调内容（起作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理）<small>：小号字<b><strong>:加粗<i><em>:斜体
示例：
<p>通过.lead来突出强调内容（起作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理）</p><p class="lead">通过.lead来突出<small>强调</small><b>内容</b>（起作用就是 <strong>增大</strong> 文本 <i>字号</i> ，加粗 <em>文本</em> ，而且对行高和margin也做相应的处理）</p><hr>
运行结果：
3.强调
示例：
.text-muted：提示，使用浅灰色（#999）.text-primary：主要，使用蓝色（#428bca）.text-success：成功，使用浅绿色(#3c763d) .text-info：通知信息，使用浅蓝色（#31708f）.text-warning：警告，使用黄色（#8a6d3b）.text-danger：危险，使用褐色（#a94442）
运行结果：
4.对齐效果
Bootstrap通过定义四个类名来控制文本的对齐风格.text-left:左对齐.text-center:居中对齐.text-right:右对齐.text-justify:两端对齐
示例：
<!-- 对齐效果 --><p style="text-align: right;">Bootstrap通过定义四个类名来控制文本的对齐风格</p><p class="text-left">左对齐：Bootstrap通过定义四个类名来控制文本的对齐风格</p><p class="text-right">右对齐Bootstrap通过定义四个类名来控制文本的对齐风格</p><p class="text-center">居中对齐：Bootstrap通过定义四个类名来控制文本的对齐风格</p><p class="text-justify">两端对齐：Bootstrap通过定义四个类名来控制文本的对齐风格Bootstrap通过定义四个类名来控制文本的对齐风格Bootstrap通过定义四个类名来控制文本的对齐风格Bootstrap通过定义四个类名来控制文本的对齐风格Bootstrap通过定义四个类名来控制文本的对齐风格Bootstrap通过定义四个类名来控制文本的对齐风格Bootstrap通过定义四个类名来控制文本的对齐风格Bootstrap通过定义四个类名来控制文本的对齐风格Bootstrap通过定义四个类名来控制文本的对齐风格Bootstrap通过定义四个类名来控制文本的对齐风格Bootstrap通过定义四个类名来控制文本的对齐风格</p>
运行结果：
5.列表
无序列表 有序列表 定义列表
示例：
<!-- 无序列表 --> <ul class="list-unsstyled"> <li>无序项目列表一</li> <li>无序项目列表二</li> </ul> <!-- 有序列表 --> <ol> <li>有序项目列表一</li> <li>有序项目列表二</li> </ol> <!-- 定义列表 --> <dl> <dt>HTML</dt> <dd>超文本标记语言</dd> <dt>css</dt> <dd>层叠样式表是一种样式表语言</dd> </dl> <hr> <!-- 去点列表 --> <ul class="list-unsstyled"> <li>无序项目列表一</li> <li>无序项目列表二</li> </ul> <!-- 内联列表 （水平列表）--> <ul class="list-inline"> <li>首页</li> <li>java学院</li> <li>在线课堂</li> </ul> <!-- 自定义列表 内联列表 --> <dl class="dl-horizontal"> <dt>HTML 超文本标记语言</dt> <dd>HTML 超文本标记语言</dd> <dt>HTML测试 标题不能超过160px的宽度，否则会显示三个省略号</dt> <dd>HTML 超文本标记语言超文本标记语言超文本标记语言超文本标记语言</dd> </dl> <hr><br>
运行结果：
6.代码
（1）通过 <code> 标签包裹内联样式的代码片段。（2）通过 <kbd> 标签标记用户通过键盘输入的内容。（3）多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。
示例：
<!-- 通过 <code></code>>标签包裹内联样式的代码片段。 --> this is a simple code<br> <code>this is a simple code</code><br> <code> this is a simple code<br> this is a simple code </code> <!-- 快捷键 --> <p>使用<kbd>ctrl</kbd> + <kbd>s</kbd> 保存内容</p> <!-- 多行代码 --> <!-- 代码会保留原本的格式，包括空格和回车 --> <pre>public class HelloWorld{ public static void main(String[] args){ System.out.println("HelloWorld..."); } } </pre> <!-- 显示html代码需要使用字符实体 --> <pre><h2>你好</h2></pre> <!-- 低昂长度超过指定值，可以添加滚动条 --> <pre class="pre-scrollable"> <ol> <li>......</li> <li>......</li> <li>......</li> <li>......</li> <li>......</li> <li>......</li> <li>......</li> <li>......</li> <li>......</li> </ol></pre>
运行结果：
7.表格
表格 table的样式: table-border:给表格加上边框 table-striped:给表格设置隔行变色 table-hover:鼠标经过显示高亮效果 table-condensed:使表格的间隙变小 tr、th、td样式： .active:将悬停的颜色应用在行或者单元格上 .success:表示成功的操作 .info:表示信息变化的操作 .warning:表示一个警告的操作 .danger:表示一个危险的操作
示例：
<table class="table table-border table-striped table-hover table-condensed"> <tr> <th>javaSE</th> <th>数据库</th> <th>javascript</th> </tr> <tr class="info"> <td>面向对象</td> <td>oracle</td> <td>json</td> </tr> <tr class="success"> <td>数组</td> <td>mysql</td> <td>ajax</td> </tr> <tr class="active"> <td>HTML</td> <td>CSS</td> <td>Vue</td> </tr> <tr class="danger"> <td>bootStrap</td> <td>Springboot</td> <td>JSP</td> </tr> <tr class="warning"> <td>ASP.NET</td> <td>C#</td> <td>网络编程</td> </tr> </table>
运行结果：
