网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的:

  • 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
  • 使用行来创建列的水平组。
  • 内容应该放置在列内,且唯有列可以是行的直接子元素。
  • 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
  • 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
  • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4

Bootstrap 网格系统的工作原理的更多相关文章

  1. Bootstrap 网格系统(Grid System)的工作原理 - 媒体查询

    媒体查询 媒体查询是非常别致的"有条件的 CSS 规则".它只适用于一些基于某些规定条件的 CSS.如果满足那些条件,则应用相应的样式. Bootstrap 中的媒体查询允许您基于 ...

  2. 详解Bootstrap网格系统

    bootstrap框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值.bootstrap框架的网格系统工作原理: 1.数据行(.row ...

  3. bootstrap学习笔记--bootstrap网格系统

    移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备. 现在不一 ...

  4. Bootstrap 网格系统(Grid System)

    Bootstrap 网格系统(Grid System) Bootstrap提供了一套响应式,移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是 ...

  5. 一篇笔记整理JVM工作原理

    首先要了解的 >>数据类型 Java虚拟机中,数据类型可以分为两类:基本类型和引用类型. 基本类型的变量保存原始值,即:他代表的值就是数值本身:而引用类型的变量保存引用值.“引用值”代表了 ...

  6. 《HiWind企业快速开发框架实战》(1)框架的工作原理

    <HiWind企业快速开发框架实战>(1)框架的工作原理 1.HiWind架构 HiWind的基本架构如下: 持久层部分:同时为框架本身的业务服务,也为开发人员的自定义业务服务. 逻辑层: ...

  7. Java虚拟机工作原理详解 (一)

    一.类加载器 首先来看一下java程序的执行过程. 从这个框图很容易大体上了解java程序工作原理.首先,你写好java代码,保存到硬盘当中.然后你在命令行中输入 javac YourClassNam ...

  8. Java虚拟机工作原理详解

    原文地址:http://blog.csdn.net/bingduanlbd/article/details/8363734 一.类加载器 首先来看一下java程序的执行过程. 从这个框图很容易大体上了 ...

  9. Java虚拟机工作原理具体解释

    一.类载入器 首先来看一下java程序的运行过程. 从这个框图非常easy大体上了解java程序工作原理.首先,你写好java代码,保存到硬盘其中.然后你在命令行中输入 javac YourClass ...

随机推荐

  1. Spring基于Setter函数的依赖注入(DI)

    以下内容引用自http://wiki.jikexueyuan.com/project/spring/dependency-injection/spring-setter-based-dependenc ...

  2. Go -- 漫谈IM通信架构

    前前后后做的IM和推送系统已经有好几个了,一直都想好好总结下,因此就有了这篇文章.在我刚学编程的那会儿,觉得网络通信是一个很牛逼和门槛很高的一门技术,但是随着开源技术的发展和互联网知识的共享,现在要写 ...

  3. php编译安装后,加扩展模块

    1.进入php源码包中,找到需要安装的扩展模块目录. cd /root/php-5.6.26/ext/mbstring 2.在扩展模块目录,运行phpize程序. /usr/local/bin/php ...

  4. C# step by step 学习笔记8 CHAPTER 9 使用枚举和结构创建值类型

    C# 2012 step by step 学习笔记8 CHAPTER 9 使用枚举和结构创建值类型 本章内容 声明一个枚举类型 创建并使用一个枚举类型 声明一个结构类型 创建并使用一个结构类型 解释结 ...

  5. Razor视图引擎布局 Razor视图引擎的基本概念与法语 SQL Server Mobile 和 .NET 数据访问接口之间的数据类型映射 binary 和 varbinary datetime 和 smalldatetime float 和 real

    Razor视图引擎布局   不需要像过去aspx一样,使用.Master文件,而是统一使用.cshtml 或 .vbhtml文件.但文件名一般以 _开头,这样做文件不会当做View显示出来 使用@Re ...

  6. mybatis一对多

    mapper.xml <mapper namespace="com.oracle.dao.one2manyDao"> <resultMap type=" ...

  7. [游戏]L4D求生之路官方比赛地图修补完好说明

    游戏模式:L4D求生之路4356(1.0.2.1)药抗比赛模式 更新日期:2015.06.04 -----毫不留情01----- 1.开局补给手枪 -----毫不留情02----- 1.开局补给手枪 ...

  8. [WF4.0 实战] 事件驱动应用

    看到题目或许非常多人都会疑问,为什么要使用事件监听呢? 眼下的认识: 1,使用事件监听能够将工作流的结点返回值返回到client 2,能够实现等待与重新启动,相当于之前的WaitActivity创建B ...

  9. java接口的一些想法

    最近一直在闷头往前看<thingking in java> ,但是却由于赶了进度而忘记了初衷.当学到集合的时候,回头却发现,我连最基本的接口都不明白.查了一上午资料,现在明白例如一点点,写 ...

  10. Apache Qpid 高可用集群

    一.RHCS RHCS是Red Hat Cluster Suite(红帽子集群套件)的缩写.RHCS是一个功能完备的集群应用解决方案,它从应用的前端访问到后端的数据存储都提供了一个行之有效的集群架构实 ...