<!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. dp四边形优化

    如果dp[i][j]=min(dp[i][k]+dp[k+1][j]+w[i][j]);且满足dp[a][c]+dp[b][d]<=dp[a][d]+dp[c][d](a<b<=c& ...

  2. springboot2.0入门（八）-- profile启动文件配置

    一.不同环境使用不同配置文件 将application.yml文件拷贝三份,在文件末尾分别对应开发/生产/测试,dev/prod/test/文件夹,其中application.yml 中默认激活开发环 ...

  3. ueditor+粘贴word

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  4. 【线性代数】6-1:特征值介绍(Introduction to Eigenvalues)

    title: [线性代数]6-1:特征值介绍(Introduction to Eigenvalues) categories: Mathematic Linear Algebra keywords: ...

  5. CSS定位中“父相子绝”

    一.定位的介绍 定位有三种:相对定位(position:relative).绝对定位(position:absolute).固定定位(position:fixed) 二.三种定位的用法,特点和实例 2 ...

  6. Linux进程通信之mmap

    mmap()函数: void *mmap(void* addr,size_t length,int port,int flags,int fd,off_t offset); 返回:成功:返回创建的映射 ...

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

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

  8. 测试的Python、 Java语言之争

    现在测试行业如果不会开发语言的话是很难找到工作的,即使是一些功能测试的岗位也会要求代码语言作为技术储备,因为如果做自动化测试或者测试工具脚本开发或者接口测试等都离不开开发语言,那作为测试如果没有代码经 ...

  9. 7月清北学堂培训 Day 5

    今天是钟皓曦老师的讲授~ 动态规划 动态规划的三种实现方法: 1.递推: 2.递归: 3.记忆化: 举个例子: 斐波那契数列:0,1,1,2,3,5,8…… Fn = Fn-1 + Fn-2 1.我们 ...

  10. ICEM—非结构化周期网格

    原视频下载地址:https://yunpan.cn/cPBnmsNheJ46q  访问密码 3441