BootStrap 簡(jiǎn)介

概念:

課程目標(biāo)：

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

二.BootStrap

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

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

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

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

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

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

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

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

• .col- 針對(duì)所有設(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 (全屏寬度) 類(lèi)的容器中，這樣就可以自動(dòng)設(shè)置一些外邊距與內(nèi)邊距。

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

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

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

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

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

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

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

列組合

? row/col-md-4 col-md-8等測(cè)試

列偏移

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

列嵌套

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

列排序

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

2.2.2 CSS全局樣式

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

列組合

? row/col-md-4 col-md-8等測(cè)試

列偏移

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

列嵌套

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

列排序

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

2.2.2 CSS全局樣式

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

總結(jié)

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

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