首页 > 其他分享> 文章详细

2. bootstrap 布局系统的介绍和栅格化系统【网格系统】的学习

2021-06-05 20:32:37 阅读：141 来源： 互联网

标签：Bootstrap bootstrap 系统网格栅格宽度 sm 12 col

我在学4以上的版本的bootstrap 所以：

1.布局系统：

容器类

Bootstrap 4 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类：

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

但 4.0以后的版本　　自适应布局还是以移动优先的...

2.Bootstrap4 网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列【最多12列】。

他也是移动优先.　　

1.他基于12列的布局，5种响应尺寸

2.完全采用flexbox流式布局构建的，完全支持响应式布局

3.具体采用di容器的行、列、和对齐内容来构建响应式布局。

具体：

网格类

Bootstrap 4 网格系统有以下 5 个类:

.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

网格系统规则

Bootstrap4 网格系统规则:

网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
使用行来创建水平的列组。
内容需要放置在列中，并且只有列可以是行的直接子节点。
预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
列通过填充创建列内容之间的间隙。这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
网格列是通过跨越指定的 12 个列来创建。例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。
Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子）而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。如果您想了解有关Flexbox的更多信息，可以阅读我们的CSS Flexbox教程。
超过12列会换行而且不会补前
.row表示一行 .clo-sm-* 表示*列

例:

<div class="container">
    <div class="row">
        <div class="col-sm-3">1</div>
        <div class="col-sm-3">2</div>
        <div class="col-sm-3">3</div>
        <div class="col-sm-3">4</div>
        <div class="col-sm-3">5</div>   <!-- 这里就超过了 就会换行 因为 3*4=12 -->
    </div>
</div>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网格系统</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        .col-sm-3{
            border: 1px solid rebeccapurple;
        }
    </style>
</head>
<body>


<div class="container-fluid">   <!-- 这种模式会占据100%宽 -->
    <div class="row">
        <div class="col-sm-3">1</div>
        <div class="col-sm-3">2</div>
        <div class="col-sm-3">3</div>
        <div class="col-sm-3">4</div>
        <div class="col-sm-3">5</div>   <!-- 这里就超过了 就会换行 因为 3*4=12 -->
    </div>
</div>



<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

<div class="container">   <!-- 这种模式会占据100%宽 -->
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>   <!-- col是适应全部就不会超行了 会自动计算 -->
    </div>
</div>

自己多去尝试网格类，多实践即可。

标签：Bootstrap,bootstrap,系统,网格,栅格,宽度,sm,12,col
来源： https://www.cnblogs.com/bi-hu/p/14853751.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2. bootstrap 布局系统的介绍 和 栅格化系统【网格系统】的学习

1.布局系统：

容器类

2.Bootstrap4 网格系统

网格类

网格系统规则

2. bootstrap 布局系统的介绍和栅格化系统【网格系统】的学习