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