使用柵格系統(tǒng)布局網(wǎng)頁

《使用柵格系統(tǒng)布局網(wǎng)頁》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、http://web.mybdqn.com/使用柵格系統(tǒng)布局網(wǎng)頁柵格系統(tǒng)是什么柵格系統(tǒng)是Bootstrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin用于生成更具語義的布局。柵格系統(tǒng)能做什么柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。柵格系統(tǒng)的預(yù)定義類1.rowrow即為行，用于在頁面中創(chuàng)建一個(gè)或一組縱向堆疊的控件。注意：row必須

2、包含container中。如：在瀏覽器中查看效果：col-尺寸-所占寬度在“行（row）”中可以添加一組水平方向的“列（column）”。為適應(yīng)不同尺寸的屏幕，Bootstrap定義了四種列的尺寸以保證在不同設(shè)備上顯示效果不變:名稱對應(yīng)設(shè)備最大列寬度xs手機(jī)(<768px)自動(dòng)(移動(dòng)設(shè)備優(yōu)先)sm平板(>=768px)62pxmd桌面顯示器(>=992px)81pxlg大桌面顯示器(>=1200px)97pxhttp://web.mybdqn.com/柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個(gè)等寬的

3、列可以使用三個(gè).col-xs-4來創(chuàng)建。如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素將被作為一個(gè)整體另起一行排列。如：大屏幕效果：小屏幕效果：若希望在小屏幕上顯示相同效果，則需要同時(shí)使用針對小屏幕的類樣式如：大屏幕效果：http://web.mybdqn.com/小屏幕效果：快速上手使用柵格系統(tǒng)實(shí)現(xiàn)網(wǎng)頁”國字型”布局“國字型”網(wǎng)頁布局，也可以稱為“同”字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些兩小條內(nèi)

4、容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是我們在網(wǎng)上見到的差不多最多的一種結(jié)構(gòu)類型。1.創(chuàng)建Bootstrap基本文檔結(jié)構(gòu)效果如下：2.使用row類將網(wǎng)頁分為三行，分別為頭、中、底http://web.mybdqn.com/效果如下：1.將”中”行分為3列，左右對稱比中間略小，中間最大效果如下：http://web.mybdqn.com/1.為兼容小屏幕設(shè)備，增加小屏幕類小屏幕顯示：總結(jié)柵格系統(tǒng)屬于全局CSS樣式模塊，主要用于網(wǎng)頁布局，包括支持不同設(shè)備顯示且移動(dòng)設(shè)備

5、優(yōu)先。本文只介紹了基本用法，除此之外還有列的偏移、嵌套等更為靈活的使用方式，具體請查看官方文檔。