Bootstrap客製化

by vivid 21. 十月 2015 05:13

.NET Magazine國際中文電子雜誌
者:許薰尹
稿:張智凱
文章編號:N151016402
出刊日期:2015/10/21
開發工具:Visual Studio 2013 Ultimate Update 4
版本:bootstrap 3.3.4Nodejs v0.12.7Grunt

在這一篇文章中,我們將介紹如何客製化Bootstrap,最簡單的方式,可以選擇使用現成、免費的Bootstrap樣式,來美化自己的網站,或者,採用進階版,利用LESS來進行客製化的動作。

 

使用預設Bootstrap佈景主題

本文使用Bootstrap 3.3.4版來說明客製化的方式,假設目前有Bootstrap網頁如下,以預設的樣式呈現網頁內容:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="Content/bootstrap.css" rel="stylesheet" />
  <title>Bootstrap </title>
</head>
<body>
  <div class="container-fluid">
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse"
                  data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">MyBrand</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
 
  <div class="jumbotron">
    <div class="container">
      <h1>Welcome...</h1>
      <p>Bootstrap Customization</p>
      <a href="#" class="btn btn-primary">Learn more</a>
    </div>
 
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-6">
        <h2>Heading 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
      </div>
      <div class="col-md-4 col-sm-6">
        <h2>Heading 2</h2>
        <p>
          Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
        </p>
      </div>
      <div class="col-md-4 col-sm-6">
        <h2>Heading 3</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
  <script src="Scripts/jquery-1.9.1.js"></script>
  <script src="Scripts/bootstrap.js"></script>
</body>
</html>
 

這個網頁的執行結果,請參考下圖所示,配色大部分屬於灰色系:

clip_image002

圖 1:預設的Bootstrap樣式。

使用現成的Bootstrap佈景主題

若要快速的完成客製化的動作,可以找找看是否有現成的Bootstrap佈景主題可以使用。例如,以下這個網站提供許多免費的Bootstrap佈景主題以供下載:

https://bootswatch.com/

進入到此網站網站的首頁,便可看到列出許多種佈景主題的範本,你只要挑選喜好的佈景主題,然後點選此佈景主題下方的「Download」按鈕,下載Bootstrap相關的CSS檔案,請參考下圖所示:

clip_image004

圖 2:下載Bootstrap相關的CSS檔案。

然後將下載下來的CSS檔案,覆蓋掉你的網站中,預設的Bootstrap.css與Bootstrap.min.css檔案即可。完成後,我們範例的網頁便可套用自訂樣式,其執行畫面請參考下圖所示:

clip_image006

圖 3:套用現成的Boostrap樣式之範例的網頁。

你可以從以下網站找到更多免費或需付費的Bootstrap樣式:

Bootstrap客製化

Bootstrap的官網提供一個客製化的頁面,讓使用者來進行客製化的動作:

http://getbootstrap.com/customize/

