BootStrap 簡介

概念:

課程目標(biāo)：

• 響應(yīng)式布局技術(shù)
• 了解BootStrap前端框架

二.BootStrap

? Bootstrap 是全球最受歡迎的前端組件庫，用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的 WEB 項目。

? Bootstrap 是一個用于 HTML、CSS 和 JS 開發(fā)的開源工具包,來自于Twitter,利用 Bootstrap 提供的 Sass 變量和混合（mixins）、響應(yīng)式柵格系統(tǒng)、可擴展的預(yù)制組件以及強大的 jQuery 插件，能夠讓你快速地開發(fā)出產(chǎn)品原型或構(gòu)建整個 app。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-X2TH0vnA-1589444900650)(E:\政通路\課堂筆記\S2\bootstrap\assets\image-20200514104947017.png)]

2.1 引入文件

bootStrap.min.css

jquery.min.js

bootStrap.min.js

2.2 柵格系統(tǒng)

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mB2xHvew-1589444900655)(E:\政通路\課堂筆記\S2\bootstrap\assets\image-20200514105715506.png)]

Bootstrap 提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多 12 列。

我們也可以根據(jù)自己的需要，定義列數(shù)：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-pMmnc2G1-1589444900658)(E:\政通路\課堂筆記\S2\bootstrap\assets\image-20200514105759039.png)]

Bootstrap 4 的網(wǎng)格系統(tǒng)是響應(yīng)式的，列會根據(jù)屏幕大小自動重新排列。

Bootstrap 4 網(wǎng)格系統(tǒng)有以下 5 個類(class):

• .col- 針對所有設(shè)備
• col-xs 小設(shè)備
• .col-sm 平板 - 屏幕寬度等于或大于 576px
• .col-md 桌面顯示器 - 屏幕寬度等于或大于 768px)
• .col-lg 大桌面顯示器 - 屏幕寬度等于或大于 992px)
• .col-xl 超大桌面顯示器 - 屏幕寬度等于或大于 1200px)

2.2.1網(wǎng)格系統(tǒng)規(guī)則

Bootstrap4 網(wǎng)格系統(tǒng)規(guī)則:

• 網(wǎng)格每一行需要放在設(shè)置了.container (固定寬度) 或 .container-fluid (全屏寬度) 類的容器中，這樣就可以自動設(shè)置一些外邊距與內(nèi)邊距。

• 使用行樣式row來創(chuàng)建水平的列組。

• 內(nèi)容需要放置在列中，并且只有列可以是行的直接子節(jié)點。

• 預(yù)定義的類如 .row 和 .col-sm-4 可用于快速制作網(wǎng)格布局。col:column列單詞；sm:平板;-4:4個格

  col-sm-n，n（1–12）設(shè)置列。

• 列通過填充創(chuàng)建列內(nèi)容之間的間隙。 這個間隙是通過 .rows 類上的負(fù)邊距設(shè)置第一行和最后一列的偏移。

• 網(wǎng)格列是通過跨越指定的 12 個列來創(chuàng)建。 例如，設(shè)置三個相等的列，需要使用用三個.col-sm-4 來設(shè)置。

• Bootstrap 3 和 Bootstrap 4 最大的區(qū)別在于 Bootstrap 4 現(xiàn)在使用 flexbox（彈性盒子） 而不是浮動。 Flexbox 的一大優(yōu)勢是，沒有指定寬度的網(wǎng)格列將自動設(shè)置為等寬與等高列 。

列組合

? row/col-md-4 col-md-8等測試

列偏移

? col-md-offset-4,原理 margin-left

列嵌套

<div class=‘row’>div代碼嵌套代碼</div>

列排序

col-md-push-8 推向右側(cè)

2.2.2 CSS全局樣式

的一大優(yōu)勢是，沒有指定寬度的網(wǎng)格列將自動設(shè)置為等寬與等高列 。

列組合

? row/col-md-4 col-md-8等測試

列偏移

? col-md-offset-4,原理 margin-left

列嵌套

<div class=‘row’>div代碼嵌套代碼</div>

列排序

col-md-push-8 推向右側(cè)

2.2.2 CSS全局樣式

? 是CSS最基礎(chǔ)、最簡單的語法組合而成的，通過這些基礎(chǔ)而又核心的布局語法，不需要太多時間就能制作出來比較精美的頁面。并且為什么叫它是全局樣式，主要是它的使用比較自由，可以在頁面中的任意位置使用，也可以放在Bootstrap組件里使用

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。