4.Bootstrap基礎總結

時間  2019-11-30
標籤 4.bootstrap bootstrap 基礎 總結 欄目 Bootstarp 简体版
原文   原文鏈接

一.Bootstrap 網格系統

二.Bootstrap 排版

三.Bootstrap 代碼

四.Bootstrap 表格

五.Bootstrap 表單

六.Bootstrap 按鈕

七.Bootstrap 圖片

八.Bootstrap 輔助類

九.Bootstrap 響應式實用工具

一.Bootstrap 網格系統

1.什麼是 Bootstrap 網格系統（Grid System）？

Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統，能夠隨着設備或視口大小的增長而適當地擴展到 12 列。
它包含了用於簡單的佈局選項的預約義類，也包含了用於生成更多語義佈局的功能強大的混合類。

2.Bootstrap 網格系統（Grid System）的工做原理

網格系統經過一系列包含內容的行和列來建立頁面佈局。下面列出了 Bootstrap 網格系統是如何工做的：css

  • 行必須放置在 .container class 內，以便得到適當的對齊（alignment）和內邊距（padding）。html

  • 使用行來建立列的水平組。html5

  • 內容應該放置在列內，且惟有列能夠是行的直接子元素。jquery

  • 預約義的網格類，好比 .row 和 .col-xs-4，可用於快速建立網格佈局。LESS 混合類可用於更多語義佈局。ios

  • 列經過內邊距（padding）來建立列內容之間的間隙。該內邊距是經過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。bootstrap

  • 網格系統是經過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 .col-xs-4。api

    3.媒體查詢

  • 媒體查詢是很是別緻的"有條件的 CSS 規則"。它只適用於一些基於某些規定條件的 CSS。若是知足那些條件，則應用相應的樣式。
  • Bootstrap 中的媒體查詢容許您基於視口大小移動、顯示並隱藏內容。下面的媒體查詢在 LESS 文件中使用，用來建立 Bootstrap 網格系統中的關鍵的分界點閾值。 
    /* 超小設備（手機，小於 768px） */
/* Bootstrap 中默認狀況下沒有媒體查詢 */

