Bootstrap 是全球最受歡迎的前端元件庫，用於開發響應式佈局、移動裝置優先的 WEB 專案。 Bootstrap4 目前是 Bootstrap 的最新版本，是一套用於 HTML、CSS 和 JS 開發的開源工具集。利用我們提供的 Sass 變數和大量 mixin、響應式柵格系統、可擴充套件的預製元件、基於 jQuery 的強大的外掛系統，能夠快速為你的想法開發出原型或者構建整個 app 。 。。。。。。。。。。。。。 Bootstrap4 與 Bootstrap3 Bootstrap4 是 Bootstrap 的最新版本，與 Bootstrap3 相比擁有了更多的具體的類以及把一些有關的部分變成了相關的元件。 http:/ /www.iis7.com/b/wzjk/ 同時 Bootstrap.min.css 的體積減少了40%以上。 。。。。。。。。。。。。 建立第一個 Bootstrap 4 頁面 1、新增 HTML5 doctype Bootstrap 要求使用 HTML5 檔案型別，所以需要新增 HTML5 doctype 宣告。 HTML5 doctype 在文件頭部宣告，並設定對應編碼 。。。。。。。 移動裝置優先 為了讓 Bootstrap 開發的網站對移動裝置友好，確保適當的繪製和觸屏縮放，需要在網頁的 head 之中新增 viewport meta 標籤。 如右所示： width=device-width 表示寬度是裝置螢幕的寬度。 initial-scale=1 表示初始的縮放比例。 shrink-to-fit=no 自動適應手機螢幕的寬度。 。。。。。。。。。。 Bootstrap 4 CDN 國內推薦使用 BootCDN 上的庫： Bootstrap4 CDN ： ： ： ： 。。。。。。 容器類 Bootstrap 4 需要一個容器元素來包裹網站的內容。 我們可以使用以下兩個容器類： .container 類用於固定寬度並支援響應式佈局的容器。 .container-fluid 類用於 100% 寬度，佔據全部視口（viewport）的容器。 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Bootstrap4 網格系統 Bootstrap 提供了一套響應式、移動裝置優先的流式網格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多 12 列。 我們也可以根據自己的需要，定義列數，Bootstrap 4 的網格系統是響應式的，列會根據螢幕大小自動重新排列。 。。。。。。。 網格類 Bootstrap 4 網格系統有以下 5 個類: .col- 針對所有裝置 .col-sm- 平板 - 螢幕寬度等於或大於 576px .col-md- 桌面顯示器 - 螢幕寬度等於或大於 768px) .col-lg- 大桌面顯示器 - 螢幕寬度等於或大於 992px) .col-xl- 超大桌面顯示器 - 螢幕寬度等於或大於 1200px) 。。。。。。。。 網格系統規則 Bootstrap4 網格系統規則： 網格每一行需要放在設定了 .container (固定寬度) 或 .container-fluid (全屏寬度) 類的容器中，這樣就可以自動設定一些外邊距與內邊距。 使用行來建立水平的列組。 內容需要放置在列中，並且只有列可以是行的直接子節點。 預定義的類如 .row 和 .col-sm-4 可用於快速製作網格佈局。 列通過填充建立列內容之間的間隙。 這個間隙是通過 .rows 類上的負邊距設定第一行和最後一列的偏移。 網格列是通過跨越指定的 12 個可用列來建立。 例如，設定三個相等的列，需要使用用三個.col-sm-4 來設定。 Bootstrap 3 和 Bootstrap 4 最大的區別在於 Bootstrap 4 現在使用 flexbox（彈性盒子） 而不是浮動。 Flexbox 的一大優勢是，沒有指定寬度的網格列將自動設定為等寬與等高列 。 :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Bootstrap4 文字排版 Bootstrap 4 預設設定 Bootstrap 4 預設的 font-size 為 16px, line-height 為 1.5。 預設的 font-family 為 “Helvetica Neue”, Helvetica, Arial, sans-serif。 此外，所有的

元素 margin-top: 0 、 margin-bottom: 1rem (16px)。 。。。。。。。。。。

-

Bootstrap 中定義了所有的 HTML 標題（h1 到 h6）的樣式。

(2.5rem = 40px)

(2rem = 32px)

(1.75rem = 28px)

(1.5rem = 24px)

(1.25rem = 20px)

(1rem = 16px)

。。。。。。。。。。。 Display 標題類 Bootstrap 還提供了四個 Display 類來控制標題的樣式: .display-1, .display-2, .display-3, .display-4。 。。。。。。。。。。 在 Bootstrap 4 中 HTML 元素用於建立字號更小的顏色更淺的文字 。。。。。。。。。。 Bootstrap 4 定義 為黃色背景及有一定的內邊距。 。。。。。。。。。。 Bootstrap 4 定義 HTML 元素的樣式為顯示在文字底部的一條虛線邊框 。。。。。。。。。。