最好懂的 Bootstrap 實戰案例教程

阿新 • • 發佈：2019-01-05

我們每期會根據不用的專案案例安排不同的技術棧免費課程！免費！免費！免費！來幫助大家提高，有興趣的同學可以私信我哦~
所有專案都是以真實專案為實戰例。

我們在開發前端頁面的時候，如果每一個按鈕、樣式、處理瀏覽器相容性的程式碼都要自己從零開始去寫，那就太浪費時間了。所以我們需要一個框架，幫我們實現一個頁面的基礎部分和解決一些繁瑣的細節，只要在它的基礎上進行個性化定製就可以了。

Bootstrap 就是這樣一個簡潔、直觀、強悍的前端開發框架，只要學習並遵守它的標準，即使是沒有學過網頁設計的開發者，也能做出很專業、美觀的頁面，極大地提高了工作效率。像下面這個漂亮的網站就是基於 Bootstrap

來開發的。

Bootstrap 的中文文件地址在這裡 Bootstrap 中文文件，目前主流版本為 3.3.x。不過因為文件的內容結構比較零散，只是從頭到尾把一個個元件拆開來講一遍，缺乏趣味性和實戰性（這也是現在很多教程的通病），因此在本教程中，我們會自己動手開發一個完整的企業網站案例，在實踐的過程中來學習和理解 Bootstrap這個前端開發框架的知識。

注意

為了鍛鍊你閱讀文件和主動學習的能力，我們只會把每個知識點最核心的知識告訴你，而它的擴充套件知識將以連結的形式附在後面。

企業網站是十分常見的一種頁面形式。一般包括一個展示企業形象的首頁、幾個介紹企業資料的文章頁、一個“關於”頁面。如下就是最終的首頁效果。（當然了，這個介面還是比較粗糙的，不過我們這個教程重點是 Bootstrap

的學習，如果你要深入學習 CSS 樣式方面的知識，請參看我們的相關教程）

專案結構與頁面規劃

我們先建立站點目錄，例如放在 web 站點 /home/wwwroot/htdocs/wx-xxmm 下，在裡面新建一個 Template 目錄，用於存放頁面 html 檔案，新建一個 assets 目錄，存放圖片、自定義樣式表等靜態資原始檔，以及一個 js 目錄，存放自己寫的 javascript 程式碼。

然後在 Template 目錄裡，把這個專案的所有檔案建立好：

首頁(Home_index.html)
客戶案例詳情(Home_case.html)
聯絡方式及意見反饋表單(Home_about.html)

首頁

首頁的效果圖前面有展示，它包括這幾個區域。做任何頁面之前，我們都要先把結構規劃好，這樣腦子裡有清晰的思路，工作起來才有效率。

導航條
輪播圖
客戶案例列表
產品截圖列表
底部網站資訊

首頁 HTML 骨架與素材準備

然後準備幾張圖片素材（分別是輪播圖、客戶案例、產品截圖，各 3 張），把它們放到 assets 目錄裡面。然後在 assets 目錄裡面新建一個 style.css 檔案，用於儲存自定義樣式。

然後在 Template 目錄裡新建檔案 Home_index.html ，按照上面規劃的頁面結構，寫好這些基礎的 HTML 和 CSS 程式碼，把頁面的骨架搭好。

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../assets/style.css" rel="stylesheet">
</head>
<body>
    <!--導航-->
    <div class="nav">
        <a href="">微信公眾號管家</a>
        <ul>
            <li><a href="">首頁</a></li>
            <li><a href="">關於</a></li>
            <li><a href="">登入</a></li>
        </ul>
    </div>
    <!--輪播圖-->
    <div class="slide">
        <div>
            <h1>輪播圖1</h1>
            ![](../assets/slide_1.jpg)</div>
        <div>
            <h1>輪播圖2</h1>![](../assets/slide_2.jpg)</div>
        <div>
            <h1>輪播圖3</h1>![](../assets/slide_3.jpg)</div>
    </div>
    <!--案例-->
    <div class="case">
        <div>
            <h2>案例1</h2>
            ![](../assets/case_1.jpg)
        </div>
        <div>
            <h2>案例2</h2>
            ![](../assets/case_2.jpg)
        </div>
        <div>
            <h2>案例3</h2>
            ![](../assets/case_3.jpg)
        </div>
    </div>
    <!--產品功能截圖-->
    <div class="screenshoot">
        <div>
            <h2>截圖1</h2>![](../assets/screenshot_1.jpg)</div>
        <div>
            <h2>截圖2</h2>![](../assets/screenshot_2.jpg)</div>
        <div>
            <h2>截圖3</h2>![](../assets/screenshot_3.jpg)</div>
    </div>
    <!--底部-->
    <div class="footer">
        版權所有 2016
        <a href="">四光年科技</a>
    </div>
