Bootsrap表格表單及其使用方法

bootstrap的使用

• bootstrap中的js插件依賴於jQuery 因此jQuery要在bootstrap之前引入
• 參考官網標准引入方法和引入樣式

排版

標題

Bootstrap和普通的HTML頁面一樣，定義標題都是使用標簽

到

,只不過Bootstrap覆蓋了其默認的樣式，使用其在所有瀏覽器下顯示的效果一樣，具體定義的規則可以如下表所示：

通過比較可以發現，Bootstrap標題樣式進行了以下顯著的優化重置：

1、重新設置了margin-top和margin-bottom的值， h1_{h3**重置后的值都是**20px**；**h4}h6重置后的值都是10px。
2、所有標題的行高都是1.1（也就是font-size的1.1倍）,而且文本顏色和字體都繼承父元素的顏色和字體。
3、固定不同級別標題字體大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

標題的具體運用非常簡單，和我們平時運用是一樣的，使用

~

標簽，分別表示標題一至標題六，h 后面的數字越大，表示級別越小，文本也越小。來看一個簡單的效果：右側代碼編輯器中的10-16行的代碼。

除此之外，我們在Web的制作中，常常會碰到在一個標題后面緊跟着一行小的副標題。在Bootstrap中他也考慮了這種排版效果，使用了標簽來制作副標題。這個副標題具有其自己的一些獨特樣式：

1、行高都是1，而且font-weight設置了normal變成了常規效果（不加粗），同時顏色被設置為灰色（#999）

段落

段落是排版中另一個重要元素之一。在Bootstrap中為文本設置了一個全局的文本樣式（這里所說的文本是指正文文本）：

1、全局文本字號為14px(font-size)。

2、行高為1.42857143（line-height），大約是20px(大家看到一串的小數或許會有疑惑，其實他是通過LESS編譯器計算出來的，當然Sass也有這樣的功能)。

3、顏色為深灰色（#333）；

4、字體為"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或許這樣的字體對我們中文並不太合適，但在實際項目中，大家可以根據自己的需求進行重置，在此我們不做過多闡述，我們回到這里。該設置都定義在元素上，由於這幾個屬性都是繼承屬性，所以Web頁面中文本（包括段落p元素）如無重置都會具有這些樣式效果。

/源碼請查看bootstrap.css文件中第274行~280行/

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

另外在Bootstrap中，為了讓段落p元素之間具有一定的間距，便於用戶閱讀文本，特意設置了p元素的margin值（默認情況之下，p元素具有一個上下外邊距，並且保持一個行高的高度）：
/源碼請查看bootstrap.css文件中第467行~469行/

p {
 margin: 0 0 10px;
}

如果你對CSS預處理器有所了解，那么你完全可以根據Bootstrap提供的預編譯版本LESS(或者Sass)進行自定義排版設置。在Bootstrap中，排版設置的默認值都存在variables.less文件中(Sass版本存在_variables.scss中)的兩個變量：

LESS版本：

@font-size-base: 14px; @line-height-base: 1.428571429; // 20/14

Sass版本：

$font-size-base: 14px !default; $line-height-base: 1.428571429 !default; // 20/14

第一條語句用於設置字體大小，第二條語句用於設置行高。系統默認使用這兩個值產生整個頁面相應的margin、padding和line-height的值。換句話說，你只需要修改這兩個變量的值，然后重新編譯，就可以自定義自己的Bootstrap排版樣式。（有興趣的同學可以嘗試一下，此處對於LESS或Sass版本運用不做過多闡述）。

強調相關的類

在Bootstrap中除了使用標簽、等說明正文某些字詞、句子的重要性，Bootstrap還定義了一套類名，這里稱其為強調類名（類似前面說的“.lead”）,這些強調類都是通過顏色來表示強調，具本說明如下：

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

文本對齊風格

在排版中離不開文本的對齊方式。在CSS中常常使用text-align來實現文本的對齊風格的設置。其中主要有四種風格：

☑ 左對齊，取值left

☑ 居中對齊，取值center

☑ 右對齊，取值right

☑ 兩端對齊，取值justify

為了簡化操作，方便使用，Bootstrap通過定義四個類名來控制文本的對齊風格：

