api地址：https://v3.bootcss.com/css/#forms
柵格參數：
bootstrap 其實 是把 網頁等 分為 了 12分，bootstrap把 根據屏 幕 大小 把屏 幕分 為了 4個層 級，小於 768 像 素的 為超小屏 幕，大於 等於 768 像素的 為小屏 幕，大於 等於992像素的為中等屏幕，大於等於1200像素的則為大屏幕，相應的類前綴見圖或查看官方文檔。
柵格：
超小屏幕 手機 (<768px) .col-xs-
小屏幕 平板 (≥768px) .col-sm-
中等屏幕 桌面顯示器 (≥992px) .col-md-
大屏幕 大桌面顯示器 (≥1200px) .col-lg-
排版
標題
HTML 中的所有標題標簽，<h1> 到 <h6> 均可使用。另外，還提供了 .h1 到 .h6 類，為的是給內聯（inline）屬性的文本賦予標題的樣式。在標題內還可以包含 <small> 標簽或賦予 .small 類的元素，可以用來標記副標題。
<h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2> <h3>h3. Bootstrap heading <small>Secondary text</small></h3> <h4>h4. Bootstrap heading <small>Secondary text</small></h4> <h5>h5. Bootstrap heading <small>Secondary text</small></h5> <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
頁面主體
Bootstrap 將全局 font-size 設置為 14px，line-height 設置為 1.428。這些屬性直接賦予 <body> 元素和所有段落元素。另外，<p> （段落）元素還被設置了等於 1/2 行高（即 10px）的底部外邊距（margin）。
<p>...</p>
中心內容
通過添加 .lead 類可以讓段落突出顯示。
<p class="lead">...</p>
內聯文本元素
Marked text
You can use the mark tag to <mark>highlight</mark> text.
被刪除的文本
對於被刪除的文本使用 <del> 標簽。
<del>This line of text is meant to be treated as deleted text.</del>
無用文本
對於沒用的文本使用 <s> 標簽。
<s>This line of text is meant to be treated as no longer accurate.</s>
插入文本
額外插入的文本使用 <ins> 標簽。
<ins>This line of text is meant to be treated as an addition to the document.</ins>
帶下划線的文本
為文本添加下划線，使用 <u> 標簽。
<u>This line of text will render as underlined</u>
小號文本
對於不需要強調的inline或block類型的文本，使用 <small> 標簽包裹，其內的文本將被設置為父容器字體大小的 85%。標題元素中嵌套的 <small> 元素被設置不同的 font-size 。
你還可以為行內元素賦予 .small 類以代替任何 <small> 元素。
<small>This line of text is meant to be treated as fine print.</small>着重
通過增加 font-weight 值強調一段文本。
<strong>rendered as bold text</strong>
斜體
用斜體強調一段文本。
<em>rendered as italicized text</em>
對齊
通過文本對齊類，可以簡單方便的將文字重新對齊。
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
改變大小寫
通過這幾個類可以改變文本的大小寫。
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
縮略語
當鼠標懸停在縮寫和縮寫詞上時就會顯示完整內容，Bootstrap 實現了對 HTML 的 <abbr> 元素的增強樣式。縮略語元素帶有 title 屬性，外觀表現為帶有較淺的虛線框，鼠標移至上面時會變成帶有“問號”的指針。如想看完整的內容可把鼠標懸停在縮略語上（對使用輔助技術的用戶也可見）, 但需要包含 title 屬性。
基本縮略語
<abbr title="attribute">attr</abbr>
首字母縮略語
為縮略語添加 .initialism 類，可以讓 font-size 變得稍微小些。
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
地址
讓聯系信息以最接近日常使用的格式呈現。在每行結尾添加 <br> 可以保留需要的樣式。
<address> <strong>Twitter, Inc.</strong><br> 1355 Market Street, Suite 900<br> San Francisco, CA 94103<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>引用
在你的文檔中引用其他來源的內容。
默認樣式的引用
將任何 HTML 元素包裹在 <blockquote> 中即可表現為引用樣式。對於直接引用，我們建議用 <p> 標簽。
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
列表
無序列表
排列順序無關緊要的一列元素。
<ul> <li>...</li> </ul>
有序列表
順序至關重要的一組元素。
<ol> <li>...</li> </ol>
內聯列表
通過設置 display: inline-block; 並添加少量的內補（padding），將所有元素放置於同一行。
<ul class="list-inline"> <li>...</li> </ul>
描述
帶有描述的短語列表。
<dl> <dt>...</dt> <dd>...</dd> </dl>
水平排列的描述
.dl-horizontal 可以讓 <dl> 內的短語及其描述排在一行。開始是像 <dl> 的默認樣式堆疊在一起，隨着導航條逐漸展開而排列在一行。
<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>
overflow:
text-overflow: ellipsis;
代碼
內聯代碼
通過 <code> 標簽包裹內聯樣式的代碼片段。
For example, <code><section></code> should be wrapped as inline.
用戶輸入
通過 <kbd> 標簽標記用戶通過鍵盤輸入的內容。
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
代碼塊
多行代碼可以使用 <pre> 標簽。為了正確的展示代碼，注意將尖括號做轉義處理。
<pre><p>Sample text here...</p></pre>
變量
通過 <var> 標簽標記變量。
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
表格
基本實例
<table class="table"> ... </table>
條紋狀表格
通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式。
<table class="table table-striped"> ... </table>
帶邊框的表格
添加 .table-bordered 類為表格和其中的每個單元格增加邊框。
<table class="table table-bordered"> ... </table>
鼠標懸停
通過添加 .table-hover 類可以讓 <tbody> 中的每一行對鼠標懸停狀態作出響應
<table class="table table-hover"> ... </table>
緊縮表格
通過添加 .table-condensed 類可以讓表格更加緊湊，單元格中的內補（padding）均會減半。
<table class="table table-condensed"> ... </table>
狀態類
通過這些狀態類可以為行或單元格設置顏色。
| Class | 描述 |
|---|---|
.active |
鼠標懸停在行或單元格上時所設置的顏色 |
.success |
標識成功或積極的動作 |
.info |
標識普通的提示信息或動作 |
.warning |
標識警告或需要用戶注意 |
.danger |
標識危險或潛在的帶來負面影響的動作 |
<!-- 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>api地址：https://v3.bootcss.com/css/#forms
幾個單個的例子：
<!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"> <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- <div class=""> --><!-- col-md-4是左浮動，清除浮動加overflow:hidden就可以了 --> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <table class="table"> <caption>Optional table caption.</caption> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <!-- <th scope="row">1</th> --> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> <table class="table"> <caption>Optional table caption.</caption> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div> <!-- </div> --> <!-- 表格，面板，柵格 --> <!-- <div> --> <h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2> <h3>h3. Bootstrap heading <small>Secondary text</small></h3> <h4>h4. Bootstrap heading <small>Secondary text</small></h4> <h5>h5. Bootstrap heading <small>Secondary text</small></h5> <h6>h6. Bootstrap heading <small>Secondary text</small></h6> <!-- </div> --> <div>測試一下浮動結束</div> <div> <a class="btn btn-default" style="outline: none;" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit"> <!-- Standard button --> <button type="button" class="btn btn-default">（默認樣式）Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">（首選項）Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">（成功）Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">（一般信息）Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">（警告）Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">（危險）Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">（鏈接）Link</button> <p> <button type="button" class="btn btn-primary btn-lg">（大按鈕）Large button</button> <button type="button" class="btn btn-default btn-lg">（大按鈕）Large button</button> </p> <p> <button type="button" class="btn btn-primary">（默認尺寸）Default button</button> <button type="button" class="btn btn-default">（默認尺寸）Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">（小按鈕）Small button</button> <button type="button" class="btn btn-default btn-sm">（小按鈕）Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button> <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button> </p> </div> <div> <div class="center-block" style="background-color: #eee;width: 1200px;"> 左右居中 </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </body> </html>
水平風格表單：標簽在左，控件在右
1、在<form>元素是使用類名“form-horizontal”。
2、配合Bootstrap框架的網格系統。（網格布局會在以后的章節中詳細講解）
內聯表單：控件一行顯示
在<form>元素中添加類名“form-inline”
表單控件
select：<select multiple class="form-control"> 選擇多個
textarea： <textarea class="form-control" rows="3"></textarea>
radio，checkbox：div包着label包着input
<div class="checkbox"> <label> <input type="checkbox" value=""> 記住密碼 </label> </div>
radio，checkbox：水平排列
div（class=”form-group”）包着label（class=”checkbox-inline”or“radio-inline”）包着input
禁用控件：在控件上添加disabled屬性
<input class="input-lg" id="disabledInput" type="text" placeholder="表單已被禁用，不可輸入" disabled>
驗證狀態：form-group容器添加has-success等類;若想label同步變色需要在label上加.control-label;顯示icon需要在form-group加.has-feedback，最后加一個span存放icon
表單提示信息：
在form-group容器后加一個span，添加類名.help-block
button：四種方式，bootstrap用button實現，建議用button和a標簽來制作按鈕
<input type="button">
<input type="reset">
<input type="submit">
<button></button>
button樣式
.btn
.btn-default
大小：
.btn-lg
.btn-sm
.btn-xs
塊狀按鈕：按鈕充滿整個容器，沒有padding和margin .btn-block
禁用按鈕：添加類.disabled 或者添加屬性disabled=“disabled”