bootstrap栅格系统

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

派大星is

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

阅读量1.4k

点赞数 1

文章标签： bootstrap html css

本文链接：https://blog.csdn.net/m0_49852918/article/details/121906371

版权

bootstrap栅格系统

原理：

1.栅格系统的“行（row）”包含在布局容器内 .container类或.container-fluid类中，以便于为其赋予合适的排列（aligment）和内补（padding）。

2.通过“行（row）”在水平方向创建一组“列（colum）”，并且只有列可以作为行的直接子元素

3.行使用样式“.row”，列使用样式“.col-*-*”，我们的内容应放于列（col）内

4.列的数量大于12时，将会另起一行

5.bootstrap栅格系统为不同屏幕宽度定义了不同的类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<style>
    div[class^=col-md]{
        border:1px solid red;
    }
</style>
<body>
    <script src="jquery.min.js"></script>
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

    <div class="container" style=" border: 1px solid red;"><!--创建容器-->
        <div class="row"><!--创建行-->
            <div class="col-md-1">1</div><!--创建列-->
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">1</div>
            <div class="col-md-1">2</div>
        </div>
        <div class="row"><!--创建行-->
            <div class="col-md-2">22</div><!--创建列-->
            <div class="col-md-4">44</div>
            <div class="col-md-6">66</div>
        </div>
    </div>   
</body>
</html>

此练习通过原理先创建一个.container类，设置红色边框，再多个row（行）多个col（列）置于布局容器内，让它自适应网页视口的大小变化

关于.col-md-*：是一种栅格选项的类前缀，适合中等屏幕桌面显示器（>=992px）

就是当这个内容在电脑上显示，*是几就占几格，但是后面的数字相加不能超过十二，超过了就会自动换行

但是有一种情况就是数字相加超过了12却没换行，可能是有效果的，但是没有显现出来

还有几种其他的栅格选项，他们的最大列数都为12。如下：

超小屏幕手机（<768px）它的类前缀为.col-xs-*

小屏幕平板（>=768px）它的类前缀为.col-sm-*

大屏幕大桌面显示器（>=1200px）它的类前缀为.col-lg-*