bootstrap栅格系统&源码分析

最新推荐文章于 2022-04-07 17:19:04 发布

distantimg

最新推荐文章于 2022-04-07 17:19:04 发布

阅读量814

点赞数

本文链接：https://blog.csdn.net/u012138854/article/details/109590799

版权

流体容器 class="container-fluid"
margin-right：auto；

margin-left：auto;

padding-left:15px;

padding-right:15px;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style type="text/css">
            .container-fluid{
                border: 1px solid;
                height: 30px;
                background: pink;
            }
        </style>
    </head>
    <body>
        <!--流体容器   自适应-->
        <div class="container-fluid">
            container-fluid
        </div>
    </body>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</html>

流体容器

固定容器 class="container

@media (min-width: @screen-sm-min) {
width: @container-sm;
}
@media (min-width: @screen-md-min) {
width: @container-md;
}
@media (min-width: @screen-lg-min) {
width: @container-lg;

阈值
移动手机 xs(小于768px) width：auto
平板 sm(大于等于768px) width：720+槽宽
中屏pc md(大于等于992px) width：940+槽宽
大屏pc lg(大于等于1200) width：1140+槽宽
两侧15px padding
行
两侧-15px margin
列
公共样式
两侧有15px 的padding
相对定位
float
width
1~12
left
right
0~12
0：auto
margin-left
0~12

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style type="text/css">
            .container{
                border: 1px solid;
                height: 30px;
                background: pink;
            }
        </style>
    </head>
    <body>
        <!--固定容器   
                                width >= 1200         1170
            1200    >= width >= 992           970
            992        >= width >= 768            750
            768        >= width                        流体
        -->
        <div class="container">
            container
        </div>
    </body>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</html>

固定容器

3.行
margin-left: -15px;
margin-right: -15px;

4.列
.make-grid-columns()--->
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
...
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.make-grid(xs)--->
float-grid-columns(@class);
* .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{
* float: left;
* }
.loop-grid-columns(@grid-columns, @class, width);
* .col-xs-12{
* width:12/12;
* }
* .col-xs-11{
* width:11/12;
* }
* ...
* .col-xs-1{
* width:1/12;
* }
.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);
*push pull:
* .col-xs-push-12{ .col-xs-pull-12{
* left:12/12; right:12/12;
* } }
* .col-xs-push-11{
* left:11/12;
* }
* ... ...
* .col-xs-push-1{
* left:1/12;
* }
* .col-xs-push-0{ .col-xs-pull-0{
* left:auto; right:auto;
* } }
.loop-grid-columns(@grid-columns, @class, offset);

distantimg

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
18
评论
bootstrap栅格系统&源码分析

流体容器class="container-fluid"margin-right：auto；margin-left：auto;padding-left:15px;padding-right:15px;<!DOCTYPE html><html> <head> <meta charset="UTF-8">...
复制链接

扫一扫