/* 小型設備（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型設備（臺式電腦，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型設備（大臺式電腦，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

    咱們有時候也會在媒體查詢代碼中包含 max-width，從而將 CSS 的影響限制在更小範圍的屏幕大小以內。瀏覽器

    @media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

    4.基本的網格結構

    下面是 Bootstrap 網格的基本結構：app

  • <div class="container">   
  <div class="row">      
    <div class="col-*-*"></div>      
    <div class="col-*-*"></div>         
  </div>   
  <div class="row">...</div>
  </div>
  <div class="container">

    4.網格結構實例

    <!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 堆疊的水平</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
   <h1>Hello, world!</h1>

   <div class="row">

      <div class="col-md-6"  style="background-color: #dedef8; box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>This is a test</p>
         <p>This is a test</p>
      </div>

      <div class="col-md-6" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>This is a test</p>
         <p>This is a test</p>
         </div>
    </div>
</div>

</body>
</html>
    • <div class="container">...</div> 元素被添加，確保居中和最大寬度。
    • 一旦添加了容器，接下來您須要考慮以行爲單位。添加 <div class="row">...</div>，並在行內添加列 <div class="col-md-6"></div>。
    • 網格中的每一行是由 12 個單元組成的，您可使用這些單元定義列的尺寸。在咱們的實例中，有兩個列，每一個列由 6 個單元組成，即 6+6=12。

    • 您能夠嘗試其餘更多的選項，好比 <div class="col-md-3"></div> 和 <div class="col-md-9"></div> 或 <div class="col-md-7"></div> 和 <div class="col-md-5"></div>。您能夠嘗試一下，但要確保總和老是 12。dom

  Bootstrap 網格系統實例：中型和大型設備

<div class="col-md-6 col-lg-4">....</div>
<div class="col-md-6 col-lg-8">....</div>

如今 Bootstrap 在中型設備中，會查找帶有 md 的類，並使用它們。在大型設備中，會查找帶有 lg 的類，並使用它們。在本實例中，咱們的 2 個 div 將從 50%/50% 分割轉變爲 33%/66%。

Bootstrap 網格系統實例：手機、平板電腦、臺式電腦

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

 

如今，給咱們提供了 3 中不一樣的列布局，分別適用於三種設備。在手機上，它將是左邊 25% 右邊 75% 的佈局。在平板電腦上，它將是 50%/50% 的佈局。在大型視口的設備上，它將是 33%/66% 的佈局。

二.Bootstrap 排版

1.標題

Bootstrap 中定義了全部的 HTML 標題（h1 到 h6）的樣式。

若是須要向任何標題添加一個內聯子標題，只須要簡單地在元素兩旁添加 <small>，或者添加 .small class，這樣子您就能獲得一個字號更小的顏色更淺的文本，

<body>
   <h1>我是標題1 h1. <small>我是副標題1 h1</small></h1> 
   <h2>我是標題2 h2. <small>我是副標題2 h2</small></h2>
   <h3>我是標題3 h3. <small>我是副標題3 h3</small></h3>
   <h4>我是標題4 h4. <small>我是副標題4 h4</small></h4>
   <h5>我是標題5 h5. <small>我是副標題5 h5</small></h5>
   <h6>我是標題6 h6. <small>我是副標題6 h6</small></h6>
</body>

Bootstrap除了可使圖片自適應之外,還能夠很簡單的讓頭部標題的文字居中,使標題看起來更美觀。咱們只須要給h2標籤添加text-center的class屬性,標題文字就能夠居中了。

<h2 class="red-text text-center">your text</h2>

2.引導主體副本

爲了給段落添增強調文本，則能夠添加 class="lead"，這將獲得更大更粗、行高更高的文本

3.強調

HTML 的默認強調標籤 <small>（設置文本爲父文本大小的 85%）、<strong>（設置文本爲更粗的文本）、<em>（設置文本爲斜體）。

bootstrap之強調文本的類（帶顏色）


<small>本行內容是在標籤內</small><br> 
<strong>本行內容是在標籤內</strong><br>
<em>本行內容是在標籤內，並呈現爲斜體</em><br>
<p class="text-left">向左對齊文本</p>
<p class="text-center">居中對齊文本</p>
<p class="text-right">向右對齊文本</p>
<p class="text-muted">本行內容是減弱的</p> 
<p class="text-primary">本行內容帶有一個 primary class</p>
<p class="text-success">本行內容帶有一個 success class</p>
<p class="text-info">本行內容帶有一個 info class</p> 
<p class="text-warning">本行內容帶有一個 warning class</p>
<p class="text-danger">本行內容帶有一個 danger class</p>

其餘 的還有

text-capitalize 利用
text-center 居中
text-danger 加紅危險
text-hide 隱藏文字
text-info 信息
text-justify 字體對齊（齊行——
text-left 文字左對齊
text-lowercase 小寫（僅英文）
text-muted 靜音
text-nowrap 不換行
text-primary 原生效果
text-right 文字居右
text-success 成功
text-uppercase 文字大寫（僅英文）
text-warning 警告紅色

主要顯示的顏色是：
柔和灰（text-muted）、主要藍（text-primary）、成功綠（text-success）、信息藍（text-info）、警告黃（text-warning）、危險紅（text-danger）

4.縮寫

HTML元素提供了用於縮寫的標記，好比 WWW 或 HTTP。Bootstrap 定義 <abbr> 元素的樣式爲顯示在文本底部的一條虛線邊框，當鼠標懸停在上面時會顯示完整的文本（只要您爲 <abbr> title 屬性添加了文本）。爲了獲得一個更小字體的文本，請添加 .initialism 到 <abbr>。

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

5.地址（Address）

使用 <address> 標籤，您能夠在網頁上顯示聯繫信息。因爲 <address> 默認爲 display:block;，您須要使用
標籤來爲封閉的地址文本添加換行。

<address>
  <strong>Some Company, Inc.</strong><br>
  007 street<br>
  Some City, State XXXXX<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890</address><address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">mailto@somedomain.com</a></address>

6.引用（Blockquote）

您能夠在任意的 HTML 文本旁使用默認的 <blockquote>。其餘選項包括，添加一個 <small> 標籤來標識引用的來源，使用 class .pull-right 向右對齊引用。下面的實例演示了這些特性：

結果以下所示：

<blockquote class="pull-right">這是一個向右對齊的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>

7.列表

Bootstrap 支持有序列表、無序列表和定義列表。

  • 有序列表：有序列表是指以數字或其餘有序字符開頭的列表。

  • 無序列表：無序列表是指沒有特定順序的列表，是以傳統風格的着重號開頭的列表。若是您不想顯示這些着重號，您可使用 class .list-unstyled 來移除樣式。您也能夠經過使用 class .list-inline 把全部的列表項放在同一行中。

  • 定義列表：在這種類型的列表中，每一個列表項能夠包含 <dt> 和 <dd> 元素。<dt> 表明 定義術語，就像字典，這是被定義的屬於（或短語）。接着，<dd> 是 <dt> 的描述。您可使用 class dl-horizontal 把 <dl> 行中的屬於與描述並排顯示。

  • <h4>有序列表</h4><ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li></ol>
<h4>無序列表</h4><ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li></ul>
<h4>未定義樣式列表</h4><ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li></ul>
<h4>內聯列表</h4><ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li></ul>
<h4>定義列表</h4><dl>
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd></dl>
<h4>水平的定義列表</h4><dl class="dl-horizontal">
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd></dl>

    更多排版類

    下表提供了 Bootstrap 更多排版類的實例：

    類 描述 實例
    .lead 使段落突出顯示 嘗試一下
    .small 設定小文本 (設置爲父文本的 85% 大小) 嘗試一下
    .text-left 設定文本左對齊 嘗試一下
    .text-center 設定文本居中對齊 嘗試一下
    .text-right 設定文本右對齊 嘗試一下
    .text-justify 設定文本對齊,段落中超出屏幕部分文字自動換行 嘗試一下
    .text-nowrap 段落中超出屏幕部分不換行 嘗試一下
    .text-lowercase 設定文本小寫 嘗試一下
    .text-uppercase 設定文本大寫 嘗試一下
    .text-capitalize 設定單詞首字母大寫 嘗試一下
    .initialism 顯示在 <abbr> 元素中的文本以小號字體展現 嘗試一下
    .blockquote-reverse 設定引用右對齊 嘗試一下
    .list-unstyled 移除默認的列表樣式，列表項中左對齊 ( <ul> 和 <ol> 中)。 這個類僅適用於直接子列表項    (若是須要移除嵌套的列表項，你須要在嵌套的列表中使用該樣式) 嘗試一下
    .list-inline 將全部列表項放置同一行 嘗試一下
    .dl-horizontal 該類設置了浮動和偏移，應用於 <dl> 元素和 <dt> 元素中，具體實現能夠查看實例 嘗試一下
    .pre-scrollable 使 <pre> 元素可滾動 scrollable 嘗試一下

     

三.Bootstrap 代碼

 

Bootstrap 代碼

 

Bootstrap 容許您以兩種方式顯示代碼：

 

  • 第一種是 <code> 標籤。若是您想要內聯顯示代碼，那麼您應該使用 <code> 標籤。
  • 第二種是 <pre> 標籤。若是代碼須要被顯示爲一個獨立的塊元素或者代碼有多行，那麼您應該使用 <pre> 標籤。

 

請確保當您使用 <pre> 和 <code> 標籤時，開始和結束標籤使用了 unicode 變體： < 和 >。

p><code>&lt;header&gt;</code> 做爲內聯元素被包圍。</p>
<p>若是須要把代碼顯示爲一個獨立的塊元素，請使用 <pre> 標籤：</p>
<pre>
  &lt;article&gt;
    &lt;h1&gt;Article Heading&lt;/h1&gt;
  &lt;/article&gt;
</pre>

四.Bootstrap 表格

1.Bootstrap 提供了一個清晰的建立表格的佈局。下表列出了 Bootstrap 支持的一些表格元素：

標籤 描述
<table> 爲表格添加基礎樣式。
<thead> 表格標題行的容器元素（<tr>），用來標識表格列。
<tbody> 表格主體中的表格行的容器元素（<tr>）。
<tr> 一組出如今單行上的表格單元格的容器元素（<td> 或 <th>）。
<td> 默認的表格單元格。
<th> 特殊的表格單元格，用來標識列或行（取決於範圍和位置）。必須在 <thead> 內使用。
<caption> 關於表格存儲內容的描述或總結。

 

2.表格類

下表樣式可用於表格中：

類 描述 實例
.table 爲任意 <table> 添加基本樣式 (只有橫向分隔線) 嘗試一下
.table-striped 在 <tbody> 內添加斑馬線形式的條紋 ( IE8 不支持) 嘗試一下
.table-bordered 爲全部表格的單元格添加邊框 嘗試一下
.table-hover 在 <tbody> 內的任一行啓用鼠標懸停狀態 嘗試一下
.table-condensed 讓表格更加緊湊 嘗試一下
聯合使用全部表格類 嘗試一下

 

 
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
  </head>

  <body>
     <div class="container">
      <h2>表格</h2>
      <p>聯合使用全部表格類:</p>                                          
      <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
          <tr>
            <th>#</th>
            <th>Firstname</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Anna</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Debbie</td>
          </tr>
          <tr>
            <td>3</td>
            <td>John</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  </body>

</html>

3.<tr>, <th> 和 <td> 類

下表的類可用於表格的行或者單元格：

類 描述 實例
.active 將懸停的顏色應用在行或者單元格上 嘗試一下
.success 表示成功的操做 嘗試一下
.info 表示信息變化的操做 嘗試一下
.warning 表示一個警告的操做 嘗試一下
.danger 表示一個危險的操做 嘗試一下

 

4.基本的表格

若是您想要一個只帶有內邊距（padding）和水平分割的基本表，請添加 class .table，

可選的表格類

除了基本的表格標記和 .table class，還有一些能夠用來爲標記定義樣式的類。下面將向您介紹這些類。

1）條紋表格

經過添加 .table-striped class，您將在 <tbody> 內的行上看到條紋，以下面的實例所示：

<table class="table table-striped">
   <caption>條紋表格佈局</caption>
   <thead>
      <tr>
         <th>名稱</th>
         <th>城市</th>
         <th>密碼</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody></table>

2）邊框表格

經過添加 .table-bordered class，您將看到每一個元素周圍都有邊框，且佔整個表格是圓角的，

<table class="table table-bordered">

3）懸停表格

經過添加 .table-hover class，當指針懸停在行上時會出現淺灰色背景，

<table class="table table-hover">

4）精簡表格

經過添加 .table-condensed class，行內邊距（padding）被切爲兩半，以便讓表看起來更緊湊，

<table class="table table-condensed">

5.上下文類

下表中所列出的上下文類容許您改變表格行或單個單元格的背景顏色。

類 描述
.active 對某一特定的行或單元格應用懸停顏色
.success 表示一個成功的或積極的動做
.warning 表示一個須要注意的警告
.danger 表示一個危險的或潛在的負面動做

這些類可被應用到 <tr>、<td> 或 <th>。

<table class="table">
   <caption>上下文表格佈局</caption>
   <thead>
      <tr>
         <th>產品</th>
         <th>付款日期</th>
         <th>狀態</th>
      </tr>
   </thead>
   <tbody>
      <tr class="active">
         <td>產品1</td>
         <td>23/11/2013</td>
         <td>待發貨</td>
      </tr>
      <tr class="success">
         <td>產品2</td>
         <td>10/11/2013</td>
         <td>發貨中</td>
      </tr>
      <tr  class="warning">
         <td>產品3</td>
         <td>20/10/2013</td>
         <td>待確認</td>
      </tr>
      <tr  class="danger">
         <td>產品4</td>
         <td>20/10/2013</td>
         <td>已退貨</td>
      </tr>
   </tbody></table>

 

五.Bootstrap 表單 

1.表單佈局 

Bootstrap 提供了下列類型的表單佈局： 

  • 垂直表單（默認）

  • 內聯表單

  • 水平表單

    1）垂直或基本表單

    基本的表單結構是 Bootstrap 自帶的，個別的表單控件自動接收一些全局樣式。下面列出了建立基本表單的步驟：

    • 向父 <form> 元素添加 role="form"。

    • 把標籤和控件放在一個帶有 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" id="name" 
         placeholder="請輸入名稱">
   </div>
   <div class="form-group">
      <label for="inputfile">文件輸入</label>
      <input type="file" id="inputfile">
      <p class="help-block">這裏是塊級幫助文本的實例。</p>
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> 請打勾      </label>
   </div>
   <button type="submit" class="btn btn-default">提交</button></form>

      2）內聯表單

      若是須要建立一個表單，它的全部元素是內聯的，向左對齊的，標籤是並排的，請向 <form> 標籤添加 class .form-inline。

      <form class="form-inline" role="form">
   <div class="form-group">
      <label class="sr-only" for="name">名稱</label>
      <input type="text" class="form-control" id="name" 
         placeholder="請輸入名稱">
   </div>
   <div class="form-group">
      <label class="sr-only" for="inputfile">文件輸入</label>
      <input type="file" id="inputfile">
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> 請打勾      </label>
   </div>
   <button type="submit" class="btn btn-default">提交</button></form>

      • 默認狀況下，Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內聯表單時，您須要在表單控件上設置一個寬度。

      • 使用 class .sr-only，您能夠隱藏內聯表單的標籤。

        3）水平表單

        水平表單與其餘表單不只標記的數量上不一樣，並且表單的呈現形式也不一樣。如需建立一個水平佈局的表單，請按下面的幾個步驟進行：

        • 向父 <form> 元素添加 class .form-horizontal。

        • 把標籤和控件放在一個帶有 class .form-group 的 <div> 中。

        • 向標籤添加 class .control-label。

          <form class="form-horizontal" role="form">
   <div class="form-group">
      <label for="firstname" class="col-sm-2 control-label">名字</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="firstname" 
            placeholder="請輸入名字">
      </div>
   </div>
   <div class="form-group">
      <label for="lastname" class="col-sm-2 control-label">姓</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="lastname" 
            placeholder="請輸入姓">
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <div class="checkbox">
            <label>
               <input type="checkbox"> 請記住我            </label>
         </div>
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-default">登陸</button>
      </div>
   </div></form>

2.支持的表單控件

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

 1）輸入框（Input）

最多見的表單文本字段是輸入框 input。用戶能夠在其中輸入大多數必要的表單數據。Bootstrap 提供了對全部原生的 HTML5 的 input 類型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。適當的 type 聲明是必需的，這樣才能讓 input 得到完整的樣式。

2）文本框（Textarea）

當您須要進行多行輸入的時，則可使用文本框 textarea。必要時能夠改變 rows 屬性（較少的行 = 較小的盒子，較多的行 = 較大的盒子）。

form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3"></textarea>
  </div></form></body></html>

3）複選框（（Checkbox）和單選框（Radio）

複選框和單選按鈕用於讓用戶從一系列預設置的選項中進行選擇。

  • 當建立表單時，若是您想讓用戶從列表中選擇若干個選項時，請使用 checkbox。若是您限制用戶只能選擇一個選項，請使用 radio。

  • 對一系列複選框和單選框使用 .checkbox-inline 或 .radio-inline class，控制它們顯示在同一行上。

下面的實例演示了這兩種類型（默認和內聯）：

label for="name">默認的複選框和單選按鈕的實例</label><div class="checkbox">
   <label><input type="checkbox" value="">選項 1</label></div><div class="checkbox">
   <label><input type="checkbox" value="">選項 2</label></div><div class="radio">
   <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" 
         value="option1" checked> 選項 1   </label></div><div class="radio">
   <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" 
         value="option2">
         選項 2 - 選擇它將會取消選擇選項 1   </label></div><label for="name">內聯的複選框和單選按鈕的實例</label><div>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox1" value="option1"> 選項 1   
    </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox2" value="option2"> 選項 2   
    </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox3" value="option3"> 選項 3   
    </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
         value="option1" checked> 選項 1   
    </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios4" 
         value="option2"> 選項 2   
    </label>
</div>

4).選擇框（Select）

當您想讓用戶從多個選項中進行選擇，可是默認狀況下只能選擇一個選項時，則使用選擇框。

  • 使用 <select> 展現列表選項，一般是那些用戶很熟悉的選擇列表，好比州或者數字。

  • 使用 multiple="multiple" 容許用戶選擇多個選項。

下面的實例演示了這兩種類型（select 和 multiple）：

<form role="form">
   <div class="form-group">
      <label for="name">選擇列表</label>
      <select class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for="name">可多選的選擇列表</label>
      <select multiple class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
   </div>
</form>

5).靜態控件

當您須要在一個水平表單內的表單標籤後放置純文本時，請在 <p> 上使用 class .form-control-static。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">密碼</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" 
         placeholder="請輸入密碼">
    </div>
  </div></form>

6)表單控件狀態

除了 :focus 狀態（即，用戶點擊 input 或使用 tab 鍵聚焦到 input 上），Bootstrap 還爲禁用的輸入框定義了樣式，並提供了表單驗證的 class。

輸入框焦點

當輸入框 input 接收到 :focus 時，輸入框的輪廓會被移除，同時應用 box-shadow。

禁用的輸入框 input

若是您想要禁用一個輸入框 input，只須要簡單地添加 disabled 屬性，這不只會禁用輸入框，還會改變輸入框的樣式以及當鼠標的指針懸停在元素上時鼠標指針的樣式。

禁用的字段集 fieldset

對 <fieldset> 添加 disabled 屬性來禁用 <fieldset> 內的全部控件。

驗證狀態

Bootstrap 包含了錯誤、警告和成功消息的驗證樣式。只須要對父元素簡單地添加適當的 class（.has-warning、 .has-error 或 .has-success）便可使用驗證狀態。

下面的實例演示了全部控件狀態：

<!DOCTYPE html><html><head>
   <title>Bootstrap 實例 - 表單控件狀態</title>
   <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form class="form-horizontal" role="form">
   <div class="form-group">
      <label class="col-sm-2 control-label">聚焦</label>
      <div class="col-sm-10">
         <input class="form-control" id="focusedInput" type="text" 
            value="該輸入框得到焦點...">
      </div>
   </div>
   <div class="form-group">
      <label for="inputPassword" class="col-sm-2 control-label">
         禁用      </label>
      <div class="col-sm-10">
         <input class="form-control" id="disabledInput" type="text" 
            placeholder="該輸入框禁止輸入..." disabled>
      </div>
   </div>
   <fieldset disabled>
      <div class="form-group">
         <label for="disabledTextInput"  class="col-sm-2 control-label">
            禁用輸入（Fieldset disabled）         </label>
         <div class="col-sm-10">
            <input type="text" id="disabledTextInput" class="form-control" 
               placeholder="禁止輸入">
         </div>
      </div>
      <div class="form-group">
         <label for="disabledSelect"  class="col-sm-2 control-label">
            禁用選擇菜單（Fieldset disabled）         </label>
         <div class="col-sm-10">
            <select id="disabledSelect" class="form-control">
               <option>禁止選擇</option>
            </select>
         </div>
      </div>
   </fieldset>
   <div class="form-group has-success">
      <label class="col-sm-2 control-label" for="inputSuccess">
         輸入成功      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputSuccess">
      </div>
   </div>
   <div class="form-group has-warning">
      <label class="col-sm-2 control-label" for="inputWarning">
         輸入警告      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputWarning">
      </div>
   </div>
   <div class="form-group has-error">
      <label class="col-sm-2 control-label" for="inputError">
         輸入錯誤      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputError">
      </div>
   </div></form></body></html>

7.表單控件大小

您能夠分別使用 class .input-lg 和 .col-lg-* 來設置表單的高度和寬度

<form role="form">
   <div class="form-group">
      <input class="form-control input-lg" type="text" 
         placeholder=".input-lg">
   </div>

   <div class="form-group">
      <input class="form-control" type="text" placeholder="默認輸入">
   </div>

   <div class="form-group">
      <input class="form-control input-sm" type="text" 
         placeholder=".input-sm">
   </div>
   <div class="form-group">
   </div>
   <div class="form-group">
      <select class="form-control input-lg">
         <option value="">.input-lg</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control">
         <option value="">默認選擇</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control input-sm">
         <option value="">.input-sm</option>
      </select>
   </div>

   <div class="row">
      <div class="col-lg-2">
         <input type="text" class="form-control" placeholder=".col-lg-2">
      </div>
      <div class="col-lg-3">
         <input type="text" class="form-control" placeholder=".col-lg-3">
      </div>
      <div class="col-lg-4">
         <input type="text" class="form-control" placeholder=".col-lg-4">
      </div>
   </div>
</form>

8).表單幫助文本

Bootstrap 表單控件能夠在輸入框 input 上有一個塊級幫助文本。爲了添加一個佔用整個寬度的內容塊，請在 <input> 後使用 .help-block。下面的實例演示了這點：

<form role="form">
   <span>幫助文本實例</span>
   <input class="form-control" type="text" placeholder="">
   <span class="help-block">一個較長的幫助文本塊，超過一行，
   須要擴展到下一行。本實例中的幫助文本總共有兩行。</span></form>

 

六.Bootstrap按鈕

 

Bootstrap 按鈕

 

本章將經過實例講解如何使用 Bootstrap 按鈕。任何帶有 class .btn 的元素都會繼承圓角灰色按鈕的默認外觀。可是 Bootstrap 提供了一些選項來定義按鈕的樣式，具體以下表所示：

 

如下樣式可用於<a>, <button>, 或 <input> 元素上：

類 描述 實例
.btn 爲按鈕添加基本樣式 嘗試一下
.btn-default 默認/標準按鈕 嘗試一下
.btn-primary 原始按鈕樣式（未被操做） 嘗試一下
.btn-success 表示成功的動做 嘗試一下
.btn-info 該樣式可用於要彈出信息的按鈕 嘗試一下
.btn-warning 表示須要謹慎操做的按鈕 嘗試一下
.btn-danger 表示一個危險動做的按鈕操做 嘗試一下
.btn-link 讓按鈕看起來像個連接 (仍然保留按鈕行爲) 嘗試一下
.btn-lg 製做一個大按鈕 嘗試一下
.btn-sm 製做一個小按鈕 嘗試一下
.btn-xs 製做一個超小按鈕 嘗試一下
.btn-block 塊級按鈕(拉伸至父元素100%的寬度) 嘗試一下
.active 按鈕被點擊 嘗試一下
.disabled 禁用按鈕 嘗試一下

下面的實例演示了上面全部的按鈕 class：

<button type="button" class="btn btn-default">默認按鈕</button>
<!-- 提供額外的視覺效果，標識一組按鈕中的原始動做 -->
<button type="button" class="btn btn-primary">原始按鈕</button>
<!-- 表示一個成功的或積極的動做 -->
<button type="button" class="btn btn-success">成功按鈕</button>
<!-- 信息警告消息的上下文按鈕 -->
<button type="button" class="btn btn-info">信息按鈕</button>
<!-- 表示應謹慎採起的動做 -->
<button type="button" class="btn btn-warning">警告按鈕</button>
<!-- 表示一個危險的或潛在的負面動做 -->
<button type="button" class="btn btn-danger">危險按鈕</button>
<!-- 並不強調是一個按鈕，看起來像一個連接，但同時保持按鈕的行爲 -->
<button type="button" class="btn btn-link">連接按鈕</button>

按鈕大小

下表列出了得到各類大小按鈕的 class：

 

Class 描述
.btn-lg 這會讓按鈕看起來比較大。
.btn-sm 這會讓按鈕看起來比較小。
.btn-xs 這會讓按鈕看起來特別小。
.btn-block 這會建立塊級的按鈕，會橫跨父元素的所有寬度。

 
<button type="button" class="btn btn-primary btn-lg">
      大的原始按鈕   </button>
   <button type="button" class="btn btn-default btn-lg">
      大的按鈕   </button></p><p>
   <button type="button" class="btn btn-primary">
      默認大小的原始按鈕   </button>
   <button type="button" class="btn btn-default">
      默認大小的按鈕   </button></p><p>
   <button type="button" class="btn btn-primary btn-sm">
      小的原始按鈕   </button>
   <button type="button" class="btn btn-default btn-sm">
      小的按鈕   </button></p><p>
   <button type="button" class="btn btn-primary btn-xs">
      特別小的原始按鈕   </button>
   <button type="button" class="btn btn-default btn-xs">
      特別小的按鈕   </button></p><p>
   <button type="button" class="btn btn-primary btn-lg btn-block">
      塊級的原始按鈕   </button>
   <button type="button" class="btn btn-default btn-lg btn-block">
      塊級的按鈕   </button>

 

按鈕狀態

Bootstrap 提供了激活、禁用等按鈕狀態的 class，下面將進行詳細講解。

激活狀態

按鈕在激活時將呈現爲被按壓的外觀（深色的背景、深色的邊框、陰影）。

下表列出了讓按鈕元素和錨元素呈激活狀態的 class：

元素 Class
按鈕元素 添加 .active class 來顯示它是激活的。
錨元素 添加 .active class 到 <a> 按鈕來顯示它是激活的。 
 <button type="button" class="btn btn-default btn-lg ">
      默認按鈕   </button>
   <button type="button" class="btn btn-default btn-lg active">
      激活按鈕   </button></p><p>
   <button type="button" class="btn btn-primary btn-lg ">
      原始按鈕   </button>
   <button type="button" class="btn btn-primary btn-lg active">
      激活的原始按鈕   </button>

禁用狀態

當您禁用一個按鈕時，它的顏色會變淡 50%，並失去漸變。

下表列出了讓按鈕元素和錨元素呈禁用狀態的 class：

元素 Class
按鈕元素 添加 disabled 屬性 到 <button> 按鈕。
錨元素 添加 disabled class 到 <a> 按鈕。
注意：該 class 只會改變 <a> 的外觀，不會改變它的功能。在這裏，您須要使用自定義的 JavaScript 來禁用連接。		 
 <button type="button" class="btn btn-default btn-lg">
      默認按鈕   </button>
   <button type="button" class="btn btn-default btn-lg" disabled="disabled">
      禁用按鈕   </button></p><p>
   <button type="button" class="btn btn-primary btn-lg ">
      原始按鈕   </button>
   <button type="button" class="btn btn-primary btn-lg" disabled="disabled">
      禁用的原始按鈕   </button></p><p>
   <a href="#" class="btn btn-default btn-lg" role="button">
      連接   </a>
   <a href="#" class="btn btn-default btn-lg disabled" role="button">
      禁用連接   </a></p><p>
   <a href="#" class="btn btn-primary btn-lg" role="button">
      原始連接   </a>
   <a href="#" class="btn btn-primary btn-lg disabled" role="button">
      禁用的原始連接   </a>

按鈕標籤

您能夠在 <a>、<button> 或 <input> 元素上使用按鈕 class。可是建議您在 <button> 元素上使用按鈕 class，避免跨瀏覽器的不一致性問題。

七.Bootstrap 圖片

1.Bootstrap 圖片

 

 

在本章中，咱們將學習 Bootstrap 對圖片的支持。Bootstrap 提供了三個可對圖片應用簡單樣式的 class：

 

  • .img-rounded：添加 border-radius:6px 來得到圖片圓角。
  • .img-circle：添加 border-radius:500px 來讓整個圖片變成圓形。
  • .img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框。 
    <img src="https://www.w3cschool.cn/statics/demosource/download.png" class="img-rounded">
<img src="https://www.w3cschool.cn/statics/demosource/download.png" class="img-circle">
<img src="https://www.w3cschool.cn/statics/demosource/download.png" class="img-thumbnail">

2.<img> 類

如下類可用於任何圖片中。

類 描述 實例
.img-rounded 爲圖片添加圓角 (IE8 不支持) 嘗試一下
.img-circle 將圖片變爲圓形 (IE8 不支持) 嘗試一下
.img-thumbnail 縮略圖功能 嘗試一下
.img-responsive 圖片響應式 (將很好地擴展到父元素) 嘗試一下

 

 

八.Bootstrap 輔助類

 

Bootstrap 輔助類

 

本章將討論 Bootstrap 中的一些可能會派上用場的輔助類。

 

文本

 

如下不一樣的類展現了不一樣的文本顏色。若是文本是個連接鼠標移動到文本上會變暗：

 

類 描述 實例
.text-muted "text-muted" 類的文本樣式 嘗試一下
.text-primary "text-primary" 類的文本樣式 嘗試一下
.text-success "text-success" 類的文本樣式 嘗試一下
.text-info "text-info" 類的文本樣式 嘗試一下
.text-warning "text-warning" 類的文本樣式 嘗試一下
.text-danger "text-danger" 類的文本樣式 嘗試一下

 

背景

 

如下不一樣的類展現了不一樣的背景顏色。 若是文本是個連接鼠標移動到文本上會變暗：

 

類 描述 實例
.bg-primary 表格單元格使用了 "bg-primary" 類 嘗試一下
.bg-success 表格單元格使用了 "bg-success" 類 嘗試一下
.bg-info 表格單元格使用了 "bg-info" 類 嘗試一下
.bg-warning 表格單元格使用了 "bg-warning" 類 嘗試一下
.bg-danger 表格單元格使用了 "bg-danger" 類 嘗試一下

 

其餘

 

類 描述 實例
.pull-left 元素浮動到左邊 嘗試一下
.pull-right 元素浮動到右邊 嘗試一下
.center-block 設置元素爲 display:block 並居中顯示 嘗試一下
.clearfix 清除浮動 嘗試一下
.show 強制元素顯示 嘗試一下
.hidden 強制元素隱藏 嘗試一下
.sr-only 除了屏幕閱讀器外，其餘設備上隱藏元素 嘗試一下
.sr-only-focusable 與 .sr-only 類結合使用，在元素獲取焦點時顯示(如：鍵盤操做的用戶) 嘗試一下
.text-hide 將頁面元素所包含的文本內容替換爲背景圖 嘗試一下
.close 顯示關閉按鈕 嘗試一下
.caret 顯示下拉式功能 嘗試一下

 

關閉圖標

使用通用的關閉圖標來關閉模態框和警告框。使用 class close 獲得關閉圖標。

 <button type="button" class="close" aria-hidden="true">
      &times;   </button>

插入符

使用插入符表示下拉功能和方向。使用帶有 class caret 的 <span> 元素獲得該功能。

<p>插入符實例   <span class="caret"></span></p>

快速浮動

您能夠分別使用 class pull-left 或 pull-right 來把元素向左或向右浮動。

div class="pull-left">
   向左快速浮動</div><div class="pull-right">
   向右快速浮動</div>

如需對齊導航欄中的組件，請使用 .navbar-left 或 .navbar-right 代替。

內容居中

使用 class center-block 來居中元素。

如需清除元素的浮動，請使用 .clearfix class。

<div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
   <div class="pull-left" style="background:#58D3F7;">
      向左快速浮動   </div>
   <div class="pull-right" style="background: #DA81F5;">
      向右快速浮動   </div></div>

顯示和隱藏內容

您能夠經過使用 class .show 和 .hidden 來強行設置元素顯示或隱藏（包括屏幕閱讀器）。

屏幕閱讀器

您能夠經過使用 class .sr-only 來把元素對全部設備隱藏，除了屏幕閱讀器。 

九.Bootstrap 響應式實用工具

Bootstrap 響應式實用工具

 

Bootstrap 提供了一些輔助類，以便更快地實現對移動設備友好的開發。這些能夠經過媒體查詢結合大型、小型和中型設備，實現內容對設備的顯示和隱藏。

須要謹慎使用這些工具，避免在同一個站點建立徹底不一樣的版本。響應式實用工具目前只適用於塊和表切換。

  超小屏幕
手機 (<768px)		 小屏幕
平板 (≥768px)		 中等屏幕
桌面 (≥992px)		 大屏幕
桌面 (≥1200px)
.visible-xs-* 可見 隱藏 隱藏 隱藏
.visible-sm-* 隱藏 可見 隱藏 隱藏
.visible-md-* 隱藏 隱藏 可見 隱藏
.visible-lg-* 隱藏 隱藏 隱藏 可見
.hidden-xs 隱藏 可見 可見 可見
.hidden-sm 可見 隱藏 可見 可見
.hidden-md 可見 可見 隱藏 可見
.hidden-lg 可見 可見 可見 隱藏

從 v3.2.0 版本起，形如 .visible-*-* 的類針對每種屏幕大小都有了三種變體，每一個針對 CSS 中不一樣的 display 屬性，列表以下：

類組 CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

所以，以超小屏幕（xs）爲例，可用的 .visible-*-* 類是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。

.visible-xs、.visible-sm、.visible-md 和 .visible-lg 類也同時存在。可是從 v3.2.0 版本開始再也不建議使用。除了 <table> 相關的元素的特殊狀況外，它們與 .visible-*-block 大致相同。

提示：Bootstrap能夠經過一個清晰的佈局來建立表，具體請參考「Bootstrap 表格」部分的內容！

打印類

下表列出了打印類。使用這些切換打印內容。

class 瀏覽器 打印機
.visible-print-block
.visible-print-inline
.visible-print-inline-block		 可見
.hidden-print 可見 
<div class="container" style="padding: 40px;">
   <div class="row visible-on">
      <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;          box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <span class="hidden-xs">特別小型</span>
         <span class="visible-xs">✔ 在特別小型設備上可見</span>
      </div>
      <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;          box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <span class="hidden-sm">小型</span>
         <span class="visible-sm">✔ 在小型設備上可見</span>
      </div>
      <div class="clearfix visible-xs"></div>
      <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;          box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <span class="hidden-md">中型</span>
         <span class="visible-md">✔ 在中型設備上可見</span>
      </div>
      <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;          box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <span class="hidden-lg">大型</span>
         <span class="visible-lg">✔ 在大型設備上可見</span>
      </div>
</div>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程