码迷,mamicode.com
首页 > Web开发 > 详细

Bootstrap全局CSS样式之栅格系统

时间:2015-07-25 00:16:03      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:前端   htm5   bootstrap   

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

技术分享

版权声明:本文为博主原创文章,未经博主允许不得转载。

Bootstrap全局CSS样式之栅格系统

标签:前端   htm5   bootstrap   

原文地址:http://blog.csdn.net/bboyjoe/article/details/47049235

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