真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

bootstrap柵格系統(tǒng)的工作原理是什么-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關bootstrap柵格系統(tǒng)的工作原理是什么的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)一直在為企業(yè)提供服務，多年的磨煉，使我們在創(chuàng)意設計，全網(wǎng)營銷推廣到技術研發(fā)擁有了開發(fā)經驗。我們擅長傾聽企業(yè)需求，挖掘用戶對產品需求服務價值，為企業(yè)制作有用的創(chuàng)意設計體驗。核心團隊擁有超過十年以上行業(yè)經驗，涵蓋創(chuàng)意，策化，開發(fā)等專業(yè)領域，公司涉及領域有基礎互聯(lián)網(wǎng)服務西部信息服務器托管、App定制開發(fā)、手機移動建站、網(wǎng)頁設計、網(wǎng)絡整合營銷。

一、什么是Bootstrap

Bootstrap 提供了一套響應式、移動設備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。包含了用于簡單的布局選項的預定義類，也包含了用于生成更多語義布局的功能強大的混合類。

我們來理解一下這一段話，可以發(fā)現(xiàn)其中最重要的部分就是移動設備優(yōu)先，那么什么是移動設備優(yōu)先呢？

Bootstrap的基礎CSS代碼默認從小屏幕設備（比如移動設備、平板電腦）開始，然后使用媒體查詢擴展到大屏幕設備（比如筆記本電腦、臺式電腦）上的組件和網(wǎng)格。

有著如下策略：

內容：決定什么是最重要的。布局：優(yōu)先設計更小的寬度。漸進增強：隨著屏幕大小增加而添加元素。

二、工作原理

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

工作原理如下：

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

通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。但列數(shù)之和不能超過平分的總列數(shù)（在超過時，多余部分會換行顯示），默認12。（使用Less或者Sass可以進行自定義設置）,如下：

你的內容應當放置于“列（column）”內，并且，只有“列（column）”可以作為行（row）”的直接子元素。

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

通過為“列（column）”設置 padding 屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為 .row 元素設置負值 margin 從而抵消掉為 .container 元素設置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。

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

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

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

感謝各位的閱讀！關于“bootstrap柵格系統(tǒng)的工作原理是什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

http://weahome.cn/article/dpgsjj.html