簡(jiǎn)體中文(ZH-CN) English(EN) 繁體中文(ZH-TW) 日本語(yǔ)(JA) ???(KO) Melayu(MS) Fran?ais(FR) Deutsch(DE)

ディレクトリ 検索

Bootstrap 基礎(chǔ)教程 Bootstrap 環(huán)境安裝 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概覽 Bootstrap 按鈕 Bootstrap 表單 Bootstrap 表格 Bootstrap 代碼 Bootstrap 輔助類 Bootstrap 排版 Bootstrap 圖片 Bootstrap 網(wǎng)格系統(tǒng) Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備 Bootstrap 響應(yīng)式實(shí)用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標(biāo)簽 Bootstrap 超大屏幕（Jumbotron） Bootstrap 導(dǎo)航欄 Bootstrap 導(dǎo)航元素 Bootstrap 多媒體對(duì)象（Media Object） Bootstrap 分頁(yè) Bootstrap 徽章（Badges） Bootstrap 進(jìn)度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導(dǎo)航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁(yè)面標(biāo)題（Page Header） Bootstrap 字體圖標(biāo)(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標(biāo)簽頁(yè)（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導(dǎo)航（Affix） Bootstrap 滾動(dòng)監(jiān)聽(tīng)（Scrollspy） Bootstrap 過(guò)渡效果（Transition） Bootstrap 警告框（Alert） Bootstrap 輪播（Carousel） Bootstrap 模態(tài)框（Modal）插件 Bootstrap 提示工具（Tooltip） Bootstrap 下拉菜單（Dropdown） Bootstrap 折疊（Collapse） Bootstrap 附錄 Bootstrap CSS編碼規(guī)范 Bootstrap HTML編碼規(guī)范 Bootstrap UI 編輯器

?
このドキュメントでは、 php中國(guó)語(yǔ)ネットマニュアルリリース

テキスト

Bootstrap 網(wǎng)格系統(tǒng)

本章節(jié)我們將講解 Bootstrap 的網(wǎng)格系統(tǒng)（Grid System）。

Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。

什么是網(wǎng)格（Grid）？

摘自維基百科：

在平面設(shè)計(jì)中，網(wǎng)格是一種由一系列用于組織內(nèi)容的相交的直線（垂直的、水平的）組成的結(jié)構(gòu)（通常是二維的）。它廣泛應(yīng)用于打印設(shè)計(jì)中的設(shè)計(jì)布局和內(nèi)容結(jié)構(gòu)。在網(wǎng)頁(yè)設(shè)計(jì)中，它是一種用于快速創(chuàng)建一致的布局和有效地使用 HTML 和 CSS 的方法。

簡(jiǎn)單地說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)中的網(wǎng)格用于組織內(nèi)容，讓網(wǎng)站易于瀏覽，并降低用戶端的負(fù)載。

什么是 Bootstrap 網(wǎng)格系統(tǒng)（Grid System）？

Bootstrap 官方文檔中有關(guān)網(wǎng)格系統(tǒng)的描述：

Bootstrap 包含了一個(gè)響應(yīng)式的、移動(dòng)設(shè)備優(yōu)先的、不固定的網(wǎng)格系統(tǒng)，可以隨著設(shè)備或視口大小的增加而適當(dāng)?shù)財(cái)U(kuò)展到 12 列。它包含了用于簡(jiǎn)單的布局選項(xiàng)的預(yù)定義類，也包含了用于生成更多語(yǔ)義布局的功能強(qiáng)大的混合類。

讓我們來(lái)理解一下上面的語(yǔ)句。Bootstrap 3 是移動(dòng)設(shè)備優(yōu)先的，在這個(gè)意義上，Bootstrap 代碼從小屏幕設(shè)備（比如移動(dòng)設(shè)備、平板電腦）開(kāi)始，然后擴(kuò)展到大屏幕設(shè)備（比如筆記本電腦、臺(tái)式電腦）上的組件和網(wǎng)格。

移動(dòng)設(shè)備優(yōu)先策略

內(nèi)容
- 決定什么是最重要的。
布局
- 優(yōu)先設(shè)計(jì)更小的寬度。
- 基礎(chǔ)的 CSS 是移動(dòng)設(shè)備優(yōu)先，媒體查詢是針對(duì)于平板電腦、臺(tái)式電腦。
漸進(jìn)增強(qiáng)
- 隨著屏幕大小的增加而添加元素。

響應(yīng)式網(wǎng)格系統(tǒng)隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
12

Bootstrap 網(wǎng)格系統(tǒng)（Grid System）的工作原理

