本文转自：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. Delphi中Unicode转中文

    function UnicodeToChinese(inputstr: string): string; var i: Integer; index: Integer; temp, top, last ...

  2. Android-WebView与本地HTML (HTML调用-->Java的方法)

    上一篇博客 Android-WebView加载网络图片&网页 介绍了 使用WebView去加载网络上的图片与网页; 此篇博客专门介绍 Android-WebView与本地HTML (HTML调 ...

  3. 分形之二叉树（Binary Tree）

    上一篇文章讲的是分形之树(Tree),这一篇中将其简化一下,来展示二叉分形树的生长过程. 核心代码: static void FractalBinaryTree(const Vector3& ...

  4. MVC图片验证

    1.创建一个验证类,里面有生成验证码的两个方法. namespace YTJWGL_Common { public class ValidatorCodeTools { #region 生成校验码图片 ...

  5. MySQL--Ansible推送密钥实现免密码登录

    从别人网站抄过来,保留自用 场景: 对于需要管理的很多linux服务器,每次登录都输入密码比较痛苦,配置一个跳板机,将本地公钥推送带各访问节点上实现SSH登录 登录账号:admin 本地秘钥路径:/h ...

  6. C#Datetimepicker出现问题及解决方法

    前几天公司用的物料管理系统出现了一个很奇怪的问题,具体的现象是:10月31号的那天,物流部的人因为之前的问题,需要将之前已经结转的9月份取消结转. ,当操作人员将10改变为9的时候,出现问题了.程序直 ...

  7. 「PKUSC2018」真实排名（组合）

    一道不错的组合数问题! 分两类讨论: 1.\(a_i\) 没有翻倍,那些 \(\geq a_i\) 和 \(a_j\times 2<a_i\) 的数就没有影响了.设 \(kth\) 为 \(a_ ...

  8. 优化openfire服务器提升xmpp 效率的15个方法（原创）

    1.禁用原生xmpp搜索,使组织架构.人员数据本地化保存,并使客户端数据同步服务器,降低原生xmpp搜索的iq消耗,因为搜索是im应用的频繁操作: 2.禁用roster花名册.禁用presence包通 ...

  9. node-rsa非对称加密

    写在最前:此文的目的是介绍编码,减少刚接触时的弯路,所以内容且不做详细累述 一.使用 node-rsa 进行非对称加解密 因为 比特币 中使用的非对称加密,所以在npm中对比找到一个比较方便也直观的库 ...

  10. Microsoft SQL Server on Linux 踩坑指南

    微软用 SQL Server 在 2016 年的时候搞了一个大新闻,宣传 Microsoft ❤️ Linux 打得一众软粉措手不及.但是这还是好事情,Linux 上也有好用的 SQL Server ...