起步 · Web前端(打印用)

## 起步 ### Bootstrap 概述 2010 年 6 月，Twitter 內部的工程師為了解決前端開發任務中的協作統一問題。經歷各種方案后，Bootstrap 最終被確定下來，并于 2011 年 8 月發布。經過很長時間的迭代升級，由最初的 CSS 驅動項目發展成為內置很多 JavaScript 插件和圖標的多功能 Web 前端的開源框架。 Bootstrap 最為重要的部分就是它的響應式布局，通過這種布局可以兼容 PC 端、PAD以及手機移動端的頁面訪問。 ### 下載國內文檔翻譯官網：http://www.bootcss.com 進入以上官網中Bootstrap3頁面，下載： ![](https://box.kancloud.cn/f91cf3f2ff5659ed6dd6c5c8917001a4_1158x509.png) 下載完成后解壓文件夾，得到一下原始項目結構： ![](https://box.kancloud.cn/a1387e57cc5062f1ba02bf7f127a7636_378x372.png) 主要分為三大核心目錄：css(樣式)、js(腳本)、fonts(字體)。 1. css 目錄中有四個 css 后綴的文件，其中包含 min 字樣的，是壓縮版本，一般使用這個；不包含的屬于沒有壓縮的，可以學習了解 css 代碼的文件；而 map 后綴的文件則是 css 源碼映射表，在一些特定的瀏覽器工具中使用。 2. js 目錄包含兩個文件，是未壓縮和壓縮的 js 文件。 3. fonts 目錄包含了不同后綴的字體文件。 ### 創建第一個頁面我們創建一個 HTML5 的頁面，并且將 Bootstrap 的核心文件引入，然后測試是否正常顯示。 ~~~html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Bootstrap 101 Template</title>  <link href="css/bootstrap.min.css" rel="stylesheet">    </head> <body> <h1>你好，世界！</h1>  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>  <script src="js/bootstrap.min.js"></script> </body> </html> ~~~ ### HTML5 文檔類型 Bootstrap 使用到的某些 HTML 元素和 CSS 屬性需要將頁面設置為 HTML5 文檔類型。在你項目中的每個頁面都要參照下面的格式進行設置。 ~~~html <!DOCTYPE html> <html lang="zh-CN"> ... </html> ~~~ ### 移動設備優先 Bootstrap 3 重寫了整個框架，使其一開始就是對移動設備友好的，Bootstrap 是移動設備優先的。針對移動設備的樣式融合進了框架的每個角落，而不是增加一個額外的文件。為了確保適當的繪制和觸屏縮放，需要在` <head>` 之中添加 viewport 元數據標簽。 ~~~html <meta name="viewport" content="width=device-width, initial-scale=1"> ~~~ 在移動設備瀏覽器上，通過為視口（viewport）設置 meta 屬性為 user-scalable=no 可以禁用其縮放（zooming）功能。 ~~~html <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> ~~~ > 這樣禁用縮放功能后，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感覺。注意，這種方式并不推薦所有網站使用，還是要看你自己的情況而定。 ### Normalize.css 為了增強跨瀏覽器表現的一致性，我們使用了 Normalize.css，這是由 Nicolas Gallagher 和 Jonathan Neal 維護的一個CSS 重置樣式庫。 ### 布局容器 Bootstrap 需要為頁面內容和柵格系統包裹一個 `.container `容器。我們提供了兩個作此用處的類。注意，由于 padding 等屬性的原因，這兩種容器類不能互相嵌套。 `.container` 類用于固定寬度并支持響應式布局的容器。 ~~~html <div class="container"> ... </div> ~~~ `.container-fluid `類用于 100% 寬度，占據全部視口（viewport）的容器。 ~~~html <div class="container-fluid"> ... </div> ~~~