網(wǎng)格系統(tǒng)通過(guò)一系列包含內(nèi)容的行和列來(lái)創(chuàng)建頁(yè)面布局。下面列出了 Bootstrap 網(wǎng)格系統(tǒng)是如何工作的：

行必須放置在 .container class 內(nèi)，以便獲得適當(dāng)?shù)膶?duì)齊（alignment）和內(nèi)邊距（padding）。
使用行來(lái)創(chuàng)建列的水平組。
內(nèi)容應(yīng)該放置在列內(nèi)，且唯有列可以是行的直接子元素。
預(yù)定義的網(wǎng)格類，比如 .row 和 .col-xs-4，可用于快速創(chuàng)建網(wǎng)格布局。LESS 混合類可用于更多語(yǔ)義布局。
列通過(guò)內(nèi)邊距（padding）來(lái)創(chuàng)建列內(nèi)容之間的間隙。該內(nèi)邊距是通過(guò) .rows 上的外邊距（margin）取負(fù)，表示第一列和最后一列的行偏移。
網(wǎng)格系統(tǒng)是通過(guò)指定您想要橫跨的十二個(gè)可用的列來(lái)創(chuàng)建的。例如，要?jiǎng)?chuàng)建三個(gè)相等的列，則使用三個(gè) .col-xs-4。

媒體查詢

媒體查詢是非常別致的"有條件的 CSS 規(guī)則"。它只適用于一些基于某些規(guī)定條件的 CSS。如果滿足那些條件，則應(yīng)用相應(yīng)的樣式。

Bootstrap 中的媒體查詢?cè)试S您基于視口大小移動(dòng)、顯示并隱藏內(nèi)容。下面的媒體查詢?cè)?LESS 文件中使用，用來(lái)創(chuàng)建 Bootstrap 網(wǎng)格系統(tǒng)中的關(guān)鍵的分界點(diǎn)閾值。




@media?(min-width:?@screen-sm-min)?{?...?}


@media?(min-width:?@screen-md-min)?{?...?}


@media?(min-width:?@screen-lg-min)?{?...?}

我們有時(shí)候也會(huì)在媒體查詢代碼中包含 max-width，從而將 CSS 的影響限制在更小范圍的屏幕大小之內(nèi)。

@media?(max-width:?@screen-xs-max)?{?...?}
@media?(min-width:?@screen-sm-min)?and?(max-width:?@screen-sm-max)?{?...?}
@media?(min-width:?@screen-md-min)?and?(max-width:?@screen-md-max)?{?...?}
@media?(min-width:?@screen-lg-min)?{?...?}

媒體查詢有兩個(gè)部分，先是一個(gè)設(shè)備規(guī)范，然后是一個(gè)大小規(guī)則。在上面的案例中，設(shè)置了下列的規(guī)則：

讓我們來(lái)看下面這行代碼：

@media?(min-width:?@screen-sm-min)?and?(max-width:?@screen-sm-max)?{?...?}

對(duì)于所有帶有 min-width: @screen-sm-min 的設(shè)備，如果屏幕的寬度小于 @screen-sm-max，則會(huì)進(jìn)行一些處理。

網(wǎng)格選項(xiàng)

下表總結(jié)了 Bootstrap 網(wǎng)格系統(tǒng)如何跨多個(gè)設(shè)備工作：

	超小設(shè)備手機(jī)（<768px）	小型設(shè)備平板電腦（≥768px）	中型設(shè)備臺(tái)式電腦（≥992px）	大型設(shè)備臺(tái)式電腦（≥1200px）
網(wǎng)格行為	一直是水平的	以折疊開(kāi)始，斷點(diǎn)以上是水平的	以折疊開(kāi)始，斷點(diǎn)以上是水平的	以折疊開(kāi)始，斷點(diǎn)以上是水平的
最大容器寬度	None (auto)	750px	970px	1170px
Class 前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-
列 #	12	12	12	12
最大列寬	Auto	60px	78px	95px
間隙寬度	30px （一個(gè)列的每邊分別 15px）	30px （一個(gè)列的每邊分別 15px）	30px （一個(gè)列的每邊分別 15px）	30px （一個(gè)列的每邊分別 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

基本的網(wǎng)格結(jié)構(gòu)

下面是 Bootstrap 網(wǎng)格的基本結(jié)構(gòu)：

<div?class="container">
???<div?class="row">
??????<div?class="col-*-*"></div>
??????<div?class="col-*-*"></div>??????
???</div>
???<div?class="row">...</div>
</div>
<div?class="container">....

讓我們來(lái)看幾個(gè)簡(jiǎn)單的網(wǎng)格實(shí)例：

實(shí)例：堆疊的水平
實(shí)例：中型和大型設(shè)備
實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦

