BootStrap入门（二）格栅系统

最新推荐文章于 2024-05-08 16:31:38 发布

qq_41763734

最新推荐文章于 2024-05-08 16:31:38 发布

阅读量421

点赞数

本文链接：https://blog.csdn.net/qq_41763734/article/details/96873060

版权

BootStrap入门（二）格栅系统

1. 介绍

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

2.响应式布局

同一套页面可以兼容不同分辨率的设备、
实现：依赖于栅格系统：将一行平均分成12个格子，可以去指定元素占几个格子

3.步骤：

1. 定义容器。相当于之前的table

容器分类：

container：固定宽度，使得屏幕左右有留白
- 超小屏幕手机 (<768px)：自动
- 小屏幕平板 (≥768px)：750px
- 中等屏幕桌面显示器 (≥992px)：970px
- 大屏幕大桌面显示器 (≥1200px)：1170px
container-fluid（默认）：每一种设备都是100%宽度。
如下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"><!-- 设置字符编码 --><!--   -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--  IE支持-->
    <meta name="viewport" content="width=device-width, initial-scale=1"><!--  自动适配 -->
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet"><!--  以下修改为当前文件夹下的路径 -->
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        .inner{
            border: 1px solid red;
        }
    </style>
</head>
    <body>
        <!--  1.定义容器-->
        <div class="container-fluid">
            <!-- 2.定义行-->
            <div class="row">
                <!-- 3.定义元素-->
                <div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                </div>
            </div>
        </div>
    </body>
</html>

若< div class=“container-fluid”>
网页效果：
在这里插入图片描述
若< div class=“container”>

2. 定义行。相当于之前的tr。样式：row

3. 定义元素。相当于之前的td。

指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
设备代号;

超小屏幕手机 (<768px)：col-xs-
小屏幕平板 (≥768px)：col-sm-
中等屏幕桌面显示器 (≥992px)：col-md-
大屏幕大桌面显示器 (≥1200px)：col-lg-

实例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"><!-- 设置字符编码 --><!--   -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--  IE支持-->
    <meta name="viewport" content="width=device-width, initial-scale=1"><!--  自动适配 -->
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet"><!--  以下修改为当前文件夹下的路径 -->
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        .inner{
            border: 1px solid red;
        }
    </style>
</head>
    <body>
        <!--  1.定义容器-->
        <div class="container-fluid">
            <!-- 2.定义行-->
            <div class="row">
                <!-- 3.定义元素-->
                <div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                    <div class="col-lg-1 col-sm-2 inner">栅格</div>
                </div>
            </div>
        </div>
    </body>
</html>

代码解释：
依次定义容器、行、列。
其中定义列时，col-lg-1表示在大屏幕上一个div占一个格子（这里一共占了12个），col-sm-2表示在小屏幕上一个div占两个格子（这里会占6个格子）。inner样式为使栅格更加明显而定义的边框。

在网页中打开该页面：
在这里插入图片描述将浏览器边框拉窄，样式变化：
注意：

1.如果一行超出了12格，则超出的自动换行
2.栅格类属性向上兼容。栅格类适用于与屏幕宽度大约或等于分解点大小的设备。
3.如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行。

qq_41763734

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BootStrap入门（二）格栅系统

BootStrap入门（二）格栅系统1. 介绍Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。2.响应式布局同一套页面可以兼容不同分辨率的设备、实现：依赖于栅格系统：将一行平均分成12个格子，可以去指定元素占几个格子3.步骤...
复制链接

扫一扫