常用样式
排版
标题
Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样。为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。同时后面可以紧跟着一行小的副标题或使用.small
<h1>h1. Bootstrap heading<small>副标题</small></h1><div class="h1">Bootstrap标题1<span class="small">副标题</span></div>段落
段落是排版中另一个重要元素之一。通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。可以使用以下标签给文本做突出样式处理：
:小号字
:加粗
:斜体
<p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p>强调
定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具本说明如下：
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca） .text-success：成功，使用浅绿色(#3c763d) .text-info：通知信息，使用浅蓝色（#31708f） .text-warning：警告，使用黄色（#8a6d3b） .text-danger：危险，使用褐色（#a94442）<div class="text-muted">提示效果</div><div class="text-primary">主要效果</div><div class="text-success">成功效果</div><div class="text-info">信息效果</div><div class="text-warning">警告效果</div><div class="text-danger">危险效果</div>对齐效果
在CSS中常常使用text-align来实现文本的对齐风格的设置。
其中主要有四种风格：
左对齐，取值left ;
居中对齐，取值center;
右对齐，取值right ;
两端对齐，取值justify。
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：.text-left：左对齐 .text-center：居中对齐 .text-right：右对齐 .text-justify：两端对齐。
<p class="text-left">我居左</p><p class="text-center">我居中</p><p class="text-right">我居右</p><p class="text-justify">网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份</p>列表
在HTML文档中，列表结构主要有三种：
无序列表(<ul><li>…</li></ul>)
有序列表(<ol><li>…</li></ol>)
定义列表(<dl><dt>…</dt><dd>…</dd></dl>)
去点列表
class="list-unstyled"
<ul class="list-unstyled"> <li>无序项目列表一</li> <li>无序项目列表二</li></ul>内联列表
class="list-inline"，把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。
<ul class="list-inline"> <li>首页</li> <li>java学院</li> <li>在线课堂</li></ul>定义列表
在原有的基础加入了一些样式，使用样式 class="dl-horizontal" 制作水平定义列表 : 当标题宽度超过160px时，将会显示三个省略号。
<dl> <dt>HTML</dt> <dd>超文本标记语言</dd> <dt>CSS</dt> <dd>层叠样式表是一种样式表语言</dd></dl><dl class="dl-horizontal"> <dt>HTML 超文本标记语言</dt> <dd>HTML称为超文本标记语言，是一种标识性的语言。</dd> <dt>测试标题不能超过160px的宽度,否则2个点</dt> <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。</dd></dl>代码
一般在个人博客上使用的较为频繁，用于显示代码的风格。在Bootstrap主要提供了三种代码风格：
（1）使用来显示单行内联代码
（2）使用<pre></pre>来显示多行块代码
样式：pre-scrollable (height,max-height高度固定,为340px,超过存在滚动条)
（3）使用来显示用户输入代码,如快捷键
单行内联代码
<code>this is a simple code</code>快捷键
<p>使用<kbd>ctrl+s</kbd>保存</p>多行块代码
<!-- 代码会保留原本的格式，包括空格和换行 --><pre>public class HelloWorld { public static void main(String[] args){ System.out.println("helloworld..."); }}</pre><!-- 显示html标签的代码需要适应字符实体 小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代 --><pre> <ul> <li>测试实体符</li> </ul></pre><!-- 当高度超过，会存在滚动条 --><pre class="pre-scrollable"> <ol> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> <li>...........</li> </ol></pre>表格
表格样式
Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格：
基础样式
1）.table：基础表格
附加样式
1) .table-striped：斑马线表格
2) .table-bordered：带边框的表格
3) .table-hover：鼠标悬停高亮的表格
4). table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小
tr、th、td样式
提供了五种不同的类名，每种类名控制了行的不同背景颜色
| 类 | 描述 | 实例 |
|---|---|---|
| .active | 将悬停的颜色应用在行或者单元格上 | <font color="#f5f5f5">#f5f5f5</font> |
| .success | 表示成功的操作 | <font color="#dff0d8">#dff0d8</font> |
| .info | 表示信息变化的操作 | <font color="#d9edf7">#d9edf7</font> |
| .warning | 表示一个警告的操作 | <font color="#fcf8e3">#fcf8e3</font> |
| .danger | 表示一个危险的操作 | <font color="#f2dede">#f2dede</font> |
<table class="table table-bordered table-hover"> <tr class="active"> <th>JavaSE</th> <th>数据库</th> <th>JavaScript</th> </tr> <tr class="danger"> <td>面向对象</td> <td>oracle</td> <td>json</td> </tr> <tr class="success"> <td>数组</td> <td>mysql</td> <td>ajax</td> </tr></table>表单
表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。
表单控件
.form-control .input-lg（较大） .input-sm（较小）
输入框 text
.form-control
<div class="col-sm-3"> <input type="text" name="" id="" class="form-control" /> <input type="text" name="" id="" class="form-control input-lg" /> <input type="text" name="" id="" class="form-control input-sm" /></div>下拉选择框 select
多行选择设置：multiple="multiple"
<div class="col-sm-3"> <select class="form-control"> <option>北京</option> <option>上海</option> <option>深圳</option> </select> <select class="form-control" multiple="multiple"> <option>北京</option> <option>上海</option> <option>深圳</option> </select></div>文本域 textarea
<div class="col-sm-3"> <textarea class="form-control" rows="3"></textarea></div>复选框 checkbox
垂直显示： .checkbox
水平显示： .checkbox-inline
<!-- 垂直显示 --><div> <div class="checkbox"> <label><input type="checkbox" >游戏</label> </div> <div class="checkbox"> <label><input type="checkbox" >学习</label> </div></div><!-- 水平显示 --><div> <label class="checkbox-inline"> <input type="checkbox" >游戏 </label> <label class="checkbox-inline"> <input type="checkbox" >学习 </label></div>单选框 radio
垂直显示： .radio
水平显示： .radio-inline
<!-- 垂直显示 --><div> <div class="radio"> <label><input type="radio" >男</label> </div> <div class="radio"> <label><input type="radio" >女</label> </div></div><!-- 水平显示 --><div> <label class="radio-inline"> <input type="radio" >男 </label> <label class="radio-inline"> <input type="radio" >女 </label></div>按钮
1）使用 button 实现
基础样式： btn
<button class="btn">按钮</button>附加样式：btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default
<button class="btn btn-danger">按钮</button><button class="btn btn-primary">按钮</button><button class="btn btn-info">按钮</button><button class="btn btn-success">按钮</button><button class="btn btn-default">按钮</button><button class="btn btn-warning">按钮</button><button class="btn btn-link">按钮</button>2）多标签支持：使用 a div 等制作按钮
<a href="##" class="btn btn-info">a标签按钮</a><span class="btn btn-success">span标签按钮</span><div class="btn btn-warning">div标签按钮</div>3）按钮大小
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
<button class="btn btn-primary btn-xs">超小按钮.btn-xs</button><button class="btn btn-primary btn-sm">小型按钮.btn-sm</button><button class="btn btn-primary">正常按钮</button><button class="btn btn-primary btn-lg">大型按钮.btn-lg</button> 4）按钮禁用
方法1：在标签中添加disabled属性
<button class="btn btn-danger" disabled="disabled">禁用按钮</button>方法2：在元素标签中添加类名"disabled"
<button class="btn btn-danger disabled">禁用按钮</button>在class属性中添加disabled只是样式上禁用了，并不是真正的禁用了此按钮！
表单布局
基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：
- 向父 <form> 元素添加 role="form"。
- 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
- 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
水平表单
同一行显示form-horizontal
配合Bootstrap框架的网格系统
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="email" class="control-label col-sm-2">邮箱</label> <div class="col-sm-10"> <input type="email" class="form-control" placeholder="请输入邮箱"/> </div> </div> <div class="form-group"> <label for="pwd" class="control-label col-sm-2">密码</label> <div class="col-sm-10"> <input type="pwd" class="form-control" placeholder="请输入密码" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2"> <div class=" checkbox"> <label> <input type="checkbox" />记住密码 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button class="btn btn-default">提交</button> </div> </div></form>内联表单
将表单的控件都在一行内显示form-inline
注意label不会显示，存在的意义：如果没有为输入控件设置label标签，屏幕阅读器将无法正确识别。
<form class="form-inline"> <div class="form-group"> <label for="email" >邮箱</label> <input type="email" class="form-control" placeholder="请输入邮箱"/> </div> <div class="form-group"> <label for="pwd" >密码</label> <input type="pwd" class="form-control" placeholder="请输入密码" /> </div> <div class="form-group checkbox"> <label><input type="checkbox" />记住密码</label> </div> <div class="form-group"> <button class="btn btn-default">提交</button> </div></form>缩略图
缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。缩略图的实现是配合网格系统一起使用。同时还可以让缩略图配合标题、描述内容，按钮等。
<div class="container"> <div class="row"> <div class="col-md-3"> <div class="thumbnail"> <img src="img/IMG_0131.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>面板
默认的 .panel组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。
.panel-default：默认样式
.panel-heading：面板头
.panel-body：面板主体内容
<div class="panel panel-success"> <div class="panel-heading"> ...... </div> <div class="panel-body"> ...... </div></div>