BootStrap 簡介
概念:
課程目標：
- 響應式佈局技術
- 瞭解BootStrap前端框架
二.BootStrap
Bootstrap 是全球最受歡迎的前端組件庫，用於開發響應式佈局、移動設備優先的 WEB 項目。
Bootstrap 是一個用於 HTML、CSS 和 JS 開發的開源工具包,來自於Twitter,利用 Bootstrap 提供的 Sass 變量和混合（mixins）、響應式柵格系統、可擴展的預製組件以及強大的 jQuery 插件，能夠讓你快速地開發出產品原型或構建整個 app。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-X2TH0vnA-1589444900650)(E:\政通路\課堂筆記\S2\bootstrap\assets\image-20200514104947017.png)]
2.1 引入文件
bootStrap.min.css
jquery.min.js
bootStrap.min.js
2.2 柵格系統
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mB2xHvew-1589444900655)(E:\政通路\課堂筆記\S2\bootstrap\assets\image-20200514105715506.png)]
Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分爲最多 12 列。
我們也可以根據自己的需要，定義列數：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-pMmnc2G1-1589444900658)(E:\政通路\課堂筆記\S2\bootstrap\assets\image-20200514105759039.png)]
Bootstrap 4 的網格系統是響應式的，列會根據屏幕大小自動重新排列。
Bootstrap 4 網格系統有以下 5 個類(class):
- .col- 針對所有設備
- col-xs 小設備
- .col-sm 平板 - 屏幕寬度等於或大於 576px
- .col-md 桌面顯示器 - 屏幕寬度等於或大於 768px)
- .col-lg 大桌面顯示器 - 屏幕寬度等於或大於 992px)
- .col-xl 超大桌面顯示器 - 屏幕寬度等於或大於 1200px)
2.2.1網格系統規則
Bootstrap4 網格系統規則:
-
網格每一行需要放在設置了
.container(固定寬度) 或.container-fluid(全屏寬度) 類的容器中，這樣就可以自動設置一些外邊距與內邊距。 -
使用行樣式row來創建水平的列組。
-
內容需要放置在列中，並且只有列可以是行的直接子節點。
-
預定義的類如 .row 和 .col-sm-4 可用於快速製作網格佈局。col:column列單詞；sm:平板;-4:4個格
col-sm-n，n（1–12）設置列。
-
列通過填充創建列內容之間的間隙。 這個間隙是通過 .rows 類上的負邊距設置第一行和最後一列的偏移。
-
網格列是通過跨越指定的 12 個列來創建。 例如，設置三個相等的列，需要使用用三個.col-sm-4 來設置。
-
Bootstrap 3 和 Bootstrap 4 最大的區別在於 Bootstrap 4 現在使用 flexbox（彈性盒子） 而不是浮動。 Flexbox 的一大優勢是，沒有指定寬度的網格列將自動設置爲等寬與等高列 。
列組合
row/col-md-4 col-md-8等測試
列偏移
col-md-offset-4,原理 margin-left
列嵌套
<div class=‘row’>div代碼嵌套代碼</div>
列排序
col-md-push-8 推向右側
2.2.2 CSS全局樣式
的一大優勢是，沒有指定寬度的網格列將自動設置爲等寬與等高列 。
列組合
row/col-md-4 col-md-8等測試
列偏移
col-md-offset-4,原理 margin-left
列嵌套
<div class=‘row’>div代碼嵌套代碼</div>
列排序
col-md-push-8 推向右側
2.2.2 CSS全局樣式
是CSS最基礎、最簡單的語法組合而成的，通過這些基礎而又核心的佈局語法，不需要太多時間就能製作出來比較精美的頁面。並且爲什麼叫它是全局樣式，主要是它的使用比較自由，可以在頁面中的任意位置使用，也可以放在Bootstrap組件裏使用