溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了Bootstrap中的網(wǎng)格系統(tǒng)是怎樣的，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
1.1 十二柵格系統(tǒng)
柵格就是網(wǎng)格，英文Grid，之所以有的地方是網(wǎng)格，有的地方是柵格，只是翻譯習(xí)慣不同。十二柵格系統(tǒng)的意思是將整個(gè)屏幕按寬度劃分為十二等份，而一等分代表屏幕寬度的十二分之一，為什么劃分為十二等份，而不是十等分或其他等份呢，這是因?yàn)?2是1，2，3，4，6的最小公倍數(shù)，根據(jù)經(jīng)驗(yàn)，按照這樣的劃分是最美觀和實(shí)用的。當(dāng)然，我也見(jiàn)過(guò)36柵格和十柵格系統(tǒng)，從使用上來(lái)看，確實(shí)不如12柵格方便。
在十二柵格系統(tǒng)，如果我想把屏幕分為左右兩側(cè)，左邊占三分之一，右邊占三分之二，則可以將左邊寬度設(shè)置為4柵格，右邊設(shè)置為8柵格。如果我需要左右各站一半，只需要設(shè)置每個(gè)為6柵格。如果我只需要設(shè)置一個(gè)頁(yè)面占滿屏幕，可以直接設(shè)置為12柵格。你看，是不是很方便？
1.2 Bootstrap 網(wǎng)格系統(tǒng)標(biāo)簽
Bootstrap 網(wǎng)格系統(tǒng)設(shè)計(jì)三個(gè)標(biāo)簽，分別是container，row，col：
container是容器，在上一節(jié)中，專門(mén)做了詳細(xì)的介紹。
row是行的意思，代表著一個(gè)水平行
col是單元格，代表著具體每一個(gè)單元格，其寫(xiě)法有三種：col、col-柵格數(shù)（如col-3）、col-屏幕大小-柵格數(shù)（如col-md-3）。
下面是一段示例代碼，將屏幕劃分為三個(gè)等寬的單元，先不用深究具體代碼的寫(xiě)法，只需要簡(jiǎn)單了解一下網(wǎng)格系統(tǒng)的結(jié)構(gòu)即可，后面我們會(huì)詳細(xì)說(shuō)明。
<div class="container"> <div class="row"> <div class="col"> 第一個(gè)單元 </div> <div class="col"> 第二個(gè)單元 </div> <div class="col"> 第三個(gè)單元 </div> </div> </div>
1.3 Bootstrap 網(wǎng)格系統(tǒng)規(guī)則
使用行（row）來(lái)創(chuàng)建列的水平組。
一個(gè)頁(yè)面內(nèi)可以有多個(gè)行。
行必須放置在 容器（container）內(nèi)，以便獲得適當(dāng)?shù)膶?duì)齊（alignment）和內(nèi)邊距（padding）。
內(nèi)容應(yīng)該放置在列（col）內(nèi)，且唯有列可以是行的直接子元素。
列內(nèi)還可以嵌套行，列內(nèi)的行無(wú)需container，因?yàn)榱斜旧砭褪莻€(gè)容器。
可以直接使用預(yù)定義的網(wǎng)格類，比如 col-屏幕大小-柵格數(shù)，用于快速創(chuàng)建柵格布局。
預(yù)定義類中，屏幕大小有5個(gè)值，主要用于響應(yīng)式設(shè)計(jì)，見(jiàn)3.1。柵格數(shù)為數(shù)字1到12，代表占屏幕寬度。
2.1 默認(rèn)等寬布局
如果我們不設(shè)置每個(gè)列的寬度，則默認(rèn)有多少個(gè)列都會(huì)平均分布各列所占寬度，但是如果一行有超過(guò)12個(gè)列，將會(huì)出現(xiàn)不可預(yù)知的現(xiàn)象（我是為了研究一下做了幾個(gè)測(cè)試，你沒(méi)有必要去測(cè)試這個(gè)，如果你想布局超過(guò)12個(gè)，可以用表格）。下面我給出一段代碼，后面將一直沿用這段代碼，做一些微小的更改，不在重復(fù)給出。
采用col、col-柵格數(shù) 設(shè)置寬度的時(shí)候，預(yù)覽效果請(qǐng)把窗口寬度設(shè)置為最大，否則可能會(huì)導(dǎo)致效果偏差，另外我們不建議實(shí)際應(yīng)用中這樣設(shè)置，請(qǐng)使用響應(yīng)式網(wǎng)格布局，哪怕你不想響應(yīng)。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>網(wǎng)格系統(tǒng)演示</title> </head> <body> <div> <div> <div> <h2>Bootstrap是什么？</h2> <p> 我們?cè)陂_(kāi)發(fā)前端頁(yè)面的時(shí)候，如果每一個(gè)按鈕、樣式、處理瀏覽器兼容性的代碼都要自己從零 開(kāi)始去寫(xiě)，那就太浪費(fèi)時(shí)間了。所以我們需要一個(gè)框架，幫我們實(shí)現(xiàn)一個(gè)頁(yè)面的基礎(chǔ)部分和解 決一些繁瑣的細(xì)節(jié)，只要在它的基礎(chǔ)上進(jìn)行個(gè)性化定制就可以了。Bootstrap 就是這樣一個(gè)簡(jiǎn) 潔、直觀、強(qiáng)悍的前端開(kāi)發(fā)框架，只要學(xué)習(xí)并遵守它的標(biāo)準(zhǔn)，即使是沒(méi)有學(xué)過(guò)網(wǎng)頁(yè)設(shè)計(jì)的開(kāi)發(fā) 者，也能做出很專業(yè)、美觀的頁(yè)面，極大地提高了工作效率。 </p> </div> <div> <h2>Bootstrap是什么？</h2> <p> 我們?cè)陂_(kāi)發(fā)前端頁(yè)面的時(shí)候，如果每一個(gè)按鈕、樣式、處理瀏覽器兼容性的代碼都要自己從零 開(kāi)始去寫(xiě)，那就太浪費(fèi)時(shí)間了。所以我們需要一個(gè)框架，幫我們實(shí)現(xiàn)一個(gè)頁(yè)面的基礎(chǔ)部分和解 決一些繁瑣的細(xì)節(jié)，只要在它的基礎(chǔ)上進(jìn)行個(gè)性化定制就可以了。Bootstrap 就是這樣一個(gè)簡(jiǎn) 潔、直觀、強(qiáng)悍的前端開(kāi)發(fā)框架，只要學(xué)習(xí)并遵守它的標(biāo)準(zhǔn)，即使是沒(méi)有學(xué)過(guò)網(wǎng)頁(yè)設(shè)計(jì)的開(kāi)發(fā) 者，也能做出很專業(yè)、美觀的頁(yè)面，極大地提高了工作效率。 </p> </div> <div> <h2>Bootstrap是什么？</h2> <p> 我們?cè)陂_(kāi)發(fā)前端頁(yè)面的時(shí)候，如果每一個(gè)按鈕、樣式、處理瀏覽器兼容性的代碼都要自己從零 開(kāi)始去寫(xiě)，那就太浪費(fèi)時(shí)間了。所以我們需要一個(gè)框架，幫我們實(shí)現(xiàn)一個(gè)頁(yè)面的基礎(chǔ)部分和解 決一些繁瑣的細(xì)節(jié)，只要在它的基礎(chǔ)上進(jìn)行個(gè)性化定制就可以了。Bootstrap 就是這樣一個(gè)簡(jiǎn) 潔、直觀、強(qiáng)悍的前端開(kāi)發(fā)框架，只要學(xué)習(xí)并遵守它的標(biāo)準(zhǔn)，即使是沒(méi)有學(xué)過(guò)網(wǎng)頁(yè)設(shè)計(jì)的開(kāi)發(fā) 者，也能做出很專業(yè)、美觀的頁(yè)面，極大地提高了工作效率。 </p> </div> <div> <h2>Bootstrap是什么？</h2> <p> 我們?cè)陂_(kāi)發(fā)前端頁(yè)面的時(shí)候，如果每一個(gè)按鈕、樣式、處理瀏覽器兼容性的代碼都要自己從零 開(kāi)始去寫(xiě)，那就太浪費(fèi)時(shí)間了。所以我們需要一個(gè)框架，幫我們實(shí)現(xiàn)一個(gè)頁(yè)面的基礎(chǔ)部分和解 決一些繁瑣的細(xì)節(jié)，只要在它的基礎(chǔ)上進(jìn)行個(gè)性化定制就可以了。Bootstrap 就是這樣一個(gè)簡(jiǎn) 潔、直觀、強(qiáng)悍的前端開(kāi)發(fā)框架，只要學(xué)習(xí)并遵守它的標(biāo)準(zhǔn)，即使是沒(méi)有學(xué)過(guò)網(wǎng)頁(yè)設(shè)計(jì)的開(kāi)發(fā) 者，也能做出很專業(yè)、美觀的頁(yè)面，極大地提高了工作效率。 </p> </div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
這段代碼效果顯示如上圖所示，你可以將下面單元格部分多復(fù)制幾個(gè)，看一下效果。
<div class="col"> <h2>Bootstrap是什么？</h2> <p> 我們?cè)陂_(kāi)發(fā)前端頁(yè)面的時(shí)候，如果每一個(gè)按鈕、樣式、處理瀏覽器兼容性的代碼都要自己從零 開(kāi)始去寫(xiě)，那就太浪費(fèi)時(shí)間了。所以我們需要一個(gè)框架，幫我們實(shí)現(xiàn)一個(gè)頁(yè)面的基礎(chǔ)部分和解 決一些繁瑣的細(xì)節(jié)，只要在它的基礎(chǔ)上進(jìn)行個(gè)性化定制就可以了。Bootstrap 就是這樣一個(gè)簡(jiǎn) 潔、直觀、強(qiáng)悍的前端開(kāi)發(fā)框架，只要學(xué)習(xí)并遵守它的標(biāo)準(zhǔn)，即使是沒(méi)有學(xué)過(guò)網(wǎng)頁(yè)設(shè)計(jì)的開(kāi)發(fā) 者，也能做出很專業(yè)、美觀的頁(yè)面，極大地提高了工作效率。 </p> </div>
2.2 設(shè)置每個(gè)列寬
試著將三個(gè)<div class="col">中的col分別換為col-3，col-6，col-3或者其他的數(shù)值，總之三個(gè)數(shù)相加和為12即可。當(dāng)然你也可以刪除或者增加一個(gè)或幾個(gè)單元格，總之一行的和為12即可。
通過(guò)這樣的簡(jiǎn)單設(shè)置，可以非常方便的修改單元格的寬度。
下圖是設(shè)置為col分別換為col-2，col-2，col-4，col-4顯示效果
2.3 可變寬度的列
如果你在設(shè)置單元格數(shù)值的時(shí)候，如果有三個(gè)單元格，只設(shè)置了一個(gè)，則剩下的兩個(gè)單元格會(huì)平分剩下的空間，這樣就可以很方便的設(shè)置可變寬度的列了。提醒一下，設(shè)置固定值的單元格并不需要在前面，比如，2.1代碼你可以設(shè)置第二個(gè)單元格占屏幕一般（col-6），其他單元格平均分配。
2.4 自動(dòng)換行的列
當(dāng)每個(gè)單元格都設(shè)置了寬度數(shù)值，當(dāng)一行中，剩下的空間不再容納某個(gè)單元格的時(shí)候，會(huì)自動(dòng)換行。
將2.1的例子，將四個(gè)<div class="col">中的col都換為col-6，查看效果。
將2.1的例子，將四個(gè)<div class="col">中的col都換為col-12，查看效果。
將2.1的例子，將四個(gè)<div class="col">中的col都換為col-8，查看效果。
可以看出，雖然設(shè)置為col-8也可以每個(gè)單元格一行，但是文字只占屏幕的十二分八，也就是三分之二，所以如果沒(méi)有特殊要求，盡量將每行的單元格數(shù)值相加正好為12。
3.1 什么是響應(yīng)式布局
關(guān)于響應(yīng)式布局，簡(jiǎn)單來(lái)說(shuō)就是在不同屏幕大小的時(shí)候，展現(xiàn)出的頁(yè)面布局不同。例如手機(jī)看的時(shí)候一行只有一個(gè)單元格，平板看的時(shí)候一行兩個(gè)單元格，電腦看的時(shí)候有三個(gè)。Bootstrap可以很方便的實(shí)現(xiàn)這種功能。
3.2 Bootstrap 網(wǎng)格系統(tǒng)屏幕大小劃分
看看下面的表格，是不是很熟悉，和斷點(diǎn)的規(guī)定一模一樣，只是多了個(gè)xs而已，其實(shí)默認(rèn)就是xs，所以可以直接省略?？梢钥吹?，Bootstrap通過(guò)5個(gè)斷點(diǎn)，將屏幕分為6種大小類型。
| xs <576px | sm ≥576px | md ≥768px | lg ≥992px | xl ≥1200px | xxl ≥1400px | |
|---|---|---|---|---|---|---|
| Container容器 | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| 屏幕大小類前綴 | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | .col-xxl- |
3.3 Bootstrap 網(wǎng)格響應(yīng)式布局實(shí)例
將2.1的例子，將四個(gè)<div class="col">都換成<div class="col-12 col-md-6 col-lg-4">，改變?yōu)g覽器窗口大小，查看效果，這段代碼的意思是<768px的時(shí)候，一行只有一列（每列寬12柵格），當(dāng)768px<寬度<992px的時(shí)候是兩列（每類寬6柵格），當(dāng)大于992px的時(shí)候每行3列（每列寬4柵格）。
下面是一段演示錄像
當(dāng)然你還可以換分的更細(xì)一點(diǎn),換成<div class="col-12 col-sm-6 col-md-4 col-md-3 col-lg-2">。
在這里告訴你個(gè)小技巧，如果你想一行顯示幾列，寬度只就是用12除以幾，哈哈，估計(jì)你也能想得到。
3.4 如果你不想響應(yīng)
如果你想讓所有的瀏覽器顯示效果一致，都分為兩列，也就是不想讓它響應(yīng)式顯示，那么很簡(jiǎn)單，你把所有的屏幕下的柵格數(shù)設(shè)置相同的數(shù)值即可<div class="col-6 col-sm-6 col-md-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">，這樣就可以保持任何屏幕下一致了。
上述內(nèi)容就是Bootstrap中的網(wǎng)格系統(tǒng)是怎樣的，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
