Bootstrap中CSS部分解讀
阿新 • • 發佈:2019-01-13
Bootstrap 3 的設計目標是移動裝置優先,然後才是桌面裝置。
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 一起使用。這樣禁用縮放功能後,使用者只能滾動螢幕,就能讓您的網站看上去更像原生應用的感覺。
響應式影象
.img-responsive { display: inline-block; height: auto; max-width: 100%; } <img src="..." class="img-responsive" alt="響應式影象">
類表明影象呈現為 inline-block。當把元素的 display 屬性設定為 inline-block,元素相對於它周圍的內容以內聯形式呈現,但與內聯不同的是,這種情況下我們可以設定寬度和高度。
基本的全域性顯示
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
排版
使用 @font-family-base、 @font-size-base 和 @line-height-base 屬性作為排版樣式。
連結樣式
通過屬性 @link-color 設定全域性連結的顏色
避免跨瀏覽器的不一致
Bootstrap 使用 Normalize 來建立跨瀏覽器的一致性
Normalize.css 是一個很小的 CSS 檔案,在 HTML 元素的預設樣式中提供了更好的跨瀏覽器一致性(引入檔案)
容器 container
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
<div class="container">
...
</div>