BootStrap3 栅格系统

于 2019-11-16 21:08:11 发布
阅读量138 收藏 1
点赞数
分类专栏： BootStrap3 文章标签： BootStrap 3 前端UI框架 栅格系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32617703/article/details/103102911
版权

目录

栅格系统

超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度None （自动）750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-
列（column）数12
最大列（column）宽自动~62px~81px~97px
槽（gutter）宽30px （每列左右均有 15px）
可嵌套是
偏移（Offsets）是
列排序是

说明

  1. .row必须放在布局容器.container或.container-fluid之中
  2. .row的直接子元素是.col
  3. 内容放在.col之中
  4. 总共12列，在一行中不一定要占满12列，但超过的会在新的一行占指定的列数
  5. 为.col设置padding来增加col与col之间的间隔
  6. 为.row设置负值margin可以抵消布局容器.container的内边距padding，也就间接抵消了col之间的padding
  7. 如果设置了较小尺寸，未设置较大尺寸，则较大屏幕延续较小尺寸
  8. 如果设置了较大尺寸，未设置较小尺寸，则较小屏幕不会延续较大尺寸，会独占一行

基本使用

<div class="container">
    <div class="row">
        <div class="col-xs-4 col-sm-8" style="background-color: green;">
            col-xs-4
        </div>
        <div class="col-xs-4 col-sm-2" style="background-color: orange;">
            col-xs-4
        </div>
        <div class="col-xs-4 col-sm-2" style="background-color: aqua;">
            col-xs-4
        </div>
        <div class="col-xs-4 col-sm-5" style="background-color: aqua;">
            我是超过的
        </div>
    </div>
</div>

列嵌套

<div class="container">
    <div class="row">
        <div class="col-xs-12" style="background-color: darkorchid;">
            <div class="row">
                <div class="col-xs-4" style="background-color: pink;">
                    col-xs-4
                </div>
                <div class="col-xs-4" style="background-color: blue;">
                    col-xs-4
                </div>
                <div class="col-xs-2" style="background-color: orange;">
                    col-xs-2
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4" style="background-color: orange;">
                    col-xs-4
                </div>
                <div class="col-xs-4" style="background-color: pink;">
                    col-xs-4
                </div>
                <div class="col-xs-4" style="background-color: blue;">
                    col-xs-4
                </div>
            </div>
        </div>
    </div>
</div>

列偏移

.col-[size]-offset[n]

<!-- 列偏移

.col-[size]-offset-[n]


-->
<div class="container">
    <div class="row" style="background-color: #0a0a0a;">
        <div class="col-xs-4 col-xs-offset-4" style="background-color: aqua;">
            col-xs-4 col-xs-offset-4 我占了8列
        </div>
    </div>
</div>

列排序

.col-[size]-[push | pull]-[n]

<!-- 列排序

.col-[size]-[push | pull]-[n]
push: 往左
pull: 往右

列排序是有覆盖现象的

-->
<div class="container">
    <div class="row">
        <div class="col-xs-4 col-xs-push-8" style="background-color: pink;">col-xs-4 col-xs-push-8</div>
        <div class="col-xs-6 col-xs-pull-2" style="background-color: orange;">col-xs-6</div>
        <div class="col-xs-2 col-xs-pull-10" style="background-color: green;">col-xs-2 col-xs-pull-8</div>
    </div>
</div>

总体

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>02栅格系统</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body style="background-color: #ccc;">

<pre class="pre-scrollable">

.row    声明行
.col-[size]-[n]  声明列
    size: xs
          sm
          md
          lg
    n: 1 ~ 12
                超小屏幕            小屏幕                 中屏幕                 大屏幕
各设备范围       < 768px            >= 768px              >= 992px               >= 1200px
class前缀       .col-xs-           .col-sm-              .col-md-               .col-lg-
col间隔         30px(左右各15px, padding)
col宽度         自动                 ~62px                 ~81px                  ~97px
布局容器宽度     自动                 750px                 970px                  1140px
列偏移          支持
列嵌套          支持
列排序          支持

1. .row必须放在布局容器.container或.container-fluid之中
2. .row的直接子元素是.col
3. 内容放在.col之中
4. 总共12列，在一行中不一定要占满12列，但超过的会在新的一行占指定的列数
5. 为.col设置padding来增加col与col之间的间隔
6. 为.row设置负值margin可以抵消布局容器.container的内边距padding，也就间接抵消了col之间的padding
7. 如果设置了较小尺寸，未设置较大尺寸，则较大屏幕延续较小尺寸
8. 如果设置了较大尺寸，未设置较小尺寸，则较小屏幕不会延续较大尺寸，会独占一行

</pre>


<div class="container">
    <div class="row">
        <div class="col-xs-4 col-sm-8" style="background-color: green;">
            col-xs-4
        </div>
        <div class="col-xs-4 col-sm-2" style="background-color: orange;">
            col-xs-4
        </div>
        <div class="col-xs-4 col-sm-2" style="background-color: aqua;">
            col-xs-4
        </div>
        <div class="col-xs-4 col-sm-5" style="background-color: aqua;">
            我是超过的
        </div>
    </div>
</div>

<!-- 列嵌套 -->

<div class="container">
    <div class="row">
        <div class="col-xs-12" style="background-color: darkorchid;">
            <div class="row">
                <div class="col-xs-4" style="background-color: pink;">
                    col-xs-4
                </div>
                <div class="col-xs-4" style="background-color: blue;">
                    col-xs-4
                </div>
                <div class="col-xs-2" style="background-color: orange;">
                    col-xs-2
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4" style="background-color: orange;">
                    col-xs-4
                </div>
                <div class="col-xs-4" style="background-color: pink;">
                    col-xs-4
                </div>
                <div class="col-xs-4" style="background-color: blue;">
                    col-xs-4
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 列偏移

.col-[size]-offset-[n]


-->
<div class="container">
    <div class="row" style="background-color: #0a0a0a;">
        <div class="col-xs-4 col-xs-offset-4" style="background-color: aqua;">
            col-xs-4 col-xs-offset-4 我占了8列
        </div>
    </div>
</div>

<!-- 列排序

.col-[size]-[push | pull]-[n]
push: 往左
pull: 往右

列排序是有覆盖现象的

-->
<div class="container">
    <div class="row">
        <div class="col-xs-4 col-xs-push-8" style="background-color: pink;">col-xs-4 col-xs-push-8</div>
        <div class="col-xs-6 col-xs-pull-2" style="background-color: orange;">col-xs-6</div>
        <div class="col-xs-2 col-xs-pull-10" style="background-color: green;">col-xs-2 col-xs-pull-8</div>
    </div>
</div>






<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
爱喝水的qdy
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值