<!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. PageHelper使用中出现的问题

    PageHelper在分页查询的时候功能强大,内部使用拦截器实现.这边文章做了详细的介绍. https://www.cnblogs.com/ljdblog/p/6725094.html https:/ ...

  2. element-ui中el-table表格的使用（如何取到当前列的所有数据）

    基本使用都不多说了, 我们知道这个表格组件,每个单元格内容是table绑定的data中的某个属性决定的,但是如果我们想根据这个属性值,渲染出另一个值呢,首先问题来了,我如何获得当前列的值, 查了查,我 ...

  3. ZR#956 集合

    ZR#956 集合 解法: 维护一个异或操作的懒标记,并对应的处理插入.删除和异或操作.接下来考虑如何整体加一. 考虑一个数字 $ x $ 变为 $ (x+1) \pmod {2^{30}} $ 的过 ...

  4. RuntimeException异常处理汇总

    Java中所有异常的父类是Throwable类,在Throwable类下有两大子类: 一个是Error类,指系统错误异常,例如:VirtualMachineError 虚拟机错误,ThreadDeat ...

  5. Matlab下imwrite，Uint16的深度图像

    Matlab下imwrite,Uint16的深度图像 1. 在Matlab命令窗口输入命令: help imwrite 会有如下解释: If the input array is of class u ...

  6. Windows Server 2008 R2 服务器内存使用率过高几乎耗光

    系统环境: Windows Server 2008 R2 Enterprise 搭建有 web服务器(iis) 和  文件服务   问题描述: Windows Server 2008 R2系统内存耗光 ...

  7. PyTricks-使用namedtuple以及dataclass的方式定义类

    from collections import namedtuple from dataclasses import dataclass # 以前简单的类可以使用namedtuple实现. Car = ...

  8. zabbix监控项整理Items-key

    agent.hostname:hostname,字符串 agent.ping:可用性检查,可用返回1:不可用返回空 agent.version:agent程序的版本,返回字符串 kernel.maxf ...

  9. 冲刺阶段——Day5

    [今日进展] 完成注册功能代码 import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionLi ...

  10. (六)爬虫之使用selenium

    selenium是使用javascript编写,主要用来进行web应用程序测试,在python爬虫中可以用来进行动态网页爬取,解决爬虫中的javascript渲染(执行js语句).总结记录下,以备后面 ...