</body>
</html>

注意我們在頁面裡引入了樣式表文件 ../assets/style.css（目前這個檔案裡面是空的）

在瀏覽器裡開啟這個頁面，看看是否正常訪問。因為沒有寫任何 CSS 樣式程式碼，看上去挺醜的。

引入 Bootstrap 框架相關檔案

前面說到 Bootstrap 是一個前端開發框架。其實說白了就是一個樣式表文件（bootstrap.min.css）和一個 javascript 檔案（bootstrap.min.js），在頁面裡把它們引入進來後，就可以直接使用裡面的 CSS 規則和各種元件了。

遠端 CDN 引入方式

編輯 Home_index.html ，把幾個 Bootstrap 框架包含的檔案新增進來，這裡推薦使用 CDN 源上的遠端檔案，可以節約本地的頻寬。

另外，由於 Bootstrap 還依賴 jQuery 庫，所以也要一併把這個 jquery.min.js 檔案引入。

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="../assets/style.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

注意這幾個檔案的前後順序，如果不對，會導致頁面無法正常執行。

先引入 bootstrap.min.css （Bootstrap的樣式表文件）
然後引入自己寫的 css 檔案（style.css）
然後引入 jQuery（javascript 庫）
最後引入 bootstrap.min.js 程式檔案

本地檔案引入方式

如果在沒有聯網的環境，或者用上面的方式引入檔案後瀏覽器報錯，可以把 Bootstrap 的所有檔案下載到本地後再引用到頁面中。開啟下面這個地址，把壓縮包下載後解壓，全部放到 assets 目錄的 bootstrap 裡面。

然後修改 Home_index.html 裡的引入檔案程式碼，使用本地引用檔案的方式來使用 Bootstrap 。

<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<link href="../assets/style.css" rel="stylesheet">
<script src="../assets/jquery.min.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>

Bootstrap 做了些什麼？

開啟 assets/bootstrap/ 目錄下的樣式表文件 bootstrap.min.css ，可以看到裡面定義了大量的 CSS 規則，例如下面這段就定了一個類名為 btn-primary 的規則。

.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}

現在測試一下，在 Home_index.html 檔案裡面寫一個按鈕，新增 class 為 btn btn-primary 。

<body>
    <button type="button" class="btn btn-primary">按鈕</button>
</body>

重新整理頁面，你會看到一個藍色的按鈕。不需要自己寫一行 CSS 程式碼，只要在頁面裡面給某個元素指定一個 class ，就可以直接顯示出預定的樣式—— 這就是使用 Bootstrap 前端框架的魔力。

使用導航條元件

導航條位於頁面最頂部，提供整個網站所有頁面的連結，最終效果如下：

我們可以直接使用 Bootstrap 的導航條元件

<!--導航-->
<nav class="navbar navbar-default">
   <div class="container-fluid">
       <ul class="nav navbar-nav">
           <li class="active"><a href="">首頁</a></li>
           <li><a href="">關於</a></li>
           <li><a href="">登入</a></li>
       </ul>
   </div>
</nav>

新增一個 nav 標籤，並設定 class 為 navbar navbar-default ，role 為 navigation 。
然後在裡面新增一個類名為 container-fluid 的 div ，用來容納導航條裡的其他元素（連結、按鈕等）。
新增一些導航連結 <li> ，然後把第一個 <li> 的 class 指定為 active ，表示啟用狀態。

重新整理頁面，一個漂亮的導航條就誕生了！我們只是寫了一些 HTML 程式碼，沒有寫一句 CSS 程式碼，非常省時省力。

導航條還漏了一個“網站標題”，把下面這段 <div class="navbar-header"> 新增到 <ul class="nav navbar-nav"> 的前面就可以了

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <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="#">微信公眾號管家</a>
  </div>

  <ul class="nav navbar-nav">
    <li class="active"><a href="">首頁</a></li>

如果要新增更多的效果，例如下拉選單、固定在頂部等等，請在文件中檢視，相信你現在應該很容易看明白了。

學一門新知識的最好辦法是通過實踐操作，由淺入深，先入門再填坑，不要從頭到尾去看枯燥的文件，先用起來，掌握最核心的知識點，然後再去了解其他延伸的內容。我們的課程不是“照本宣科讀文件”，更重要的是培養你的學習方法。

