開始

在前面的11章教程中，我們並沒有使用 bootstrap 這也是處於對降低門檻方面的考慮，事實上，Laravel 已經預設集成了 bootstrap 框架，我們很容易就能使用它

bootstrap 是世界上使用最廣泛的前端框架之一，它提供了一套簡介、精美的UI元件，幾乎涵蓋了網站上常用的所有功能，如果你的應用對樣式的要求不是特別高，使用 bootstrap 將是最好的選擇

基礎知識介紹

bootstrap

百度百科對 bootstrap 的介紹
Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。

Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。

它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。

Bootstrap提供了優雅的HTML和CSS規範，它即是由動態CSS語言Less寫成。Bootstrap一經推出後頗受歡迎，一直是GitHub上的熱門開源專案，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該專案。國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基於Bootstrap原始碼進行效能優化而來。

bootstrap 中文網

一些 bootstrap 樣式截圖

按鈕元件：

導航欄：

下拉選單：

一般來說，bootstrap 是給後端開發人員用的，因為使用 bootstrap 你可以快速搭建一套網站前端頁面，並且樣式看起來也過得去

但是如果你對前端開發感興趣，也可以從學習 bootstarp 入手，畢竟 bootstrap 中凝結了很多前輩的經驗，有很多值得學習借鑑之處

npm

百度百科對 npm 的介紹

NPM的全稱是Node Package Manager ，是一個NodeJS包管理和分發工具，已經成為了非官方的釋出Node模組（包）的標準。

如果你熟悉ruby的gem，Python的pypi、setuptools，PHP的pear，那麼你就知道NPM的作用是什麼了。

Nodejs自身提供了基本的模組，但是開發實際應用過程中僅僅依靠這些基本模組則還需要較多的工作。

幸運的是，Nodejs庫和框架為我們提供了幫助，讓我們減少工作量。

但是成百上千的庫或者框架管理起來又很麻煩，有了NPM，可以很快的找到特定服務要使用的包，進行下載、安裝以及管理已經安裝的包。

為什麼要使用 npm？

這裡引用 知乎 上的一篇文章中的介紹：

當一個網站依賴的程式碼越來越多，程式設計師發現這是一件很麻煩的事情：

去 jQuery 官網下載 jQuery

去 BootStrap 官網下載 BootStrap

去 Underscore 官網下載 Underscore

…

有些程式設計師就受不鳥了，一個擁有三大美德的程式設計師 Isaac Z. Schlueter （以下簡稱 Isaaz）給出一個解決方案：用一個工具把這些程式碼集中到一起來管理吧！

這個工具就是他用 JavaScript （執行在 Node.js 上）寫的 npm，全稱是 Node Package Maganer

NPM 的思路大概是這樣的：

買個伺服器作為程式碼倉庫（registry），在裡面放所有需要被共享的程式碼

發郵件通知 jQuery、Bootstrap、Underscore 作者使用 npm publish 把程式碼提交到 registry 上，分別取名 jquery、bootstrap 和 underscore（注意大小寫）

社群裡的其他人如果想使用這些程式碼，就把 jquery、bootstrap 和 underscore 寫到 package.json 裡，然後執行 npm install ，npm 就會幫他們下載程式碼

下載完的程式碼出現在 node_modules 目錄裡，可以隨意使用了。

這些可以被使用的程式碼被叫做「包」（package），這就是 NPM 名字的由來：Node Package(包) Manager(管理器)。

來源：知乎

作者：方應杭

gulp

簡單來說，gulp 是一個前端工作流管理工具，你可以把他理解成一個可以幫你執行繁雜任務的工具，在本實驗後面將使用gulp完成前端程式碼的整合編譯

gulp 中文網

中文文件

laravel-elixir

文件中對 laravel-elixir 的介紹

Laravel Elixir 提供了簡潔流暢的 API，讓你能夠在你的 Laravel 應用程式中定義基本的 Gulp 任務。Elixir 支援許多常見的 CSS 與 JavaScrtip 前處理器，甚至包含了測試工具。使用鏈式呼叫，Elixir 讓你流暢地定義開發流程，例如：

elixir(function(mix) {
    mix.sass('app.scss')
       .coffee('app.coffee');
});

如果你曾經對於上手 Gulp 及編譯資原始檔感到困惑，那麼你將會愛上 Laravel Elixir，不過 Laravel 並不強迫你使用 Elixir，你可以自由的選用你喜歡的自動化開發流程工具。

laravel-elixir 文件

sass

百度百科對 sass 的介紹

Sass 擴充套件了 CSS3，增加了規則、變數、混入、選擇器、繼承等等特性。Sass 生成良好格式化的 CSS 程式碼，易於組織和維護。

Sass 是對CSS3（層疊樣式表）的語法的一種擴充，它可以使用巢狀、混入、選擇子繼承等功能，可以更有效有彈性的寫出Stylesheet。

