Bootstrap 学习之 (一) ------ 网格系统

最新推荐文章于 2024-03-01 15:14:25 发布

俊刚、

最新推荐文章于 2024-03-01 15:14:25 发布

阅读量726

点赞数

分类专栏： # Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/csdn9_14/article/details/52956752

版权

Bootstrap 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

1.什么是 Bootstrap网格系统（GridSystem）？

答:Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

2.Bootstrap网格系统（Grid System）的工作原理?

答:行必须放置在 .container class内，以便获得适当的对齐（alignment）和内边距（padding）。

使用行来创建列的水平组，内容应该放在行内,而且唯有列可以是行的子元素。列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过.rows上的外边距（margin）取负，表示第一列和最后一列的行偏移。

3.网格选项

超小设备手机（<768px） class前缀：.col-xs-

小型设备平板电脑（>=768px） class前缀：.col-sm-

中型设备台式电脑（>992xp） class前缀：.col-md-

大型设备台式电脑（>=1200px） class前缀：.col-lg-

下面是网格的基本结构：

<span style="font-size:18px;"><span style="color:#3333ff;"><div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div></span></span>

示例:

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
    <title>BootstrapTest</title>
   <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
      <div class="row"  style="background-color:#e00 ">
      <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" style="background-color:#0e0;">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row" style="background-color:#0ee;">
      <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>
</div>
</body>
</html></span>

效果图：

注释：这个宽度不是100%，如果要100%的宽度，可以将<div class="container">改为

<div class="container-fluid">

.container 类用于固定宽度并支持响应式布局的容器

.container-fluid 类用于100%宽度，占据全部视口（viewport）的容器。

4.响应式的列重置

我们在小设备浏览时无法确定网格显示的位置。为了解决这个问题，使用可以使用 .clearfix和响应式实用工具。

例: <divclass="clearfix visible-xs"></div>

5.偏移列

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1到 11。

例:

<span style="font-size:18px;"><div class="container">
    <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></span>

6.列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

例:

<span style="font-size:18px;"><div class="container">
    <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></span>

效果图：

响应式实用工具：

响应式实用工具目前只适用于块和表切换。

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面 (≥992px)	大屏幕桌面 (≥1200px)
.visible-xs-*	可见	隐藏	隐藏	隐藏
.visible-sm-*	隐藏	可见	隐藏	隐藏
.visible-md-*	隐藏	隐藏	可见	隐藏
.visible-lg-*	隐藏	隐藏	隐藏	可见
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