筆試12：Bootstrap知識

BootStrap

Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。

1 Bootstrap 基本結構

Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。

（1）建立html框架：在pycharm中輸入!，以後tab便可

（2）Bootstrap 安裝。您能夠從 http://getbootstrap.com/ 上下載 Bootstrap 的最新版本。包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用於讓一個常規的 HTML 文件變爲使用了 Bootstrap 的模板。國內推薦使用 Staticfile CDN 上的庫：

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

2 Bootstrap CSS

Bootstrap 3 默認的 CSS 自己就對移動設備友好支持。Bootstrap 3 的設計目標是移動設備優先，而後纔是桌面設備。這其實是一個很是及時的轉變，由於如今愈來愈多的用戶使用移動設備。爲了讓 Bootstrap 開發的網站對移動設備友好，確保適當的繪製和觸屏縮放，須要在網頁的 head 之中添加 viewport meta 標籤，以下所示：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width 屬性控制設備的寬度。假設您的網站將被帶有不一樣屏幕分辨率的設備瀏覽，那麼將它設置爲 device-width 能夠確保它能正確呈如今不一樣設備上。

initial-scale=1.0 確保網頁加載時，以 1:1 的比例呈現，不會有任何的縮放。

• 響應式圖像

<img src="..." class="img-responsive" alt="響應式圖像">

img-responsive class 爲圖像賦予了 max-width: 100%; 和 height: auto; 屬性，可讓圖像按比例縮放，不超過其父元素的尺寸。

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

這代表相關的圖像呈現爲 block。當您把元素的 display 屬性設置爲 block，以塊級元素顯示。設置 height:auto，相關元素的高度取決於瀏覽器。

設置 max-width 爲 100% 會重寫任何經過 width 屬性指定的寬度。這讓圖片對響應式佈局的支持更友好。

若是須要讓使用了 .img-responsive 類的圖片水平居中，請使用 .center-block 類，不要用 .text-center。

body {margin: 0;} 來移除 body 的邊距。請看下面有關 body 的設置：

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

第一條規則設置 body 的默認字體樣式爲 "Helvetica Neue", Helvetica, Arial, sans-serif。最後一條規則設置默認的背景顏色爲白色。

2.1 網格系統

Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。其實就是頁面佈局。

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

• 網格系統工做原理
  • 行必須放置在 .container class 內，以便得到適當的對齊（alignment）和內邊距（padding）。
  • 使用行來建立列的水平組。
  • 內容應該放置在列內，且惟有列能夠是行的直接子元素。
  • 預約義的網格類，好比 .row 和 .col-xs-4，可用於快速建立網格佈局。LESS 混合類可用於更多語義佈局。
  • 列經過內邊距（padding）來建立列內容之間的間隙。該內邊距是經過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。
  • 網格系統是經過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 .col-xs-4。

• 堆疊水平

<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>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
            </p>
 
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
            quae ab illo inventore veritatis et quasi architecto beatae vitae 
            dicta sunt explicabo. 
            </p>
        </div>
 
        <div class="col-md-6" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
            accusantium doloremque laudantium.
            </p>
 
            <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
            consectetur, adipisci velit, sed quia non numquam eius modi 
            tempora incidunt ut labore et dolore magnam aliquam quaerat 
            voluptatem. 
            </p>
        </div>
    </div>
</div>

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

2.2 手機平板電腦通用尺寸

https://www.runoob.com/bootstrap/bootstrap-grid-system-example3.html

2.3 排版

<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>

• 縮寫

• 地址

<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>

• 引用

<blockquote>
  <p>
  這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。這是一個默認的引用實例。
  </p>
</blockquote>
<blockquote>
  這是一個帶有源標題的引用。
  <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>
<blockquote class="pull-right">
  這是一個向右對齊的引用。
  <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>

• 列表

<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>

• 其餘排版

2.4 代碼

Bootstrap 容許您以兩種方式顯示代碼：開始和結束標籤使用了 unicode 變體： < 和 >。

