Bootstrap全局CSS样式之栅格系统

最新推荐文章于 2022-04-29 18:55:16 发布

bboyjoe

最新推荐文章于 2022-04-29 18:55:16 发布

阅读量1.3k

点赞数 1

分类专栏： bootstrap 文章标签：前端 htm5 bootstrap

本文链接：https://blog.csdn.net/bboyjoe/article/details/47049235

版权

bootstrap 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

.col-xs-*——栅格列，适用于手机（<768px）;

.col-sm-*——栅格列，适用于平板（≥768px）;

.col-md-*——栅格列，适用于桌面显示器 (≥992px)；

.col-lg-*——栅格列，适用于大桌面显示器(≥1200px)；

.col-md-offset-*——向右偏移列；

.col-md-push-*、.col-md-pull-*——改变列的排序；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS全局样式_栅格系统</title>
    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
    <style type="text/css">
        .row{
            margin-bottom: 20px;
        }
        .row .row{
            margin-top:10px;
            margin-bottom: 0;
        }
        [class*="col-"]{
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: rgba(86,61,124,0.15);
            border: 1px solid rgba(86,61,124,0.2);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-3">.col-md-3</div>
    </div>
    <!--列的偏移-->
    <div class="row">
        <div class="col-md-3 col-md-offset-1">.col-md-3</div>
    </div>
    <!--列的嵌套-->
    <div class="row">
        <div class="col-sm-9">
            one
            <div class="row">
                <div class="col-xs-8">
                    first
                </div>
                <div class="col-xs-4">
                    second
                </div>
            </div>
        </div>
    </div>
    <!--列的排序-->
    <div class="row">
        <div class="col-md-9 col-md-push-3">col-md-9</div>
        <div class="col-md-3 col-md-pull-9">col-md-3</div>
    </div>


    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
        <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>

    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
        <div class="col-xs-6">.col-xs-6</div>
        <div class="col-xs-6">.col-xs-6</div>
    </div>
</div>

</body>
</html>