作為Web前端開發(fā)框架，Bootstrap為大多數(shù)標(biāo)準(zhǔn)的UI設(shè)計(jì)常見提供了用戶友好、擴(kuò)瀏覽器的解決方案。

1.下載Bootstrap

打開官方網(wǎng)址http://getbootstrap.com/ 進(jìn)行下載。

2.準(zhǔn)備項(xiàng)目模板文件夾

接下來，我們?yōu)榈谝粋€(gè)項(xiàng)目創(chuàng)建一個(gè)文件夾以及一些基本的文件。謂詞我們還要用到HTML5樣板文件 HTML5 Boilerplate（H5BP），然后把Bootstrap的有用文件復(fù)制過去。

2.1 下載H5BP

訪問網(wǎng)站鏈接地址：https://html5boilerplate.com/ ，下載B5BP。

解壓后，修改文件夾名為Bootstrap_First，其目錄結(jié)構(gòu)如下：

2.2然后刪除和更新下必要的樣板文件

刪除下列至于H5BP相關(guān)的文件夾和文件：

□ 因?yàn)樯院笠褂肔ESS創(chuàng)建自己的CSS文件，所以先刪除css文件夾。

□ doc 文件夾及其中內(nèi)容

2.3 理解樣板中的.htaccess文件

這個(gè)文件中的內(nèi)容不一定全部都用，這取決于主機(jī)設(shè)置和站點(diǎn)需求。這個(gè)文件的一個(gè)主要用途是保證站點(diǎn)性能最優(yōu)。

2.4 更新必要的樣板文件

樣板中的下列文件提供了項(xiàng)目的標(biāo)準(zhǔn)信息，根據(jù)需要可以更新它們、直接使用它們或者就放那不管。

□humans.txt：這個(gè)文件記載貢獻(xiàn)者，H5BP、Bootstrap的，還有其他貢獻(xiàn)者。

□LICENSE.txt：在H5BP許可前面，加上你基于該許可構(gòu)建的網(wǎng)站的許可信息，在H5BP許可后，加上Bootstrap以及其他站點(diǎn)中用到的重要的庫的許可信息。

2.5 更新站點(diǎn)桌面和觸摸設(shè)備圖標(biāo)

不要忘了用自己項(xiàng)目的圖標(biāo)替換 Boilerplate 默認(rèn)的圖標(biāo)文件。

3.加入Bootstrap文件

3.1 字體

從Bootstrap的主文件夾中，把fonts文件夾復(fù)制粘貼到Bootstrap_First文件夾中。這個(gè)文件夾里包含著Bootstrap附帶的重要的Glyphicon字體。

保險(xiǎn)起見，再在fonts文件夾中放一個(gè)跨域友好的.htaccess文件：

其目的是保證即使站點(diǎn)根目錄下沒有放H5BP的.htaccess文件，也不會出現(xiàn)字體問題。

3.2 JavaScript

接下來就是加入Bootstrap的JavaScript文件。H5BP的文件夾中已經(jīng)包含了幾個(gè)JavaScript文件如下：

在js文件夾里新建文件夾bootsreap，然后把Bootstrap的js文件夾中的腳本都復(fù)制過來。下面的截圖顯示了Bootstrap隨帶的插件。每個(gè)插件一個(gè)文件：

把這些插件文件集中保存到新建的js/bootstrap 文件夾，便于優(yōu)化網(wǎng)站性能，即可以按需選用插件、排除其他文件并縮減文件大小。

在開發(fā)期間，保持所有Bootstrap的插件都可用也是一個(gè)辦法。這樣，如果想添加個(gè)折疊、提示或者傳送帶效果，都可以信手拈來。

H5BP采用的方法是把所有插件代碼復(fù)制到一個(gè) plugins.js模板文件中。這是結(jié)束開發(fā)之后的最佳做法，因?yàn)檫@樣可以減少HTTP請求，加快站點(diǎn)速度。（換句話說，一個(gè)80K的文件，比加載4個(gè)20K的文件速度更快。）

