如何使用bootstrap柵格系統(tǒng)-創(chuàng)新互聯(lián)
這篇文章給大家分享的是有關(guān)如何使用bootstrap柵格系統(tǒng)的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
當(dāng)你使用bootstrap創(chuàng)建網(wǎng)頁時，希望網(wǎng)頁能適配不同分辨率的設(shè)備，那么就需要使用柵格系統(tǒng)。
柵格系統(tǒng)就是可以將一組塊級元素水平排列并可以隨著屏幕分辨率的不同來改變塊級元素的樣式。
柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。
下面就介紹一下 Bootstrap 柵格系統(tǒng)的工作原理：
“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補（padding）。
通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。
你的內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。
類似 .row 和 .col-xs-4 這種預(yù)定義的類，可以用來快速創(chuàng)建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創(chuàng)建語義化的布局。
通過為“列（column）”設(shè)置 padding 屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為 .row 元素設(shè)置負值 margin 從而抵消掉為 .container 元素設(shè)置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內(nèi)容排成一行。
柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創(chuàng)建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。
柵格類適用于與屏幕寬度大于或等于分界點大小的設(shè)備 ， 并且針對小屏幕設(shè)備覆蓋柵格類。 因此，在元素上應(yīng)用任何 .col-md-* 柵格類適用于與屏幕寬度大于或等于分界點大小的設(shè)備 ， 并且針對小屏幕設(shè)備覆蓋柵格類。 因此，在元素上應(yīng)用任何 .col-lg-* 不存在， 也影響大屏幕設(shè)備。
感謝各位的閱讀！關(guān)于如何使用bootstrap柵格系統(tǒng)就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
本文名稱：如何使用bootstrap柵格系統(tǒng)-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://m.jiaotiyi.com/article/didsch.html