Bootstrap - CSS 概述

本章概述了 Bootstrap 架構的關鍵部分，包括 Bootstrap 如何實現更好、更快、更強大的 Web 開發。

HTML5 文件型別

Bootstrap 使用某些 HTML 元素和 CSS 屬性，這些屬性需要使用 HTML5 文件型別。因此，在所有使用 Bootstrap 的專案開頭，請包含以下 HTML5 文件型別程式碼。

<!DOCTYPE html>
<html>
   ....
</html>

自 Bootstrap 3 釋出以來，Bootstrap 就採用了移動優先的設計理念。這意味著“移動優先”樣式遍佈整個庫，而不是放在單獨的檔案中。您需要將 **視口元標記** 新增到 **<head>** 元素中，以確保在移動裝置上正確渲染和觸控縮放。

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

將 **user-scalable = no** 新增到 **content** 屬性中，以停用移動裝置上的縮放功能，如下所示。透過此更改，使用者只能滾動而不能縮放，這使得您的網站感覺更像一個原生應用程式。

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

通常 maximum-scale = 1.0 與 user-scalable = no 一起使用。如上所述，**user-scalable = no** 可能會為使用者提供更像原生應用程式的體驗，因此 Bootstrap 不建議使用此屬性。

Bootstrap 3 允許您透過向 **<img>** 標籤新增類 **.img-responsive** 來使圖片響應式。此類將 **max-width: 100%;** 和 **height: auto;** 應用於影像，以便它可以很好地縮放至父元素。

<img src = "..." class = "img-responsive" alt = "Responsive image">

Bootstrap 設定基本的全域性顯示（背景）、排版和連結樣式：

**基本全域性顯示** - 在 <body> 元素上設定 background-color: #fff;。
**排版** - 使用 @font-family-base、@font-size-base 和 @line-height-base 屬性作為排版基礎。
**連結樣式** - 透過屬性 @link-color 設定全域性連結顏色，並且僅在 :hover 時應用連結下劃線。

如果您打算使用 LESS 程式碼，您可以在 scaffolding.less 中找到所有這些。

Bootstrap 使用 Normalize.css 來建立跨瀏覽器一致性。

Normalize.css 是一個現代的、支援 HTML5 的 CSS 重置的替代方案。它是一個小型 CSS 檔案，可以更好地提高 HTML 元素預設樣式的跨瀏覽器一致性。

使用類 **.container** 來包裝頁面內容並輕鬆居中內容，如下所示。

<div class = "container">
   ...
</div>

檢視 bootstrap.css 檔案中的 **.container** 類：

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

請注意，由於填充和固定寬度，容器預設情況下不可巢狀。

檢視 bootstrap.css 檔案：

@media (min-width: 768px) {
   .container {
      width: 750px;
   }
}

在這裡您可以看到 CSS 具有帶 **width** 的媒體查詢。這有助於應用響應式設計，並且在這些媒體查詢中，容器類會相應地修改以正確呈現網格系統。

列印頁面