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