目录
一、标题：
Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>，只是Bootstrap覆盖了默认的样式，使用其所在浏览器下显示的效果一样。为了让非标题标签元素和标题使用相同的样式，还特意定义了.h1- .h6六个类名。同时，后面还可以跟着一个小的副标题<small></small>或使用 .small
<body> <!-- Bootstrap定义的标题标签 --> <h1>标题1（使用h1标签）</h1> <div class="h1">标题1（使用.h1类名）</div> <div class="h1">标题1<small>这是一个由small定义的副标题</small></div> <div class="h3">标题1<small>这是一个由small定义的副标题</small></div> </body>
编辑
二、段落：
段落是排版中另一个重要元素之一。通过.lead 来突出强调的内容。其作用就是增大文本字号，加粗文本内容，而且对行高和margin也做相应的处理。可以使用下标签给文本给文本做突出样式处理：
<p class="lead"> <small>以后的你</small><b>会</b><i>感谢</i><em>现在</em><strong>努力</strong>的你！ </p>
编辑
- <small>：小号字
- <b>，<strong>：加粗
- <i>，<em>：斜体
三、强调：
Bootstrap定义了一套类名，这里称为强调类名，这些强调类都是通过颜色来起强调作用。
- text-muted：提示，使用浅灰色（#999）
- text-primary：主要，使用蓝色（#428bca）
- text-success：成功，使用浅绿色（#3c783d）
- text-info：通知信息，使用浅蓝色（#31708f）
- text-warning：警告，使用黄色（#8a6d3b）
- text-dager：危险，使用褐色（#a94442）
<!-- text-muted：提示，使用浅灰色（#999） text-primary：主要，使用蓝色（#428bca） text-success：成功，使用浅绿色（#3c783d） text-info：通知信息，使用浅蓝色（#31708f） text-warning：警告，使用黄色（#8a6d3b） text-danger：危险，使用褐色（#a94442） --> <div class="text-muted">提示效果</div> <dic class="text-primary">主要效果</dic> <div class="text-success">成功效果</div> <div class="text-info">信息效果</div> <div class="text-waring">警告效果</div> <div class="text-danger">危险效果</div>
编辑
四、对齐效果：
在CSS中常常使用text-align来实现文本的对齐风格设置。其中主要的四种风格：
- 左对齐，left
- 居中对齐，center
- 右对齐，right
- 两端对齐，justify
为了简化操作，Bootstrap通过定义四个类名来控制文本的对齐风格：
- text-left：左对齐
- text-center：居中对齐
- text-right：右对齐
- text-justify：两端对齐
编辑
五、列表：
在HTML中，列表结构主要有三种：
- 无序列表：（<ul><li>...</li></ul>）
- 有序列表：（<ol><li>...</li></ol>）
- 定义列表：（<dl><dt>...</dt><dd>...</dd></dl>）
1.去点列表：
class="list-unstyled"
<ul class="list-unstyled"> <li>无序列表一</li> <li>无序列表二</li> </ul>
2.内联列表：
class="list-inline"，把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。内联列表是为制作水平导航而生
<ul class="list-inline"> <li>首页</li> <li>java</li> <li>c++</li> </ul>
3.定义列表：
在原有的基础上加入了一些样式，使用样式class="dl-horizontal"，制作水平定义列表：当标题宽度超过160px时，会显示三个省略号。
<dl class="dl-horizontal"> <dt>情绪</dt> <dd>如果一个人影响到了你的情绪，你的焦点应该放在控制自己的情绪上，而不是影响你情绪的人身上。只有这样，才能真正自信起来。</dd> <dt>立志</dt> <dd>不怕变成自己厌恶的人，我怕的是，过的还不如他们。</dd> <dt>带着面具时你说我虚伪，摘下面具你问我是谁。</dt> <dd>无论受了多少委屈。我只会把它憋在心里。不是不想说，只是不知道该怎么说，能和谁说。</dd> </dl>
编辑
六、代码：
一般在个人博客上使用较为频繁，用于显示代码的风格。在Bootstrap主要提供了三种代码风格：
- 使用<code></code>，来显示单行内联代码
- 使用<pre></pre>，来显示多行代码。样式：pre-scrollable（height）max-height高度固定为340px，超过存在滚动条
- 使用<kbd><kbd>，来显示用户输入的代码，如快捷键
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- 加载BootStrap CSS样式 --> <link rel="stylesheet" href="../bootstrap-3.4.1/dist/css/bootstrap.min.css"> </head> <body> <!-- 键盘按键 --> <p>键盘快捷键<kbd>ctrl</kbd> + <kbd>/</kbd></p> <!-- 单行代码 --> <p>输出“你好世界！” ： <code>system.out.println("你好世界！");</code></p> <hr> <!-- 多行代码 --> <pre> public class MyClass { public static void main(String[] args){ System.out.println("你好世界！"); } } </pre> <hr> <!-- 滚动条 --> <pre class="pre-scrollable"> public class MyClass { public static void main(String[] args){ System.out.println("你好世界！"); } } public class MyClass { public static void main(String[] args){ System.out.println("你好世界！"); } } public class MyClass { public static void main(String[] args){ System.out.println("你好世界！"); } } public class MyClass { public static void main(String[] args){ System.out.println("你好世界！"); } } public class MyClass { public static void main(String[] args){ System.out.println("你好世界！"); } } public class MyClass { public static void main(String[] args){ System.out.println("你好世界！"); } } </pre> </body> <!-- 引入需要的JavaScript文件 --> <script src="../bootstrap-3.4.1/js/jquery.js"></script> </html>
编辑
七、表格：
Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格：
基础样式：
- .table：基础表格
附加样式：
- .table-striped：斑马线表格
- .table-bodered：带边框的表格
- .table-hover：鼠标悬停高亮表格
- .table-condensed：紧凑型表格，单元格没有内距或者内距较其它表格小
tr、th、td样式：
Bootstrap提供了五种不同的类名，每种类名控制了行的不同背景颜色
编辑
<!-- On rows --> <tr class="active">...</tr> <tr class="success">...</tr> <tr class="warning">...</tr> <tr class="danger">...</tr> <tr class="info">...</tr> <!-- On cells (`td` or `th`) --> <tr> <td class="active">...</td> <td class="success">...</td> <td class="warning">...</td> <td class="danger">...</td> <td class="info">...</td> </tr>
