基本网络结构

<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....

container:容器,用来盛庄里面的div的

row:列,列里面用来嵌套行

col:行

偏移列

为了在大屏幕显示器上使用偏移,请使用 .col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11

在下面的实例中,我们有 <div class="col-md-6">..</div>,我们将使用 .col-md-offset-3 class 来居中这个 div。

 <div class="container">
<div class="row">
<div class="col-xs-6 col-sm-offset-3">
里面的元素,在会被居中,在sm以上
</div>
</div>
</div>

列嵌套

实现复杂的盒子,需要行列的相互嵌套,及行中不可直接嵌套行,而是需要添加列

bootstrap Grid布局(网格布局)的更多相关文章

  1. Python pyQt4/PyQt5 学习笔记3(绝对对位,盒布局,网格布局)

    本节研究布局管理的内容. (一)绝对对位  import sys from PyQt4 import QtGui class Example(QtGui.QWidget): def __init__( ...

  2. Bootstrap系列 -- 10. 网格布局

    一. 实现原理 网格布局是通过容器的大小,平均分为12份(可以修改),再调整内外边距,和表格布局有点类似但是也存在区别. 实现步骤如下: (1) 数据行.row 必须包含在容器.container 中 ...

  3. 网页布局——grid弹性网格布局

    网格布局(Grid)是最强大的 CSS 布局方案. Flexbox 是为一维布局设计的,而 Grid 是为二维布局设计. grid目前兼容性目前还可以,主流浏览器对它的支持力度很大,ie9,10宣布它 ...

  4. Android笔记(十一) Android中的布局——网格布局

    网格布局是Android4.0新增的布局管理器,因此需要在Android4.0之后的版本才可以使用,之前的平台使用该布局的话,需要导入相应的支持库. GridLayout的作用类似于HTML中的tab ...

  5. css布局 - 九宫格布局的方法汇总(更新中...)

    目录: margin负值实现 祖父和亲爹的里应外合 换个思路 - li生了儿子帮大忙. 借助absolute方位值,实现自适应的网格布局 cloumn多栏布局 grid display: table: ...

  6. 【精心挑选】15款最好的 jQuery 网格布局插件(Grid Plugins)

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  7. bootstrap学习总结-02 网格布局

    1  网格布局 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. <!DOCTYPE html> ...

  8. 转:Bootstrap研究 精巧的网格布局系统

    本网格布局系统属于Scaffolding(框架,布局)部分.在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Fluid Grid System).本文讨论第一种 ...

  9. CSS Grid 网格布局教程

    一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...

  10. BootStrap网格布局

    如何使用BootStrap样式 BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了. <link rel="stylesheet" href=&qu ...

随机推荐

  1. Centos 7.3 配置Xmanager XDMCP

    我们通常需要远程桌面,这会带来很好的便利性,而Centos7的XDMCP配置过程发生了变化,添加了很多新特性,初期难免会不适应,但新系统终究还是不错的.下面看看Centos7下如何配置XManager ...

  2. 从0开始的InfiniBand硬件踩坑过程

    由于科学计算实验的需求,需要使用InfiniBand做一个持久性内存全互联的分布式存储系统.其中从网卡到交换机使用Mellanox全家桶,而在Mellanox网卡与交换机的使用过程中还是遇到了不少的问 ...

  3. MySQL开启SSL认证,以及简单优化

    1.1 MySQL开启SSL认证 #生成一个 CA 私钥 [root@db01 ssl]# openssl genrsa 2048 > ca-key.pem Generating RSA pri ...

  4. Fatal Error -26000: Not enough memory (12320 bytes) for “new buffer in LrwSrvNetTaskIt 问题解决及lr脚本心得

    Fatal Error -26000: Not enough memory (12320 bytes) for “new buffer in LrwSrvNetTaskIt 问题解决及lr脚本心得 2 ...

  5. Python 学习笔记14 类 - 使用类和实例

    当我们熟悉和掌握了怎么样创建类和实例以后,我们编程中的大多数工作都讲关注在类的简历和实例对象使用,修改和维护上. 结合实例我们来进一步的学习类和实例的使用: 我们新建一个汽车的类: #-*- codi ...

  6. [LeetCode] 181.超过经理收入的员工

    Employee表包含所有员工,他们的经理也属于员工.每个员工都有一个 Id,此外还有一列对应员工的经理的 Id. +----+-------+--------+-----------+ | Id | ...

  7. java并发编程之美-阅读记录3

    java并发包中的ThreadLocalRandom类,jdk1.7增加的随机数生成器 Random类的缺点:是多个线程使用同一个原子性的种子变量,导致对原子变量的更新产生竞争,降低了效率(该类是线程 ...

  8. 字符串格式的Url的截取

    一,我们先在看在页面上获取的URL的处理,如下方法: //获取全部URL string Url = Request.Url.ToString(); Url += "</br>&q ...

  9. String类可以被继承吗?我们来聊聊final关键字!

    String类可以被继承吗?我们来聊聊final关键字! String在java基础知识中绝对是个重点知识,关于String的一些问题也是非常的多,而且牵涉到内存等高级知识,在面试中也是经常被考察的一 ...

  10. Ansible--04 ansible 流程控制

    ansible 流程控制 playbook 条件语句 不管是 shell 还是各大编程预言中,流程控制,条件判断都是必不可少的,在我们使用 Ansible的过程中,条件判断的使用频率都非常高. 例如: ...