使用輪播圖元件

為了實現一個輪播圖效果（也有人叫“幻燈片”），以前我們可能會自己寫程式碼，或者去找 jQuery 的外掛。其實 Bootstrap 已經自帶了一個輪播元件—— Carousel ，效果如下：

<!--輪播圖-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
   <!-- Indicators -->
   <ol class="carousel-indicators">
       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
       <li data-target="#carousel-example-generic" data-slide-to="1"></li>
       <li data-target="#carousel-example-generic" data-slide-to="2"></li>
   </ol>
   <!-- Wrapper for slides -->
   <div class="carousel-inner" role="listbox">
       <div class="item active">
           ![](../assets/slide_1.jpg)
           <div class="carousel-caption">
               <h1>輪播1的標題</h1>
               <p>這裡是輪播圖1的說明</p>
           </div>
       </div>
       <div class="item">
           ![](../assets/slide_2.jpg)
           <div class="carousel-caption">
               <h1>輪播2的標題</h1>
               <p>這裡是輪播圖2的說明</p>
           </div>
       </div>
       <div class="item">
           ![](../assets/slide_3.jpg)
           <div class="carousel-caption">
               <h1>輪播3的標題</h1>
               <p>這裡是輪播圖3的說明</p>
           </div>
       </div>
   </div>
   <!-- Controls -->
   <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
       <span class="glyphicon glyphicon-chevron-left"></span>
       <span class="sr-only">Previous</span>
   </a>
   <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
       <span class="glyphicon glyphicon-chevron-right"></span>
       <span class="sr-only">Next</span>
   </a>
</div>

輪播圖元件分三部分

<ol class="carousel-indicators"> 是“指示器”，就是下方的那三個白色小點，標記當前播放到哪張圖片了。
<div class="carousel-inner" role="listbox"> 裡面是主體內容區域，包括幾張圖片和對應說明，分別用 <div class="item"> 包裹起來
最後的兩個 <a class="left carousel-control"> 元素是手動操作圖片左右切換的按鈕。

使用自定義樣式來完善 Bootstrap 預設樣式

重新整理頁面，幾張圖片開始自動播放。但是我們會發現一個問題——如果三張圖片大小不一致，這個輪播區域會忽大忽小地變化。

這種情況就是 Bootstrap 力不能及的範圍了，因為它不知道我們將會使用什麼樣的素材，因此要自己寫一些自定義樣式的 CSS 程式碼來處理這些特殊的情況。

開啟自定義樣式表文件 assets/style.css ，在裡面新增如下的程式碼，把圖片高度固定設定為 500px，並且設定最小寬度為 100% ，撐滿頁面。

.carousel-inner > .item > img {
  min-width: 100%;
  height: 500px;
}

好了，現在輪播圖的圖片滾動很正常了。

客戶案例列表

在這個區域中，有三個寬度均等的橫向排列的小塊，每個小塊是由一個圓形圖片和一些說明文字組成。最終效果如下:

柵格佈局

想想看，如果是你自己寫 CSS ，準備怎樣實現這個均等排列的效果？例如下面通過設定固定寬度/百分比來處理：

.item { float:left, width: 300px; /*或者 width: 33%*/ }

如果一行要顯示4個、6個、或者更多呢？這樣計算起來就太不靈活了（100/6 等於 16.6666666……）。

其實我們並不關心每一份的寬度是多少畫素/百分比，我們只關心能不能自動地平均劃分成多少份， Bootstrap 的柵格系統佈局就是為了實現自動計算每一份的寬度而誕生的。

柵格可以理解為一個安全門，它的總長度可以拉長，可以縮短，但是總的間隔數量是不變的，並且所有間隔的寬度都一樣。

這個伸縮的過程，像不像我們把瀏覽器拉寬、變窄的操作？ Bootstrap 的柵格系統規定了每個頁面的寬度被平均劃分為 12 等份，不管整個頁面的寬度是 1000畫素，還是500畫素，都會自動計算每一份（1/12）的寬度是多少。

通過給柵格佈局內部的元素指定 class 為 col-md-份數 ，來告訴它的寬度佔據這12份裡面的幾份。

例如下面的程式碼中，有3個 div 的 class 為 col-md-4（先不管中間那個 -md- 是什麼，關注這個數字就好），算一算4 + 4 + 4 是不是正好等於 12？

<div class="container">
    <div class="row">
        <div class="col-md-4">bb</div>
        <div class="col-md-4">cc</div>
        <div class="col-md-4">ee</div>
    </div>
</div>

