Bootsrap表格表單及其使用方法

bootstrap的使用

• bootstrap中的js插件依賴於jQuery 所以jQuery要在bootstrap以前引入
• 參考官網標準引入方法和引入樣式

排版

標題

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

到

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

經過比較能夠發現，Bootstrap標題樣式進行了如下顯著的優化重置：

一、從新設置了margin-top和margin-bottom的值， h1~h3重置後的值都是20px；h4~h6重置後的值都是10px。
二、全部標題的行高都是1.1（也就是font-size的1.1倍）,並且文本顏色和字體都繼承父元素的顏色和字體。
三、固定不一樣級別標題字體大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

標題的具體運用很是簡單，和咱們平時運用是同樣的，使用

~

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

除此以外，咱們在Web的製做中，經常會碰到在一個標題後面緊跟着一行小的副標題。在Bootstrap中他也考慮了這種排版效果，使用了標籤來製做副標題。這個副標題具備其本身的一些獨特樣式：

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

段落

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

一、全局文本字號爲14px(font-size)。

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

三、顏色爲深灰色（#333）；

四、字體爲"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主要提供了三種代碼風格：
    一、使用<code></code>來顯示單行內聯代碼
    二、使用<pre></pre>來顯示多行塊代碼(使用類名.pre-scrollable控制代碼區高度爲340px)
    三、使用<kbd></kbd>來顯示用戶輸入代碼

    在使用代碼時，用戶能夠根據具體的需求來使用不一樣的類型：
    一、：通常是針對於單個單詞或單個句子的代碼
二、

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

表格

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框架中要實現水平表單效果，必須知足如下兩個條件：
一、在

元素是使用類名「form-horizontal」。二、配合Bootstrap框架的網格系統。（網格佈局會在之後的章節中詳細講解）

在元素上使用類名「form-horizontal」主要有如下幾個做用：
一、設置表單控件padding和margin值。二、改變「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框架也作了這方面的考慮：
一、若是checkbox須要水平排列，只須要在label標籤上添加類名「checkbox-inline」二、若是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框架還提供了兩個不一樣的類名，用來控制表單控件的高度。這兩個類名是：
一、input-sm:讓控件比正常大小更小二、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，控件變小">

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