<!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. 用IE滤镜实现多种常用的CSS3效果

    CSS3是当下非常火的一个话题之一,很多浏览器都已经开始支持这一特性,然后IE这个拥有庞大用户群体的平台,却无法提供这样的支持,即便是IE9发布,也无法改变这一事实,然而,幸运的是,IE并非在这方面毫 ...

  2. 怎么学好js

    Js给人那种感觉的原因多半是因为它如下的特点: A:本身知识很抽象.晦涩难懂,如:闭包.内置对象.DOM. B:本身内容很多,如函数库.对象库就一大堆. C:混合多种编程思想.它里面不但牵涉面向过程编 ...

  3. Codeforces Round #590 (Div. 3)【D题：26棵树状数组维护字符出现次数】

    A题 题意:给你 n 个数 , 你需要改变这些数使得这 n 个数的值相等 , 并且要求改变后所有数的和需大于等于原来的所有数字的和 , 然后输出满足题意且改变后最小的数值. AC代码: #includ ...

  4. 【luogu1468】[Violet]蒲公英--求区间众数

    题目背景 亲爱的哥哥: 你在那个城市里面过得好吗? 我在家里面最近很开心呢.昨天晚上奶奶给我讲了那个叫「绝望」的大坏蛋的故事的说!它把人们的房子和田地搞坏,还有好多小朋友也被它杀掉了.我觉得把那么可怕 ...

  5. ICP、MRR、BKA等特性

    一.Index Condition Pushdown(ICP) Index Condition Pushdown (ICP)是 mysql 使用索引从表中检索行数据的一种优化方式,从mysql5.6开 ...

  6. 3-自定义构造方法和description方法

    http://www.cnblogs.com/mjios/archive/2013/04/19/3031412.html -自定义构造方法和description方法 1 默认的构造方法是什么?有什么 ...

  7. getFieldDecorator用法（二）——封装表单模块

    后台管理系统经常用到表单查询,因此做了个封装 myorder.js import React from 'react'; import { Card, Button, Table, Form, Sel ...

  8. POJ 3186 Treats for the Cows ——（DP）

    第一眼感觉是贪心,,果断WA.然后又设计了一个两个方向的dp方法,虽然觉得有点不对,但是过了样例,交了一发,还是WA,不知道为什么不对= =,感觉是dp的挺有道理的,,代码如下(WA的): #incl ...

  9. [题解] [CF1037D] Valid BFS?

    题面 题解 一个是模拟BFS的过程 还有一个是可以根据给出的BFS序构树, 再看两棵树是否相同 判断相同的话, 以同一个点为根, 看两棵树中1−

  10. flask中用类的方式构造视图函数

    from flask import Flask from flask.views import MethodView app = Flask(__name__) class IndexView(Met ...