1.标题
Bootstrap 和普通的 HTML 页面一样，定义标题都是使用标签 <h1> ~ <h6> ，只不过 Bootstrap 覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，
为了让非标题元素和标题使用相同的样式，还特意定义了 .h1 ~ .h6 六个类名。同时后面可以紧跟着一行小的标题 <small></small> 或使用 .small
2.段落
-
段落是排版中的另一个重要元素之一。
-
通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理)。可以使用以下标签给文本做突出样式处理。
-
<small> ：小号字
-
<b><strong>：加粗
-
<i><em>: 斜体
3.强调
定义了一套类名，这里称其为强调类名，这些强调嘞都是通过颜色来表示强调，具体说明如下：
-
.text-muted： 提示，使用浅灰色(#999)
-
.text.primary ：主要，使用蓝色(#428bca)
-
.text-success：成功，使用浅绿色(#3c763d)
-
.text-info：通知信息，使用浅蓝色(#31708f)
-
text-warning：警告，使用黄色(#8a6d3n)
-
text-danger：危险，使用褐色(#a94442)
4.对齐效果
在CSS中常常使用text-align 来实现文本的对齐风格的设置。
其中主要有4种风格
left 左对齐
right 右对齐
center 居中对齐
justify 两端对齐
Bootstrap 中通过定义四个类名来控制文本的对齐风格
text-left 左对齐
text-right 右对齐
text-center 居中对齐
text-justify 两端对齐
5.列表
移除了默认的 list-style 样式，也就是去掉了原无序列表前面的点 (去掉项目符号(编号))
给列表添加class="list-inline"，把垂直列表换成水平列表，而且去掉项目符号(编号)，将所有元素放置于同一行。也可以说内联列表就是为了制作水平导航而生的。
给列表添加class="list-inline"，把垂直列表换成水平列表，而且去掉项目符号(编号)，将所有元素放置于同一行。也可以说内联列表就是为了制作水平导航而生的。
在原有的基础加入了一些样式，使用样式class="dl-horizontal" 制作水平定义列表，当标题宽度超过 160px 时，将会显示三个省略号。
6.代码
一般在个人博客上使用的较为频繁，用于显示代码的风格。在 Bootstrap 主要提供了三种代码风格：
-
使用<code></code> 来显示单行内联代码
-
使用<pre></pre> 来显示多行块代码
-
样式pre-scrollable(height，max-height 高度固定为340px，超过则存在滚动条)
-
使用<kbd></kbd> 来显示键盘快捷键
-
显示htmL标签的代码需要适应字符实体，小于号(<）要使用硬编码“⁢”来替代，大于号(>)使用">”来替代
7.表格
class = "table" ： 基础表格
|
table-striped
|
斑马线表格
|
|
table-bordered
|
带边框的表格
|
|
table-hover
|
鼠标悬停高亮的表格
|
|
table-condensed
|
紧凑型表格，单元格没内距或者内距较其他表格的内距小
|
tr、th、td样式
|
active
|
将悬停的颜色应用在行或者单元格上
|
|
success
|
表示成功的操作
|
|
info
|
表示信息变化的操作
|
|
warning
|
表示一个警告的操作
|
|
danger
|
表示一个危险的操作
|
7.表单
文本框和下拉框
-
class="form-control" 表单元素的样式 下拉选择框select多个选择设置multiple="multuple"
-
class="input-lg" ：表单控件较大
-
class="input-sm" ： 表单控件较小
单选框和复选框
-
垂直显示(给input标签加)：class="radio"
-
水平显示(给label标签加)：class="radio-inline"
-
垂直显示(给div标签加)：class="checkbox"
-
水平显示(给div标签加)：class="checkbox-inline"
按钮
基础样式(给button标签加)：class="btn"
-
class="btn btn-default" 默认样式Default
-
class="btn btn-primary" 首选项Primary
-
class="btn btn-success" 成功Success
-
class="btn btn-info" 一般信息Info
-
class="btn btn-warning" 警告Warning
-
class="btn btn-danger" 危险Danger
-
class="btn btn-link" 链接Link
多标签支持：使用 a div input 等制作按钮
注意：
虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素。
如果 <a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。
我们总结的最佳实践是：强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。
设置按钮大小
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
-
class="btn-lg" 大按钮
-
class="btn-sm" 小按钮
-
class="btn-xs" 超小按钮
为 <button> 元素添加 disabled="disabled" 属性，使其表现出禁用状态，样式添加disable看起来被禁用。
表单布局
基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：
向父元素<form> 元素 添加 role="form"
把标签和控件放在一个带有 class="form-group" 的<div> 中。这是获取最佳间距所必需的
向所有的文本元素 <input> 、<textarea> 、select 添加 class="form-control"
内联表单（水平布局）, 它的所有元素是内联的，向左对齐的，标签是并排的 ，向 <form> 标签添加 class="form-inline"
8.缩略图
字体图标
<span class="字体图标类名"> 字体图标 </span>
缩略图的使用
-
大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式
-
使用 Bootstrap 创建缩略图的步骤如下：
-
在图像周围添加带有 class="thumbnail" 的 <a> 标签。
-
这会添加四个像素的内边距（padding）和一个灰色的边框。
-
当鼠标悬停在图像上时，会动画显示出图像的轮廓。
<body>
<div class="container">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/timg.jpg" alt="通用的占位符缩略图">
</a>
</div>
</div>
</body>
自定义内容
-
现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：
-
把带有 class="thumbnail" 的 <a> 标签改为 <div>。
-
在该 <div>内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。
-
如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。
面板
面板组件用于把 DOM 组件插入到一个盒子中
创建一个基本的面板，只需要向 <div> 元素添加 class="panel panel-default" 即可
默认的 .panel 组件所做的只是设置基本的边框 border 和 內补 padding 来包含内容
<div class="panel panel-default">
<div class="panel-body"> 这是一个基本的面板 </div>
</div>
给盒子添加 class="panel-heading" 可以很简单地向面板添加标题。
给盒子添加 class="panel-body" 可以向面板添加主题内容
<div class="panel panel-warning">
<div class="panel-heading">
<h2>明星合集</h2>
</div>
<div class="panel-body">
<div class="col-md-3">
<div class="thumbnail">
<img src="img/timg.jpg" alt="...">
<h3>高圆圆</h3>
<p>出生于北京市，中国内地影视女演员、模特。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>喜欢</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论
</button>
</div>
</div>
</div>
</div>