1、实现原理

网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

<div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>

2、工作原理

数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素。通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响。

简单对图解释一下:最外边框,带有一大片白色区域,就是相当于浏览器的可视区域。在Bootstrap框架的网格系统中带有响应式效果,其带有四种类型的浏览器(超小屏,小屏,中屏和大屏),其断点(像素的分界点)是768px、992px和1220px。第二个边框(1)相当于容器(.container)。针对不同的浏览器分辨率,其宽度也不一样:自动、750px、970px和1170px。2号横条阐述的是,将容器的行(.row)平分了12等份,也就是列。每个列都有一个“padding-left:15px”(图中粉红色部分)和一个“padding-right:15px”(图中紫色部分)。这样也导致了第一个列的padding-left和最后一列的padding-right占据了总宽度的30px,从而致使页面不美观,当然,如果你需要留有一定的间距,这个做法是不错的。3号横条就是行容器(.row),其定义了“margin-left”和”margin-right”值为”-15px”,用来抵消第一个列的左内距和最后一列的右内距。将行与列给合在一起就能看到横条4的效果。也就是我们期望看到的效果,第一列和最后一列与容器(.container)之间没有间距。横条5只是想向大家展示,你可以根据需要,任意组合列与列,只是他们的组合数之和不要超过总列数。

官方解释:通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。

3、基本用法

网格系统用来布局,其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。

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

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
</div>
实现列组合方式非常简单,只涉及两个CSS两个特性:浮动与宽度百分比。

4、列偏移

有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。实现原理非常简单,就是利用十二分之一(1/12)的margin-left。然后有多少个offset,就有多少个margin-left。不过有一个细节需要注意,使用”col-md-offset-*”对列进行向右偏移时,要保证列与偏移列的总数不超过12,不然会致列断行显示。

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
<div class="col-md-2">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
</div>
</div>

试试制作一个网格:

1)一个有4列网格。

2)第一列网格占2格宽不偏移。

3)第二列、第三列网格占2格宽,并且偏移1个网格。

4)第四列网格占3格宽,并且偏移1个网格。

<div class="row">
  <div class="col-md-2">.col-md-2</div>
  <div class="col-md-2 col-md-offset-1">col-md-2 col-md-offset-1</div>
  <div class="col-md-2 col-md-offset-1">col-md-2 col-md-offset-1</div>
  <div class="col-md-3 col-md-offset-1">col-md-3 col-md-offset-1</div>
</div>

5、列排序

列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。

6、列的嵌套

Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行(row)容器,然后在这个行容器中插入列(像前面介绍的一样使用列)。但在列容器中的行容器(row),宽度为100%时,就是当前外部列的宽度。嵌套的列总数也需要遵循不超过12列。不然会造成末位列换行显示。

链接

Bootstrap学习-网格系统的更多相关文章

  1. Bootstrap 学习(1)

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...

  2. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

  3. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  4. Bootstrap学习-其它内置组件

    1.缩略图(一) 缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题.描述等信息.Bootstrap框架将这一部独立成一个模块组件.并通过“thumbn ...

  5. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  6. Bootstrap学习(3)

    Bootstrap 图片  Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来 ...

  7. BootStrap学习(2)

    使用Bootstrap添加代码框 可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...

  8. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  9. bootstrap布局 网格系统

    Bootstrap 网格系统 本章节我们将讲解 Bootstrap 的网格系统(Grid System). Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewp ...

随机推荐

  1. k8s restful API 结构分析

    k8s的api-server组件负责提供restful api访问端点, 并且将数据持久化到etcd server中. 那么k8s是如何组织它的restful api的? 一, namespaced ...

  2. Shader toy (顺手写两个Gyro)(纯代码写3D)

    Shader toy (A new world) 1.一个多月了,突然忘记CSDN的password了.由于每次输password的时候都要计算一遍,于是没有计算出来- 2.回头发现都过了半年了,都快 ...

  3. 为php5.6.30安装redis扩展

    1.下载phpredis3.1.2 https://github.com/phpredis/phpredis/releases/tag/3.1.2 2.解压后在phpredis3.1.2目录下执行 / ...

  4. C语言中使用库函数解析命令行参数

    在编写需要命令行参数的C程序的时候,往往我们需要先解析命令行参数,然后根据这些参数来启动我们的程序. C的库函数中提供了两个函数可以用来帮助我们解析命令行参数:getopt.getopt_long. ...

  5. HTTP图解--了解Web及网络基础

    1.网络基础TCP/IP 通常使用的网络是在TCP/IP协议族的基础上运行的,http属于它内部的一个子集. TCP/IP协议族按层次分别分为:应用层.传输层.网络层和数据链路层.分层的好处在于各司其 ...

  6. WDCP管理面板忘记ROOT MYSQL密码及重置WDCP后台登录密码方法

    不管出于何种原因,应该有不少的朋友在自己的VPS/服务器上采用WDCP管理面板的时候有忘记MYSQL ROOT账户管理密码在寻找解决方法,甚至有忘记WDCP后台管理登录密码的.这些问题都比较简单,只需 ...

  7. ThinkPHP连接主从数据库

    config.php文件设置如下: return array( 'URL_MODE'=>0,   'DB_TYPE'=>'mysql',   'DB_HOST'=>'localhos ...

  8. asp.net core mvc视频A:笔记3-3.Model与强类型视图

    创建项目,添加TestController 定义一个类(Model),并赋值 建立视图页面 注意:Model是一个特定的对象,取决于传递过来的参数 运行结果 到现在为止,依然没有改变动态类型,需要转换 ...

  9. day14—JQuery编程基础

    JQuery 1.什么是jQuery jQuery是一个优秀的JavaScript框架.一个轻量级的JavaScript类库.jQuery的核心理念是Write less.Do more. 使用jQu ...

  10. SpringBoot使用MyBatis报错:Error invoking SqlProvider method (tk.mybatis.mapper.provider.base.BaseInsertProvider.dynamicSQL)

    © 版权声明:本文为博主原创文章,转载请注明出处  1. 错误描述 使用SpringBoot集成MyBatis框架,并且使用 mapper-spring-boot-starter 自动生成MyBati ...