打開Bootstrap文件夾中包含分發(fā)文件的dist文件夾。在這個(gè)文件夾中的js文件夾里，包含著 bootstrap.js 和 bootstrap.min.js，它們就是包含 Bootstrap所有插件代碼的大文件。

把bootstrap.min.js 的所有代碼復(fù)制到plugins.js 里。

然后把Bootstrap文件夾里的less文件夾也復(fù)制到項(xiàng)目文件夾中。

4.構(gòu)造HTML模板

打開項(xiàng)目中的 index.html 文件進(jìn)行編輯。這個(gè)示例標(biāo)記文件來自H5BP，體現(xiàn)了一些最佳實(shí)踐和建議方案。我們就以這個(gè)為基礎(chǔ)，把它整合到Bootstrap的工作流中。

瀏覽一下整個(gè)文件，其中有幾個(gè)有意思的地方，H5BP文檔中都有詳細(xì)說明，目前的5.3.0版本的鏈接地址為：https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/extend.md 。下面也簡單介紹下，按次序來：

□ HTML5 文檔類型聲明：

□ 接下來是幾個(gè)meta標(biāo)簽

 ■ 用于指定字符集的：

 ■ 告訴IE使用最新版的渲染引擎

 ■ 預(yù)留給描述站點(diǎn)用的：

 ■ 針對移動瀏覽器的視口標(biāo)簽

□ 接下來是兩個(gè)樣式表的鏈接

□ 再下面就是加載Modernizr腳本的script標(biāo)簽。這個(gè)腳本回味IE8提供HTML5“墊片腳本”，以便它能識別HTML5的分區(qū)元素：

□ 接下來是IE條件注釋，包含推薦用戶把舊版本IE升級到新版本的消息：

<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browse. ...
<![endif]-->

□ 緊接著是一段文本

□ 隨后是托管在谷歌服務(wù)器上的jQuery鏈接，以及一個(gè)本地jQuery的后備鏈接：

□ 下面就是plugins.js 和main.js的鏈接，別分保存JavaScript插件代碼和我們編寫的代碼：

□ 谷歌的Analytics 腳本：

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
 (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
 function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
 e=o.createElement(i);r=o.getElementsByTagName(i)[0];
 e.src='https://www.google-analytics.com/analytics.js';
 r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
 ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>

對此次的任務(wù)而言，我們需要對這個(gè)模板中的元素進(jìn)行如下操作：

(1) 設(shè)定我們站點(diǎn)的標(biāo)題，針對舊版本瀏覽器用戶更新現(xiàn)有的IE條件注釋；

(2) 基于LESS文件編譯Bootstrap的CSS，添加基本的頁面內(nèi)容；

(3) 整合Bootstrap的JavaScript插件，確保響應(yīng)式的導(dǎo)航條（navbar）正常響應(yīng)。

做完這幾件事后，我們就可以開始設(shè)計(jì)自己的網(wǎng)站了。

5.設(shè)定站點(diǎn)標(biāo)題

5.1 調(diào)整過時(shí)的瀏覽器消息

模板中的消息針對老瀏覽器用戶。

<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">
upgrade your browser</a> to improve your experience.</p>
<![endif]-->

其中包含的鏈接http://browsehappy.com/ ，該網(wǎng)站是一個(gè)推薦瀏覽器升級的站點(diǎn)。

5.2 設(shè)置主結(jié)構(gòu)元素

下面開始準(zhǔn)備頁面內(nèi)容，目前還只有一個(gè)段落。我們可以稍微添加一些內(nèi)容：

□包含Logo的導(dǎo)航的頁頭區(qū)；

□包含頁面內(nèi)容的內(nèi)容區(qū)；

□包含版權(quán)和社交媒體鏈接的頁腳區(qū)。

添加這些內(nèi)容，都會基于最新的HTML最佳實(shí)踐來做，而且會考慮ARIA（Accessible Rich Internet Applications，可訪問富因特網(wǎng)應(yīng)用）的role屬性（即banner、navigation、main和contentinfo 這幾個(gè)角色）。HTML5后來又增加了 <main cole="main></main> 元素，目的是專門為頁面或分區(qū)中的主內(nèi)容提供一個(gè)專用的元素。要了解更多信息，可以參照鏈接：https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/

找到下面的代碼：

<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>

修改為：

<header role="banner">
<nav role="navigation">
</nav>
</header>

<main role="main">
<h1>Main Heading</h1>
<p>Content specific to this page goes here.</p>
</main>

<footer role="contentinfo">
<p><small>Copyright &copy; Luka Ye</small></p>
</footer>

這就是我們頁面的基本結(jié)構(gòu)和內(nèi)容。

6.導(dǎo)航條

我們先把Bootstrap特有的元素設(shè)置好，那就是導(dǎo)航條。

作為起點(diǎn)，我們可以暫時(shí)就使用 Bootstrap基本的導(dǎo)航條。為此，從Bootstrap文檔中拿來它的導(dǎo)航條代碼，然后做出如下調(diào)整：

□添加了 navbar-static-top 類，因?yàn)槲覀兿Ｍ麑?dǎo)航條能夠定位到窗口頂部，但能夠隨頁面滾動而滾動。

