栅格布局系统的特点：

(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. Sql Server系列：数据表操作

    表是用来存储数据和操作数据的逻辑结构,用来组织和存储数据,关系数据库中的所有数据都表现为表的形式,数据表由行和列组成.SQL Server中的数据表分为临时表和永久表,临时表存储在tempdb系统数据 ...

  2. ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分（1）用户注册

    上一次把基本框架搭建起来了,这次开始整Web部分,终于可以看到界面了小激动一下.web项目部分从用户功能开始,基本有注册,登录.注销.查找.查看.删除等涉及Member区域和Manage区域. 目录: ...

  3. Android标题栏上添加多个Menu按钮

    最近项目中碰到要在Android Menu旁边再添加一个按钮,而不是点击menu按钮然后在弹出一些选项. MainActivity代码: public class MainActivity exten ...

  4. 修改ibdata1大小的验证以及如何使用mysqld_multi管理多实例

    修改ibdata1大小的验证 ibdata是共享表空间,在MySQL初始化的时候就生成了. 但很多童鞋会看到网上各种大神的调优建议,在MySQL已经初始化的情况下,修改配置文件中innodb_data ...

  5. 设置SharePoint Server 2013 的匿名访问

    默认情况下,SharePoint Server 2013 是关闭匿名访问的,但是某些环境下我们又需要将这个匿名访问对全员开放,怎么操作更加安全与便捷,对于一个崭新的环境我们可以这样操作. 首先在当前需 ...

  6. 数据结构：C_链表队列的实现

    数据结构链表形式队列的实现(C语言版) 1.写在前面 队列是一种和栈相反的,遵循先进先出原则的线性表. 本代码是严蔚敏教授的数据结构书上面的伪代码的C语言实现代码. 分解代码没有包含在内的代码如下: ...

  7. 组件化h5活动模板的实现

    需求: 实现一套灵活的活动组件模板,编辑人员只需要打开后台,拖拽相应组件,填入相应内容,最终就生成一个活动页面. 因为涉及投票,评论,关注等功能(每个功能都当做一个组件),所以一个富文本编辑器是无法实 ...

  8. 负margin的原理以及应用

    负margin在布局中往往起到意想不到的效果,比如在多栏等高布局中就是用该技巧. 虽说网络上关于负margin的实践有很多,但对margin负值为什么会出现这样的效果却没有多少讲解,本篇的目的就是阐述 ...

  9. jQuery-1.9.1源码分析系列（十六）ajax——ajax处理流程以及核心函数

    先来看一看jQuery的ajax核心处理流程($.ajax) a. ajax( [url,] options )执行流程 第一步,为传递的参数做适配.url可以包含在options中 //传递的参数只 ...

  10. Model验证功能

    占位符  {0}对应属性  {1}对应minimum  {2}对应maximum   [StringLength(15, MinimumLength = 6, ErrorMessage = " ...