Sass最後還是會編譯出合法的CSS讓瀏覽可以使用，也就是說它本身的語法並不太容易讓瀏覽器識別（雖然它和CSS的語法非常的像，幾乎一樣），因為它不是標準的CSS格式，在它的語法內部可以使用動態變數等，所以它更像一種極簡單的動態語言。

sass 入門

安裝 bootstrap

因為 Laravel 預設集成了 bootstrap 所以安裝也比較簡單，Laravel 使用 nodejs 的包管理工具 npm 來對 bootstrap 進行整合

package.json 檔案介紹

package.json 檔案是 npm 的配置檔案，裡邊記錄了專案用到的擴充套件包，每次執行 npm install 的時候，npm 就會根據 package.json 檔案中的列表逐個安裝擴充套件包，開啟 laravel 目錄下的 package.json 檔案

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8"
  },
  "dependencies": {
    "laravel-elixir": "^4.0.0",
    "bootstrap-sass": "^3.0.0",
    "babel-preset-es2015": "~6.22.0",
    "babel-preset-react": "~6.22.0"
  }
}

如果你設定了”private”: true , npm 就不會執行釋出，這是為了防止無意中將私有庫釋出的情況

我們可以看到有 devDependencies 和 dependencies 兩個物件

devDependencies 裡面包含的是開發環境需要用到的擴充套件

dependencies 裡面包含的是生產環境（應用執行）需要用到的擴充套件

比如我們的 gulp 是用來編譯我們的 css js 等靜態資源的，一旦編譯好了放到伺服器上就不需要再執行 gulp 了

也就是說伺服器（生產環境）不需要 gulp 而我們的本機（開發環境）需要 gulp

所以 gulp 就放在了 devDependencies 裡而不是 dependencies 裡

gulp laravel-elixir bootstrap-sass 都是 Laravel 預設整合的

下面兩個 babel 的元件是我為了修復一些bug加入的，可以忽略

安裝

package.json　檔案配置好後，就可以在根目錄下執行npm install來安裝全部的元件包

因為國內牆的原因 npm install執行通常會非常慢，甚至卡死，所以一般使用 npm 國內映象源加速，方法如下:

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

上面命令安裝好 cnpm 以後，以後就可以直接使用 cnpm 命令來安裝依賴了

cnpm install

但是即便使用國內映象加速後，安裝依賴包還是要耗費一些時間，所以實驗樓的線上環境已經為大家執行過了 npm install ，gulp 可以直接使用

使用 bootstrap
在 Laravel 中使用 bootstrap 大概需要這麼幾個步驟

1.安裝 bootstrap 程式碼
2.編寫 sass 原始檔
3.編寫 js 原始檔
4.配置 gulpfile.js
5.編譯生成 css 和 js 檔案
6.在html中引入 css 和 js 檔案
7.編寫 bootstrap 風格的程式碼即可
現在我們已經完成了 bootstrap 程式碼的安裝，如果你好奇 bootstrap 程式碼裝在哪裡了
可以開啟程式碼根目錄，找到 node_modules/bootstrap-sass 目錄即可

編寫 sass 原始檔

開啟程式碼根目錄下的 resources/assets/sass/app.sass 檔案resources/assets/sass/app.sass

// @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

可以看到只有一行程式碼，這行程式碼的意思就是在該檔案中引入 bootstrap ，但是預設是註釋掉的，所以我們刪掉註釋儲存

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

當然了，除了引入 bootstrap 我們也可以在該檔案中編寫我們自己的樣式程式碼，但是要符合 sass 的編碼格式

編寫 js 原始檔

開啟程式碼根目錄下的 resources/assets 目錄，建立一個 js 資料夾，然後在 js 資料夾中建立一個 app.js 並加入如下程式碼
resources/assets/js/app.js

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

可以看到，在載入 bootstrap 之前，引入了 jquery ，因為 bootstrap 的 javascript 程式碼依賴 jquey 庫

所以，我們還需要安裝一下 jquery ，同樣使用 npm 安裝，在程式碼根目錄下執行如下命令

npm install jquery --save

當然了，除了引入 bootstra 我們也可以在 app.js 檔案中編寫我們自己的 javascript 程式碼

配置 gulpfile.js

開啟程式碼根目錄下的 gulpfile.js 修改為如下程式碼

var elixir = require('laravel-elixir');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {
    mix.sass('app.scss')
       .browserify('app.js');
});

編譯

sass 和 js 都編寫完成之後，就可以執行編譯了

在程式碼根目錄下執行命令

gulp

你也可以執行

gulp --production

加上 –production 字尾，會將編譯後的程式碼再進行壓縮，使靜態檔案的體積最小化，一般在放到生產環境之前都要執行該命令，有興趣的同學可以試一試，然後開啟 public/css 或者 public/js 目錄看一下生成的檔案效果