□把項(xiàng)目名稱連接到 index.html；

□把原來的父div標(biāo)簽改成了語義化的HTML5 nav 標(biāo)簽。

調(diào)整后，其header元素如下：

<header role="banner">
<nav role="navigation" class="navbar nav-static-top navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">初識 Bootstrap</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</nav>
</header>

保存結(jié)果，其導(dǎo)航條的顯示效果如下：

內(nèi)容有了?，F(xiàn)在，我們特別需要自己的樣式表。先來變異并鏈接Bootstrap默認(rèn)的樣式表。

7.編譯和鏈接默認(rèn)的Bootstrap CSS

7.1 編譯Bootstrap CSS

找到less/bootstrap.less 并打開它，這個(gè)文件導(dǎo)入了less文件夾中所有其他文件。編譯后，這個(gè)文件會生成完整的bootstrap.css樣式表。而這就是我們第一步要做的。

PS:LESS的文檔地址為http://lesscss.org/

如果一切沒有編譯過LESS文件，需要下載和安裝它的編譯器。

□ Window 用戶，下載和安裝這個(gè)編譯器：

■ WinLess（免費(fèi)桌面應(yīng)用），地址為 http://winless.org 。

□ Mac 用戶可以選擇下載：

■ Crunch 應(yīng)用（免費(fèi)），地址為 http://crunchapp.net/

■ CodeKit（收費(fèi)），地址為 http://incident57.com/codekit/

下載了選擇的LESS編譯器之后，安裝，打開。然后就可以按照下面的步驟來做了。

(1) 在根目錄創(chuàng)建css文件夾。

(2) 使用下列的一種把主文件（css、fonts、img、js和 less文件夾的父文件夾）添加到編譯器：

■ 把文件夾拖到編譯器窗口中；

■ 在編譯器窗口中找到 Add folder 按鈕，點(diǎn)擊選擇主文件夾。

(3) 然后再編譯器窗口中可以看到加載的LESS文件，找到less/bootstrap.lesss文件

(4) 右鍵單擊less/bootstrap.less 文件，選擇 Select output file，找到剛創(chuàng)建的css文件夾，此時(shí)輸出文件名應(yīng)該自動會變成bootstrap.css，單擊“保存”。

(5) 選擇輸出路徑和文件名，點(diǎn)擊Compile。

(6) css文件夾中會出現(xiàn)編譯生成的 bootstrap.css文件。

(7) 編譯成功后，唯一要注意的是這個(gè)文件名是否與index.html中鏈接的文件名相同。

(8) 在 index.html 中，刪除指向 css/normalize.css 的樣式表鏈接，因?yàn)檫@個(gè)樣式表已經(jīng)包含在 Bootstrap中了。

(9) 復(fù)制一份bootstrap.css，重命名為main.css。

(10) 瀏覽器打開index.html文件，可以看到起默認(rèn)的導(dǎo)航樣式如下，從排版和布局上有所增強(qiáng)，這說明CSS已經(jīng)生效。

