<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>bootstrap基础学习【网格系统】（三）</title>

        <link rel="stylesheet" href="css/bootstrap.min.css" />

    </head>

    <body style="padding-left: 20px;">

        <h3><strong>1.实现原理</strong></h3>

        Bootstrap框架中的网格系统就是将容器平分成12份。

        <h3><strong>2.工作原理</strong></h3>

        .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,

        针对不同的浏览器分辨率，宽度也不一样：自动、750px、970px和1170px

        1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。

        2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。

        3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素

        4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响

        <style>

            [class *= col-]{

              background-color: #eee;

              border: 1px solid #ccc;

            }

        </style>

        <div class="container">

          <div class="row">

            <div class="col-md-4">.col-md-4</div>

            <div class="col-md-8">.col-md-8</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-3">.col-md-3</div>

            <div class="col-md-6">.col-md-6</div>

            <div class="col-md-3">.col-md-3</div>

          </div>

        </div>

        <h3><strong>3.列偏移</strong></h3>

        只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。

        要保证列与偏移列的总数不超过12，不然会致列断行显示

        <div class="container">

        <h4>列向右移动四列的间距</h4>

          <div class="row">

            <div class="col-md-4">.col-md-4</div>

            <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>

            <div class="col-md-2">.col-md-3</div>

          </div>

          <div class="row">

            <div class="col-md-4">.col-md-4</div>

            <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>

          </div>

        </div>

        <br />

        <h4>发生行断裂</h4>

        <div class="container">

          <div class="row">

            <div class="col-md-4">.col-md-4</div>

            <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>

            <div class="col-md-2">.col-md-3</div>

          </div>

          <div class="row">

            <div class="col-md-4">.col-md-4</div>

            <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>

          </div>

          <div class="row">

            <div class="col-md-3">.col-md-3</div>

            <div class="col-md-3 col-md-offset-3">col-md-offset-3</div>

            <div class="col-md-4">col-md-4</div>

          </div>

        </div>

        <h3><strong>4.列排序</strong></h3>

        列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。

        <div class="container">

          <div class="row">

            <div class="col-md-4 col-md-push-8">.col-md-4</div>

            <div class="col-md-8 col-md-pull-4">.col-md-8</div>

          </div>

        </div>

        <h3><strong>5.列的嵌套</strong></h3>

        <style>

            [class *= col-]{

              background-color: #eee;

              border: 1px solid #ccc;

            }

            [class *= col-] [class *= col-] {

              background-color: #f36;

              border:1px dashed #fff;

              color: #fff;

            }

        </style>

        <div class="container">

          <div class="row">

            <div class="col-md-8">

              我的里面嵌套了一个网格

              <div class="row">

                <div class="col-md-6">col-md-6</div>

                <div class="col-md-6">col-md-6</div>

              </div>

            </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-8">

              我的里面嵌套了一个网格

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

          </div>

        </div>

    </body>

</html>

bootstrap基础学习【网格系统】（三）的更多相关文章

  1. bootstrap基础学习【导航条、分页导航】（五）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. bootstrap基础学习【表单含按钮】（二）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Bootstrap基础学习 ---- 系列文章

    [Bootstrap基础学习]05 Bootstrap学习总结 [Bootstrap基础学习]04 Bootstrap的HTML和CSS编码规范 [Bootstrap基础学习]03 Bootstrap ...

  4. bootstrap基础学习【菜单、按钮、导航】（四）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. bootstrap基础学习【排版】（一）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. JavaScript 基础 学习（三）

    JavaScript 基础 学习(三) 事件三要素 ​ 1.事件源: 绑定在谁身上的事件(和谁约定好) ​ 2.事件类型: 绑定一个什么事件 ​ 3.事件处理函数: 当行为发生的时候,要执行哪一个函数 ...

  7. bootstrap基础学习（四）——网格系统（列的偏移、排序、嵌套）

    网格系统——列偏移.列排序.列嵌套 列偏移:有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来.这个时候就可以使用列偏移(offset)功能来实现.使用列偏移也非 ...

  8. bootstrap基础学习小记（三）网格简介

    网格系统:网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统.Bootst ...

  9. Bootstrap<基础二> 网格系统

    Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是网格(Grid)? 摘自维基百科: 在平面设计中,网格 ...

随机推荐

  1. BZOJ3122 随机数生成器——BSGS

    题意 链接 给定 $p,\ a,\ b, \ x_1$,现有一数列 $$x_{i+1} \equiv (ax_i + b) \ mod \ p$$ 求最小的 $i$ 满足 $x_i = t$ 分析 代 ...

  2. 一款超好用的第三方评论插件--Gittalk

    使用GITALK的背景: 1. 最近在做一个基于Java的个人博客系统,已经基本完工了,突然发现怎么没有评论的操作,如果再从头开始从数据库开始写的话,花费的代价有点大,于是乎我就在网上寻找一款适合我的 ...

  3. Jquery实践--精读开篇

    JQuery实践,我已经看了最少三遍了.这里面的很多方法对我的工作很有帮助.但由于不是真的进行前端开发,所以JQuery中的很多功能也没有用到.所以隔一段时间想起,就会发觉,一些东西又忘记了.所以趁这 ...

  4. Codeforces Round #588 (Div. 2) D题【补题ING】

    思路:先找出现次数>=2数.然后在取跑所有数,需要考虑一般情况(当一个人比另一个人的ai小且他们的与运算等于小的那个人的ai那么可以知道大的那个人必定强于ai小的那个人). 则可以用位运算实现判 ...

  5. [Luogu] 最小差值生成树

    https://www.luogu.org/recordnew/show/6125570 思路就是巧妙的枚举所有的生成树,取最优值首先按照边权排序找出第一颗最小生成树(l, r),其中l表示最小边的编 ...

  6. qt 布局管理按钮控件间有空隙？

    定义了几个按钮控件,想要按钮间没有空隙,我使用setspaces(0)来设置它们之间的间隔. 结果控件间还是有空隙,如图 我对控件所在的widget的背景进行设置,(会把style传到子控件)发现结果 ...

  7. Applications （ZOJ 3705）

    题解:就是题目有点小长而已,可能会不想读题,但是题意蛮好理解的,就是根据条件模拟,计算pts.(送给队友zm. qsh,你们不适合训练了.) #include <iostream> #in ...

  8. （转）实验文档1：跟我一步步安装部署kubernetes集群

    实验环境 基础架构 主机名 角色 ip HDSS7-11.host.com k8s代理节点1 10.4.7.11 HDSS7-12.host.com k8s代理节点2 10.4.7.12 HDSS7- ...

  9. Pro*C编程研究一：从.pc到.exe

    [第一步]在Windows下编辑一个.pc程序(Pro*C源程序,作者用到:C:\proctest\exam1.pc),其内容如下: #include <stdio.h> #include ...

  10. 通过Vagrant搭建PHP环境(一) Vagrant box添加配置

    系统Windows10 Vagrant 1.8.1 VirtualBox 5.0.20 vagrant box下载地址:http://cloud.centos.org/centos/7/vagrant ...