本文转自：https://www.cnblogs.com/LJYqq/p/6791512.html

栅格系统

媒体查询

在栅格系统中，我们在 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栅格系统的属性及使用

    栅格系统 媒体查询 在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值. 小屏幕(平板,大于等于 768px) @media (min-width: ...

  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. Android-Kotlin-Activity直接的跳转

    1.选中应用包名packageName,右键: 2.选中Kotlin: 3.创建Kotlin的Activity完成: 第一个Activity,MainActivity package cn.kotli ...

  2. SQL SERVER的锁机制（一）——概述（锁的种类与范围）

    锁定:通俗的讲就是加锁.锁定是 Microsoft SQL Server 数据库引擎用来同步多个用户同时对同一个数据块的访问的一种机制. 定义:当有事务操作时,数据库引擎会要求不同类型的锁定,如相关数 ...

  3. 利用GDI+处理图像，包括图像的的裁剪显示、转置、镜像、简单旋转、变形等。

    一.图像的裁剪显示:有时程序需要显示图像的一部分而不是全部.实例代码如下: CDC* pDC = GetDC(); Graphics graph(pDC->GetSafeHdc()); Imag ...

  4. .NET Core下开源任务调度框架Hangfire的Api任务拓展(支持秒级任务)

    HangFire的拓展和使用 看了很多博客,小白第一次写博客. 最近由于之前的任务调度框架总出现问题,因此想寻找一个替代品,之前使用的是Quartz.Net,这个框架方便之处就是支持cron表达式适合 ...

  5. python -猜字小游戏

    代码运行效果如下: 注意: 1.必须要在python3环境想使用 2.QQ:3084276329(一起交流学习) 3.还请大家评论 Guess the word game代码如下: #! /usr/b ...

  6. EF 通过修改模版 更改生成实体名称

    直接修改T4 模版中对应关系就可以了,我这里是去掉了表中的“_”

  7. 读书笔记--SQL必知必会--常用MySQL（MariaDB）命令及示例

    DBMS信息 显示DBMS的版本 select version(); 显示DBMS状态 status; 显示DBMS资源状态 show status; 显示DBMS支持的权限 show privile ...

  8. SQL高效查询两个表不同的数据

    逻辑相对复杂,但是速度最快: )

  9. iOS开发-从16进制颜色中获取UIColor

    目前iOS中设置UIColor只能使用其枚举值.RGB等方法,不能直接将常用的16进制颜色值直接转为UIColor对象,所以写了点代码,将16进制颜色值转为UIColor. 代码如下, //头文件#i ...

  10. flask_ Mongodb 的语法-排序

    MOngoDB的排序是挺有用的   ,跟MySQL有明显的区别 .. 它的原生语法的第一个参数为条件限定,第二个参数为排序字段 db.news.find({},{'_id':1})   #1是升序  ...