☑ .text-left：左對齊

☑ .text-center：居中對齊

☑ .text-right：右對齊

☑ .text-justify：兩端對齊

列表

在HTML文檔中，列表結構主要有三種：有序列表、無序列表和定義列表。具體使用的標簽說明如下：
無序列表

<ul>
    <li>…</li>
</ul>

有序列表

<ol>
    <li>…</li>
</ol>

定義列表

<dl>
    <dt>…</dt>
    <dd>…</dd>
</dl>

Bootstrap根據平時的使用情形提供了六種形式的列表：

☑ 普通列表

☑ 有序列表

☑ 去點列表 .list-unstyled

☑ 內聯列表 .list-inline

☑ 描述列表

☑ 水平描述列表 .dl-horizontal

代碼

• 代碼風格

  • 一般在個人博客上使用的較為頻繁，用於顯示代碼的風格。在Bootstrap主要提供了三種代碼風格：
    1、使用<code></code>來顯示單行內聯代碼
    2、使用<pre></pre>來顯示多行塊代碼(使用類名.pre-scrollable控制代碼區高度為340px)
    3、使用<kbd></kbd>來顯示用戶輸入代碼

    在使用代碼時，用戶可以根據具體的需求來使用不同的類型：
    1、：一般是針對於單個單詞或單個句子的代碼
2、

    ：一般是針對於多行代碼（也就是成塊的代碼）
    
    3、:一般是表示用戶要通過鍵盤輸入的內容
    
    

表格

Bootstrap為表格不同的樣式風格提供了不同的類名，主要包括：

☑ .table：基礎表格

☑ .table-striped：斑馬線表格

☑ .table-bordered：帶邊框的表格

☑ .table-hover：鼠標懸停高亮的表格

☑ .table-condensed：緊湊型表格

☑ .table-responsive：響應式表格

表格--表格行的類

bootstrap還為表格的行元素<tr>提供了五種不同的類名,每種類名控制了行的不同背景顏色,具體說明如下表所示:

類名	描述	對應的顏色
.active	表示當前活動的信息	#f5f5f5
.success	表示成功或者正確的行為	#ddff0d8
.info	表示中立的信息或行為	#d9edf7
.warning	表示警告,需要特別注意	#fcf8e3
.danger	表示危險或者是錯誤的行為	#f2dede

表格--響應式表格

bootstrap提供了一個容器,並且此容器設置類名".table-responsive"

<div class="table-responsive">
<table class="table table-bordered">
   …
</table>
</div>

表單

基礎表單

表單主要功能是用來與用戶做交流的一個網頁控件，良好的表單設計能夠讓網頁與用戶更好的溝通。表單中常見的元素主要包括：文本輸入框、下拉選擇框、單選按鈕、復選按鈕、文本域和按鈕等。其中每個控件所起的作用都各不相同，而且不同的瀏覽器對表單控件渲染的風格都各有不同。

同樣，表單也是Bootstrap框架中的核心內容，下面向大家介紹Bootstrap框架中表單的制作。

水平表單

Bootstrap框架默認的表單是垂直顯示風格，但很多時候我們需要的水平表單風格（標簽居左，表單控件居右）見下圖。

在Bootstrap框架中要實現水平表單效果，必須滿足以下兩個條件：
1、在

元素是使用類名“form-horizontal”。2、配合Bootstrap框架的網格系統。（網格布局會在以后的章節中詳細講解）

在元素上使用類名“form-horizontal”主要有以下幾個作用：
1、設置表單控件padding和margin值。2、改變“form-group”的表現形式，類似於網格系統的“row”。

內聯表單

有時候我們需要將表單的控件都在一行內顯示，類似這樣的：

在Bootstrap框架中實現這樣的表單效果是輕而易舉的，你只需要在元素中添加類名“form-inline”即可。
內聯表單實現原理非常簡單，欲將表單控件在一行顯示，就需要將表單控件設置成內聯塊元素（display:inline-block）。
/源碼請查閱bootstrap.css文件第1928行~第1962行/