重新整理頁面，然後用 Chrome 瀏覽器的開發工具看看效果，發現整個頁面的寬度正好被平均分成了 3 份(12/4 = 3)。柵格系統自動幫我們計算了這 3 份的寬度。

舉一反三，如果要把頁面平均分為 6 份，那每一份的 class 就應該指定 col-md-2 (12/6 = 2)；如果是 4 份， class 就是 col-md-3（12/4 = 3）

完整的柵格佈局的說明在這裡，一開始看不懂沒有關係，自己多動手試試就明白了。一定要動手實踐！

圓形圖片樣式

雖然自己寫一個 CSS 規則 border-radius: 50% 也可以實現圓形圖片，但是如果能夠少寫一行程式碼，為什麼不偷個懶呢（不要重複造輪子）， Bootstrap 提供了一個圓形圖片的 CSS 類 – img-circle（從名稱就能看出來它的作用是什麼）。

好了，知道柵格佈局方式，和圓形圖片樣式，可以把“案例列表”的 HTML 程式碼改造一下了。

<!--案例-->
<div class="case container">
   <div class="row">
       <div class="col-md-4">
           ![](../assets/case_1.jpg)
           <h2>案例1</h2>
           <p>非常不錯的產品，我很喜歡</p>
       </div>
       <div class="col-md-4">
           ![](../assets/case_2.jpg)
           <h2>案例2</h2>
           <p>非常不錯的產品，我很喜歡</p>
       </div>
       <div class="col-md-4">
           ![](../assets/case_3.jpg)
           <h2>案例3</h2>
           <p>非常不錯的產品，我很喜歡</p>
       </div>
   </div>
</div>

另外，和輪播圖一樣，為了防止圖片大小不一致導致的頁面錯亂，還要在 style.css 裡新增一些自定義的樣式，固定圖片大小，然後把每個元素的內部設定為居中對齊。

.case {
  text-align: center;
  margin-top: 20px;
}
.case img {
  height: 200px;
}

Bootstrap 還提供了“圓角圖片”、帶邊框線的“縮圖樣式”等圖片樣式，也可以直接使用，在這裡檢視文件

產品截圖列表——用柵格佈局將頁面拆分成左右寬度不一樣的兩欄

先回顧一下前面的知識：怎樣用柵格佈局把頁面切割成若干等份？

思考一下：如果我們要把頁面分成左右兩欄，但是兩欄寬度不一樣，應該怎麼做呢？

其實 Bootstrap 的柵格佈局同樣可以實現這種“寬度不一致的分割”。最終效果：

<div class="container">
   <div class="row">
       <div class="col-md-4">bb</div>
       <div class="col-md-8">cc</div>
   </div>
</div>

左邊的 <div> 佔有 4 份（col-md-4），右邊的

佔有 8 份（col-md-8），但是加起來總數還是 12 份

在 Chrome 裡看到效果如下，確實是左邊的一欄相對較窄，右邊的一欄較寬一些。

開始修改“產品截圖”區域的程式碼，從上到下共有三行，每行的一欄是圖片，佔有 5 份寬度（col-md-5）；另一欄是說明文字，佔據剩下的 7 份寬度（col-md-7）。

<!--產品功能截圖-->
    <div class="container screenshot">
        <div class="row item">
            <div class="col-md-5">![](../assets/screenshot_1.jpg)</div>
            <div class="col-md-7">
                <h2>截圖1</h2>
                <p>截圖說明1，截圖說明1，截圖說明1，截圖說明1，截圖說明1，</p>
            </div>
        </div>
        <div class="row item">
            <div class="col-md-7">
                <h2>截圖2</h2>
                <p>截圖說明2，截圖說明2，截圖說明2，截圖說明2，截圖說明2，</p>
            </div>
            <div class="col-md-5">![](../assets/screenshot_2.jpg)</div>
        </div>
        <div class="row item">
            <div class="col-md-5">![](../assets/screenshot_3.jpg)</div>
            <div class="col-md-7">
                <h2>截圖3</h2>
                <p>截圖說明3，截圖說明3，截圖說明3，截圖說明3，截圖說明3，</p>
            </div>
        </div>
    </div>

注意，我們在第二行把圖片和文字的左右順序交換了一下，這樣看起來錯落有致、更美觀一些。

同樣，再新增一點自定義的 CSS 程式碼，在每一行之間顯示一條分割線，並且預留一些空白。

.screenshot .item {
  border-top: 1px solid #CCC;
  padding-bottom: 30px;
  padding-top: 20px;
}

頁面底部

