【讀書筆記《Bootstrap 實戰》】1.初識Bootstrap
做爲Web前端開發框架，Bootstrap爲大多數標準的UI設計常見提供了用戶友好、擴瀏覽器的解決方案。css
1.下載Bootstraphtml
打開官方網址 http://getbootstrap.com/ 進行下載。前端
2.準備項目模板文件夾html5
接下來，咱們爲第一個項目建立一個文件夾以及一些基本的文件。謂詞咱們還要用到HTML5樣板文件 HTML5 Boilerplate（H5BP），而後把Bootstrap的有用文件複製過去。jquery
2.1 下載H5BPgit
訪問網站連接地址：https://html5boilerplate.com/ ，下載B5BP。github
解壓後，修改文件夾名爲Bootstrap_First，其目錄結構以下：bootstrap
2.2 而後刪除和更新下必要的樣板文件跨域
刪除下列至於H5BP相關的文件夾和文件：瀏覽器
□ 由於稍後要使用LESS建立本身的CSS文件，因此先刪除css文件夾。
□ doc 文件夾及其中內容
2.3 理解樣板中的.htaccess文件
這個文件中的內容不必定所有都用，這取決於主機設置和站點需求。這個文件的一個主要用途是保證站點性能最優。
2.4 更新必要的樣板文件
樣板中的下列文件提供了項目的標準信息，根據須要能夠更新它們、直接使用它們或者就放那無論。
□ humans.txt：這個文件記載貢獻者，H5BP、Bootstrap的，還有其餘貢獻者。
□ LICENSE.txt：在H5BP許可前面，加上你基於該許可構建的網站的許可信息，在H5BP許可後，加上Bootstrap以及其餘站點中用到的重要的庫的許可信息。
2.5 更新站點桌面和觸摸設備圖標
不要忘了用本身項目的圖標替換 Boilerplate 默認的圖標文件。
3.加入Bootstrap文件
3.1 字體
從Bootstrap的主文件夾中，把fonts文件夾複製粘貼到Bootstrap_First文件夾中。這個文件夾裏包含着Bootstrap附帶的重要的Glyphicon字體。
保險起見，再在fonts文件夾中放一個跨域友好的.htaccess文件：
<FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>
其目的是保證即便站點根目錄下沒有放H5BP的.htaccess文件，也不會出現字體問題。
3.2 JavaScript
接下來就是加入Bootstrap的JavaScript文件。H5BP的文件夾中已經包含了幾個JavaScript文件以下：
在js文件夾裏新建文件夾bootsreap，而後把Bootstrap的js文件夾中的腳本都複製過來。下面的截圖顯示了Bootstrap隨帶的插件。每一個插件一個文件：
把這些插件文件集中保存到新建的js/bootstrap 文件夾，便於優化網站性能，便可以按需選用插件、排除其餘文件並縮減文件大小。
在開發期間，保持全部Bootstrap的插件均可用也是一個辦法。這樣，若是想添加個摺疊、提示或者傳送帶效果，均可以信手拈來。
H5BP採用的方法是把全部插件代碼複製到一個 plugins.js模板文件中。這是結束開發以後的最佳作法，由於這樣能夠減小HTTP請求，加快站點速度。（換句話說，一個80K的文件，比加載4個20K的文件速度更快。）
打開Bootstrap文件夾中包含分發文件的dist文件夾。在這個文件夾中的js文件夾裏，包含着 bootstrap.js 和 bootstrap.min.js，它們就是包含 Bootstrap全部插件代碼的大文件。
把bootstrap.min.js 的全部代碼複製到plugins.js 裏。
而後把Bootstrap文件夾裏的less文件夾也複製到項目文件夾中。
4.構造HTML模板
打開項目中的 index.html 文件進行編輯。這個示例標記文件來自H5BP，體現了一些最佳實踐和建議方案。咱們就以這個爲基礎，把它整合到Bootstrap的工做流中。
瀏覽一下整個文件，其中有幾個有意思的地方，H5BP文檔中都有詳細說明，目前的5.3.0版本的連接地址爲：https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/extend.md 。下面也簡單介紹下，按次序來：
□ HTML5 文檔類型聲明：
<!doctype html>
□ 接下來是幾個meta標籤
■ 用於指定字符集的：
<meta charset="utf-8">
■ 告訴IE使用最新版的渲染引擎
<meta http-equiv="x-ua-compatible" content="ie=edge">
■ 預留給描述站點用的：
<meta name="description" content="">
■ 針對移動瀏覽器的視口標籤
<meta name="viewport" content="width=device-width, initial-scale=1">
□ 接下來是兩個樣式表的連接
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css">
□ 再下面就是加載Modernizr腳本的script標籤。這個腳本回味IE8提供HTML5「墊片腳本」，以便它能識別HTML5的分區元素：
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
□ 接下來是IE條件註釋，包含推薦用戶把舊版本IE升級到新版本的消息：
<!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browse. ... <![endif]-->
□ 緊接着是一段文本
□ 隨後是託管在谷歌服務器上的jQuery連接，以及一個本地jQuery的後備連接：
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
□ 下面就是plugins.js 和main.js的連接，別分保存JavaScript插件代碼和咱們編寫的代碼：
<script src="js/plugins.js"></script> <script src="js/main.js"></script>
□ 谷歌的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>
對這次的任務而言，咱們須要對這個模板中的元素進行以下操做：
(1) 設定咱們站點的標題，針對舊版本瀏覽器用戶更新現有的IE條件註釋；
(2) 基於LESS文件編譯Bootstrap的CSS，添加基本的頁面內容；
(3) 整合Bootstrap的JavaScript插件，確保響應式的導航條（navbar）正常響應。
作完這幾件過後，咱們就能夠開始設計本身的網站了。
5.設定站點標題
<title>初識 Bootstrap</title>
5.1 調整過期的瀏覽器消息
模板中的消息針對老瀏覽器用戶。
<!--[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/ ，該網站是一個推薦瀏覽器升級的站點。
5.2 設置主結構元素
下面開始準備頁面內容，目前還只有一個段落。咱們能夠稍微添加一些內容：
□ 包含Logo的導航的頁頭區；
□ 包含頁面內容的內容區；
□ 包含版權和社交媒體連接的頁腳區。
添加這些內容，都會基於最新的HTML最佳實踐來作，並且會考慮ARIA（Accessible Rich Internet Applications，可訪問富因特網應用）的role屬性（即banner、navigation、main和contentinfo 這幾個角色）。HTML5後來又增長了 <main cole="main></main> 元素，目的是專門爲頁面或分區中的主內容提供一個專用的元素。要了解更多信息，能夠參照連接：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 © Luka Ye</small></p> </footer>
這就是咱們頁面的基本結構和內容。
6.導航條
咱們先把Bootstrap特有的元素設置好，那就是導航條。
做爲起點，咱們能夠暫時就使用 Bootstrap基本的導航條。爲此，從Bootstrap文檔中拿來它的導航條代碼，而後作出以下調整：
□ 添加了 navbar-static-top 類，由於咱們但願導航條可以定位到窗口頂部，但可以隨頁面滾動而滾動。
□ 把項目名稱鏈接到 index.html；
□ 把原來的父div標籤改爲了語義化的HTML5 nav 標籤。
調整後，其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>
保存結果，其導航條的顯示效果以下：
內容有了。如今，咱們特別須要本身的樣式表。先來變異並連接Bootstrap默認的樣式表。
7.編譯和連接默認的Bootstrap CSS
7.1 編譯Bootstrap CSS
找到less/bootstrap.less 並打開它，這個文件導入了less文件夾中全部其餘文件。編譯後，這個文件會生成完整的bootstrap.css樣式表。而這就是咱們第一步要作的。
PS:LESS的文檔地址爲 http://lesscss.org/
若是一切沒有編譯過LESS文件，須要下載和安裝它的編譯器。
□ Window 用戶，下載和安裝這個編譯器：
■ WinLess（免費桌面應用），地址爲 http://winless.org 。
□ Mac 用戶能夠選擇下載：
■ Crunch 應用（免費），地址爲 http://crunchapp.net/
■ CodeKit（收費），地址爲 http://incident57.com/codekit/
下載了選擇的LESS編譯器以後，安裝，打開。而後就能夠按照下面的步驟來作了。
(1) 在根目錄建立css文件夾。
(2) 使用下列的一種把主文件（css、fonts、img、js和 less文件夾的父文件夾）添加到編譯器：
■ 把文件夾拖到編譯器窗口中；
■ 在編譯器窗口中找到 Add folder 按鈕，點擊選擇主文件夾。
(3) 而後再編譯器窗口中能夠看到加載的LESS文件，找到less/bootstrap.lesss文件
(4) 右鍵單擊less/bootstrap.less 文件，選擇 Select output file，找到剛建立的css文件夾，此時輸出文件名應該自動會變成bootstrap.css，單擊「保存」。
(5) 選擇輸出路徑和文件名，點擊Compile。
(6) css文件夾中會出現編譯生成的 bootstrap.css文件。
(7) 編譯成功後，惟一要注意的是這個文件名是否與index.html中連接的文件名相同。
(8) 在 index.html 中，刪除指向 css/normalize.css 的樣式表連接，由於這個樣式表已經包含在 Bootstrap中了。
(9) 複製一份 bootstrap.css，重命名爲main.css。
(10) 瀏覽器打開index.html文件，能夠看到起默認的導航樣式以下，從排版和佈局上有所加強，這說明CSS已經生效。
7.2 完成響應式導航條
爲了在 Bootstrap 響應式導航條基礎上完成咱們的導航條，還得再增長兩個新元素，以及相應的類和data屬性。相關的用法能夠參考 Bootstrap的Components 文檔，在Navbar選項卡下：http://getbootstrap.com/components/#navbar
先按照下列步驟添加額外的標記。
(1) 搜索到 <div class="navbar-header">，在一個元素中添加一個navbar-toggle按鈕，用於展開和收起響應式導航條。下面就是這個按鈕的所有標記：
<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 類用於應用CSS樣式；
■ 後面的數據屬性 data-toggle 和 data-target 是Bootstrap 的JavaScript 插件要用的，分部表示預期行爲和預期目標（即 collapse 和類名爲 navbar-collapse 的元素，這個元素後面會添加）
■ 類名爲 icon-bar 的span 元素是CSS用來建立按鈕中的三道槓按鈕用的。
(2) 接下來把導航項包裝在一個收起的div中，即用帶有適當 Bootstrap類的div把<ul class="nav navbar-nav">包裝起來：
<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 class="container">中。
好了，在任何一個現代瀏覽器（IE9 或Firefox、Chrome、Safari等的最新版本）中，拖動窗口縮小到小於980像素。其顯示效果以下：
7.3 排除故障
若是一切順利，那麼說明你已經成功地把LESS編譯成CSS，並且也成功地包含了Bootstrap的JavaScript插件。若是不順利，那就要仔細檢查下咯。
7.4 支持IE8
要支持IE8，須要一段JavaScript代碼讓瀏覽器能響應媒體查詢。這段代碼就是Scott Jehl的 respond.js 「膩子腳本」。
Bootstrap自身的文檔推薦這樣作以兼容IE8。相關信息能夠參考這裏：http://getbootstrap.com/getting-started/#browsers
爲了針對IE8 應用這段腳本，須要針對IE8的條件註釋：
<!--[if lt IE 9]> ... <![endif]-->
另外，根據Andy Clarke的建議，爲了避免讓並不須要這個腳本的Windows 移動設備加載該腳本，還應該排除IE移動版瀏覽器，具體參見他的在線代碼塊 320andup，地址是：https://github.com/malarkey/320andup/ 。
Clarke建議的條件註釋以下：
<!--[if (lt IE 9) & (!IEMobile)]> ... <![endif]-->
有了條件註釋，下面就是在站點模板文件中添加膩子腳本了，步驟以下：
(1) 打開 https://github.com/scottjehl/Respond ，下載源代碼。
(2) 解壓縮，找到名爲 respond.min.js 的壓縮版。
(3) 把它複製到項目文件夾中的 js/vendor 目錄下，與jQuery 和 Modernizr放到一塊。
(4) 而後，把下面幾行加載 respond.js 文件代碼添加到 index.html 中，包括針對IE的條件註釋，就加載 Modernizr的代碼下面：
<!-- Modernizr --> <script src="js/vendor/modernizr-2.8.3.min.js"></script> <!-- Respond.js for IE 8 or less only --> <!--[if (lt IE 9) & (!IEMobile)]> <script src="js/vendor/respond.min.js"></script> <![endif]-->
(5) 好了，這樣IE8 就能夠支持媒體查詢響應視口大小變化了。
PS:若是你想測試添加膩子腳本的結果，但又沒有IE8 瀏覽器，可使用一個在線服務，叫Browsershots，地址是：http://browsershots.org/ ，這是免費的。還有一個收費的，叫BrowserStack，地址是： https://www.browserstack.com/（試用免費）。
- 1. 【Bootstrap】1.初識Bootstrap
- 2. BootStrap(1)----初識
- 3. bootstrap學習筆記一： bootstrap初認識，hello bootstrap（上）
- 4. 【讀書筆記《Bootstrap 實戰》】4.企業網站
- 5. 【讀書筆記《Bootstrap 實戰》】6.單頁營銷網站
- 6. 【讀書筆記《Bootstrap 實戰》】5.電子商務網站
- 7. 【讀書筆記《Bootstrap 實戰》】2.作品展示站點
- 8. 《Node 實戰（第2版）》讀書筆記（1、初識Node）
- 9. bootstrap知識筆記
- 10. ISLR讀書筆記九：自助法（bootstrap）
- 更多相關文章...
- • Eclipse 添加書籤 - Eclipse 教程
- • PHP 實例 - AJAX RSS 閱讀器 - PHP教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • JDK13 GA發佈：5大特性解讀
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 【Bootstrap】1.初識Bootstrap
- 2. BootStrap(1)----初識
- 3. bootstrap學習筆記一： bootstrap初認識，hello bootstrap（上）
- 4. 【讀書筆記《Bootstrap 實戰》】4.企業網站
- 5. 【讀書筆記《Bootstrap 實戰》】6.單頁營銷網站
- 6. 【讀書筆記《Bootstrap 實戰》】5.電子商務網站
- 7. 【讀書筆記《Bootstrap 實戰》】2.作品展示站點
- 8. 《Node 實戰（第2版）》讀書筆記（1、初識Node）
- 9. bootstrap知識筆記
- 10. ISLR讀書筆記九：自助法（bootstrap）