基本用法
  网格系统用来布局,其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的网格样式,在这一节中所涉及到的示例,我们都以中屏(970px)为例进行介绍,其他屏幕的使用也类似这一种。

1、列组合

列组合简单理解就是更改数字来合并列(原则:列总和数不能超12),有点类似于表格的colspan属性,例如:

使用上面的结构,你将看到下图的效果:

2、列偏移
有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。

如上面的示例代码,得到的效果如下

注意:

不过有一个细节需要注意,使用”col-md-offset-*”对列进行向右偏移时,要保证列与偏移列的总数不超过12,不然会致列断行显示

转自:https://www.cnblogs.com/chessYu/p/7337018.html

Bootstrap 栅格系统(布局)的更多相关文章

  1. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  2. Bootstrap栅格系统(布局)

    栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

  3. 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  4. Bootstrap 栅格系统(转载)

    源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...

  5. 初学bootstrap ---栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Bootstrap栅格系统用法--Bootstrap基础

    1.栅格系统实现布局的原理 1)Bootstrap把屏幕的宽度拆分成12格(列),每一格像素的多少由设备屏幕分辨率决定,我们在开发项目的过程中不需要去指定像素或者百分比. 2)不同范围的分辨率对应不同 ...

  7. 入门——Bootstrap栅格系统

    作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...

  8. Bootstrap栅格系统基本使用

    1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...

  9. Bootstrap 栅格系统初识

    以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...

  10. 第二百三十五节,Bootstrap栅格系统

    Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一.移动 ...

随机推荐

  1. python ( EOL while scanning string literal)

    python错误: EOL while scanning string literal: 这个异常造成的原因是字符串,引号没有成对出现 参考:http://www.jb51.net/article/6 ...

  2. [转载] iframe嵌入网页的用法

    iframe并不是很常用的,在标准的网页中非常少用.但是有朋友经常问到,下面我简单地介绍一下它的用法,你只要熟练掌握这些参数足矣. <iframe>也应该是框架的一种形式,它与<fr ...

  3. java使用反射给对象属性赋值的两种方法

    java反射无所不能,辣么,怎么通过反射设置一个属性的值呢? 主程序: /** * @author tengqingya * @create 2017-03-05 15:54 */ public cl ...

  4. Linux学习笔记之passwd:Authentication token manipulation error_错误的解决办法

    如果在linux中,不管是root用户还是普通用户登录后,修改自己的密码,出现—passwd:Authentication token manipulation error—错误的解决办法: root ...

  5. Python3 实现(wxpy)用微信自动定时给朋友定时推广

    Python3 实现(wxpy)用微信自动定时给朋友定时推广 安装wxpy 安装微信机器人wxpy非常简单,如果你拥有pip,请直接按照Github中的方法安装: pip install wxpy 实 ...

  6. NFS常用命令

    1.客户端查看服务端可挂载卷 showmount -t 服务端IP 2.不重启加载NFS配置文件 exportfs -avr

  7. Thinkphp5 引入第三方类库的方法

    原文链接:http://www.zhaisui.com/article/42.html

  8. 20145106 java实验二

    1)复数类ComplexNumber的属性 m_dRealPart: 实部,代表复数的实数部分 m_dImaginPart: 虚部,代表复数的虚数部分 public class ComplexNumb ...

  9. NRF24L01通信频率

    RF-CH 共包括六位,这六位决定了不同的工作方式频率,nRF24L01无线通信模块中工作通道频率由RF-CH寄存器的内容确定, 可由以下公式计算得出:Fo=(2400+RF-CH)MHz. 扩展:射 ...

  10. 2017.7.4 ACM校内赛 Round 2

    这是一个向导 A - hdu 3652 B - bzoj 4152 C - bzoj 2429 D - bzoj 1087 E - bzoj 1566 F - bzoj 4043 G - bzoj 1 ...