如果你要在input前面添加一個label標簽時，會導致input換行顯示。如果你必須添加這樣的一個label標簽，並且不想讓input換行，你需要將label標簽也放在容器“form-group”中，如：

<div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
</div>
<div class="form-group">
    <inputtype="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>

接下來，我們還是以實例說話：

<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="btnbtn-default">進入郵箱</button>
</form>

運行效果如下或查看右側結果窗口：(查看效果需要把結果窗口設置為全屏)

表單控件

每一個表單都是由表單控件組成。離開了控件，表單就失去了意義。接下來的我們簡單的來了解Bootstrap框架中表單控件的相關知識。

• 單行輸入框，常見的文本輸入框，也就是input的type屬性值為text。在Bootstrap中使用input時也必須添加type類型，如果沒有指定type類型，將無法得到正確的樣式，因為Bootstrap框架都是通過input[type=“?”](其中?號代表type類型，比如說text類型，對應的是input[type=“text”])的形式來定義樣式的。

為了讓控件在各種表單風格中樣式不出錯，需要添加類名“form-control”，如：

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>
運行效果如下或查看右側結果窗口:

• 下拉選擇框select

Bootstrap框架中的下拉選擇框使用和原始的一致，多行選擇設置multiple屬性的值為multiple。Bootstrap框架會為這些元素提供統一的樣式風格。如：

<form role="form">
<div class="form-group">
  <select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
  </div>
  <div class="form-group">
  <select multiple class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>
</form>

運行效果如下或查看右側結果窗口:

• 文本域textarea

文本域和原始使用方法一樣，設置rows可定義其高度，設置cols可以設置其寬度。但如果textarea元素中添加了類名“form-control”類名，則無需設置cols屬性。因為Bootstrap框架中的“form-control”樣式的表單控件寬度為100%或auto。

<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

表單控件(復選框checkbox和單選擇按鈕radio)

Bootstrap框架中checkbox和radio有點特殊，Bootstrap針對他們做了一些特殊化處理，主要是checkbox和radio與label標簽配合使用會出現一些小問題（最頭痛的是對齊問題）。使用Bootstrap框架，開發人員無需考慮太多，只需要按照下面的方法使用即可。

<form role="form">
<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）：

表單控件(復選框和單選按鈕水平排列)

有時候，為了布局的需要，將復選框和單選按鈕需要水平排列。Bootstrap框架也做了這方面的考慮：
1、如果checkbox需要水平排列，只需要在label標簽上添加類名“checkbox-inline”2、如果radio需要水平排列，只需要在label標簽上添加類名“radio-inline”
如下所示：

<form role="form">
  <div class="form-group">
    <label class="checkbox-inline">
      <input type="checkbox"  value="option1">游戲
    </label>
    <label class="checkbox-inline">
      <input type="checkbox"  value="option2">攝影
    </label>
    <label class="checkbox-inline">
    <input type="checkbox"  value="option3">旅游
    </label>
  </div>
  <div class="form-group">
    <label class="radio-inline">
      <input type="radio"  value="option1" name="sex">男性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option2" name="sex">女性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option3" name="sex">中性
    </label>
  </div>
</form>

運行效果如下或查看右側結果窗口：

表單控件(按鈕)

按鈕也是表單重要控件之一,制作按鈕通常使用下面代碼來實現：

☑ input[type=“submit”]

☑ input[type=“button”]

☑ input[type=“reset”]

☑

在Bootstrap框架中的按鈕都是采用

來實現。

有關於Bootstrap中按鈕如何制作，在這里不做過多闡述，因為按鈕也是Bootstrap框架中核心部分之一，后面我們專門有一節內容來介紹Bootstrap的按鈕。

這里先讓大家看看Bootstrap的按鈕長成什么樣：

表單控件大小

前面看到的表單控件都正常的大小。可以通過設置控件的height，line-height，padding和font-size等屬性來實現控件的高度設置。不過Bootstrap框架還提供了兩個不同的類名，用來控制表單控件的高度。這兩個類名是：
1、input-sm:讓控件比正常大小更小2、input-lg:讓控件比正常大小更大

這兩個類適用於表單中的input，textarea和select控件，具體使用如下：

<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件變大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件變小">

運行效果如下或查看右側結果窗口：