響應(yīng)式的列重置

以下實(shí)例包含了4個(gè)網(wǎng)格，但是我們?cè)谛≡O(shè)備瀏覽時(shí)無(wú)法確定網(wǎng)格顯示的位置。

為了解決這個(gè)問(wèn)題，使用可以使用 .clearfix class和響應(yīng)式實(shí)用工具來(lái)解決，如下面實(shí)例所示：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?響應(yīng)式的列重置</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div?class="container">
???<div?class="row"?>
??????<div?class="col-xs-6?col-sm-3"?
?????????style="background-color:?#dedef8;
?????????box-shadow:?inset?1px?-1px?1px?#444,?inset?-1px?1px?1px?#444;">
?????????<p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit.</p>
??????</div>
??????<div?class="col-xs-6?col-sm-3"?
?????????style="background-color:?#dedef8;box-shadow:?
?????????inset?1px?-1px?1px?#444,?inset?-1px?1px?1px?#444;">
?????????<p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit,?sed?do?
????????????eiusmod?tempor?incididunt?ut?labore?et?dolore?magna?aliqua.?Ut?
????????????enim?ad?minim?veniam,?quis?nostrud?exercitation?ullamco?laboris?
????????????nisi?ut?aliquip?ex?ea?commodo?consequat.
?????????</p>
?????????<p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit,?sed?do?
????????????eiusmod?tempor?incididunt?ut.?
?????????</p>
??????</div>

??????<div?class="clearfix?visible-xs"></div>

??????<div?class="col-xs-6?col-sm-3"?
?????????style="background-color:?#dedef8;
?????????box-shadow:inset?1px?-1px?1px?#444,?inset?-1px?1px?1px?#444;">
?????????<p>Ut?enim?ad?minim?veniam,?quis?nostrud?exercitation?ullamco?
????????????laboris?nisi?ut?aliquip?ex?ea?commodo?consequat.?
?????????</p>
??????</div>
??????<div?class="col-xs-6?col-sm-3"?
?????????style="background-color:?#dedef8;box-shadow:?
?????????inset?1px?-1px?1px?#444,?inset?-1px?1px?1px?#444;">
?????????<p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit,?sed?do?
????????????eiusmod?tempor?incididunt?ut?labore?et?dolore?magna?aliqua.?Ut?
????????????enim?ad?minim?
?????????</p>
??????</div>
???</div>
</div>

</body>
</html>

瀏覽器上調(diào)整窗口大小查看變化，或在您手機(jī)上查看效果。

偏移列

偏移是一個(gè)用于更專業(yè)的布局的有用功能。它們可用來(lái)給列騰出更多的空間。例如，.col-xs=* 類不支持偏移，但是它們可以簡(jiǎn)單地通過(guò)使用一個(gè)空的單元格來(lái)實(shí)現(xiàn)該效果。

為了在大屏幕顯示器上使用偏移，請(qǐng)使用 .col-md-offset-* 類。這些類會(huì)把一個(gè)列的左外邊距（margin）增加 * 列，其中 * 范圍是從 1 到 11。

在下面的實(shí)例中，我們有 <div class="col-md-6">..</div>，我們將使用 .col-md-offset-3 class 來(lái)居中這個(gè) div。

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?偏移列</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div?class="container">

???<h1>Hello,?world!</h1>

???<div?class="row"?>
??????<div?class="col-xs-6?col-md-offset-3"?
?????????style="background-color:?#dedef8;box-shadow:?
?????????inset?1px?-1px?1px?#444,?inset?-1px?1px?1px?#444;">
?????????<p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?
????????????elit.
?????????</p>
??????</div>

???</div>
</div>

</body>
</html>

結(jié)果如下所示：

嵌套列

為了在內(nèi)容中嵌套默認(rèn)的網(wǎng)格，請(qǐng)?zhí)砑右粋€(gè)新的 .row，并在一個(gè)已有的 .col-md-* 列內(nèi)添加一組 .col-md-* 列。被嵌套的行應(yīng)包含一組列，這組列個(gè)數(shù)不能超過(guò)12（其實(shí)，沒(méi)有要求你必須占滿12列）。

在下面的實(shí)例中，布局有兩個(gè)列，第二列被分為兩行四個(gè)盒子。

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?嵌套列</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div?class="container">

???<h1>Hello,?world!</h1>

???<div?class="row">

??????<div?class="col-md-3"?style="background-color:?#dedef8;box-shadow:?
?????????inset?1px?-1px?1px?#444,?inset?-1px?1px?1px?#444;">
?????????<h4>第一列</h4>
?????????<p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit.</p>
??????</div>

