栅格系统

媒体查询

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

 小屏幕（平板，大于等于 768px）

@media (min-width: @screen-sm-min) { ... }

 中等屏幕（桌面显示器，大于等于 992px）

@media (min-width: @screen-md-min) { ... }

 大屏幕（大桌面显示器，大于等于 1200px）

@media (min-width: @screen-lg-min) { ... }

我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

栅格参数

实例：从堆叠到水平排列

实例：流式布局容器

将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

实例：移动设备和桌面屏幕

实例：多余的列（column）将另起一行排列

响应式列重置

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

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

You can also override offsets from lower grid tiers with .col-*-offset-0 classes

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

列排序

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


<head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <style type="text/css">
            .row div{
                height: 300px;
                border: 2px solid black;
            }
            
            
        </style>
        
        
        
    </head>
    <body>
        
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-xs-6 col-lg-3  col-md-6"></div>
                <div class="col-sm-12 col-xs-6 col-lg-3  col-md-6"></div>
                <div class="col-sm-12 col-xs-6 col-lg-3  col-md-6"></div>
                <div class="col-sm-12 col-xs-6 col-lg-3  col-md-6"></div>
                <div class="col-sm-12 col-xs-6 col-lg-6  col-md-6"></div>
                <div class="col-sm-12 col-xs-6 col-lg-6  col-md-6"></div>
            </div>    
        </div>
    </body>
 

bootstrap栅格系统的属性及使用的更多相关文章

  1. [转]bootstrap栅格系统的属性及使用

    本文转自:https://www.cnblogs.com/LJYqq/p/6791512.html 栅格系统 媒体查询 在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query) ...

  2. 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  3. Bootstrap 栅格系统初识

    以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...

  4. 第二百三十五节，Bootstrap栅格系统

    Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一．移动 ...

  5. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  6. Bootstrap 栅格系统(转载)

    源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...

  7. Bootstrap栅格系统（布局）

    栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

  8. 初学bootstrap ---栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 入门——Bootstrap栅格系统

    作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...

随机推荐

  1. C#一个简单的关于线程的实例

    很多初学者听到线程会觉得晦涩难懂,很多资料一堆专有名词也是让人心烦意乱,本着学习加分享的态度,这里做一个简单的实例分享帮助初学者们初识多线程.  首先大概讲述一下多线程和多进程的区别,任务管理器里各种 ...

  2. s11 day104 数据库表结构与立即支付流程

    数据库表结构: 13张 1. 课程大类 2.课程子类 3.学位课程 4.老师表 5.奖学金 6.专题课 7.课程详情 8.课程大纲 9.常见问题 10.章节 11.课时 12.作业表 13.价格策略 ...

  3. Python实现汉诺塔问题的可视化（以动画的形式展示移动过程）

    学习Python已经有一段时间了,也学习了递归的方法,而能够实践该方法的当然就是汉诺塔问题了,但是这次我们不只是要完成对汉诺塔过程的计算,还要通过turtle库来体现汉诺塔中每一层移动的过程. 一.设 ...

  4. Caused by: com.mysql.jdbc.MysqlDataTruncation: Data truncation: Data too long for column 'img' at row 1故障

    Caused by: com.mysql.jdbc.MysqlDataTruncation: Data truncation: Data too long for column 'img' at ro ...

  5. django 获取request请求对象及response响应对象中的各种属性值

    django request对象和HttpResponse对象 HttpRequest对象(除非特殊说明,所有属性都是只读,session属性是个例外) HttpRequest.scheme 请求方案 ...

  6. jzoj5804

    這道題n-m很小,可以從此入手 記f[i][j]為i個字符括號綜合為j的合法方案數 則第i個括號可以枚舉為(和),所以f[i][j]=f[i-1][j-1]+f[i-1][j+1],小心越界 再記a為 ...

  7. Linux之开源软件移植

    移植环境 Utuntu 15.04 1.mplayer移植 版本:mplayer-export-snapshot.tar.bz2 /mplayer-export-2015-11-26 Linux PC ...

  8. 【bzoj2422】 Times 前缀和

    本来想练一下树状数组的,看到网上某人的blog后点了进来. 第一眼发现不会,出去上了个厕所发现离散化后不是一道简单前缀和题吗. 考虑到每一个人出现且仅出现一次,且出现的时间是在一个连续的区间内. 那么 ...

  9. 【NOIP2013】货车运输 最大生成树+倍增

    题目大意:给你一张n个点m条边的图,有q次询问,每次让你找出一条从x至y的路径,使得路径上经过的边的最小值最大,输出这个最大的最小值. 显然,经过的路径必然在这张图的最大生成树上. 我们求出这个图的最 ...

  10. OS之进程管理---多处理器调度

    引言 之前我们所学习的操作系统进程调度策略的前提条件是单处理器系统下的CPU调度程序.如果系统中存在多个CPU,那么负载分配就成为可能,但是相应的调度问题就会更加复杂. 多处理器调度方法 对于多处理器 ...