Bootstrap常用排版及表单格式，用于个人备忘：
副标题 <h1>Bootstrap标题一<small>我是副标题</small></h1> 段落 <p> 我是一个段落，你猜我在Bootstrap是以什么样的风格显示。 </p> 强调内容：class=“lead” <p class="lead">这部分内容需要特别的强调，我和别人长得不一样。</p> 粗体： <p> 我在学习<strong>Bootstrap</strong> </p> 斜体： 或者 <p>我在跟<em>大漠</em>一起学习<i>Bootstrap</i>的使用。我一定要学会<i>Bootstrap</i>。</p> 强调：class=“text-xxxx” <div class="text-muted">.text-muted 效果</div> <div class="text-primary">.text-primary效果</div> <div class="text-success">.text-success效果</div> <div class="text-info">.text-info效果</div> <div class="text-warning">.text-warning效果</div> <div class="text-danger">.text-danger效果</div> <p class="text-danger">我是一段危险信息，请用Bootstrap框架中的危险风格显示</p> 文本对齐：class=“text-left”，class=“text-center”，class=“text-right”，class=“text-justify” <p class="text-left">我居左</p> <p class="text-center">我居中</p> <p class="text-right">我居右</p> <p class="text-justify">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. </p> 列表： <ul> <li>无序列表信息1</li> <li>无序列表信息2</li> <li>无序列表信息3</li> </ul> <ol> <li>有序列表信息1</li> <li>有序列表信息2</li> <li>有序列表信息3</li> </ol> <dl> <dt>定义列表标题</dt> <dd>定义列表信息1</dd> <dd>定义列表信息2</dd> </dl> 无序列表： <h5>普通列表</h5> <ul> <li>唱</li> <li>跳</li> <li>Rap</li> <li>篮球</li> </ul> 有序列表： <h5>有序列表</h5> <ol> <li>项目列表一</li> <li>项目列表二</li> <li>项目列表三</li> </ol> <h5>有序列表嵌套</h5> <ol> <li>有序列表</li> <li> 有序列表 <ul> <li>有序列表(2)</li> <li>有序列表(2)</li> </ul> </li> <li>有序列表</li> </ol> 去点列表：class=“list-unstyled” <ul> <li> 项目列表 <ul> <li>带有项目符号</li> <li>带有项目符号</li> </ul> </li> <li> 项目列表 <ul class="list-unstyled"> <li>不带项目符号</li> <li>不带项目符号</li> </ul> </li> <li>项目列表</li> </ul> 内联列表：把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。 <ul class="list-inline"> 爱好： <li>唱</li> <li>跳</li> <li>Rap</li> <li>篮球</li> </ul> 定义列表： <dl> <dt>北京</dt> <dd>北京是中国的首都，是政治文化集中地</dd> <dt>上海</dt> <dd>上海号称东方的巴黎</dd> </dl> 水平定义列表：就像内联列表一样，Bootstrap可以给 添加类名“.dl-horizontal”给定义列表实现水平显示效果。 <dl class="dl-horizontal"> <dt>标题一：</dt> <dd>描述内容</dd> <dt>标题二：</dt> <dd>描述内容</dd> </dl> 代码1、code：一般是针对于单个单词或单个句子的代码 2、pre：一般是针对于多行代码（也就是成块的代码） 3、kbd：一般是表示用户要通过键盘输入的内容
在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。
代码滚动条：class=“pre-scrollable” <pre class="pre-scrollable"> from django.shortcuts import render from django.http import HttpResponseRedirect from django.core.urlresolvers import reverse from .models import Article def blog_index(request): # 获取所有Article articles = Article.objects.all() # render(request, template_name, context) # 注意： # context是字典dict # dict中key为字符串 return render(request, template_name='simpleblog/index.html', context={'articles': articles}) </pre> 表格： .table：基础表格.table-striped：斑马线表格.table-bordered：带边框的表格.table-hover：鼠标悬停高亮的表格.table-condensed：紧凑型表格.table-responsive：响应式表格基础表格：
<table class="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> 表格行class： <table class="table"> <thead> <tr> <th>类名</th> <th>描述</th> </tr> </thead> <tbody> <tr class="active"> <td>.active</td> <td>表示当前活动的信息</td> </tr> <tr class="success"> <td>.success</td> <td>表示成功或者正确的行为</td> </tr> <tr class="info"> <td>.info</td> <td>表示中立的信息或行为</td> </tr> <tr class="warning"> <td>.warning</td> <td>表示警告，需要特别注意</td> </tr> <tr class="danger"> <td>.danger</td> <td>表示危险或者可能是错误的行为</td> </tr> </tbody> </table> 斑马线表格： <table class="table table-striped"> <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> 带边框的表格： <table class="table table-bordered"> <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> 鼠标悬浮高亮的表格： <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> </tbody> </table> 紧凑型表格： <table class="table table-condensed"> <thead> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> </tbody> </table> 响应式表格： Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将
置于这个容器当中，这样表格也就具有响应式效果。 Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。 <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <tr> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> </tbody> </table> </div> 表单form：表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。 <form> <div> <label for="exampleInputEmail1">邮箱：</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址"> </div> <div> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码"> </div> <div> <label> <input type="checkbox"> 记住密码 </label> </div> <button type="submit" class="btn btn-default">进入邮箱</button> </form> 水平表单：在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件： 1、在元素是使用类名“form-horizontal”。 2、配合Bootstrap框架的网格系统。
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <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 type="submit" class="btn btn-default">进入邮箱</button> </div> </div> </form> 内联表单：将表单的控件都在一行内显示， <form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">邮箱</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">密码</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码"> </div> <div class="checkbox"> <label> <input type="checkbox"> 记住密码 </label> </div> <button type="submit" class="btn btn-default">进入邮箱</button> </form>表单控件：input，select，textarea，checkbox，radio，button/btn
表单控件(输入框input)：
<form role="form"> <div class="form-group"> <input type="email" class="form-control" placeholder="Enter Email"> <input type="text" class="form-control" placeholder="Enter username"> </div> </form> 表单控件(下拉选择框select)显示多行用multiple。
<form role="form"> <div class="form-group"> <select class="form-control"> <option>唱</option> <option>跳</option> <option>Rap</option> <option>篮球</option> </select> </div> <div class="form-group"> <select multiple class="form-control"> <option>唱</option> <option>跳</option> <option>Rap</option> <option>篮球</option> </select> </div> </form> 表单控件(文本域textarea)设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。
<form role="form"> <div class="form-group"> <textarea class="form-control" rows="5">最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。</textarea> </div> </form> 表单控件(复选框checkbox和单选择按钮radio)1、不管是checkbox还是radio都使用label包起来了 2、checkbox连同label标签放置在一个名为“.checkbox”的容器内 3、radio连同label标签放置在一个名为“.radio”的容器内
<form role="form"> <h3>案例1</h3> <div class="checkbox"> <label> <input type="checkbox" value=""> 记住密码 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked> 喜欢 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate"> 不喜欢 </label> </div> </form> 表单控件(复选框和单选按钮水平排列)1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline” 2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”
<form role="form"> <div class="form-group"> <label class="checkbox-inline"> <input type="checkbox" name="sex" value="man">男性 </label> <label class="checkbox-inline"> <input type="checkbox" name="sex" value="women">女性 </label> <label class="checkbox-inline"> <input type="checkbox" name="sex" value="idontknow">中性 </label> </div> </form> 表单控件(按钮) <table class="table table-bordered table-striped"> <thead> <tr> <th>Button</th> <th>class=""</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><button class="btn" href="#">Default</button></td> <td><code>btn</code></td> <td>Standard gray button with gradient</td> </tr> <tr> <td><button class="btn btn-primary" href="#">Primary</button></td> <td><code>btn btn-primary</code></td> <td>Provides extra visual weight and identifies the primary action in a set of buttons</td> </tr> <tr> <td><button class="btn btn-info" href="#">Info</button></td> <td><code>btn btn-info</code></td> <td>Used as an alternative to the default styles</td> </tr> <tr> <td><button class="btn btn-success" href="#">Success</button></td> <td><code>btn btn-success</code></td> <td>Indicates a successful or positive action</td> </tr> <tr> <td><button class="btn btn-warning" href="#">Warning</button></td> <td><code>btn btn-warning</code></td> <td>Indicates caution should be taken with this action</td> </tr> <tr> <td><button class="btn btn-danger" href="#">Danger</button></td> <td><code>btn btn-danger</code></td> <td>Indicates a dangerous or potentially negative action</td> </tr> <tr> <td><button class="btn btn-inverse" href="#">Inverse</button></td> <td><code>btn btn-inverse</code></td> <td>Alternate dark gray button, not tied to a semantic action or use</td> </tr> </tbody> </table> 基本按钮 <button class="btn" type="button">基本按钮</button> 默认按钮默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。
<button class="btn btn-default" type="button">默认按钮</button> 多标签支持一般制作按钮除了使用标签元素之外，还可以使用和标签等。同样，在Bootstrap框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，唯一需要注意的是，要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果。
<button class="btn btn-default" type="button">button标签按钮</button> <input type="submit" class="btn btn-default" value="input标签按钮"/> <a href="##" class="btn btn-default">a标签按钮</a> <span class="btn btn-default">span标签按钮</span> <div class="btn btn-default">div标签按钮</div> 按钮定制风格 <button class="btn" type="button">基础按钮.btn</button> <button class="btn btn-default" type="button">默认按钮.btn-default</button> <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> <button class="btn btn-success" type="button">成功按钮.btn-success</button> <button class="btn btn-info" type="button">信息按钮.btn-info</button> <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> <button class="btn btn-link" type="button">链接按钮.btn-link</button> 按钮大小 <button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button> <button class="btn btn-primary" type="button">正常按钮</button> <button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button> <button class="btn btn-primary btn-xs" type="button">超小型按钮</button> 块状按钮从前面几节的内容中，大家可能发现了，每个示例中的按钮宽度都是依靠按钮文本和padding的值来决定。但有时候在制作按钮的时候需要按钮宽度充满整个父容器（width:100%），特别是在移动端的制作中。那么前面的方法我们都无法很好的实现，除非重新定义按钮的宽度。
其实在Bootstrap中并不需要这样做，Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。
<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button> <button class="btn btn-primary btn-block" type="button">正常按钮</button> <button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button> <button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button> 按钮状态——活动状态 <button class="btn" type="button">基础按钮.btn</button> <button class="btn btn-default" type="button">默认按钮.btn-default</button> <button class="btn:hover btn-primary btn-block" type="button">主要按钮.btn-primary</button> <button class="btn:active btn-success btn-block" type="button">成功按钮.btn-success</button> <button class="btn:focus btn-info btn-block" type="button">信息按钮.btn-info</button> <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> <button class="btn btn-link" type="button">链接按钮.btn-link</button> 按钮状态——禁用状态 <button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button> <button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button> <button class="btn btn-primary btn-sm btn-block" type="button">未禁用的按钮</button> 图像1、img-responsive：响应式图片，主要针对于响应式设计 2、img-rounded：圆角图片 3、img-circle：圆形图片 4、img-thumbnail：缩略图片
<img alt="140x140" src="http://placehold.it/140x140"> <img class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> <img class="img-circle" alt="140x140" src="http://placehold.it/140x140"> <img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"> <img class="img-responsive" alt="140x140" src="http://placehold.it/140x140"> 图标 <span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-asterisk"></span> <span class="glyphicon glyphicon-plus"></span> <span class="glyphicon glyphicon-cloud"></span> <span class="glyphicon glyphicon-heart"></span>