• 第一種是 標籤。若是您想要內聯顯示代碼，那麼您應該使用 標籤。
• 第二種是

   標籤。若是代碼須要被顯示爲一個獨立的塊元素或者代碼有多行，那麼您應該使用 
   標籤。

2.5 表格

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

• 表格類，經過把任意的 .table 包在 .table-responsive class 內，您可讓表格水平滾動以適應小型設備（小於 768px）。當在大於 768px 寬的大型設備上查看時，您將看不到任何的差異。

• , 和 類

基本表格

<table class="table">
  <caption>基本的表格佈局</caption>
  <thead>
    <tr>
      <th>名稱</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
    </tr>
  </tbody>
</table>

2.6 表單

Bootstrap 提供了下列類型的表單佈局：垂直表單（默認），內聯表單，水平表單。建立基本表單的步驟：

• 向父
  元素添加 role="form"。
• 把標籤和控件放在一個帶有 class .form-group 的
  中。這是獲取最佳間距所必需的。
• 向全部的文本元素 、 和 添加 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> 內聯表單，請向 標籤添加 class .form-inline。使用 class .sr-only，您能夠隱藏內聯表單的標籤。 <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> 水平表單 水平表單與其餘表單不只標記的數量上不一樣，並且表單的呈現形式也不一樣。如需建立一個水平佈局的表單，請按下面的幾個步驟進行： 向父 元素添加 class .form-horizontal。 把標籤和控件放在一個帶有 class .form-group 的 中。 向標籤添加 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> Bootstrap 支持最多見的表單控件，主要是 input、textarea、checkbox、radio 和 select。 輸入框 <form role="form"> <div class="form-group"> <label for="name">標籤</label> <input type="text" class="form-control" placeholder="文本輸入"> </div> </form> 文本框，多行輸入使用文本框 textarea。必要時能夠改變 rows 屬性（較少的行 = 較小的盒子，較多的行 = 較大的盒子）。 <form role="form"> <div class="form-group"> <label for="name">文本框</label> <textarea class="form-control" rows="3"></textarea> </div> </form> 複選框和單選框 複選框和單選按鈕用於讓用戶從一系列預設置的選項中進行選擇。 當建立表單時，若是您想讓用戶從列表中選擇若干個選項時，請使用 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="radio-inline"> <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 選項 1 </label> <label class="radio-inline"> <input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> 選項 2 </label> </div> 選擇框，當您想讓用戶從多個選項中進行選擇，可是默認狀況下只能選擇一個選項時，則使用選擇框。 使用 展現列表選項，一般是那些用戶很熟悉的選擇列表，好比州或者數字。
• 使用 multiple="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>

• 靜態控件，在一個水平表單內的表單標籤後放置純文本時，請在

  上使用 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>

2.7 按鈕

如下樣式可用於, , 或 元素上：

• 按鈕實例

<!-- 標準的按鈕 -->
<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>

• 按鈕大小

<p>
  <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>
</p>

• 按鈕狀態

<p>
  <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>
</p>

• 按鈕禁用

<p>
  <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>
</p>

• 按鈕標籤，能夠在 、

或 元素上使用按鈕 class。可是建議您在 元素上使用按鈕 class，避免跨瀏覽器的不一致性問題。

<a class="btn btn-default" href="#" role="button">連接</a>
<button class="btn btn-default" type="submit">按鈕</button>
<input class="btn btn-default" type="button" value="輸入">
<input class="btn btn-default" type="submit" value="提交">

• 按鈕組，使用 .btn-group-lg|sm|xs 來控制按鈕組的大小，若是要設置垂直方向的按鈕能夠經過 .btn-group-vertical 類來設置。經過 .btn-group-justified 類來設置自適應大小的按鈕組。

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

• 內嵌下拉菜單按鈕組