這部分沒什麼特別的內容，使用 HTML5 的新增標籤 <footer></footer> ，使之更“語義化”（程式碼也少了幾個字母……）。

<!--底部-->
<div class="container">
  <footer>
      微信公眾號管家版權所有 2016
      <a href="">四光年科技</a>
  </footer>
</div>

覆蓋 Bootstrap 的預設樣式

其實除了可以新增自定義樣式外，還可以覆蓋掉 Bootstrap 的預設樣式，讓它更符合我們的要求。

比如，把頂部的導航條改成黑色底，白色文字。

.navbar {
  background-color: #000;
}
.navbar-nav li a, .navbar-nav li a:focus, .navbar-nav li a:visited {
  color: #FFF;
}

其實這個效果完全不用這麼麻煩，直接用一個 Bootstrap 自帶的 class 就可以實現。我們在做頁面的時候，儘可能優先使用已有的元件、樣式，不要自己去寫，一來節省時間，二來可以避免很多不可預料的問題。

客戶案例詳情頁

新建一個檔案 Home_case.html ，客戶案例詳情頁實際上和平時常見的 “新聞內容頁”、“產品介紹頁”非常類似，我們這裡先做個簡化版。最終效果如下：

佈局

把頁面分成左右兩欄，左邊是正文區域，右邊是相關資訊，通過柵格系統來佈局可以很容易實現。

<div class="container">
    <div class="row">
     <div class="col-md-9">
       <!--正文-->
     </div>
     <div class="col-md-3">
        <!--相關資訊-->
     </div>
    </div>
</div>

大標題與小標題

進入正文區域（在 <div class="col-md-9"> 內部），首先新增大標題與小標題，在 Bootstrap 裡有專門的類 <div class="page-header"> 。
<small> 標籤可以讓裡面的文字大小為父元素的 85%，比如下面的程式碼中， <small> 裡面的文字大小，是 <h1> 裡面其他文字大小的 85%。

<div class="page-header">
      <h1>四光年科技<small>有價值的、有趣的資訊服務</small></h1>
    </div>

內容摘要——使用“引用”

<blockquote>
  <p>交給你全棧開發的一招一式，我們不會裝作什麼都懂，也不會教你花架子，只是能保證你學完後，擁有自己的一套內功心法，能舉一反三，輕鬆寫程式碼</p>
</blockquote>

在正文內容區域使用各種文字效果

除了平時常用的 <b>（加粗）、<i>（斜體）、<u>（刪除）等，還可以使用這幾個更“語義化”的 HTML5 標籤。

高亮 <mark></mark>
刪除 <del></del>
著重 <strong></strong>
插入的文字 <ins></ins>

<p>
     <strong>程式設計師修煉之道</strong>
 </p>
 <p>
<mark>“衣帶漸寬終不悔，為伊消得人憔悴”</mark>，程式設計大約有三個境界，新手、高手和<del>高不成低不就的中手</del>，適合新手的教程很多，指導中手的教程卻很少；沒有幾十萬行程式碼的錘鍊或者長期在一個高手團隊裡打磨切磋，中手需要在這個層次“眾裡尋他千百度”，才能“驀然回首”。 <ins>我們偏好實踐，以正確的原則指導正確的行動</ins>
 </p>

另有幾種文字樣式不太常見，請自行閱讀文件

居中對齊

在正文中插入一張圖片，預設是左對齊的。我們將它用一個 <div class="text-center"> 包裹起來，這樣它內部的所有元素都居中對齊了。

<p class="text-center">
     ![](../assets/screenshot_1.jpg)
 </p>

實際上這個類的作用和下面的 CSS 規則產生的效果是一樣的

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

顯示“程式碼”

如果這篇文章是和程式開發有關的，很有可能需要顯示一段程式碼，為了和其他普通文字區分開來，我們要把程式碼用 <code> 或者 <pre> 包裹起來，前者是行內程式碼，後者是塊程式碼

程式碼.png

<p>聽說 PHP 很簡單，常用的函式有<code>echo</code>、<code>is_array</code>、<code>mysql_connect</code>等等</p>
<p>
    例如
     <pre>
     // example
     if($a == 1){
         echo 'variable a = 1';
     }else{
         echo 'variable a = 2';
     }
     </pre>
 </p>

更多可以使用的程式碼樣式，請參看文件

頂和踩——按鈕的使用與外觀

在文章的最後，我們可以讓使用者表達下自己的看法，是喜歡還是討厭。這裡新增兩個按鈕，一個是“頂”，一個是“踩”，並且用不同的顏色來區分。效果如