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組件里使用

總結

以上是生活随笔為你收集整理的BootStrap 组件和样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。