這篇文章給大家分享的是有關(guān)如何使用bootstrap柵格系統(tǒng)的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來(lái)，先為遂平等服務(wù)建站，遂平等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為遂平企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

當(dāng)你使用bootstrap創(chuàng)建網(wǎng)頁(yè)時(shí)，希望網(wǎng)頁(yè)能適配不同分辨率的設(shè)備，那么就需要使用柵格系統(tǒng)。

柵格系統(tǒng)就是可以將一組塊級(jí)元素水平排列并可以隨著屏幕分辨率的不同來(lái)改變塊級(jí)元素的樣式。

柵格系統(tǒng)用于通過(guò)一系列的行（row）與列（column）的組合來(lái)創(chuàng)建頁(yè)面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。

下面就介紹一下 Bootstrap 柵格系統(tǒng)的工作原理：

“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。

通過(guò)“行（row）”在水平方向創(chuàng)建一組“列（column）”。

你的內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。

類似 .row 和 .col-xs-4 這種預(yù)定義的類，可以用來(lái)快速創(chuàng)建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來(lái)創(chuàng)建語(yǔ)義化的布局。

通過(guò)為“列（column）”設(shè)置 padding 屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過(guò)為 .row 元素設(shè)置負(fù)值 margin 從而抵消掉為 .container 元素設(shè)置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。

負(fù)值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內(nèi)容排成一行。

柵格系統(tǒng)中的列是通過(guò)指定1到12的值來(lái)表示其跨越的范圍。例如，三個(gè)等寬的列可以使用三個(gè) .col-xs-4 來(lái)創(chuàng)建。

如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個(gè)整體另起一行排列。

柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備 ， 并且針對(duì)小屏幕設(shè)備覆蓋柵格類。 因此，在元素上應(yīng)用任何 .col-md-* 柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備 ， 并且針對(duì)小屏幕設(shè)備覆蓋柵格類。 因此，在元素上應(yīng)用任何 .col-lg-* 不存在， 也影響大屏幕設(shè)備。

感謝各位的閱讀！關(guān)于如何使用bootstrap柵格系統(tǒng)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

文章標(biāo)題：如何使用bootstrap柵格系統(tǒng)
網(wǎng)頁(yè)URL：http://jinyejixie.com/article48/pppchp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站維護(hù)、App開(kāi)發(fā)、定制網(wǎng)站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)