bootstrap入門 · 致力于web前端技術撰寫

bootstrap在后臺管理系統中使用較多，先前所做的幾個項目也是使用的Bootstrap框架，不過并未系統學習過Bootstrap，近期工作沒有那么忙了，于是計劃系統地學習一下。先簡單分享一下Bootstrap表格。使用Bootstrap，首先要在官網下載bootstrap包，提供了多種方式的下載。官網地址：?[http://getbootstrap.com/](http://getbootstrap.com/) 進入官網之后，進入下載頁面，第一個是預編譯版本下載，包括css,js,font。第二個是源碼下載，需要自行編譯。第三個是Sass版本，根據自己的需要，自行下載，此處，我們下載的是預編譯版本，因為，暫時對less和sass還沒有深入學習了解。使用bootstrap創建的網頁頭部需要使用html5的文檔類型（Doctype）,否則可能會存在瀏覽器顯示不一致的問題，甚至可能面臨一些特定情況下的不一致，以至于代碼不能通過W3C標準的驗證。因此請使用如下的網頁頭部： ~~~ <!DOCTYPE html> <html> .... </html> ~~~ ~~~ bootstrap依賴于Jquery,所以在引入bootstrap.min.js之前，需要先引入jquery.js ~~~ ~~~ 為了讓 Bootstrap 開發的網站對移動設備友好，確保適當的繪制和觸屏縮放，需要在網頁的 head 之中添加?viewport meta?標簽： <meta name = "viewport" content = "width=device-width,initial-scale=1.0"> ~~~ width?屬性控制設備的寬度。假設您的網站將被帶有不同屏幕分辨率的設備瀏覽，那么將它設置為?device-width?可以確保它能正確呈現在不同設備上。 initial-scale=1.0?確保網頁加載時，以 1:1 的比例呈現，不會有任何的縮放。在移動設備瀏覽器上，通過為 viewport meta 標簽添加 user-scalable=no 可以禁用其縮放（zooming）功能。通常情況下，maximum-scale=1.0 與 user-scalable=no 一起使用。這樣禁用縮放功能后，用戶只能滾動屏幕，就能讓您的網站看上去更像原生應用的感覺。 ~~~ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> ~~~ ### 全局顯示 ~~~ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333333; background-color: #ffffff; } ~~~ 第一條規則設置 body 的默認字體樣式為?"Helvetica Neue", Helvetica, Arial, sans-serif。第二條規則設置文本的默認字體大小為 14 像素。第三條規則設置默認的行高度為 1.428571429。第四條規則設置默認的文本顏色為 #333333。最后一條規則設置默認的背景顏色為白色。 **全局鏈接樣式** ### 通過屬性 @link-color 設置全局鏈接的顏色。以下是鏈接的默認樣式： ~~~ a:hover, a:focus { color: #2a6496; text-decoration: underline; } a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } ~~~ ### 容器（Container） ~~~ <div class="container"> ... </div> ~~~ Bootstrap 3 的 container class 用于包裹頁面上的內容。bootstrap.css 文件中的 .container class。 ~~~ .container { padding-right:15px; padding-left:15px; margin-right:auto; margin-left:auto;} ~~~ 通過上面的代碼，把 container 的左右外邊距（margin-right、margin-left）交由瀏覽器決定。請注意，由于內邊距（padding）是固定寬度，默認情況下容器是不可嵌套的。 ~~~ .container:before,.container:after { display: table; content:" ";} ~~~ 這會產生偽元素。設置?display?為?table，會創建一個匿名的 table-cell 和一個新的塊格式化上下文。:before?偽元素防止上邊距崩塌，:after?偽元素清除浮動。如果?conteneditable?屬性出現在 HTML 中，由于一些 Opera bug，圍繞上述元素創建一個空格。這可以通過使用?content: " "?來修復。 ~~~ .container:after { clear: both;} ~~~ 它創建了一個偽元素，并確保了所有的容器包含所有的浮動元素。 Bootstrap 3 CSS 有一個申請響應的媒體查詢，在不同的媒體查詢閾值范圍內都為 container 設置了max-width，用以匹配網格系統。 ~~~ @media(min-width:768px){.container { width:750px;} ~~~ 引入Bootstrap開始使用Bootstrap。關于bootstrap.min.js和bootstrap.js區別僅在于是否壓縮，此處我們均引入壓縮過會的 ~~~ <!doctype html> <html lang="en"> <head>  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="Keywords" content="關鍵詞一，關鍵詞二"> <meta name="Description" content="網站描述內容"> <meta name="Author" content="Yvette Lau"> <meta name = "viewport" content = " width = device-width, initial-scale = 1 "> <title>CSSDemo</title>  <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"/> <script type="text/javascript" src="jquery-1.11.2.min.js"></script> <script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> </head> <body> </body> </html> ~~~ ? ??