一：
代碼顯示方式：
第一種是“內(nèi)聯(lián)“標(biāo)簽 <code>。
第二種是 ”塊級“<pre> 標(biāo)簽。
【注意】當(dāng)您使用 <pre> 和 <code> 標(biāo)簽時，開始和結(jié)束標(biāo)簽使用了 unicode 變體： < 和 >。

1）<pre>標(biāo)簽：多行代碼
<pre>如果需要把代碼顯示為一個獨(dú)立的塊元素，請使用 <pre> 標(biāo)簽：</pre>

image.png

2）<code>標(biāo)簽：
<p><code><header></code> 作為內(nèi)聯(lián)元素被包圍。</p>
3）<var>標(biāo)簽：變量賦值
<p><var>x</var> = <var>a</var><var>b</var> + <var>y</var></p>
==> x = ab + y
4）<kbd>標(biāo)簽：
<p>使用 <kbd>ctrl + p</kbd> 來打開打印窗口。</p>

image.png

二：表格
<table><thead><tbody><tr><td><th><caption>
1）用于table上的相關(guān)樣式類：
<table class="table"> 任意表格添加基本樣式 (只有橫向分隔線)；
<table class="table table-striped">在 tbody 內(nèi)添加斑馬線形式的條紋 ( IE8 不支持)
<table class="table table-bordered">為所有表格的單元格添加邊框；
<table class="table table-hover">啟用表格中 tbody 上的行的懸停效果；
<table class="table table-condensed">讓表格更加緊湊；
<table class="table table-striped table-bordered table-hover table-condensed">聯(lián)合使用所有表格類
2）可用于表格的行或者單元格
<tr class="active">類將懸停的顏色應(yīng)用在行或者單元格上
<tr class="success">類表示執(zhí)行成功的操作（綠色）

image.png

<tr class="info">表示信息變化的操作（藍(lán)色）
<tr class="warning">表示一個警告操作（黃色）
<tr class="danger">表示一個危險的操作（紅色）
3）響應(yīng)式表格：把任意的 .table 包在 .table-responsive class 內(nèi)
<div class="table-responsive"><table class="table"></table></div>

三：表單
1）布局：
1、基本布局：
創(chuàng)建基本表單的步驟：向父 <form> 元素添加 role="form" ==》把標(biāo)簽和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的==》向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control"
<form role="form">
<div class="form-group">
<label for="name">名稱</label>
<input type="text" class="form-control" >
<p class="help-block">這是塊級幫助文本的實(shí)例--解釋的灰色文本。</p>
</div>
</form>

2、內(nèi)聯(lián)布局：文本標(biāo)簽按鈕都在一行內(nèi)顯示，向 <form> 標(biāo)簽添加 class .form-inline；
默認(rèn)情況下，Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內(nèi)聯(lián)表單時，您需要在表單控件上設(shè)置一個寬度。
使用 class .sr-only，您可以隱藏內(nèi)聯(lián)表單的標(biāo)簽。
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="inputfile">文件輸入</label>
<input type="file" id="inputfile">
</div>
</form>

3、水平表單：
創(chuàng)建步驟：向父 <form> 元素添加 class .form-horizontal ==》把標(biāo)簽和控件放在一個帶有 class .form-group 的 <div> 中 ==》向標(biāo)簽添加 class .control-label
例如：<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">名字</label>
<div class="col-sm-10"><input type="text" class="form-control"></div>
</div>
</form>

Bootstrap 支持最常見的表單控件，主要是 input、textarea、checkbox、radio 和 select。

• 輸入框（Input）適當(dāng)?shù)?type 聲明是必需的，這樣才能讓 input 獲得完整的樣式。
  文本框（Textarea）進(jìn)行多行輸入的時候，必要時可以改變 rows 屬性行<textarea class="form-control" rows="3"></textarea>
• 復(fù)選框（Checkbox）和單選框（Radio）對一系列復(fù)選框和單選框使用 .checkbox-inline 或 .radio-inline，控制它們顯示在同一行上。<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="option1"> 選項(xiàng) 1</label>
• 選擇框（Select）:使用 multiple="multiple" 允許用戶選擇多個選項(xiàng)。<select multiple class="form-control"></select>
• 靜態(tài)控件：當(dāng)您需要在一個水平表單內(nèi)的表單標(biāo)簽后放置純文本時使用form-control-static；<p class="form-control-static">email@example.com</p>
  
  image.png

表單控件狀態(tài)：

• 輸入框焦點(diǎn)
• 禁用輸入框input：只需要簡單地添加 disabled 屬性<input disabled>
• 禁用fieldset：<fieldset disabled></fieldset>
• 驗(yàn)證狀態(tài)：<div class="form-group has-success"></div> 成功綠色 / .has-warning警告黃 / .has-error錯誤紅

表單控件大小：可以分別使用 class .input-lg 和 .col-lg-* 來設(shè)置表單的高度和寬度
<input class="form-control input-lg" type="text" > / .input-sm input-lg
<select class="form-control input-lg"></select>