Bootstrap 12 栅格系统

栅格系统简介

　　Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

　　栅格系统通过一系列行（row）与列（column）的组合来创建页面的布局，设置的内容可以放在创建好的布局中。

栅格系统的实现原理

　　栅格系统的实现原理非常简单，仅仅是通过定义容器的大小，平分为 12 份，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式的栅格系统。

　　栅格系统的主要工作原理：

　　　　➣ 一行数据（row）必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的对齐方式和内边距（padding）。

　　　　➣ 通过 “行（row）” 在水平方向创建一组 “列（column）”。

　　　　➣ 你的具体内容应当放置于 “列（column）” 内，而且只有 “列（column）” 可以作为行（row）”的直接子元素。

　　　　➣ 内置一大堆样式，可以使用如 .row 和 .col-xs-4（占四列宽度）这样的样式（即预定义的类），来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

　　　　➣ 通过为 “列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

　　　　➣ 栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

　　　　➣ 如果一 “行（row）” 中包含的 “列（column）” 大于 12，多余的 “列（column）” 所在的元素将被作为一个整体另起一行排列。

　　　　➣ 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

栅格系统的使用

　　栅格系统的使用，其实就是列的各种组合。在基本用法里有四种特性，即列组合、列偏移、列嵌套和列排序。由于不同的屏幕尺寸使用不同的样式，我们以中等屏幕（md）为例进行介绍，其他屏幕用法也是类似。

　　1、列组合

　　列组合就是通过更改数字来合并列，类似表格里的 colspan 。列组合的实现方式很简单，只涉及两个 CSS 特性：左浮动和百分比。

　　说明：在使用栅格系统的时候，只要记住每行的总格数是 12 个，根据实际项目自由组合即可。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 学习</title>

        <link href="css/bootstrap.css" rel="stylesheet">
        <style>
            div {
                border: 1px solid red;
            }
        </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-8">.col-md-8</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
            </div>
        </div>

        <script src="js/jquery-1.12.4.js"></script>
        <script src="js/bootstrap.js"></script>
    </body>
</html>

列组合实现代码

Bootstrap 12 栅格系统

猜你喜欢