《Bootstrap用戶手冊-設計響應式網站》讀書筆記-1

時間 2019-12-01

標籤 bootstrap 用戶手冊設計響應網站讀書筆記欄目 Bootstarp 简体版

原文原文鏈接

雖然bootstarp3都已經出了，市場也火的不得了，但市面上講bootstrap的書籍太少了，這一本算是惟一的中文版實體書，到手後才知道爲何價格會只有區區35元，總體大小要比正常的小几號，長得還挺另類的，不過書長得再奇怪，工具書內容仍是最重要的，認認真真讀書學習吧。css

第1章叫作「Bootstrap提供的網站框架」，標題很奇怪，搜了一下原文標題是「bootstrap scaffolding」，即bootstrap腳手架，看來這位譯者確定不是軟件開發行業從業者了，心有點涼涼的，看來又爲我這個英文很差的人增長了學習難度。html

通常有腳手架的都是full stack的程序，天然bootstrap也算是了，bootstrap從最先2011年8月發佈，漸漸從最初CSS驅動的項目發展到內置了不少JavaScript 插件和圖標，而且涵蓋了表單和按鈕元素，還支持響應式 Web 設計，擁有一個12列、940px寬的網格佈局系統，官網還提供了構建工具，根據需求選擇CSS同JavaScript功能，1.0的版本已經整合了Eric Meyer的Reset CSS等工具，2.0後使用了Nicolas Gallagher寫的Normalize.css，在項目中加入bootstrap.css同bootstrap.js文件後，整個項目基礎平臺就搭建完畢可以使用了。html5

基本的HTML模板jquery

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

這裏未使用書中的，從bootcss裏拿了一個以爲較完美的版本，除了bootstrap外，還加入了jquery代碼和響應式須要的viewport的meta配置，這裏其實也涉及到一些網頁開發的最佳實踐：git

放在head的CSS文件，瀏覽器在加載完畢HTML文檔渲染時，會直接在文檔應用樣式；
瀏覽器只有加載完HTML文檔後纔會實例化成document對象，此時JavaScript才能夠進行DOM操做，so~將JavaScript文件放在body裏的最下面；
最上面的<!DOCTYPE html>是html5的聲明，這個是向下兼容的，使用這個聲明IE6/7/8等這些瀏覽器都進入(準)標準模式；

全局樣式github

上面已經提到2.0已經使用了Normalize.css，這裏要注意的是如下默認樣式是專門針對排版和連接的：web

從body中去掉了margin，這樣內容就會緊貼瀏覽器窗口邊緣；
爲body應用了background-color:white;；
bootstrap以@baseFontFamily、@baseFontSize和@baseLineHeight屬性做爲排版的基準，確保整個網站的標題及其餘內容的行高一致；
bootstrap經過@linkColor設置全局連接顏色，只在:hover狀態下給連接添加下劃線；

重要的一點是修改默認顏色，能夠直接修改相應.less文件中的全局變量值。bootstrap

默認網格系統瀏覽器

這個是bootstrap比較重要的內容了，這部分感受特別像是早期接觸的blueprint項目，提供了易用、合理的佈局網格，在bootstrap默認有12列940px寬，並不支持響應式佈局，在加載響應式css文件後，網格佈局會根據viewport寬度在724px到1170px之間伸縮，viewport寬度小於767px時，說明是手持設備，佈局中的列會垂直堆疊在一塊兒。網絡