bootstrap的理解
1.bootstrap的柵格系統
bootstrap 提供了一套響應式、移動裝置優先的流式柵格系統,隨著螢幕或視口(viewport)尺寸的增加,系統會自動分為最多12列。
1.1柵格系統的簡介
柵格系統用於通過一系列的行(row)與列(column)的組合來建立頁面布局。
2.建立柵格系統的步驟
2.1建立柵格系統的容器
<或者建立流式布局容器div
class
="container-fluid"
>
<
div
class
="row"
>
...
div>
div>
<2.2建立柵格柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。•通過「行(row)」在水平方向建立一組「列(column)」div
class
="container-fluid"
>
<
div
class
="row"
>
...
div>
div>
•如果一「行(row)」中包含了的「列(column)」大於 12,多餘的「列(column)」所在的元素將被作為乙個整體另起一行排列
<或者div
class
="row"
>
<
div
class
="col-md-1"
>.col-md-1
div>
<
div
class
="col-md-1"
>.col-md-1
div>
<
div
class
="col-md-1"
>.col-md-1
div>
<
div
class
="col-md-1"
>.col-md-1
div>
<
div
class
="col-md-1"
>.col-md-1
div>
<
div
class
="col-md-1"
>.col-md-1
div>
<
div
class
="col-md-1"
>.col-md-1
div>
<
div
class
="col-md-1"
>.col-md-1
div>
<
div
class
="col-md-1"
>.col-md-1
div>
<
div
class
="col-md-1"
>.col-md-1
div>
<
div
class
="col-md-1"
>.col-md-1
div>
<
div
class
="col-md-1"
>.col-md-1
div>
div>
<或者div
class
="row"
>
<
div
class
="col-md-8"
>.col-md-8
div>
<
div
class
="col-md-4"
>.col-md-4
div>
div>
<或者div
class
="row"
>
<
div
class
="col-md-4"
>.col-md-4
div>
<
div
class
="col-md-4"
>.col-md-4
div>
<
div
class
="col-md-4"
>.col-md-4
div>
div>
<3.針對不同裝置的布局3.1移動裝置和桌面螢幕div
class
="row"
>
<
div
class
="col-md-6"
>.col-md-6
div>
<
div
class
="col-md-6"
>.col-md-6
div>
div>
<3.2手機、平板、桌面div
class
="row"
>
<
div
class
="col-xs-12 col-md-8"
>.col-xs-12 .col-md-8
div>
<
div
class
="col-xs-6 col-md-4"
>.col-xs-6 .col-md-4
div>
div>
<
div
class
="row"
>
<
div
class
="col-xs-6 col-md-4"
>.col-xs-6 .col-md-4
div>
<
div
class
="col-xs-6 col-md-4"
>.col-xs-6 .col-md-4
div>
<
div
class
="col-xs-6 col-md-4"
>.col-xs-6 .col-md-4
div>
div>
<
div
class
="row"
>
<
div
class
="col-xs-6"
>.col-xs-6
div>
<
div
class
="col-xs-6"
>.col-xs-6
div>
div>
<還要去寫些其他東西明天補全div
class
="row"
>
<
div
class
="col-xs-12 col-sm-6 col-md-8"
>.col-xs-12 .col-sm-6 .col-md-8
div>
<
div
class
="col-xs-6 col-md-4"
>.col-xs-6 .col-md-4
div>
div>
<
div
class
="row"
>
<
div
class
="col-xs-6 col-sm-4"
>.col-xs-6 .col-sm-4
div>
<
div
class
="col-xs-6 col-sm-4"
>.col-xs-6 .col-sm-4
div>
<
div
class
="clearfix visible-xs-block"
>
div>
<
div
class
="col-xs-6 col-sm-4"
>.col-xs-6 .col-sm-4
div>
div>
Bootstrap 柵格系統
目錄 1 簡介 2 柵格選項 3 列偏移 4 巢狀列 5 列排序 1 簡介 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統,隨著螢幕裝置或視口 viewport 尺寸的增加,系統會自動分為最多12列。它包含了易於使用的預定義classe,還有強大的mixin用於生成更具語義的布局。2...
Bootstrap柵格系統
bootstrap基本模板 bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統,隨著螢幕或視口 viewport 尺寸的增加,系統會自動分為最多12列。它包含了易於使用的預定義類,還有強大的mixin 用於生成更具語義的布局。頁面中的一行,比例可以自己定義,但必須保證是12列,如果缺少...
bootstrap 柵格系統
cdn 網路 託管 優點 減少伺服器請求 柵格系統的容器 固定寬居中 container 0 768移動端 768 992pad端 992 1200pc端 1200 pc端寬屏 xs sm md lg 100 750 970 1170 全屏 百分百 container fluid 注意 子元素若要實...