bootstrap之栅格系统

最新推荐文章于 2024-04-17 00:29:58 发布

迷失的风景web

最新推荐文章于 2024-04-17 00:29:58 发布

阅读量240

点赞数

本文链接：https://blog.csdn.net/qq_44193048/article/details/105931101

版权

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

简介
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。（以上转载bootstrap中文网）
下面是一些小列子：
1.把在大屏幕下一行分为4等分，中等屏幕下分为3等分

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
    	body{
            padding-top: 50px;
        }
        .red{
            border: 1px solid black;
            background-color: red;
        }
    </style>
</head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 text-center red">1</div>
            <div class="col-lg-3 col-md-4 text-center red">2</div>
            <div class="col-lg-3 col-md-4 text-center red">3</div>
            <div class="col-lg-3 text-center red">4</div>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

大屏幕下效果：

中等屏幕下效果：
在这里插入图片描述
小屏幕下的效果：（我没有设置小屏幕所以默认占一行）

栅格布局简单来说就是把一行分为12等分，然后我们自己去根据需要去划分，根据不同的屏幕去划分。
下面还有一些栅格系统的属性：
列偏移
使用.col-lg-offset-*可以将列偏移到右侧。

<div class="container">
            <div class="row">
                <div class="col-md-4 red">1</div>
                <div class="col-md-4 col-md-offset-4 red">2</div>
              </div> 
        </div>

在这里插入图片描述

嵌套列

<div class="container">
        <!-- <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
          </div> -->

          <div class="row">
            <div class="col-md-9 red">
                <div class="row">
                    <div class="col-md-6 red"></div>
                    <div class="col-md-6 red"></div>
                </div>
            </div>
        </div>
    </div>

在这里插入图片描述

列排序
通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。

<div class="container">
       <div class="row">
         <div class="col-md-9 col-md-push-3 red">1</div>
         <div class="col-md-3 col-md-pull-9 red">2</div>
       </div>
 </div>

在这里插入图片描述

迷失的风景web

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap之栅格系统

栅格系统Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。简介栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理...
复制链接

扫一扫