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