如果 public 目錄下 生成了 css 和 js 目錄，說明編譯成功

引用

最後一步就是在檢視檔案中引用編譯生成的 css 和 js 檔案

開啟 resources/views/welcome.blade.php 檔案，修改為如下程式碼
resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

        <!-- style -->
        <link rel="stylesheet" href="/css/app.css">
    </head>
    <body>
        <h1>Home</h1>

        <!-- js -->
        <script src="/js/app.js"></script>
    </body>
</html>

使用

現在 bootstrap 應該已經可以使用了，開啟瀏覽器，訪問 http://localhost

其實現在 bootstrap 已經起作用了，因為看 home 的樣式就看得出來是 bootstarp 對 h1 的樣式

我們可以在瀏覽器上右鍵，然後選擇檢視頁面原始碼，來驗證一下是不是已經成功載入了 bootstrap

可以看到，CSS 和 JS 都成功載入了

現在就可以愉快的使用 bootstrap 了，我們可以開啟 bootstarp 文件選擇一些喜歡的樣式

比如說我們想要一個導航欄

直接貼上程式碼到我們的網站中
resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

        <!-- style -->
        <link rel="stylesheet" href="/css/app.css">
    </head>
    <body>
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <form class="navbar-form navbar-left">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
              </form>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>

        <!-- js -->
        <script src="/js/app.js"></script>
    </body>
</html>

是不是很簡單？並且樣式也還過得去，不算很醜

當然了，如果你對樣式不滿意，就只能在他的基礎上進行一些修改，這就需要一些前端功底了

再舉幾個栗子

比如想要一些按鈕

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

        <!-- style -->
        <link rel="stylesheet" href="/css/app.css">
    </head>
    <body>
        .
        .
        .

        <!-- Standard button -->
        <button type="button" class="btn btn-default">Default</button>

        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
        <button type="button" class="btn btn-primary">Primary</button>

        <!-- Indicates a successful or positive action -->
        <button type="button" class="btn btn-success">Success</button>

        <!-- Contextual button for informational alert messages -->
        <button type="button" class="btn btn-info">Info</button>

        <!-- Indicates caution should be taken with this action -->
        <button type="button" class="btn btn-warning">Warning</button>

        <!-- Indicates a dangerous or potentially negative action -->
        <button type="button" class="btn btn-danger">Danger</button>

        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
        <button type="button" class="btn btn-link">Link</button>



        <!-- js -->
        <script src="/js/app.js"></script>
    </body>
</html>

效果圖：

比如想要一個登入表單
bootstarp文件：水平排列的表單 http://v3.bootcss.com/css/#forms-horizontal
resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

        <!-- style -->
        <link rel="stylesheet" href="/css/app.css">
    </head>
    <body>
        .
        .
        .

        <form class="form-horizontal" style="margin-top:50px;">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
              <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Remember me
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Sign in</button>
            </div>
          </div>
        </form>



        <!-- js -->
        <script src="/js/app.js"></script>
    </body>
</html>

效果圖：

bootstrap 的柵格佈局
bootstarp 最經典的莫過於他的柵格佈局設計了，它把一個螢幕分成了12列，通過這種柵格佈局可以實現在任意螢幕上的自動適應效果

例如我們加入如下程式碼
resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

        <!-- style -->
        <link rel="stylesheet" href="/css/app.css">
    </head>
    <body>
        .
        .
        .


        <div class="container">
          <div class="row">
            <div class="col-md-4 col-sm-6" style="height:200px;background-color:red"></div>
            <div class="col-md-4 col-sm-6" style="height:200px;background-color:blue"></div>
            <div class="col-md-4 col-sm-6" style="height:200px;background-color:green"></div>
          </div>
        </div>


        <!-- js -->
        <script src="/js/app.js"></script>
    </body>
</html>

我使用 bootstarp 的柵格佈局建立了三個空白 DIV 為了方便顯示，給他們分別加上了背景色和固定的高度

當你縮小瀏覽器的視窗大小時，你可以看到排列方式會自動變化來適應不同的螢幕

結束

這裡只對 bootstarp 做了一個簡單的介紹，如果同學們感興趣，可以去 bootstarp 的官方文件中發掘更多有意思的內容

別忘了在 Laravel 中動手實踐，讓你的 Laravel 網站變得更漂亮

到此本教程全部結束，有任何意見以及建議希望大家能夠在課程評論中提出來，幫助我將教程做的更好~ 謝謝大家！

如果能堅持到這裡，相信你已經對 Laravel 開發有了一些自己的領悟。

後面的路還很長，當然了，也會更加精彩~

祝願各位開發者能夠快樂的寫程式碼，實現自己的價值：）

參考：實驗樓