BootStrap3学习笔记（1）--网格系统

最新推荐文章于 2023-06-28 09:24:43 发布

翻译最新推荐文章于 2023-06-28 09:24:43 发布 · 1.1k 阅读

文章标签：

#bootstrap3 #栅格系统 #学习笔记

学习笔记同时被 2 个专栏收录

15 篇文章

订阅专栏

html5

5 篇文章

订阅专栏

本文深入探讨了Bootstrap网格系统的应用与响应式布局的实现，包括不同设备下的列宽调整、容器最大宽度设置、类名使用及响应类定制等关键概念。详细解释了如何根据不同屏幕尺寸自适应地展示网页内容，以及如何使用Bootstrap提供的类来优化在不同设备上的用户体验。

代码和表格来自：http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

如果显示网格，代码应类似这样：

<div class="container">
    <div class="row">
        <div class="col-md-4"><p>Box 1</p></div>
        <div class="col-md-4"><p>Box 2</p></div>
        <div class="col-md-4"><p>Box 3</p></div>
        <div class="col-md-4"><p>Box 4</p></div>
        <div class="col-md-4"><p>Box 5</p></div>
        <div class="col-md-4"><p>Box 6</p></div>
        <div class="col-md-4"><p>Box 7</p></div>
        <div class="col-md-4"><p>Box 8</p></div>
        <div class="col-md-4"><p>Box 9</p></div>
        <div class="col-md-4"><p>Box 10</p></div>
        <div class="col-md-4"><p>Box 11</p></div>
        <div class="col-md-4"><p>Box 12</p></div>
    </div>
</div>

其中col-*-*表示不同类型设备下在网格系统中占据的列宽

	极小手机(<768px)	小平板(≥768px)	中计算机(≥992px)	大计算机(≥1200px)
container最大宽度	None (auto)	`750px`	`970px`	`1170px`
类名前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
最大列宽	`Auto`	`~62px`	`~81px`	`~97px`
列间隙	`15px` (i.e. `30px`)

当列的高度不同时，由于float的作用会破坏网格的结构，可通过使用响应类避免，下面是一个完整的网格代码：

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 1</p></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 2</p></div>
        <div class="clearfix visible-sm-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 3</p></div>
        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 4</p></div>
        <div class="clearfix visible-sm-block"></div>
        <div class="clearfix visible-lg-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 5</p></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 6</p></div>
        <div class="clearfix visible-sm-block"></div>
        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 7</p></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 8</p></div>
        <div class="clearfix visible-sm-block"></div>
        <div class="clearfix visible-lg-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 9</p></div>
        <div class="clearfix visible-md-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 10</p></div>
        <div class="clearfix visible-sm-block"></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 11</p></div>
        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 12</p></div>
    </div>
</div>

其中的visible-*-*表示在何种设备下以何种display属性显示，由于极小设备默认为单列显示，因此无需使用响应类定制。

响应类也可用在普通标记中，比如下面的代码：

<p class="visible-xs-block">This paragraph is visible only on extra small devices.</p>
<p class="visible-sm-block">This paragraph is visible only on small devices.</p>
<p class="visible-md-block">This paragraph is visible only on medium devices.</p>
<p class="visible-lg-block">This paragraph is visible only on large devices.</p>

类似的，也可使用hidden-*，设置在特定设备中隐藏：

<p class="hidden-xs">This paragraph is hidden only on extra small devices.</p>
<p class="hidden-sm">This paragraph is hidden only on small devices.</p>
<p class="hidden-md">This paragraph is hidden only on medium devices.</p>
<p class="hidden-lg">This paragraph is hidden only on large devices.</p>

通过响应类还可以设置打印时的格式：

类	描述
`.visible-print-block`	块元素浏览时隐藏，打印时显示
`.visible-print-inline`	内联元素浏览时隐藏，打印时显示
`.visible-print-inline-block`	内联块元素浏览时隐藏，打印时显示
`.hidden-print`	浏览时显示，打印隐藏