bootstrap的柵格系統

2021-08-10 08:32:43 字數 4880 閱讀 5997

bootstrap的理解

1.bootstrap的柵格系統

bootstrap 提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。

1.1柵格系統的簡介

柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面布局。

2.建立柵格系統的步驟

2.1建立柵格系統的容器

<


div 


class


="container-fluid"


>


<


div 


class


="row"


>


... 


div>


div>
或者建立流式布局容器

<


div 


class


="container-fluid"


>


<


div 


class


="row"


>


... 


div>


div>
2.2建立柵格柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。•通過「行（row）」在水平方向建立一組「列（column）」

•如果一「行（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>
或者

<


div 


class


="row"


>


<


div 


class


="col-md-6"


>.col-md-6


div>


<


div 


class


="col-md-6"


>.col-md-6


div>


div>
3.針對不同裝置的布局3.1移動裝置和桌面螢幕

<


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>
3.2手機、平板、桌面

<


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 注意 子元素若要實...