網(wǎng)站制作NEWS
Bootstrap柵格布局
Bootstrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，它允許頁(yè)面在不同屏幕尺寸上自動(dòng)分為最多12列。系統(tǒng)包括易于使用的預(yù)定義類，以及強(qiáng)大的mixin用于生成更具語(yǔ)義的布局。
柵格系統(tǒng)通過(guò)一系列行與列的組合創(chuàng)建頁(yè)面布局，內(nèi)容可放入這些布局中。研究實(shí)例可將這些原理應(yīng)用于代碼。
Bootstrap柵格系統(tǒng)在不同屏幕設(shè)備上的工作原理可通過(guò)下表詳細(xì)了解。Bootstrap4版本中的柵格參數(shù)與之前版本有所不同。
使用單一一組.col-md-* 柵格類即可創(chuàng)建基本柵格系統(tǒng)，在手機(jī)和平板設(shè)備上堆疊顯示（適用于超小屏幕到小屏幕），在桌面設(shè)備上變?yōu)樗脚帕小Ｋ辛斜仨毼挥?row內(nèi)。
將最外層布局元素.container更改為.container-fluid，可將固定寬度柵格布局轉(zhuǎn)換為100%寬度布局。
針對(duì)不同屏幕設(shè)備，可以使用.col-xs-* 和.col-md-* 類來(lái)調(diào)整布局。通過(guò)添加.col-sm-* 類，可以創(chuàng)建更加動(dòng)態(tài)和強(qiáng)大的布局。
當(dāng).row內(nèi)包含的列超過(guò)12個(gè)時(shí)，多余的列將另起一行排列。
為解決某些閾值時(shí)某些列出現(xiàn)高度問(wèn)題，建議使用.clearfix與響應(yīng)式工具類。這些類可幫助解決列在分界點(diǎn)的響應(yīng)式問(wèn)題。
使用.col-md-offset-* 類可以將列向右側(cè)偏移。例如，.col-md-offset-4 類將 .col-md-4 元素向右側(cè)偏移4個(gè)列的寬度。也可以使用.col-*-offset-0類來(lái)覆蓋較低網(wǎng)格級(jí)別的偏移。
為了使用內(nèi)置的柵格系統(tǒng)將內(nèi)容嵌套，可在已有.col-sm-*元素內(nèi)部添加新的.row元素和一系列.col-sm-*元素。嵌套行所包含的列個(gè)數(shù)不能超過(guò)12個(gè)。
為了針對(duì)不同屏幕尺寸展示或隱藏頁(yè)面內(nèi)容，可以利用媒體查詢功能并結(jié)合以下工具類：.visible-*-*類，針對(duì)每種屏幕大小有三種變體，對(duì)應(yīng)CSS中的不同display屬性。
從v3.2.0版本起，形如.visible-*-*的類針對(duì)每種屏幕大小都有了三種變體，例如針對(duì)超小屏幕(xs)的類有.visible-xs-block、.visible-xs-inline和.visible-xs-inline-block。
與之相反的是.visible-xs、visible-sm、visible-md、visible-lg類，它們用于顯示某個(gè)頁(yè)面內(nèi)容。
多重隨機(jī)標(biāo)簽