- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) > web開(kāi)發(fā) > JavaScript >
- Bootstrap網(wǎng)頁(yè)布局網(wǎng)格的實(shí)現
柵格就是網(wǎng)格，英文Grid，之所以有的地方是網(wǎng)格，有的地方是柵格，只是翻譯習慣不同。十二柵格系統的意思是將整個(gè)屏幕按寬度劃分為十二等份，而一等分代表屏幕寬度的十二分之一，為什么劃分為十二等份，而不是十等分或其他等份呢，這是因為12是1，2，3，4，6的最小公倍數，根據經(jīng)驗，按照這樣的劃分是最美觀(guān)和實(shí)用的。當然，我也見(jiàn)過(guò)36柵格和十柵格系統，從使用上來(lái)看，確實(shí)不如12柵格方便。
在十二柵格系統，如果我想把屏幕分為左右兩側，左邊占三分之一，右邊占三分之二，則可以將左邊寬度設置為4柵格，右邊設置為8柵格。如果我需要左右各站一半，只需要設置每個(gè)為6柵格。如果我只需要設置一個(gè)頁(yè)面占滿(mǎn)屏幕，可以直接設置為12柵格。你看，是不是很方便？
Bootstrap 網(wǎng)格系統設計三個(gè)標簽，分別是container，row，col：
下面是一段示例代碼，將屏幕劃分為三個(gè)等寬的單元，先不用深究具體代碼的寫(xiě)法，只需要簡(jiǎn)單了解一下網(wǎng)格系統的結構即可，后面我們會(huì )詳細說(shuō)明。
<div class="container">
<div class="row">
<div class="col">
第一個(gè)單元
</div>
<div class="col">
第二個(gè)單元
</div>
<div class="col">
第三個(gè)單元
</div>
</div>
</div>
如果我們不設置每個(gè)列的寬度，則默認有多少個(gè)列都會(huì )平均分布各列所占寬度，但是如果一行有超過(guò)12個(gè)列，將會(huì )出現不可預知的現象（我是為了研究一下做了幾個(gè)測試，你沒(méi)有必要去測試這個(gè)，如果你想布局超過(guò)12個(gè)，可以用表格）。下面我給出一段代碼，后面將一直沿用這段代碼，做一些微小的更改，不在重復給出。
采用col、col-柵格數 設置寬度的時(shí)候，預覽效果請把窗口寬度設置為最大，否則可能會(huì )導致效果偏差，另外我們不建議實(shí)際應用中這樣設置，請使用響應式網(wǎ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)格系統演示</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<h1>Bootstrap是什么？</h1>
<p>
我們在開(kāi)發(fā)前端頁(yè)面的時(shí)候，如果每一個(gè)按鈕、樣式、處理瀏覽器兼容性的代碼都要自己從零
開(kāi)始去寫(xiě)，那就太浪費時(shí)間了。所以我們需要一個(gè)框架，幫我們實(shí)現一個(gè)頁(yè)面的基礎部分和解
決一些繁瑣的細節，只要在它的基礎上進(jìn)行個(gè)性化定制就可以了。Bootstrap 就是這樣一個(gè)簡(jiǎn)
潔、直觀(guān)、強悍的前端開(kāi)發(fā)框架，只要學(xué)習并遵守它的標準，即使是沒(méi)有學(xué)過(guò)網(wǎng)頁(yè)設計的開(kāi)發(fā)
者，也能做出很專(zhuān)業(yè)、美觀(guān)的頁(yè)面，極大地提高了工作效率。
</p>
</div>
<div class="col">
<h1>Bootstrap是什么？</h1>
<p>
我們在開(kāi)發(fā)前端頁(yè)面的時(shí)候，如果每一個(gè)按鈕、樣式、處理瀏覽器兼容性的代碼都要自己從零
開(kāi)始去寫(xiě)，那就太浪費時(shí)間了。所以我們需要一個(gè)框架，幫我們實(shí)現一個(gè)頁(yè)面的基礎部分和解
決一些繁瑣的細節，只要在它的基礎上進(jìn)行個(gè)性化定制就可以了。Bootstrap 就是這樣一個(gè)簡(jiǎn)
潔、直觀(guān)、強悍的前端開(kāi)發(fā)框架，只要學(xué)習并遵守它的標準，即使是沒(méi)有學(xué)過(guò)網(wǎng)頁(yè)設計的開(kāi)發(fā)
者，也能做出很專(zhuān)業(yè)、美觀(guān)的頁(yè)面，極大地提高了工作效率。
</p>
</div>
<div class="col">
<h1>Bootstrap是什么？</h1>
<p>
我們在開(kāi)發(fā)前端頁(yè)面的時(shí)候，如果每一個(gè)按鈕、樣式、處理瀏覽器兼容性的代碼都要自己從零
開(kāi)始去寫(xiě)，那就太浪費時(shí)間了。所以我們需要一個(gè)框架，幫我們實(shí)現一個(gè)頁(yè)面的基礎部分和解
決一些繁瑣的細節，只要在它的基礎上進(jìn)行個(gè)性化定制就可以了。Bootstrap 就是這樣一個(gè)簡(jiǎn)
潔、直觀(guān)、強悍的前端開(kāi)發(fā)框架，只要學(xué)習并遵守它的標準，即使是沒(méi)有學(xué)過(guò)網(wǎng)頁(yè)設計的開(kāi)發(fā)
者，也能做出很專(zhuān)業(yè)、美觀(guān)的頁(yè)面，極大地提高了工作效率。
</p>
</div>
<div class="col">
<h1>Bootstrap是什么？</h1>
<p>
我們在開(kāi)發(fā)前端頁(yè)面的時(shí)候，如果每一個(gè)按鈕、樣式、處理瀏覽器兼容性的代碼都要自己從零
開(kāi)始去寫(xiě)，那就太浪費時(shí)間了。所以我們需要一個(gè)框架，幫我們實(shí)現一個(gè)頁(yè)面的基礎部分和解
決一些繁瑣的細節，只要在它的基礎上進(jìn)行個(gè)性化定制就可以了。Bootstrap 就是這樣一個(gè)簡(jiǎn)
潔、直觀(guān)、強悍的前端開(kāi)發(fā)框架，只要學(xué)習并遵守它的標準，即使是沒(méi)有學(xué)過(guò)網(wǎng)頁(yè)設計的開(kāi)發(fā)
者，也能做出很專(zhuān)業(yè)、美觀(guān)的頁(yè)面，極大地提高了工作效率。
</p>
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
這段代碼效果顯示如上圖所示，你可以將下面單元格部分多復制幾個(gè)，看一下效果。
試著(zhù)將三個(gè)<div class="col">中的col分別換為col-3，col-6，col-3或者其他的數值，總之三個(gè)數相加和為12即可。當然你也可以刪除或者增加一個(gè)或幾個(gè)單元格，總之一行的和為12即可。通過(guò)這樣的簡(jiǎn)單設置，可以非常方便的修改單元格的寬度。下圖是設置為col分別換為col-2，col-2，col-4，col-4顯示效果
如果你在設置單元格數值的時(shí)候，如果有三個(gè)單元格，只設置了一個(gè)，則剩下的兩個(gè)單元格會(huì )平分剩下的空間，這樣就可以很方便的設置可變寬度的列了。提醒一下，設置固定值的單元格并不需要在前面，比如，2.1代碼你可以設置第二個(gè)單元格占屏幕一般（col-6），其他單元格平均分配。
當每個(gè)單元格都設置了寬度數值，當一行中，剩下的空間不再容納某個(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，查看效果。
可以看出，雖然設置為col-8也可以每個(gè)單元格一行，但是文字只占屏幕的十二分八，也就是三分之二，所以如果沒(méi)有特殊要求，盡量將每行的單元格數值相加正好為12。
關(guān)于響應式布局，簡(jiǎn)單來(lái)說(shuō)就是在不同屏幕大小的時(shí)候，展現出的頁(yè)面布局不同。例如手機看的時(shí)候一行只有一個(gè)單元格，平板看的時(shí)候一行兩個(gè)單元格，電腦看的時(shí)候有三個(gè)。Bootstrap可以很方便的實(shí)現這種功能。
看看下面的表格，是不是很熟悉，和斷點(diǎn)的規定一模一樣，只是多了個(gè)xs而已，其實(shí)默認就是xs，所以可以直接省略?？梢钥吹?，Bootstrap通過(guò)5個(gè)斷點(diǎn)，將屏幕分為6種大小類(lèi)型。
將2.1的例子，將四個(gè)<div class="col">都換成<div class="col-12 col-md-6 col-lg-4">，改變?yōu)g覽器窗口大小，查看效果，這段代碼的意思是<768px的時(shí)候，一行只有一列（每列寬12柵格），當768px<寬度<992px的時(shí)候是兩列（每類(lèi)寬6柵格），當大于992px的時(shí)候每行3列（每列寬4柵格）。下面是一段演示錄像
當然你還可以換分的更細一點(diǎn),換成<div class="col-12 col-sm-6 col-md-4 col-md-3 col-lg-2">。
在這里告訴你個(gè)小技巧，如果你想一行顯示幾列，寬度只就是用12除以幾，哈哈，估計你也能想得到。
如果你想讓所有的瀏覽器顯示效果一致，都分為兩列，也就是不想讓它響應式顯示，那么很簡(jiǎn)單，你把所有的屏幕下的柵格數設置相同的數值即可<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)頁(yè)布局網(wǎng)格的實(shí)現的文章就介紹到這了,更多相關(guān)Bootstrap網(wǎng)格布局內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。
Copyright ? 2009-2022 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 特網(wǎng)科技 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 百度云 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
