网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 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. java集合系列之HashMap源码

    java集合系列之HashMap源码 HashMap的源码可真不好消化!!! 首先简单介绍一下HashMap集合的特点.HashMap存放键值对,键值对封装在Node(代码如下,比较简单,不再介绍)节 ...

  2. esrichina

    http://www.esrichina.com.cn/arcgis10.5/index.html#fillback=0100307b617b7b7b363736363039323733627b617 ...

  3. java zip 工具类

    原文:http://www.open-open.com/code/view/1430906539866 package com.topsoft.websites.utils; import java. ...

  4. Go -- 实现二叉搜索树

    树: https://suanfa.herokuapp.com/3%E6%A0%91/binarytree/ 数据结构 首先我们定义需要的数据结构.注意,TreeNode的左右节点都是*TreeNod ...

  5. QML 开发神奇加成之为网络资源设置本地缓存

    QML 开发神奇加成之为网络资源设置本地缓存 直接上码: #include <QNetworkAccessManager> #include <QNetworkDiskCache&g ...

  6. 自动化运维工具Fabric - 密码管理(env.password and ssh key)

    在使用 Fabric 的过程中,如果大批量服务器处理的话,我们就需要针对配置主机的密码,每台主机的密码相同还好,不同的话,就需要针对不同的主机做配置了,以下有两种配置方式 注:本文主要参考官方文档 P ...

  7. BUPT复试专题—最长连续等差子数列(2014软院)

    题目描述   给定-个长度为N的整数数列,你需要在其中找到最长的连续子数列的长度, 并满足这个子数列是等差的.注意公差小于或等于0的情况也是允许的. 输入 第一行为数据组数T(1~100),表示测试数 ...

  8. C++ string string string string string string string string string string

    一. 初始化 string s1="i love you"; string s2(s1); //把s2初始化为string s1,注意不能写成string s2; s2(s1); ...

  9. Filter注入对象

    由于没有在web.xml文件中加上<filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter ...

  10. 嵌入式驱动开发之2440/2410---uboot 移植

    http://blog.chinaunix.net/uid-20620288-id-3058904.html