7.2 完成響應(yīng)式導(dǎo)航條

為了在 Bootstrap 響應(yīng)式導(dǎo)航條基礎(chǔ)上完成我們的導(dǎo)航條，還得再增加兩個(gè)新元素，以及相應(yīng)的類和data屬性。相關(guān)的用法可以參考 Bootstrap的Components 文檔，在Navbar選項(xiàng)卡下：http://getbootstrap.com/components/#navbar

先按照下列步驟添加額外的標(biāo)記。

(1) 搜索到 <div>，在一個(gè)元素中添加一個(gè)navbar-toggle按鈕，用于展開和收起響應(yīng)式導(dǎo)航條。下面就是這個(gè)按鈕的全部標(biāo)記：

<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="index.html">初識 Bootstrap</a>
</div>

簡單解釋下以上代碼：

■ 按鈕中的navbar-toggle 類用于應(yīng)用CSS樣式；

■ 后面的數(shù)據(jù)屬性 data-toggle 和 data-target 是Bootstrap 的JavaScript 插件要用的，分部表示預(yù)期行為和預(yù)期目標(biāo)（即 collapse 和類名為 navbar-collapse 的元素，這個(gè)元素后面會添加）

■ 類名為 icon-bar 的span 元素是CSS用來創(chuàng)建按鈕中的三道杠按鈕用的。

(2) 接下來把導(dǎo)航項(xiàng)包裝在一個(gè)收起的div中，即用帶有適當(dāng) Bootstrap類的div把<ul>包裝起來：

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>

在前面兩步中，我們把代碼分分隔成兩部分，而且都位于 <div>中。

好了，在任何一個(gè)現(xiàn)代瀏覽器（IE9 或Firefox、Chrome、Safari等的最新版本）中，拖動窗口縮小到小于980像素。其顯示效果如下：

7.3 排除故障

如果一切順利，那么說明你已經(jīng)成功地把LESS編譯成CSS，而且也成功地包含了Bootstrap的JavaScript插件。如果不順利，那就要仔細(xì)檢查下咯。

7.4 支持IE8

要支持IE8，需要一段JavaScript代碼讓瀏覽器能響應(yīng)媒體查詢。這段代碼就是Scott Jehl的 respond.js “膩?zhàn)幽_本”。

Bootstrap自身的文檔推薦這樣做以兼容IE8。相關(guān)信息可以參考這里：http://getbootstrap.com/getting-started/#browsers

為了針對IE8 應(yīng)用這段腳本，需要針對IE8的條件注釋：

<!--[if lt IE 9]>
...
<![endif]-->

另外，根據(jù)Andy Clarke的建議，為了不讓并不需要這個(gè)腳本的Windows 移動設(shè)備加載該腳本，還應(yīng)該排除IE移動版瀏覽器，具體參見他的在線代碼塊 320andup，地址是：https://github.com/malarkey/320andup/ 。

Clarke建議的條件注釋如下：

<!--[if (lt IE 9) & (!IEMobile)]>
...
<![endif]-->

有了條件注釋，下面就是在站點(diǎn)模板文件中添加膩?zhàn)幽_本了，步驟如下：

(1) 打開https://github.com/scottjehl/Respond ，下載源代碼。

(2) 解壓縮，找到名為respond.min.js 的壓縮版。

(3) 把它復(fù)制到項(xiàng)目文件夾中的 js/vendor 目錄下，與jQuery 和 Modernizr放到一塊。

(4) 然后，把下面幾行加載 respond.js 文件代碼添加到 index.html 中，包括針對IE的條件注釋，就加載 Modernizr的代碼下面：

(5) 好了，這樣IE8 就可以支持媒體查詢響應(yīng)視口大小變化了。

PS:如果你想測試添加膩?zhàn)幽_本的結(jié)果，但又沒有IE8 瀏覽器，可以使用一個(gè)在線服務(wù)，叫Browsershots，地址是：http://browsershots.org/ ，這是免費(fèi)的。還有一個(gè)收費(fèi)的，叫BrowserStack，地址是： https://www.browserstack.com/（試用免費(fèi)）。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論