码迷,mamicode.com
首页 > 其他好文 > 详细

3.栅格系统

时间:2020-05-28 23:13:20      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:数值   htm   title   opp   组合模式   div   sheet   cloud   item   

# 3.栅格系统

 

介绍的是 4.5.x版本

 

    一行最多放12列

 

- class类介绍
    最外层容器:
        1.container-fluid:宽度100%,和body的宽度一样
        2.container:宽度是一个具体数值,但是会根据用户屏幕大小来改变

 

    行类
        1.row:分行

 

    列类:
        5个响应层
        后面的*表示占据列数,取值从1-12
        1.col-*:None(auto);//col为超小屏,屏幕<576px,容器的宽度固定为auto,一行可以永远设置12个列
        2.col-sm-*:540px;//sm为小屏,屏幕>=576px,容器的宽度固定为540px,一行可以设置12个列。屏幕尺寸<576的时候,一行只能设置1列
        3.col-md-*:720px;//md为中屏,屏幕>=768px,容器的宽度固定为720px,一行可以设置12个列。屏幕尺寸<768的时候,一行只能设置1列
        4.col-lg-*:960px;//lg为大屏,屏幕>=992px,容器的宽度固定为960px,一行可以设置12个列。屏幕尺寸<992的时候,一行只能设置1列
        5.col-xl-*:1140px;//xl为超大屏,屏幕>=1200px,容器的宽度固定为1140px,一行可以设置12个列。屏幕尺寸<1200的时候,一行只能设置1列
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 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" >
    <title>Document</title>
    <style>
        .row div{
            height:100px;
            background:green;
            border:1px solid #000;
            color:#fff;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-1">第1列</div>
            <div class="col-xl-1">第2列</div>
            <div class="col-xl-1">第3列</div>
            <div class="col-xl-1">第4列</div>
            <div class="col-xl-1">第5列</div>
            <div class="col-xl-1">第6列</div>
            <div class="col-xl-1">第7列</div>
            <div class="col-xl-1">第8列</div>
            <div class="col-xl-1">第9列</div>
            <div class="col-xl-1">第10列</div>
            <div class="col-xl-1">第11列</div>
            <div class="col-xl-1">第12列</div>
        </div>
        <div class="row">
            <div class="col-xl-1">占1列</div>
            <div class="col-xl-2">占2列</div>
            <div class="col-xl-3">占3列</div>
            <div class="col-xl-4">占4列</div>
            <div class="col-xl-3">占3列</div>
        </div>
        <div class="row">
            <div class="col-xl-13">占13列</div>
        </div>
    </div>



    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>
</html>
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 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" >
    <title>Document</title>
    <style>
        .row div{
            height:100px;
            background:green;
            border:1px solid #000;
            color:#fff;
        }
        .v-align{
            height:100px;
            background:rgba(255,0,0,0.1);
            margin:10px -15px;
        }
        .v-align div{
            height:40px;
            line-height:40px;
            background:rgba(86,61,124,0.2);
            color:#333;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col">等宽列</div>
            <div class="col">等宽列</div>
            <div class="col">等宽列</div>
            <div class="col">等宽列</div>
            <div class="col">等宽列</div>
            <div class="col">等宽列</div>
            <div class="col">等宽列</div>
            <div class="col">等宽列</div>
            <div class="col">等宽列</div>
            <div class="col">等宽列</div>
            <div class="col">等宽列</div>
            <div class="col">等宽列</div>
            <div class="col">等宽列</div>
            <div class="col">等宽列</div>
            <div class="col">等宽列</div>
        </div>
        <!--设置多行等宽列,在希望换行的地方添加一个w-100的class,能够让后面的列换行-->
        <div class="row">
            <div class="col">等宽列,行1</div>
            <div class="col">等宽列,行1</div>
            <div class="w-100" style="height:auto;border:none;"></div>
            <div class="col">等宽列,行2</div>
            <div class="col">等宽列,行2</div>
        </div>
        <!--设置一个列宽,剩下的自动平分-->
        <div class="row">
            <div class="col-sm-7">在小屏下占7列</div>
            <div class="col">自动平分剩余的宽度</div>
            <div class="col">自动平分剩余的宽度</div>
            <div class="col">自动平分剩余的宽度</div>
        </div>
        <!--设置根据内容调整列的宽度,使用.col-{breakpoint}-auto,breakpoint代指5个响应层-->
        <div class="row">
            <div class="col-md-auto">在中等屏幕下内容撑开宽度</div>
        </div>
        <!--设置所有尺寸下,都占同样的列数,使用.col-* -->
        <div class="row">
            <div class="col-8">所有尺寸下都占8列</div>
            <div class="col-4">所有尺寸下都占4列</div>
        </div>

 

        <!--
            混合排列或组合模式
                1.超大屏幕下一行显示6个div,一个div占2列
                2.大屏幕下一行显示4个div,一个div占3列
                3.中屏幕下一行显示3个div,一个div占4列
                4.小屏幕下一行显示2个div,一个div占6列
                5.超小屏幕下一行显示1个div,一个div占12列
        -->
        <div class="row">
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个,大屏4个,中屏3个,小屏2个,超小屏1个</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个,大屏4个,中屏3个,小屏2个,超小屏1个</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个,大屏4个,中屏3个,小屏2个,超小屏1个</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个,大屏4个,中屏3个,小屏2个,超小屏1个</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个,大屏4个,中屏3个,小屏2个,超小屏1个</div>
            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个,大屏4个,中屏3个,小屏2个,超小屏1个</div>
        </div>
        <!-- 对齐
            垂直对齐:
                1.行对齐方式
                    align-items-start:顶对齐
                    align-items-center:中间对齐
                    align-items-end:底对齐
                2.列的单独对齐方式
                    align-self-start:顶对齐
                    align-self-center:中间对齐
                    align-self-end:底对齐
        -->
        <div class="row v-align align-items-start">
            <div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
            <div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
            <div class="col">垂直对齐-顶部对齐-行的对齐方式</div>
        </div>
        <div class="row v-align align-items-center">
            <div class="col">垂直对齐-中间对齐-行的对齐方式</div>
            <div class="col">垂直对齐-中间对齐-行的对齐方式</div>
            <div class="col">垂直对齐-中间对齐-行的对齐方式</div>
        </div>
        <div class="row v-align align-items-end">
            <div class="col">垂直对齐-底部对齐-行的对齐方式</div>
            <div class="col">垂直对齐-底部对齐-行的对齐方式</div>
            <div class="col">垂直对齐-底部对齐-行的对齐方式</div>
        </div>
        <div class="row v-align">
            <div class="col align-self-start">垂直对齐-顶部对齐-列的对齐方式</div>
            <div class="col align-self-center">垂直对齐-中间对齐-列的对齐方式</div>
            <div class="col align-self-end">垂直对齐-底部对齐-列的对齐方式</div>
        </div>
        <!--水平对齐
            1.justify-content-start 左对齐
            2.justify-content-center 居中对齐
            3.justify-content-end 右对齐
            4.justify-content-around 分散居中对齐(每个元素两侧的间距是相等的)
            5.justify-content-between 左右两端对齐(元素之间的间距是自动平分的)
        -->
        <div class="row v-align justify-content-start">
            <div class="col-4">水平对齐-左对齐-行的对齐方式</div>
            <div class="col-4">水平对齐-左对齐-行的对齐方式</div>
        </div>
        <div class="row v-align justify-content-center">
            <div class="col-4">水平对齐-居中对齐-行的对齐方式</div>
            <div class="col-4">水平对齐-居中对齐-行的对齐方式</div>
        </div>
        <div class="row v-align justify-content-end">
            <div class="col-4">水平对齐-右对齐-行的对齐方式</div>
            <div class="col-4">水平对齐-右对齐-行的对齐方式</div>
        </div>
        <div class="row v-align justify-content-around">
            <div class="col-4">水平对齐-分散居中对齐-行的对齐方式</div>
            <div class="col-4">水平对齐-分散居中对齐-行的对齐方式</div>
        </div>
        <div class="row v-align justify-content-between">
            <div class="col-4">水平对齐-左右两端对齐-行的对齐方式</div>
            <div class="col-4">水平对齐-左右两端对齐-行的对齐方式</div>
        </div>
        <!-- 
            列排序:使用。order-{breakpoint}-* 
            3.X的版本使用的是.col-{breakpoint}-push-* .col-{breakpoint}-pull-* 来排序
        -->
        <div class="row">
            <div class="col">第一列</div>
            <div class="col order-4">第二列</div>
            <div class="col order-3">第三列</div>
        </div>
        <div class="row">
            <div class="col">第一列</div>
            <div class="col order-xl-4">第二列</div><!--只有当屏幕尺寸>=1200的时候,才会进行排序-->
            <div class="col order-xl-3">第三列</div>
        </div>
        <div class="row">
            <div class="col">第一列</div>
            <div class="col order-first">第二列</div><!--order-first代表排在第一位,order-last代表排在最后一位-->
            <div class="col order-last">第三列</div>
        </div>
        <!--列偏移:使用offset-{breakpoint}-* -->
        <div class="row">
            <div class="col-md-4">第一列</div>
            <div class="col-md-4 offset-md-4">往右偏移4列</div>
        </div>
        <div class="row">
            <div class="col-3 offset-md-3">第一列</div><!--第一列偏移,后面的格子都会偏移,和下面的现象区分-->
            <div class="col-3">第二列</div>
        </div>
        <div class="row">
            <div class="col-3 offset-md-3">第一列</div><!--第一列偏移,后面的格子都会偏移,和上面的现象区分-->
            <div class="col-3 offset-md-3">第二列</div>
        </div>
        <div class="row">
            <div class="col-sm-5 col-md-6">小屏占5列,中屏占6列</div><!--第一列偏移,后面的格子都会偏移,和上面的现象区分-->
            <div class="col-sm-5 offset-sm-3 col-md-6 offset-md-5">小屏偏移3列,中屏偏移5列</div>
        </div>
        <!--间距:使用margin工具可以让列之间产生间距
            margin-right 和 margin-left
            mr-{breakpoint}-auto 使右侧的列远离到最右边
            ml-{breakpoint}-auto 使左侧的列远离到最左边
        -->
        <div class="row">
            <div class="col-md-4">第一列</div>
            <div class="col-md-4 ml-auto">第二列,跑到最右边</div>
        </div>
        <div class="row">
            <div class="col-md-3 ml-md-auto">在中屏下,离左边距离自动计算</div>
            <div class="col-md-3 ml-md-auto">在中屏下,离左边距离自动计算</div>
        </div>
        <div class="row">
            <div class="col-auto mr-auto">宽度由内容撑开</div>
            <div class="col-auto">宽度由内容撑开</div>
        </div>
        <!--嵌套:每个列里面可以再继续进行放行,那嵌套里面的元素就会以父级的宽度为基准,再分12列-->
        <div class="row">
            <div class="col-sm-9">
                父级的第一列
                <div class="row">
                    <div class="col-sm-8 col-6">子级的第一列,小屏下占8列,超小屏下占6列</div>
                    <div class="col-sm-8 col-6">子级的第一列,小屏下占8列,超小屏下占6列</div>
                </div>
            </div>
            <div class="col-sm-3" style="height:150px;background:pink;">父级的第二列</div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>
</html>
```
 
以上是markdown格式的笔记

3.栅格系统

标签:数值   htm   title   opp   组合模式   div   sheet   cloud   item   

原文地址:https://www.cnblogs.com/lanshanxiao/p/12984450.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!