zoukankan      html  css  js  c++  java
  • Bootstrap学习——栅格系统

    Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局。

    简介

    栅格系统用于通过一系列的行(row)与列(column)的组合创建页面布局,你的内容就可以放入创建好的布局中。下面就介绍以下Bootstrap栅格系统的工作原理:

    • “行(row)”必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。
    • 使用“行(row)”在水平方向创建一组“列(column)”。
    • 你的内容应当放置于“列(column)”内,而且,只有“列(column)”可以作为行(row)”的直接子元素。
    • 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
    • 通过设置padding从而创建“列(column)”之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
    • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。

    Responsive column resets

    即便有上面给出的四组栅格class,你也不免会碰到一些问题,例如,在某些阈值时,某些列可能会出现比别的列高的情况。为了克服这一问题,建议联合使用.clearfix和响应式工具classe。

     <div class="row">
          <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3(通过调整浏览器的宽度或在手机上即可查看这些案例的实际效果。)</div>
          <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
          <div class="clearfix visible-xs"></div>
          <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
          <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
        </div>

    列偏移

    使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如,.col-md-offset-4.col-md-4向右移动了4个列的宽度。

    嵌套列

    为了使用内置的栅格将内容嵌套,通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。

    列排序

    通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。

  • 相关阅读:
    消息中间件的研究(二) RabbitMQ应用场景分析
    消息中间件的研究 (一)
    35. 搜索插入位置
    374. 猜数字大小
    278. 第一个错误的版本
    367. 有效的完全平方数
    1.Storm概述简介
    7.MapReduce操作Hbase
    6.Hbase 原理
    5.Hbase API 操作开发
  • 原文地址:https://www.cnblogs.com/pilee/p/3517610.html
Copyright © 2011-2022 走看看