Bootstrap

Bootstrap是Twitter推出的一個開源的用於前端開發的工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發,是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範,它即是由動態CSS語言Less寫成。Bootstrap一經推出後頗受歡迎,一直是GitHub上的熱門開源項目,包括NASA的MSNBC(微軟全國廣播公司)的Breaking News都使用了該項目。


Bootstrap有比較詳細的中文文檔:http://v3.bootcss.com/


它的核心在於柵格系統:Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統,隨着屏幕或視口(viewport)尺寸的增加,系統會自動分爲最多12列。它包含了易於使用的預定義類,還有強大的mixin 用於生成更具語義的佈局。

簡介

柵格系統用於通過一系列的行(row)與列(column)的組合來創建頁面佈局,你的內容就可以放入這些創建好的佈局中。

“行(row)”必須包含在 .container (固定寬度)或 .container-fluid (100% 寬度)中,以便爲其賦予合適的排列(aligment)和內補(padding)。
通過“行(row)”在水平方向創建一組“列(column)”。
你的內容應當放置於“列(column)”內,並且,只有“列(column)”可以作爲行(row)”的直接子元素。
類似 .row 和 .col-xs-4 這種預定義的類,可以用來快速創建柵格佈局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的佈局。
通過爲“列(column)”設置 padding 屬性,從而創建列與列之間的間隔(gutter)。通過爲 .row 元素設置負值 margin 從而抵消掉爲 .container 元素設置的 padding,也就間接爲“行(row)”所包含的“列(column)”抵消掉了padding。
The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
如果一“行(row)”中包含了的“列(column)”大於 12,多餘的“列(column)”所在的元素將被作爲一個整體另起一行排列。
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章