Bootstrap 學習 - 排版 - 表單

一、標題

<h1> ~ <h6>，全部標題的行高都是 1.1（也就是 font-size 的 1.1 倍）。

二、副標題

<small>，行高都是 1，灰色（#999）。

<h1>
    主標題
    <small>副標題</small>
</h1>

三、Body 樣式

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

四、<p>，段落樣式

p { margin: 0 0 10px; }

五、強調樣式 .lend

.lead {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 200;
    line-height: 1.4;
}

六、粗體 <b>、<strong>

b, strong {
    font-weight: bold; /*文本加粗*/
}

七、斜體 <i>、<em>

<em>、<strong> 通常是展示給爬蟲看的（偏重語義），<i>、<b> 是展示給用戶的（偏重視覺效果）。

八、字體顏色

.text-muted：提示，使用淺灰色（#999）
.text-primary：主要，使用藍色（#428bca）
.text-success：成功，使用淺綠色（#3c763d）
.text-info：通知信息，使用淺藍色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）
.text-danger：危險，使用褐色（#a94442）

九、文字對齊方式

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

十、列表去點 .list-unstyled

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

十一、水平導航 .list-inline

.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}

.list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}

<ul class="list-inline">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

十二、定義列表

<dl>
    <dt>主題一</dt>
    <dd>內容一</dd>
    <dt>主題二</dt>
    <dd>內容二</dd>
</dl>

水平定義列表 .dl-horizontal。

1三、輸入代碼樣式

（1）<code>：通常是針對於單個單詞或單個句子的代碼
（2）<pre>：通常是針對於多行代碼（也就是成塊的代碼）
（3）<kbd>：通常是表示用戶要經過鍵盤輸入的內容

1四、表格樣式

.table：基礎表格 - 不可缺乏
.table-striped：斑馬線表格
.table-bordered：帶邊框的表格
.table-hover：鼠標懸停高亮的表格 - 能夠與其餘表格樣式疊加使用
.table-condensed：緊湊型表格
.table-responsive：響應式表格 - 小屏添加滾動條

表格背景顏色

1五、基礎表單

role 是一個 html5 的屬性，role="form" 告訴輔助設備（如屏幕閱讀器）這個元素所扮演的角色是個表單。

1六、水平表單

類名 .form-horizontal

1七、內聯表單

<div class="form-group">
  <label >QQQ</label>
  <input type="">
</div>

1八、輸入框 input

輸入類型 - email

email 輸入類型用於應該包含電郵地址的輸入字段。

當提交表單時，會自動地對 email 字段的值進行驗證。

1九、複選框 checkbox 和單選擇按鈕 radio

.checkbox

<div class="checkbox">
    <label>
      <input type="checkbox" value="">
      QQQ
    </label>
</div>

.radio 

<div class="radio">
    <label>
      <input type="radio" value="love" checked>
      CCC
    </label>
</div>

水平顯示

<div class="form-group">
    <label class="radio-inline">
        <input type="radio" value="mazey" name="mazey">
        男性
    </label>
    <label class="radio-inline">
        <input type="radio" value="mazey" name="mazey">
        中性
    </label>
    <label class="radio-inline">
        <input type="radio" value="mazey" name="mazey">
        女性
    </label>
</div>

1. 若是 checkbox 須要水平排列，只須要在 label 標籤上添加類名 checkbox-inline。
2. 若是 radio 須要水平排列，只須要在 label 標籤上添加類名radio-inline。

20、表單控件大小 - 僅改變高度

1. input-sm：讓控件比正常大小更小
2. input-lg：讓控件比正常大小更大

2一、表單驗證狀態

1. .has-warning：警告狀態（黃色）
2. .has-error：錯誤狀態（紅色）
3. .has-success：成功狀態（綠色）

顯示勾號叉號要加 .has-feedback

<div class="form-group has-success has-feedback">
      <label class="control-label" for="qqq">E-Mail地址</label>
      <input type="text" class="form-control" id="qqq" placeholder="qqq">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

表單提示文字 .help-block

<div class="form-group has-error has-feedback">    
    <label class="control-label" for="inputError1">錯誤狀態</label>
    <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態">
    <span class="help-block">你輸入的信息是錯誤的</span>
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

2二、按鈕樣式

.btn、.btn-default 能夠用在 a、span、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>

HTML <button> 標籤的 type 屬性值描述：

• submit 該按鈕是提交按鈕（除了 Internet Explorer，該值是其餘瀏覽器的默認值）。
• button 該按鈕是可點擊的按鈕（Internet Explorer 的默認值）。
• reset 該按鈕是重置按鈕（清除表單數據）

2三、按鈕大小

<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">超小型按鈕.btn-xs</button>

2四、塊狀按鈕

.btn-block 使按鈕充滿整個容器（父級元素）。

2五、按鈕狀態

當按鈕處理正在點擊狀態（也就是鼠標按下的未鬆開的狀態），對於 <button> 元素是經過 :active 僞類實現，而對於 <a> 這樣的標籤元素則是經過添加類名 .active 來實現。

禁用狀態 .disabled

disabled="disabled" 用類禁用可能有禁用樣式，但沒有禁用效果，依然能夠點。

2六、圖像

1. img-responsive：響應式圖片，主要針對於響應式設計
2. img-rounded：圓角圖片
3. img-circle：圓形圖片
4. img-thumbnail：縮略圖片

因爲樣式沒有對圖片作大小上的樣式限制，因此在實際使用的時候，須要經過其餘的方式來處理圖片大小。好比說控制圖片容器大小。（注意不能夠經過 CSS 樣式直接修改 img 圖片的大小，這樣操做就不響應了）對於圓角圖片和圓形圖片效果，由於是使用了 CSS3 的圓角樣式來實現的，因此注意對於 IE8 以及其如下版本不支持，是沒有圓角效果的。

2七、圖標

這裏說的圖標就是 Web 製做中常看到的小 icon 圖標，能夠說這些小 icon 圖標是一個優秀 Web 中不可缺乏的一部分，起到畫龍點睛的效果。在 Bootstrap 框架中也爲你們提供了近 200 個不一樣的 icon 圖片，而這些圖標都是使用 CSS3 的 @font-face 屬性配合字體來實現的 icon 效果。

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>

還有 Font Awesome 字體。

定製圖標網站：https://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm

附錄：

閱讀原文：https://blog.mazey.net/1923.html