Bootstrap全局CSS样式之栅格系统

来源：互联网发布：死神方便知乎编辑：程序博客网时间：2024/05/16 06:50

.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>

1 0