<!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. 2018 南京网络预赛Sum - 线性筛

    题意 链接 定义 $f(x)$ 为满足以下条件的有序二元组 $(a, b)$ 的方案数(即 $(a, b)$ 与 $(b, a)$ 被认为是不同的方案): $x= ab$ $a$ 和 $b$ 均无平方 ...

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

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

  3. P3648 [APIO2014]序列分割 斜率优化

    题解:斜率优化\(DP\) 提交:\(2\)次(特意没开\(long\ long\),然后就死了) 题解: 好的先把自己的式子推了出来: 朴素: 定义\(f[i][j]\)表示前\(i\)个数进行\( ...

  4. Java中Long类型是否相等的判断方式

    (转)Java中判断两个Long类型是否相等   在项目中将两个long类型的值比较是否相等,结果却遇到了疑问? 下面就陪大家看看一个神奇的现象! 1.1问题?为什么同样的类型,同样的值,却不相等呢? ...

  5. js 跨域请求原理及常见解决方案

    一.同源策略: 说到跨域请求,首先得说说同源策略: 1995年,同源政策是由 Netscape 公司引入浏览器的.目前,所有浏览器都实行了这个政策. 同源策略是浏览器的一种安全策略,所谓同源是指,域名 ...

  6. 【线性代数】6-3:微分方程的应用(Applications to Differential Equations)

    title: [线性代数]6-3:微分方程的应用(Applications to Differential Equations) categories: Mathematic Linear Algeb ...

  7. ++a和a++不是左值

    上面的编译时会出现一下错误: aplus2.c:6:6: error: lvalue required as left operand of assignmentaplus2.c:7:6: error ...

  8. NTP 协议介绍

    NTP协议 NTP(Network Time Protocol,网络时间协议)是由RFC 1305定义的时间同步协议,用来在分布式时间服务器和客户端之间进行时间同步.NTP基于UDP报文进行传输,使用 ...

  9. Mybatis 返回值 返回Map的为空的值

    第一种.springMVC和boot通用配置:(Mybatis.xml) <?xml version="1.0" encoding="UTF-8"?> ...

  10. form 表单提交数据和文件(fromdata的使用方法)

    <!-- 数据和文件一次性提交 --> <form class="form_meren" id="mainForm" name="m ...