這篇文章主要介紹了什么時候用bootstrap柵格系統(tǒng),具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
當(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è)備。
感謝你能夠認真閱讀完這篇文章,希望小編分享的“什么時候用bootstrap柵格系統(tǒng)”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
當(dāng)前題目:什么時候用bootstrap柵格系統(tǒng)-創(chuàng)新互聯(lián)
網(wǎng)站URL:http://chinadenli.net/article38/ddejsp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供移動網(wǎng)站建設(shè)、網(wǎng)站維護、營銷型網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、企業(yè)建站、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)