本篇包括以下內容：排版、代碼、表格、表單。
總結：超無聊，棄更。
· 排版樣式
標題
h1-h6 取消加粗，字體大小也有一定變化。
內聯子標題
<h1>我是標題1 h1. <small>我是副標題1 h1</small></h1>
加入small標簽，灰色，父級字體大小65%。
效果：
引導主題副本
.lead，更大更粗、行高更高的文本。
<h2>引導主體副本</h2> <p class="lead">這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。這是一個演示引導主體副本用法的實例。</p>
效果：
強調
<small>本行內容是在標簽內</small><br> <strong>本行內容是在標簽內</strong><br> <em>本行內容是在標簽內，並呈現為斜體</em><br> <p class="text-left">向左對齊文本</p> <p class="text-center">居中對齊文本</p> <p class="text-right">向右對齊文本</p> <p class="text-muted">本行內容是減弱的</p> <p class="text-primary">本行內容帶有一個 primary class</p> <p class="text-success">本行內容帶有一個 success class</p> <p class="text-info">本行內容帶有一個 info class</p> <p class="text-warning">本行內容帶有一個 warning class</p> <p class="text-danger">本行內容帶有一個 danger class</p>
效果：
后幾個，primary：主要；success：成功；info：重要；warning：警告；danger：危險。
縮寫
<abbr title="World Wide Web">WWW</abbr><br> <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
停留時會顯示title里的內容，abbr默認帶虛的下邊框。.initialism得到字體更小的文本。
地址（Address）
<address> <strong>Some Company, Inc.</strong><br> 007 street<br> Some City, State XXXXX<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">mailto@somedomain.com</a> </address>
效果：
引用（Blockquote）
<blockquote> <p> 這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。 </p> </blockquote> <blockquote> 這是一個帶有源標題的引用。 <small>Someone famous in <cite title="Source Title">Source Title</cite></small> </blockquote> <blockquote class="pull-right"> 這是一個向右對齊的引用。 <small>Someone famous in <cite title="Source Title">Source Title</cite></small> </blockquote>
效果：
列表
<h4>未定義樣式列表</h4> <ul class="list-unstyled"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>內聯列表</h4> <ul class="list-inline"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>定義列表</h4> <dl> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl> <h4>水平的定義列表</h4> <dl class="dl-horizontal"> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl>
效果：
排版類整理
| 類 |
描述 |
| .lead |
使段落突出顯示 |
| .small |
設定小文本 (設置為父文本的 85% 大小) |
| .text-left |
設定文本左對齊 |
| .text-center |
設定文本居中對齊 |
| .text-right |
設定文本右對齊 |
| .text-justify |
設定文本對齊,段落中超出屏幕部分文字自動換行 |
| .text-nowrap |
段落中超出屏幕部分不換行 |
| .text-lowercase |
設定文本小寫 |
| .text-uppercase |
設定文本大寫 |
| .text-capitalize |
設定單詞首字母大寫 |
| .initialism |
顯示在 <abbr> 元素中的文本以小號字體展示 |
| .blockquote-reverse |
設定引用右對齊 |
| .list-unstyled |
移除默認的列表樣式，列表項中左對齊 ( <ul> 和 <ol> 中)。 這個類僅適用於直接子列表項 (如果需要移除嵌套的列表項，你需要在嵌套的列表中使用該樣式) |
| .list-inline |
將所有列表項放置同一行 |
| .dl-horizontal |
該類設置了浮動和偏移，應用於 <dl> 元素和 <dt> 元素中，具體實現可以查看實例 |
| .pre-scrollable |
使 <pre> 元素可滾動 scrollable |
· 代碼樣式
<code>標簽，內聯顯示代碼。
<pre>標簽，多行顯示代碼。
<p><code><header></code> 作為內聯元素被包圍。</p> <p>如果需要把代碼顯示為一個獨立的塊元素，請使用 <pre> 標簽：</p> <pre> <article> <h1>Article Heading</h1> </article> </pre>
效果：
代碼標簽一覽：
| 元素/類 |
描述 |
| <var> |
變量賦值: x = ab + y |
| <kbd> |
按鍵提示： CTRL + P |
| <pre> |
多行代碼 |
| <pre class="pre-scrollable"> |
多行代碼帶有滾動條 |
| <samp> |
電腦程序輸出: Sample output |
| <code> |
同一行代碼片段: span, div |
· 表格樣式
表格類
| 類 |
描述 |
| .table |
基本；為任意 <table> 添加基本樣式 (只有橫向分隔線) |
| .table-striped |
條紋；在 <tbody> 內添加斑馬線形式的條紋 ( IE8 不支持) |
| .table-bordered |
邊框；為所有表格的單元格添加邊框 |
| .table-hover |
懸停；在 <tbody> 內的任一行啟用鼠標懸停狀態 |
| .table-condensed |
精簡；讓表格更加緊湊 |
源代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>表格</h2> <p>聯合使用所有表格類:</p> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr> <th>#</th> <th>Firstname</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Anna</td> </tr> <tr> <td>2</td> <td>Debbie</td> </tr> <tr> <td>3</td> <td>John</td> </tr> </tbody> </table> </div> </body> </html>
結果如下：
<tr>、<th>、<td>類
| 類 |
描述 |
| .active |
將懸停的顏色應用在行或者單元格上 |
| .success |
表示成功的操作 |
| .info |
表示信息變化的操作 |
| .warning |
表示一個警告的操作 |
| .danger |
表示一個危險的操作 |
類似於前面說的強調（.text-*），區別是強調是文字顏色，這個加的是背景顏色。
響應式表格
表格的父級添加.table-responsive class即可。測試發現未添加也是響應式的，可依實際情況決定。示例略。
· 表單樣式
基本表單（垂直結構）
bootstrap創建基本表單的步驟：
· <form>元素添加role=”form”。
· 每段標簽和控件用div包裹，同時給div加一個.form-group，該class設置的屬性是下邊距15px。
· 給所有的文本元素<input>、<textarea>和<select>添加class .form-control。.form-control的設置如下：
.form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; }
代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 實例 - 基本表單</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <form role="form"> <div class="form-group"> <label for="name">名稱</label> <input type="text" class="form-control" id="name" placeholder="請輸入名稱"> </div> <div class="form-group"> <label for="inputfile">文件輸入</label> <input type="file" id="inputfile"> <p class="help-block">這里是塊級幫助文本的實例。</p> </div> <div class="checkbox"> <label> <input type="checkbox"> 請打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button> </form> </body> </html>
效果：
內聯表單
向<form>標簽添加.form-inline即可。
<form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="name">名稱</label> <input type="text" class="form-control" id="name" placeholder="請輸入名稱"> </div> <div class="form-group"> <label class="sr-only" for="inputfile">文件輸入</label> <input type="file" id="inputfile"> </div> <div class="checkbox"> <label> <input type="checkbox">請打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button> </form>
這里的display:inline-block;設置在了form下的.form-group中：
@media (min-width: 768px) .form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; }
原來默認的下邊距15px被取代了。
另外，.sr-only可以隱藏內聯表單的標簽。
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
水平表單
代碼：
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="請輸入名字"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-2 control-label">姓</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" 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>
與垂直表單的幾個區別：
1）<form>添加class .form-horizontal。如此，.form-horizontal下.form-group設置左右外邊距-15px。
2）標簽與控件同行，控件添加父級，因為控件class .form-control的寬度為100%。
3）標簽添加class .control-label。
內聯的活用
其他諸如復選框、單選框想內聯使用.checkbox-inline或.radio-inline class即可。
靜態控件
需要在一個水平表單內的表單標簽后放置純文本時，可在<p>上使用class .form-control-static。
可以發現bootstrap框架中有n個校正初始丑陋樣式的class。
示例略。
表單控件狀態
<form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">聚焦</label> <div class="col-sm-10"> <input class="form-control" id="focusedInput" type="text" value="該輸入框獲得焦點..."> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">禁用</label> <div class="col-sm-10"> <input class="form-control" id="disabledInput" type="text" placeholder="該輸入框禁止輸入..." disabled> </div> </div> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput" class="col-sm-2 control-label">禁用輸入（Fieldset disabled）</label> <div class="col-sm-10"> <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入"> </div> </div> <div class="form-group"> <label for="disabledSelect" class="col-sm-2 control-label">禁用選擇菜單（Fieldset disabled）</label> <div class="col-sm-10"> <select id="disabledSelect" class="form-control"> <option>禁止選擇</option> </select> </div> </div> </fieldset> <div class="form-group has-success"> <label class="col-sm-2 control-label" for="inputSuccess">輸入成功</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputSuccess"> </div> </div> <div class="form-group has-warning"> <label class="col-sm-2 control-label" for="inputWarning">輸入警告</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputWarning"> </div> </div> <div class="form-group has-error"> <label class="col-sm-2 control-label" for="inputError">輸入錯誤</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputError"> </div> </div> </form>
效果：
聚集：input接收到:focus時，輸入框的輪廓會被移除，同時應用box-shadow。
禁用的字段集：對<fieldset>添加disabled屬性可禁用<fieldset>內所有控件。
驗證狀態：對父元素添加適當的class（.has-warning、.has-error或.has-success）。
表單幫助文本
在 <input> 后使用 .help-block。加在p或span上都行。
.help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; }
表單控件大小
針對控件：
.input-lg { height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; }
.input-sm { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
針對控件父級：
@media (min-width: 1200px) .col-lg-2 { width: 16.66666667%; }
@media (min-width: 1200px) .col-lg-3 { width: 25%; }
@media (min-width: 1200px) .col-lg-4 { width: 33.33333333%; }
lg即large；sm不是別的，是small。
參考：菜鳥教程