<div class="container">
  <h2>內嵌按鈕組</h2>
  <p>內嵌按鈕組建立下拉菜單：</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Sony <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Tablet</a></li>
        <li><a href="#">Smartphone</a></li>
      </ul>
    </div>
  </div>
</div>

• 分隔按鈕

<div class="container">
  <h2>分隔按鈕</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

2.8 圖片

Bootstrap 提供了三個可對圖片應用簡單樣式的 class：

• .img-rounded：添加 border-radius:6px 來得到圖片圓角。
• .img-circle：添加 border-radius:50% 來讓整個圖片變成圓形。
• .img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框。

<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">

• img類

• 響應式圖片

經過在 標籤添加 .img-responsive 類來讓圖片支持響應式設計。 圖片將很好地擴展到父元素。.img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應用在圖片上：

3 Bootstrap 佈局組件

3.1 基本佈局

• 使用圖標，在圖標和文本之間保留適當的空間

<button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-user"></span> User
</button>

• 帶有字體圖標的導航欄

<body>
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart"></span> Shop</a></li>
                <li><a href="#support"><span class="glyphicon glyphicon-headphones"></span> Support</a></li>
            </ul>
        </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
</div>
</body>

• 查看更多小圖標：https://www.runoob.com/bootstrap/bootstrap-glyphicons.html
• 下拉菜單。只須要在 class .dropdown 內加上下拉菜單便可。

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主題
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">數據挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">數據通訊/網絡</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分離的連接</a>
        </li>
    </ul>
</div>

• 按鈕組

按鈕大小

• 導航元素

• 導航欄

建立一個默認的導航欄的步驟以下：

• 向
  標籤添加 class .navbar、.navbar-default。
• 向上面的元素添加 role="navigation"，有助於增長可訪問性。
• 向
  元素添加一個標題 class .navbar-header，內部包含了帶有 class navbar-brand 的 元素。這會讓文本看起來更大一號。
• 爲了嚮導航欄添加連接，只須要簡單地添加帶有 class .nav、.navbar-nav 的無序列表便可。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鳥教程</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分離的連接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另外一個分離的連接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

• 分頁

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

• 標籤

• 徽章

• 縮略圖

• 警告

• 進度條

3.2 建立一個網站的基本架構

<div class="jumbotron text-center" style="margin-bottom:0">
  <h1>個人第一個 Bootstrap 頁面</h1>
  <p>重置瀏覽器窗口大小查看效果！</p> 
</div>
 
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">網站名</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">主頁</a></li>
        <li><a href="#">頁面 2</a></li>
        <li><a href="#">頁面 3</a></li>
      </ul>
    </div>
  </div>
</nav>
 
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h2>關於我</h2>
      <h5>個人照片:</h5>
      <div class="fakeimg">這邊插入圖像</div>
      <p>關於個人介紹..</p>
      <h3>連接</h3>
      <p>描述文本。</p>
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">連接 1</a></li>
        <li><a href="#">連接 2</a></li>
        <li><a href="#">連接 3</a></li>
      </ul>
      <hr class="hidden-sm hidden-md hidden-lg">
    </div>
    <div class="col-sm-8">
      <h2>標題</h2>
      <h5>副標題</h5>
      <div class="fakeimg">圖像</div>
      <p>一些文本..</p>
      <p>菜鳥教程，學的不只是技術，更是夢想！！！菜鳥教程，學的不只是技術，更是夢想！！！菜鳥教程，學的不只是技術，更是夢想！！！</p>
      <br>
      <h2>標題</h2>
      <h5>副標題</h5>
      <div class="fakeimg">圖像</div>
      <p>一些文本..</p>
      <p>菜鳥教程，學的不只是技術，更是夢想！！！菜鳥教程，學的不只是技術，更是夢想！！！菜鳥教程，學的不只是技術，更是夢想！！！</p>
    </div>
  </div>
</div>
 
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>底部內容</p>
</div>

4 Bootstrap 面試總結

http://www.javashuo.com/article/p-xhcuwvvk-eh.html