當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

积跬步，聚小流------Bootstrap学习记录(3)

發(fā)布時間：2024/4/17 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了积跬步，聚小流------Bootstrap学习记录(3) 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

響應(yīng)式作為Bootstrap的一大特色。柵格系統(tǒng)可謂是功不可沒，既然如此，那我們就來看一下柵格系統(tǒng)是怎樣幫助bootstrap實(shí)現(xiàn)響應(yīng)式布局的呢？

1、什么是柵格系統(tǒng)

我們能夠從Bootstrap的官網(wǎng)上找到比較官方的回答：Bootstrap提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流失柵格系統(tǒng)，隨著屏幕或視口(viweport)的添加，系統(tǒng)會自己主動分為最多12列。

它包括了易于使用的提前定義類，還有強(qiáng)大的mixin用于生成更具語義的布局。

這樣的說法是比較精準(zhǔn)并且明了的。可是還能夠更通俗一點(diǎn)的來解釋：將視口等分12列，當(dāng)中的元素占領(lǐng)不同的列數(shù)，當(dāng)視口改變時，元素所占領(lǐng)的列數(shù)會對應(yīng)改變。當(dāng)然這是我臨時的理解。

2、一個最簡單的柵格演示樣例

我先上一段我用來做演示樣例的代碼，和對應(yīng)的效果展示：

我電腦當(dāng)前的分辨率為1600*900。這是的顯示效果例如以下：

當(dāng)我縮小瀏覽器大小到一定程度時。再來查看顯示效果：

然后此種情況下我繼續(xù)縮小瀏覽器視口，會發(fā)現(xiàn)布局會進(jìn)一步的改變：

而當(dāng)我進(jìn)一步縮小視口的時候，圖片布局也對應(yīng)的發(fā)生了改變，從而顯示了終結(jié)效果：

看到了這種效果，和我最簡單的描寫敘述，如今預(yù)計會有一個最大的疑惑，縮小到什么程度才會有對應(yīng)的效果呢，柵格系統(tǒng)在這里是怎么表現(xiàn)的呢？

3、演示樣例代碼分析

首先，在代碼的最外層有一個<div class="container"></div>,作為一個div出現(xiàn)。我們非常easy想到，它是一個獨(dú)立的模塊。而它詳細(xì)的表現(xiàn)形式呢。我們來看下對應(yīng)樣式表中的設(shè)置：

.container {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto; } @media (min-width: 768px) {.container {width: 750px;} } @media (min-width: 992px) {.container {width: 970px;} } @media (min-width: 1200px) {.container {width: 1170px;} }

這里我們在container里看到了一個熟悉的代碼：margin-right:auto;margin-left:auto;這不由讓我想起了我們最經(jīng)常使用的margin:0px auto；就是居中效果。而在這里相同依據(jù)屏幕大小設(shè)定的它的固定寬度。當(dāng)然，我們相同要注意一點(diǎn)。這里是沒有設(shè)置高度的，假設(shè)用來布局的話，高度的問題還須要注意協(xié)調(diào)，這個后面再說。

而我們在這個地方看到了三個用來做界限切割的視口尺寸：768px、992px、1200px。那這三個尺寸是不是與我之前的操作有對應(yīng)的關(guān)系呢，答案是肯定的，就是由于它的關(guān)系。

我們來看官網(wǎng)在這里的解釋：

我們在代碼編寫中也用到了對應(yīng)的class屬性:col-md-、col-lg-、col-sm-、col-xs-等等，而這里的md則是middle，lg代表了large，sm代表了small，xs也就代表了“更小。極小”的意思吧。這時候我們再來看上面的代碼是不是很基礎(chǔ)，可謂是簡單至極。

可是另一個細(xì)節(jié)我們絕對是不能夠忽視的，那就是<div class="row"></div>的存在。它的存在意義是什么呢？

假設(shè)出現(xiàn)row、column的字眼，最先想起來的是什么，對了，就是table，表格中才有行列，而這也就是我們的網(wǎng)格系統(tǒng)了，既然有了col-。那怎么能少的了row。并且列也僅僅能在行中體現(xiàn)，行的以下僅僅能是列，而對應(yīng)行的對應(yīng)列才是一個詳細(xì)的單元格，才干寫內(nèi)容，而這里的row也僅僅能被放置在container或者container-fluid之內(nèi)。

至于對于行和列的設(shè)定，我們能夠來看下樣式表里的定義：

.row {margin-right: -15px;margin-left: -15px; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {position: relative;min-height: 1px;padding-right: 15px;padding-left: 15px; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {float: left; } .col-xs-12 {width: 100%; } .col-xs-11 {width: 91.66666667%; } .col-xs-10 {width: 83.33333333%; } .col-xs-9 {width: 75%; } .col-xs-8 {width: 66.66666667%; } .col-xs-7 {width: 58.33333333%; } .col-xs-6 {width: 50%; } .col-xs-5 {width: 41.66666667%; } .col-xs-4 {width: 33.33333333%; } .col-xs-3 {width: 25%; } .col-xs-2 {width: 16.66666667%; } .col-xs-1 {width: 8.33333333%; }

看到這里的.row的設(shè)置，發(fā)現(xiàn)了什么呢，還記得.container的設(shè)置么。padding:0px 15px;而這里的margin卻是-15px啊。

就這樣，最簡單的柵格系統(tǒng)就完畢了，突然感覺好高大上...

轉(zhuǎn)載于:https://www.cnblogs.com/claireyuancy/p/6817236.html

總結(jié)

以上是生活随笔為你收集整理的积跬步，聚小流------Bootstrap学习记录(3)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Android Studio中关于9-p
下一篇：某人一定不会的——重口味线段树