這個網頁中包含許多變數的設定,每一個文字方塊中的值,都是目前Bootstrap LESS變數的預設值(稍後再解釋LESS),包含像顏色、字型、圖示、Media queries 臨界值、Grid系統…等等的設定。在此,我們簡單修改幾個變數值,首先找尋到網頁中「@brand-primary」設定值,將其設定為「darken(#a328f8, 6.5%)」,請參考下圖所示:

clip_image008

圖 4:客製化「@brand-primary」設定值。

接下來設定Navbar的背景顏色,將「@navbar-default-bg」設定為「#e4aafb」,請參考下圖所示:

clip_image010

圖 5:將「@navbar-default-bg」設定為「#e4aafb」。

接下來捲動到網頁最下方,點選「Compile and Download」按鈕,這個網頁就會根據你的設定,編譯並下載自訂的Bootstrap樣式,請參考下圖所示:

clip_image012

圖 6:,編譯並下載自訂的Bootstrap樣式。

將下載下來的bootstrap.zip壓縮檔案解壓縮,可以看到以下資料夾,其中也包含一個config.json檔案,記住你在網頁中的設定值,請參考下圖所示:

clip_image014

圖 7:解壓縮bootstrap.zip檔案。

由於本文的範例只有異動樣式,因此只需要將解壓縮的css資料夾內存放的bootstrap.css、bootstrap.min.css加到網站專案之中,覆蓋原有的檔案即可,請參考下圖所示:

clip_image016

圖 8:套用自訂樣式。

未來若想要回復到網頁的自訂設定值,只要在「http://getbootstrap.com/customize/」載入先前下載下來的config.json檔案就可,請參考下圖所示:

clip_image018

圖 9:載入設定值。

了解LESS

bootstrap.css檔案之中包含非常多的CSS 樣式規則,例如,所有success系列的前景或背景顏色都是藍色系,如「text-success」、「bg-success」、「panel-success」等等樣式,因此直接去修改、維護bootstrap.css檔案樣式的動作將變得非常的困難。所以Bootstrap設計師並不直接使用及修改這個檔案,不想維護這麼多類似樣式的一致性,取而代之的,是使用LESS (Leaner CSS)來完成這個工作。

LESS (Leaner CSS)是動態樣式語言(Dynamic Style Sheet Language),它包含許多語法,例如變數(variables)、mixins…等等,可以讓你使用參數的方式,來描述CSS 樣式規則。例如,使用LESS變數,可以讓你指定常用的值一次,如顏色、字型,變動的部分會套用到Bootstrap的多個元件。未來再使用LESS 編譯器(LESS compiler)轉換成標準的CSS檔案,以提供網站來引用。更多關於LESS的資訊,請參考官網:「http://lesscss.org」。

自訂Bootstrap編譯環境

由於客製化Bootstrap的動作,可能需要花費許多時間的測試、編譯等,最好的辦法是在本機電腦建置Bootstrap的編譯環境。我們需要安裝一些工具程式來完成建置環境。首先你需要安裝Node.js與Grunt。先從Nodejs.org下載Windows Installer,請參考下圖所示:

clip_image020

圖 10:安裝Nodejs。

安裝Node.js

接著執行下載下來的安裝程式,本文使用的版本為:node-v0.12.7-x86.msi,安裝畫面,請參考下圖所示:

clip_image022

圖 11:安裝Node.js。

安裝完成之後,先測試看看Nodejs是否能正常運作,開啟命令提示字元,先使用cd指令切換到Node安裝的資料夾(預設是C:\Program Files (x86)\nodejs):

cd C:\Program Files (x86)\nodejs

在命令提示字元輸入以下指令:

Node

此時應該可以看到提示字元「>」出現,接著在命令提示字元輸入以下程式碼測試:

function echo(){return 'hi';}echo();

按下「Enter」鍵後,在命令提示字元應該會正確印出「hi」訊息,請參考下圖所示:

clip_image024

圖 12:測試Nodejs是否能正常運作。

安裝Grunt

下一個動作是安裝Grunt套件。開啟命令提示字元,先使用cd指令切換到Nodejs安裝的資料夾(預設是C:\Program Files (x86)\nodejs)

cd C:\Program Files (x86)\nodejs

接著我們便可利用node package manager (npm) 來執行以下命令,以下載、執行、設定與安裝Grunt所需的相關套件:

npm install -g grunt-cli

安裝完成應該可以看到以下畫面:

clip_image026

圖 13:安裝Grunt。

有關Grunt的詳細說明可以參考官網:「http://gruntjs.com/」。

 

下載Bootstrap原始程式碼

設定好自己的Bootstrap編譯環境之後,便可以造訪Bootstrap官網,下載包含LESS的原始程式碼,從官網以下網址:

http://getbootstrap.com/getting-started/

點選網頁中「Source code」區段下方的「Download source」按鈕進行下載,請參考下圖所示:

clip_image028

圖 14:下載Bootstrap原始程式碼。

下載原始程式的壓縮檔之後,便可以利用它們來自定Bootstrap LESS變數(variables.less),以便隨時修改、測試自訂的樣式。先解壓縮下載下來的zip檔案,本文使用的是bootstrap-3.3.4.zip版本,解壓縮完資料夾的內容看起來,請參考下圖所示:

clip_image030

圖 15:解壓縮下載下來的bootstrap-3.3.4.zip檔案。

開啟less資料夾中的variables.less檔案,修改「@brand-primary」的設定,本例將「@brand-primary」設定值,設定為「darken(#a328f8, 6.5%)」,請參考下圖所示:

clip_image032

圖 16:修改「@brand-primary」的設定。

接下來設定Navbar的背景顏色,將「@navbar-default-bg」設定為「#e4aafb」,請參考下圖所示:

clip_image034

圖 17:將「@navbar-default-bg」設定為「#e4aafb」。

編譯與產生CSS檔案

自訂樣式修改完成之後,就可以開始編譯與產生客製化的CSS檔案。開啟命令提示字元,先使用cd指令切換到解壓縮的bootstrap資料夾(此資料夾含有package.json檔案),例如本例為:

cd C:\temp\b4\bootstrap-3.3.4

在命令提示字元輸入以下指令,使用node package manager (npm)來安裝套件:

npm install

這個指定會根據package.json檔案的內容,來下載與安裝所需的相關套件,完成後可以看到以下畫面:

clip_image036

圖 18:下載與安裝所需的相關套件。

現在便可以編譯並產生我們自訂的CSS檔案了,在命令提示字元輸入以下指令:

grunt dist

這個指令會啟動Grunt編譯LESS原始程式碼,並產生一個dist資料夾,將編譯完的結果放在此資料夾之中,若dist資料夾已存在,則會覆蓋資料夾中的檔案,請參考下圖所示:

clip_image038

圖 19:編譯並產生我們自訂的CSS檔案。

dist這個資料夾中包含三個子資料夾:css、fonts、js,請參考下圖所示:

clip_image040

圖 20:Grunt產生的dist資料夾。

由於本文範例只有修改樣式的部分,因此只需將dist\css資料夾中的樣式表檔案加到網站專案之中即可。最後網頁套用自訂樣式的結果,請參考下圖所示:

clip_image042

圖 21:套用編譯完成的CSS檔案。

總結

Bootstrap允許您自行定義網站的佈景主題。你可以使用官網的網頁來快速建立、下載自訂的佈景主題。你可以下載Bootstrap LESS原始程式碼,利用Nodejs與Grunt建置自己的建置環境,然後利用指定編譯及發佈自訂的CSS檔案。另外您也可以利用免費或付費的Bootstrap佈景主題,快速建置出你要的網站風格。

Tags:

.NET Magazine國際中文電子雜誌 | Bootstrap | Responsive Web Design | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List