栅格系统

媒体查询

在栅格系统中，我们在 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. 新建/初始化git项目

    Command line instructions Git global setup git config --global user.name "你的名字" git config ...

  2. CentOS系统安装遇到的一些问题

    Vi操作:按ESC键 跳到命令模式,然后: :w 保存文件但不退出vi:w file 将修改另外保存到file中,不退出vi:w! 强制保存,不推出vi:wq 保存文件并退出vi:wq! 强制保存文件 ...

  3. 缓存 - 内存数据库Redis

    客户端 Redis Desktop Manager 官网 新版的收费,或者要分享什么的.0.8.8的旧版才免费?:https://github.com/uglide/RedisDesktopManag ...

  4. c# 判断当前时间是否在某一时间段内

    //获取当前系统时间并判断是否为服务时间 TimeSpan nowDt = DateTime.Now.TimeOfDay; TimeSpan workStartDT = DateTime.Parse( ...

  5. 程序媛计划——python socket通信

    定义 socket 是进程间的一种通信方式,可以实现不同主机间的数据传输 #写服务期端程序server.py #实现服务器向客户端连接 #!/usr/bin/env python #coding:ut ...

  6. leetcode 91. 解码方法 JAVA

    题目: 一条包含字母 A-Z 的消息通过以下方式进行了编码: 'A' -> 1 'B' -> 2 ... 'Z' -> 26 给定一个只包含数字的非空字符串,请计算解码方法的总数. ...

  7. 《Python绝技：运用Python成为顶级黑客》 用Python进行渗透测试

    1.编写一个端口扫描器 TCP全连接扫描.抓取应用的Banner #!/usr/bin/python #coding=utf-8 import optparse import socket from ...

  8. 红黑树的实现——c++

    红黑树介绍参考上一篇. 1. 基本定义 enum RBTColor{RED, BLACK}; template <class T> class RBTNode{ public: RBTCo ...

  9. vsftp小记

    安装一个vsftp都有问题(Version: 3.0.2-14ubuntu1),提示530 错误,之后修改配置如下(红色): # cat /etc/pam.d/vsftpdauth required ...

  10. 如何将Excel导入到Mysql数据库中

    1.在mysql中建一张和Excel结构一样的表,或者修改excel信息,将excel的结构与mysql中table保持一致,包括字段名称. 2.利用mysql客户端工具navicat进行导入. 步骤 ...