Bootstrap_响应式网格系统
首先添加CSS样式:
[class *= col-]{
background-color: #eee;
border: 1px solid #ccc;
}
[class *= col-] [class *= col-] {
background-color: #f36;
border:1px dashed #fff;
color: #fff;
}
一、介绍
网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
二、工作原理
1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。
2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。
3、具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素。
4、通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响。
<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>
三、屏幕尺寸
Bootstrap框架的网格系统中有四种基本的用法。
四、列偏移
有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来。
这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“.col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。
<div class="container">
<div class="row">
<div class="col-xs-4">.col-xs-4</div>
<div class="col-xs-2 col-xs-offset-2">向右移动2列</div>
<div class="col-xs-2">.col-xs-2</div>
</div>
<div class="row">
<div class="col-xs-4">.col-xs-4</div>
<div class="col-xs-4 col-xs-offset-4">列向右移动四列的间距</div>
</div>
</div>
五、列排序
列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。
在Bootstrap框架的网格系统中是通过添加类名“.col-md-push-*”和“.col-md-pull-*” (其中星号代表移动的列组合数)
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">.col-md-4</div>
<div class="col-md-8 col-md-pull-4">.col-md-8</div>
</div>
</div>
六、列的嵌套
Bootstrap框架的网格系统还支持列的嵌套。
你可以在一个列中添加一个或者多个行(row)容器,然后在这个行容器中插入列(像前面介绍的一样使用列)。
但在列容器中的行容器(row),宽度为100%时,就是当前外部列的宽度。
<div class="container">
<div class="row">
<div class="col-md-8">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">
我的里面嵌套了一个网格
<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>
</div>
</div>
Bootstrap_响应式网格系统的更多相关文章
- 模拟Bootstrap响应式网格系统
Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...
- bootstrap_响应式布局简介_媒体查询_媒体选择器_2x3x图
响应式布局 在不同设备上,同一网页根据设备特性(显示屏大小,分辨率)呈现不同的布局样式. 思考: 获取设备相关信息 将屏幕划分为几个区域 给需要变化的结构写多套 css 样式 媒体查询 常用写法 @m ...
- bootstrap入门-3.响应式原理
Bootstrap网格系统(Grid System) 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 1 1 1 1 1 1 1 1 1 1 1 1 4 4 4 ...
- 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
- Pure.css网格系统学习心得——图片的响应式以及应用填充和边框网格单位的学习
今天学习了pure.css可定制的网格系统,pure默认的网格系统是移动先行,如果我们想在小屏幕上有网格只要用pure-u-*就可以了,下面来说一下它的主要用法! <div class=&quo ...
- 强大又简单的响应式框架——Foundation 网格系统
前端框架——Foundation 简介 Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架. Foundation 是一个易用.强大而且 ...
- 响应式开发(五)-----Bootstrap CSS----------Bootstrap 网格系统
如果我们看过一些bootstrap的框架,经常看到col-sm-3等样式class. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系 ...
- bootstrap_栅格系统_响应式工具_源码分析
-----------------------------------------------------------------------------margin 为负 使盒子重叠 等高 等高 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例:响应式的列重置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- BizTalk开发系列(三十)单向端口实现请求-响应
BizTalk本质上是异步的消息处理引擎.BizTalk的请求与响应模式是基于异步之上的同步消息交换.消息引擎通过消息的扩展架构链接许 多异步消息,消息的相关集关联请求与响应消息.例如,客户端发送一个 ...
- 用户、组或角色 '' 在当前数据库中已存在。 (Microsoft SQL Server,错误: 15023)
SQLServer2008用户组或角色'*****'在当前数据库中已存在问题的解决办法 在迁移数据库的过程中SQLServer SDE的问题 为一个数据库添加一个用户时,提示以下信息:用户.组或角色 ...
- php使用 memcache 来存储 session 方法总结
设置session用memcache来存储 方法I: 在 php.ini 中全局设置 session.save_handler = memcache session.save_path = " ...
- Java虚拟机学习记录
一.java平台无关性的基础 1.和各个平台有关的虚拟机: 2.和各个平台无关的中间语言(class文件). 二.虚拟机语言无关性的基础 1.class文件 三.java虚机机器中java程序的生命周 ...
- html中select只读显示
因为Select下拉框只支持disabled属性,不支持readOnly属性,而在提交时,disabled的控件,又是不提交值的.现提供以下几种解决方案: 1.在html中使用以下代码,在select ...
- [troubleshoot][archlinux][bcache] 修改linux文件系统 / 分区方案 / 做混合硬盘 / 系统转生大!手!术!(调整底层架构,不!重!装!)
目标: 我要做的事情是:修改文件系统,硬盘分区方案,但是不重装系统,整个操作不被应用层感知. 背景: 我的笔记本 ThinkPad T450.8G内存 + 16GB SSD + 1TB HDD.预装w ...
- NET 框架基本原理透析⑵
生成.打包.部署及管理应用程序与类型 要生成就离不开程,序集,程序集是包含一个或多个类型定义文件和资源文件的集合.在程序集包含的所有文件中,有一个文件用于保存清单.清单是另外一组元数据表的集合,其中主 ...
- JMeter学习-020-JMeter 监听器之【聚合报告】错误率、吞吐量、传输速率实例计算
上文 对聚合报告的结果字段进行了概要的讲述释义,同时对吞吐量.传输速率.分位数等进行了详细的阐述,此文针对上文中描述的吞吐量及传输速率的计算进行详细的实例计算演示. 多不闲述,直入主题! 实际操作步骤 ...
- [Android Tips] 13. How to Detect Tablet
/** * 判断是否是平板 * @param context * @return */ public static boolean isTablet(Context context) { return ...
- zjuoj 3602 Count the Trees
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3602 Count the Trees Time Limit: 2 Seco ...