深入了解 Bootstrap 底層結構的關鍵部分,包括我們讓 web 開發(fā)變得更好、更快、更強壯的最佳實踐。
Bootstrap 使用到的某些 HTML 元素和 CSS 屬性需要將頁面設置為 HTML5 文檔類型。在你項目中的每個頁面都要參照下面的格式進行設置。
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
在 Bootstrap 2 中,我們對框架中的某些關鍵部分增加了對移動設備友好的樣式。而在 Bootstrap 3 中,我們重寫了整個框架,使其一開始就是對移動設備友好的。這次不是簡單的增加一些可選的針對移動設備的樣式,而是直接融合進了框架的內核中。也就是說,Bootstrap 是移動設備優(yōu)先的。針對移動設備的樣式融合進了框架的每個角落,而不是增加一個額外的文件。
為了確保適當的繪制和觸屏縮放,需要在 <head>
之中添加 viewport 元數據標簽。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移動設備瀏覽器上,通過為視口(viewport)設置 meta 屬性為 user-scalable=no
可以禁用其縮放(zooming)功能。這樣禁用縮放功能后,用戶只能滾動屏幕,就能讓你的網站看上去更像原生應用的感覺。注意,這種方式我們并不推薦所有網站使用,還是要看你自己的情況而定!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Bootstrap 排版、鏈接樣式設置了基本的全局樣式。分別是:
body
元素設置 background-color: #fff
;@font-family-base
、@font-size-base
和 @line-height-base
a變量作為排版的基本參數@link-color
,并且當鏈接處于 :hover
狀態(tài)時才添加下劃線這些樣式都能在 scaffolding.less
文件中找到對應的源碼。
為了增強跨瀏覽器表現的一致性,我們使用了 Normalize.css,這是由 Nicolas Gallagher 和 Jonathan Neal 維護的一個CSS 重置樣式庫。
Bootstrap 需要為頁面內容和柵格系統(tǒng)包裹一個 .container
容器。我們提供了兩個作此用處的類。注意,由于 padding
等屬性的原因,這兩種 容器類不能互相嵌套。
.container
類用于固定寬度并支持響應式布局的容器。
<div class="container">
...
</div>
.container-fluid
類用于 100% 寬度,占據全部視口(viewport)的容器。
<div class="container-fluid">
...
</div>