栅格布局系统的特点：

(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. Linux线程体传递参数的方法详解

    传递参数的两种方法 线程函数只有一个参数的情况:直接定义一个变量通过应用传给线程函数. 例子 #include #include using namespace std; pthread_t thre ...

  2. Transactional Replication2：在Subscriber中，主键列是只读的

    在使用Transactional Replication时,Subscriber 被认为是“Read-Only”的 , All data at the Subscriber is “read-only ...

  3. ExecuteReader在执行有输出参数的存储过程时拿不到输出参数

    异常处理汇总-后端系列 http://www.cnblogs.com/dunitian/p/4523006.html 后期会在博客首发更新:http://dnt.dkill.net/Article/D ...

  4. Cordova+Asp.net Mvc+GIS跨平台移动应用开发实战1-系统初步搭建（附演示,apk,全部源码）

    1.前言 身处在移动互联网的今天,移动应用开发炙手可热,身为程序猿的我们怎么能错过开发一款我们自己的APP.本人算是一个基于.net的GIS开发入门者(马上就大四啦), 暑假在学校参加GIS比赛有大把 ...

  5. jQuery插件：jqGrid引入及基本属性

    1. jqGrid下载 jqGrid下载地址: http://www.trirand.com/blog/ jqGrid Demo: http://www.guriddo.net/demo/guridd ...

  6. MVC5 网站开发实践 概述

    目录 MVC5 网站开发实践  概述 MVC5 网站开发实践  1.建立项目 MVC5 网站开发实践  2.后台管理 MVC5 网站开发实践  2.1.管理员登陆 MVC5 网站开发实践 2.2.管理 ...

  7. EntityFramework之原始查询及性能优化（六）

    前言 在EF中我们可以通过Linq来操作实体类,但是有些时候我们必须通过原始sql语句或者存储过程来进行查询数据库,所以我们可以通过EF Code First来实现,但是SQL语句和存储过程无法进行映 ...

  8. （第九天）DOM事件

    addEventListener 使用addEventListner()方法可以为事件目标注册事件处理程序.addEventListner()接受三个参数.第一个是要注册处理程序的事件类型,这个事件类 ...

  9. jQuery源码 Ajax模块分析

    写在前面: 先讲讲ajax中的相关函数,然后结合函数功能来具体分析源代码. 相关函数: >>ajax全局事件处理程序 .ajaxStart(handler) 注册一个ajaxStart事件 ...

  10. 如何用C#代码判断一个类的类型

     var s = "";  s.GetType().IsClass; 来自为知笔记(Wiz)