成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Bootstrap網(wǎng)格系統(tǒng)

ISherry / 903人閱讀

摘要：柵格系統(tǒng)中的列是通過指定到的值來表示其跨越的范圍。實(shí)例下圖是一個(gè)柵格系統(tǒng)，共有四行。然后在根目錄中，使用命令，可以自動(dòng)將源代碼編譯成，放在目錄中。

什么是Bootstrap

Bootstrap是一個(gè)用于快速開發(fā)Web應(yīng)用程序和網(wǎng)站的前端框架，它包括HTML,CSS,JS等。它是由Twitter開發(fā)，現(xiàn)在成為Github上最為流行的前端開發(fā)框架。它提供了一套響應(yīng)式，移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視窗尺寸增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。

柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。Bootstrap柵格系統(tǒng)的工作原理如下：

行(row)必須包含在.container(固定寬度)或.container-fluid(100% 寬度)中，以便為其賦予合適的排列(alignment)和內(nèi)補(bǔ)(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è)置負(fù)值margin 從而抵消掉為.container元素設(shè)置的padding，也就間接為行(row)所包含的列(column)抵消掉了padding。

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

柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個(gè)等寬的列可以使用三個(gè).col-xs-4來創(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è)備。

實(shí)例

下圖是一個(gè)柵格系統(tǒng)，共有四行。我們可以使用bootstrap的grid-system容易的實(shí)現(xiàn)。

代碼如下：


    
    

      
.col-md-1

      
.col-md-1

      
.col-md-1

      
.col-md-1

      
.col-md-1

      
.col-md-1

      
.col-md-1

      
.col-md-1

      
.col-md-1

      
.col-md-1

      
.col-md-1

      
.col-md-1

    

    
    

      
.col-md-8

      
.col-md-4

    

    
    

      
.col-md-4

      
.col-md-4

      
.col-md-4

    

    
    

      
.col-md-6

      
.col-md-6

在這段代碼中，我們使用.col-md-*柵格類，就可以創(chuàng)建一個(gè)基本的柵格系統(tǒng)。由于該例中使用的是.col-md-*，所以最佳的體驗(yàn)狀態(tài)是在中等屏幕設(shè)備上, 它顯示為水平排列的多個(gè)列，所有列必須放在.row之中。使用.container-fluid是為了是該柵格系統(tǒng)占100%寬度。如果你想瀏覽更多的例子，請(qǐng)?jiān)L問bootstrap官網(wǎng)。

Bootstrap實(shí)現(xiàn)柵格系統(tǒng)原理

Bootstrap是基于Less構(gòu)建的，但是同時(shí)還提供了一套Sass版本。本文就是通過分析Sass代碼來了解Bootstrap是如何實(shí)現(xiàn)柵格系統(tǒng)的。Bootstrap Sass版本的github地址為: https://github.com/twbs/bootstrap-sass。但是為了更加方便的理解，我將Bootstrap Sass中關(guān)于柵格系統(tǒng)的代碼多帶帶提取出來，創(chuàng)建了Bootstrap-grid-sass工程，github地址為: https://github.com/simonwoo/bootstrap-grid-sass。通過分析該項(xiàng)目中的代碼，你可以更好的理解柵格系統(tǒng)的工作原理。

該工程的項(xiàng)目結(jié)構(gòu)為：

路徑 描述
src 關(guān)于bootstrap柵格系統(tǒng)的源代碼
release 編譯出來的css代碼
gruntfile 定義編譯sass到css的任務(wù)
example 例子

src中共包括以下文件：

_variables.scss定義柵格系統(tǒng)用到的變量，如各種設(shè)備的尺寸大小

_grid.scss定義了.container, .container-fluid, .row等樣式

_config.scss配置文件，可以在該文件中自定義柵格系統(tǒng)列的數(shù)目，以及列與列之間的間距

mixin目錄, 定義了一系列生成柵格系統(tǒng)相關(guān)的mixin和一個(gè)清除浮動(dòng)的clearfix的mixin

通過改變_config.scss中的$grid-columns和$grid-gutter-width數(shù)值，來自定義你自己的柵格系統(tǒng)，例如，如果你覺得默認(rèn)的12列系統(tǒng)不能滿足需求，你可以定義24列系統(tǒng)等。然后在根目錄中，使用grunt sass:dev命令，可以自動(dòng)將scss源代碼編譯成css，放在release目錄中。

參考

Bootstrap中文站: http://v3.bootcss.com

Bootstrap Sass項(xiàng)目Github地址: https://github.com/twbs/bootstrap-sass

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115321.html

相關(guān)文章

  • Bootstrap 網(wǎng)格系統(tǒng)布局

    摘要：提供了一套響應(yīng)式移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，隨著屏幕或視口尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多列。三網(wǎng)格系統(tǒng)工作原理網(wǎng)格系統(tǒng)通過一系列包含內(nèi)容的行和列來創(chuàng)建頁面布局。下面列出了網(wǎng)格系統(tǒng)是如何工作的行必須放置在內(nèi)，以便獲得適當(dāng)?shù)膶?duì)齊和內(nèi)邊距。 Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)(Grid System)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為...

    HelKyle 評(píng)論0 收藏0

  • Bootstrap 網(wǎng)格系統(tǒng)布局

    摘要：提供了一套響應(yīng)式移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，隨著屏幕或視口尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多列。三網(wǎng)格系統(tǒng)工作原理網(wǎng)格系統(tǒng)通過一系列包含內(nèi)容的行和列來創(chuàng)建頁面布局。下面列出了網(wǎng)格系統(tǒng)是如何工作的行必須放置在內(nèi)，以便獲得適當(dāng)?shù)膶?duì)齊和內(nèi)邊距。 Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)(Grid System)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為...

    niuxiaowei111 評(píng)論0 收藏0

  • 創(chuàng)建自己的 CSS 網(wǎng)格系統(tǒng)【轉(zhuǎn)載 | 譯】

    摘要：為了防止這種情況，給提供的最小高度并使它們浮動(dòng)。基本網(wǎng)格準(zhǔn)備好了一些額外的列內(nèi)容樣式使我們的網(wǎng)格系統(tǒng)響應(yīng)調(diào)整我們的網(wǎng)格以實(shí)現(xiàn)移動(dòng)布局非常簡(jiǎn)單。注意本指南只是創(chuàng)建自己響應(yīng)式網(wǎng)格系統(tǒng)的起點(diǎn)。 此文翻譯自 Creating Your Own CSS Grid System | Jan，英文不好如有錯(cuò)誤 ? ，請(qǐng)指正。 CSS 網(wǎng)格已經(jīng)存在很長時(shí)間了。它們通常捆綁在 Bootstrap 等框架...

    gecko23 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<