##### 1.3.2 栅格系统

- Bootstrap中定义了一套响应式的网格系统，
- 其使用方式就是将一个容器划分成12列，
- 然后通过col-xx-xx的类名控制每一列的占比

##### 1.3.3.row类

- 因为每一个列默认有一个15px的左右外边距
- row类的一个作用就是通过左右-15px屏蔽掉这个边距

##### 1.3.4.col-*\*-\*类

- col-xs-[列数]：在超小屏幕下展示几份
- col-sm-[列数]：在小屏幕下展示几份
- col-md-[列数]：在中等屏幕下展示几份
- col-lg-[列数]：在大屏幕下展示几份
- __xs__ : 超小屏幕 手机 (<768px)
- __sm__ : 小屏幕 平板 (≥768px)
- __md__ : 中等屏幕 桌面显示器 (≥992px)
- __lg__ : 大屏幕 大桌面显示器 (≥1200px)

响应式容器 container
栅格布局 12份一列 row
所占份数 
移动端col-xs-4 一个盒子占4分
小屏幕col-sm-4
中屏幕col-md-4
大屏幕col-lg-4
不满足一行份数会剩余 
超过一行的份数时 会掉下去
流式不距 container-fluid
列偏移：col-xs-offset2
列排序往后推：col-xs-push-9
排序往前拉：col-xs-pull-3

bootstarp栅格系统的更多相关文章

  1. bootstrap栅格系统的使用

    bootstrap栅格系统的使用 bootstrap栅格系统的使用,主要分为四种方式 1.列组合  col-md-* 2.列偏移 col-md-offset-* 3.列嵌套  大列组合包含着小组合 4 ...

  2. CSS3简单的栅格系统

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

  3. 初学者--bootstrap（四）栅格系统----在路上（8）

    ---------------------------------------栅格系统:是bootstrap提供的响应式布局方式------------------------------------ ...

  4. Bootstrap之栅格系统

    bootstrap 移动优先 中文官网  http://www.bootcss.com/ 1.基本模板 <!DOCTYPE html> <html lang="en&quo ...

  5. Bootstrap响应式栅格系统的设计原理

    1.历史背景 Bootstrap是Twitter的工程师Mark Otto和Jacob Thornton开发的一套供内部使用的UI框架,于2011年开源.2012年发布的第二版中新增了12列栅格系统和 ...

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

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

  7. bootstrap源码分析----栅格系统

    Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. bootstrap通过媒体查询解决不同分辨率屏幕下,页面主内 ...

  8. 用sass写栅格系统

    为了验证学习sass的效果,自己写了个简单的栅格系统.

  9. Bootstrap 栅格系统

    1.简介 Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义classe,还有强大的m ...

随机推荐

  1. linux之SQL语句简明教程---ALTER TABLE

    在表格被建立在资料库中后,我们常常会发现,这个表格的结构需要有所改变.常见的改变如下: 加一个栏位 删去一个栏位 改变栏位名称 改变栏位的资料种类 以上列出的改变并不是所有可能的改变.ALTER TA ...

  2. curl几个选项

    1.--cacert  选项请看https://curl.haxx.se/docs/sslcerts.html 2.CURL库怎样验证服务器证书 [复制链接] 中提到:你是客户端, 你希望的是: 你拿 ...

  3. js原生 + jQuery实现页面滚动字幕

    js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...

  4. Life is short, you need Python

    今年四五月份的时候我打算学一门计算机语言. 计算机语言实在是很多,选哪一个? 其实这个选择就和去市场买菜类似,想明白了自己的需求才能做好决定.你想做什么饭,就去买什么菜.想做南瓜粥,就要去买南瓜,想要 ...

  5. C# - DES加密+解密

    #region ===========================DES算法=================================== private static string ke ...

  6. 黑马程序员 Java基础<九>---> 多线程

    ASP.Net+Android+IOS开发..Net培训.期待与您交流! 多线程 一.概述: 1.线程是什么 说到线程,我们就得先说说进程.所谓进程,就是一个正在执行(进行)中的程序,每一个进程执行都 ...

  7. UEditor用法

    UEditor是百度的编辑器,界面美观,功能强大,用起来还不错. 详见该链接http://ueditor.baidu.com/ 一.下载 http://ueditor.baidu.com/downlo ...

  8. 根据树父子ID拼接无限极树结构表的名称

    declare @c varchar(50)set @c='572a3d51-ef7a-459e-a5cd-ebf0fca51e8b' --能查出来呀 你试试,我试一下,好像可以啦谢谢 declare ...

  9. iOS中有关配置 Apache 服务器的详细步骤

    配置 Apache 服务器 目的: 能够有一个测试的服务器,Apache 服务器是免费的! 为什么是 Apache 使用最广的 Web 服务器 Mac自带,只需要修改几个配置就可以,简单,快捷 有些特 ...

  10. javaweb一周总结（菜鸟）

    我的试用期开始了. 这是我的第一篇博客,这也是我作为java工程师的第六天,主要是为了记录一周内出现的问题以及一些工作上的解答,吐槽一句工作的确和想的不一样之后直接记录下吧. 由于拥有工作平台看不到底 ...