栅格布局系统的特点：

(1)所有的行必须放在容器中： .container或.container-fluid

(2)分为多行(row)，一行中平均分为12列(col)

(3)网页内容只能放在列(col)中，不能直接放在行(row)

(4)可以在col中再嵌套row

(5)col分为四大类： col-xs   col-sm    col-md   col-lg

(6)col-md-*  *值可为1~12，值就为某个列的宽度(  */12  )

(7)可以为一个列指定不同屏幕下的不同宽度

(8) col-lg-*  只对大PC屏幕有效

col-md-*   对普通PC和大PC屏幕都有效

col-sm-*   对平板、PC、大PC屏幕都有效

col-xs-*   对手机、平板、PC大PC屏幕都有效

(9)  .hidden-lg    当前列只在大PC屏幕下隐藏

.hidden-md 当前列只在PC屏幕下隐藏

.hidden-sm 当前列只在平板屏幕下隐藏

.hidden-xs 当前列只在手机屏幕下隐藏

Bootstrap栅格布局系统的特点的更多相关文章

  1. Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)

    这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...

  2. Bootstrap3.0的栅格布局系统实现原理

    这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...

  3. bootstrap栅格布局-v客学院知识分享

    今天主要跟大家讲解下bootstrap的栅格布局,以及使用过程中应该注意的问题 首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构 如下图: 必须给要使用栅格布局的盒子定义cla ...

  4. 【转及总结】Bootstrap 框架 栅格布局系统底层设计原理

    如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...

  5. bootstrap栅格布局学习历程

    了解一个东西.他叫什么?他由什么组成,能做什么? 现在响应式的网站(在不同分辨率下有不同的布局)很瘦欢迎.优点:1.解决设备之间的差异化展示缺点:a.兼容性代码多,工作量大,加载速度受到影响;b.用户 ...

  6. bootstrap栅格布局

    <!DOCTYPE html> <html lang="en"> <head> <!-- //简介:boststrap内置了一套响应式,移 ...

  7. 你不需要基于 CSS Grid 的栅格布局系统

    在过去的几个星期里,我开始看到基于 CSS Grid 的布局框架和栅格系统的出现.我们惊讶它为什么出现的这么晚.但除了使用 CSS Grid 栅格化布局,我至今还没有看到任何框架能提供其他有价值的东西 ...

  8. bootstrap栅格布局，第一次成功

    代码: <div class="helper" style="background-color: #F7F7F9;height: 200px;padding-top ...

  9. 浮动元素垂直居中，bootstrap栅格布局垂直居中

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

随机推荐

  1. hbase 1.1.7在centor6.5安装过程

    1.自己安装的最新版一直没成功,换成了1.1.7稳定版的.中间遇到的问题记录下 1) jdk 用的1.7版本的,安装过程省略. 2)下载hbase  zip包:https://mirrors.tuna ...

  2. Spring学习记录(十一)---使用注解和自动装配

    Spring支持用注解配置Bean,更简便. 上面的组件,是根据实际情况配的.比如写的一个类,是做业务处理的,那就用注解@Service表示服务层组件,以此类推.将整体分成不同部分. 要在xml加入c ...

  3. VMware 安装虚拟机安装MAC （OSX10_11）

    一.简述前言: 1.本案例是基于 VMware Workstation Pro(专业版)12 上创建一个MAC操作系统(版本 :OSX10_11),下面的步骤基本上和安装其他类型的虚拟机没有什么区别. ...

  4. Security8：删除Role 和 User

    数据库的Role 和 User都是基于Specified DB的,在删除这些Principal之前,必须使用Use clause,切换到指定的DB中. sys.database_role_member ...

  5. 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...

  6. No row with the given identifier exists:

    最近在弄一个后台项目,有用到hibernate操作数据库.写hql语句表一对一关联查询的时候报这个错误.受到了csdn上一篇博客的启发,解决了我的问题.他的博客地址:http://blog.csdn. ...

  7. 给Easyui　combobox设定默认值

          今天做到那个北理工二期的项目,里面刚好有几个dialog需要弄一个默认值,一般是选择启用与否,但是,为了方便用户,最好有一个默认值,所以,增加一个默认值的属性.代码入下: JS代码:   ...

  8. multipart数据结构

    --[boundary]\r\n [headers]\r\n \r\n [content]\r\n --[boundary]\r\n [headers]\r\n \r\n [content]\r\n ...

  9. C# 将多个office文件转换及合并为一个PDF文件

    PDF文件介绍 PDF(Portable Document Format )文件源于20世纪90年代初期,如今早已成为了一种最流行的的文件格式之一.因为PDF文件有很多优点: 支持跨平台和跨设备共享 ...

  10. iOS 实现类似雷达效果的核心代码

    -(void)drawRect:(CGRect)rect { [[UIColor clearColor]setFill]; UIRectFill(rect); NSInteger pulsingCou ...