??????<div?class="col-md-9"?style="background-color:?#dedef8;box-shadow:?
?????????inset?1px?-1px?1px?#444,?inset?-1px?1px?1px?#444;">
?????????<h4>第二列?-?分為四個(gè)盒子</h4>
?????????<div?class="row">
????????????<div?class="col-md-6"?style="background-color:?#B18904;
???????????????box-shadow:?inset?1px?-1px?1px?#444,?inset?-1px?1px?1px?#444;">
???????????????<p>Consectetur?art?party?Tonx?culpa?semiotics.?Pinterest?
??????????????????assumenda?minim?organic?quis.
???????????????</p>
????????????</div>
????????????<div?class="col-md-6"?style="background-color:?#B18904;
???????????????box-shadow:?inset?1px?-1px?1px?#444,?inset?-1px?1px?1px?#444;">
???????????????<p>?sed?do?eiusmod?tempor?incididunt?ut?labore?et?dolore?magna?
??????????????????aliqua.?Ut?enim?ad?minim?veniam,?quis?nostrud?exercitation?
??????????????????ullamco?laboris?nisi?ut?aliquip?ex?ea?commodo?consequat.
???????????????</p>
????????????</div>
?????????</div>

?????????<div?class="row">
????????????<div?class="col-md-6"?style="background-color:?#B18904;
???????????????box-shadow:?inset?1px?-1px?1px?#444,?inset?-1px?1px?1px?#444;">
???????????????<p>quis?nostrud?exercitation?ullamco?laboris?nisi?ut?
??????????????????aliquip?ex?ea?commodo?consequat.
???????????????</p>
????????????</div>???
????????????<div?class="col-md-6"?style="background-color:?#B18904;
???????????????box-shadow:?inset?1px?-1px?1px?#444,?inset?-1px?1px?1px?#444;">
???????????????<p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit,?
??????????????????sed?do?eiusmod?tempor?incididunt?ut?labore?et?dolore?magna?
??????????????????aliqua.?Ut?enim?ad?minim.</p>
????????????</div>
?????????</div>

??????</div>

???</div>

</div>

</body>
</html>

結(jié)果如下所示：

列排序

Bootstrap 網(wǎng)格系統(tǒng)另一個(gè)完美的特性，就是您可以很容易地以一種順序編寫列，然后以另一種順序顯示列。

您可以很輕易地改變帶有 .col-md-push-* 和 .col-md-pull-* 類的內(nèi)置網(wǎng)格列的順序，其中 * 范圍是從 1 到 11。

在下面的實(shí)例中，我們有兩列布局，左列很窄，作為側(cè)邊欄。我們將使用 .col-md-push-* 和 .col-md-pull-* 類來(lái)互換這兩列的順序。

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實(shí)例?-?列排序</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div?class="container">

???<h1>Hello,?world!</h1>

???<div?class="row">
??????<p>排序前</p>
??????<div?class="col-md-4"?style="background-color:?#dedef8;
?????????box-shadow:?inset?1px?-1px?1px?#444,?inset?-1px?1px?1px?#444;">
?????????我在左邊
??????</div>
??????<div?class="col-md-8"?style="background-color:?#dedef8;
?????????box-shadow:?inset?1px?-1px?1px?#444,?inset?-1px?1px?1px?#444;">
?????????我在右邊
??????</div>
???</div><br>
???<div?class="row">
??????<p>排序后</p>
??????<div?class="col-md-4?col-md-push-8"?
?????????style="background-color:?#dedef8;
?????????box-shadow:?inset?1px?-1px?1px?#444,?
?????????inset?-1px?1px?1px?#444;">
?????????我在左邊
??????</div>
??????<div?class="col-md-8?col-md-pull-4"?
?????????style="background-color:?#dedef8;
?????????box-shadow:?inset?1px?-1px?1px?#444,?
?????????inset?-1px?1px?1px?#444;">
?????????我在右邊
??????</div>
???</div>

</div>

</body>
</html>

結(jié)果如下所示：

前の記事：次の記事：

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Bootstrap 網(wǎng)格系統(tǒng)

什么是網(wǎng)格（Grid）？

什么是 Bootstrap 網(wǎng)格系統(tǒng)（Grid System）？

移動(dòng)設(shè)備優(yōu)先策略

Bootstrap 網(wǎng)格系統(tǒng)（Grid System）的工作原理

媒體查詢

網(wǎng)格選項(xiàng)

基本的網(wǎng)格結(jié)構(gòu)

響應(yīng)式的列重置

偏移列

嵌套列

列排序

什么是網(wǎng)格（Grid）？

什么是 Bootstrap 網(wǎng)格系統(tǒng)（Grid System）？