Boostrap栅格系统
Boostrap排版、链接样式设置了基本的全局样式。分别是:为body元素设置
布局容器:Bootstrap需要为页面内容和栅格系统包裹一个:container容器。Bootstrap提供了两个作此用处的类。由于padding等属性的原因,这两种容器类不能相互嵌套。
.container类用于固定宽度病支持响应式布局的容器。
.container-fluid类用于100%宽度,占据全部视口(viewport)的容器。
固定布局
bootstrap提供了一个通用的固定宽度的布局方式
<div class="container">
流式布局
利用<div class="container-fluid">代码可以创建一个流式、两列的页面,非常适合应用和文档类页面。
Bootstrap默认的栅格系统为12例,形成一个940px宽的容器,默认没有响应式布局特性。若加入响应式布局CSS文件,栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整,在可视窗口低于767px宽的情况下,列将不再固定并且会在垂直方向堆叠。
媒体查询(media query):在栅格系统中,我们在Less文件中使用以下媒体查询来创建关键的分界点阈值。
//小屏幕 平板 大于等于768px
@media (min-width:@screen-sm-min)
//中等屏幕 桌面显示器 大于等于992px
@media (min-width:@screen-md-min)
//大屏幕 大桌面显示器 大于等于1200px
@media (min-width:@screen-xd-min)
对于简单的两列式布局,创建一个.row容器,并在容器中刚加入合适数量的.span*列即可。由于默认的是12列的栅格,所有.span*列所跨越的栅格数之和最多是12。
Bootstrap还包含了一组Less变量和mixin用于生成简单、语义化的布局。
变量:通过变量来定义列数、槽(gutter)宽、媒体查询阈值(用于确定合适让列浮动)。还可以定制mixin
@grid-columns : 12
@grid-gutter-width : 30px
@grid-float-breakpoint : 768px
mixin用来和栅格变量一同使用,为每个列(column)生成语义化的CSS代码。
偏移列
把列向右移动可使用.offset*类。每个类都给列的左边距增加了指定单位的列。
<div class="span4 offset4"> .offset4 将.span4右移了4个列的宽度。
嵌套列
在默认的栅格系统里,在已有的.span*内添加一个新的.row并加入.span*列,可以实现嵌套。被嵌套中的每列列数总和要等于父级别。
<div class="row">
<div class="span9">
Level 1
<div class="row">
<div class="span6">Level 2</div>
<div class="span3">Level 3</div>
</div>
</div>
</div>
流式栅格
流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统过一样拥有响应式布局的能力,这就保证它能对不同的分辨率和设备做出适当的调整。
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
列排序:通过使用.col-md-push-*、.col-md-pull-*类可以很容易的改变列(column)的顺序
<div class="row">
<div class="col-md-9 col-md-push-3">我在后面哦</div>
<div class="col-md-3 col-md-pull-9">我跑到前面去了呀</div>
</div>
启用响应式特性
通过在文档中的<head>标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS。若你已经在定制页面编译好一个Bootstrap,那么只需添加一个meta标签。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!doctype html>
<html>
<head>
<meta charset="UTF-8" >
<title>index_栅格系统</title>
<link rel="stylesheet" href="d:\bootstrap\css\bootstrap.min.css" />
<script src="d:\jQuery\jquery-1.9.1.min.js" ></script>
<script src="d:\bootstrap\js\bootstrap.min.js"></script>
<script src="d:\bootstrap\js\Application.js" ></script>
<script src="d:\bootstrap\js\holder.js" ></script>
<style type="text/css">
.col-md-12{
background: #ccc;
}
.col-md-3{
background: #fff;
}
.col-md-6{
background: #fff;
}
.row{
margin-bottom: 10px;
}
.footer{
background: #ccc;
}
</style>
</head>
<body>
<!-- 整体布局格式 -->
<div class="container">
<!-- 栅格布局 分成12行 -->
<div class="row">
<div class="col-md-12" >
<h3>bootstrap col-md-12</h3>
<p>dddddddddddddddddddddd</p>
</div>
<div class="row" >
<div class="col-md-3">
<img src="E:\photo\歌词控_JJ\1.jpg" ></img>
</div>
<div class="col-md-3">
<img src="E:\photo\歌词控_JJ\1.jpg" ></img>
</div>
<div class="col-md-6">
<img src="E:\photo\歌词控_JJ\1.jpg" ></img>
</div>
<!-- 防止样式漂浮 -->
<div class="clearfix"></div>
</div>
<div class="col-md-12">
<img src="E:\photo\歌词控_JJ\2.jpg" ></img>
</div>
<div class="footer" >
<div class="col-md-12">
<p>foreverforever</p>
</div>
</div>
</div>
</div>
</body>
</html>
Boostrap栅格系统的更多相关文章
- boostrap栅格系统自适应的布局
1.栅格系统 Bootstrap是基于移动优先的原则开发的,使用了一系列的媒体查询(media queries)方法,为我们的布局和界面创建自适应的的分界点.这些分界点主要是基于视口宽度的最小值, ...
- bootstrap课程2 bootstrap的栅格系统的主要作用是什么
bootstrap课程2 bootstrap的栅格系统的主要作用是什么 一.总结 一句话总结:响应式布局(就是适应不同的屏幕,手机,平板,电脑) 1.bootstrap的栅格系统如何使用? row ...
- CSS3简单的栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 初学者--bootstrap(四)栅格系统----在路上(8)
---------------------------------------栅格系统:是bootstrap提供的响应式布局方式------------------------------------ ...
- Bootstrap之栅格系统
bootstrap 移动优先 中文官网 http://www.bootcss.com/ 1.基本模板 <!DOCTYPE html> <html lang="en&quo ...
- Bootstrap响应式栅格系统的设计原理
1.历史背景 Bootstrap是Twitter的工程师Mark Otto和Jacob Thornton开发的一套供内部使用的UI框架,于2011年开源.2012年发布的第二版中新增了12列栅格系统和 ...
- Bootstrap栅格系统详解,响应式布局
Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...
- bootstrap源码分析----栅格系统
Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. bootstrap通过媒体查询解决不同分辨率屏幕下,页面主内 ...
- 用sass写栅格系统
为了验证学习sass的效果,自己写了个简单的栅格系统.
随机推荐
- OC 实例变量(instance var)与属性(@property)的关系 isa指针
实例变量(instance var)与属性(@property)的关系 Objective-C 2.0之后,声明一个@property name自动产生一个实例变量,名为_name,因此省去实例变量和 ...
- Android WebView的使用
WebView是View的一个子类,使用它可以在App中嵌入H5页面,可以跟js互相调用. webview有两个方法:setWebChromeClient和setWebClient setWebCli ...
- 权威第三方报告——获取IT产品竞争力信息的主要途径,类似你买电脑前上的xx论坛看实力评估
Gartner is known for its huge influence on purchasing as well as an unequaled events business. Forre ...
- 使用FIDDER 抓包构建请求
FIDDER 是一个抓包利器,可以抓去浏览器的http请求. 工作原理是: FIDDER 作为代理. 1.在启动fidder时他自动启动服务监听8888端口. 2.启动FIDDER它会自动修改 ...
- 联系人的侧边字母索引ListView 将手机通讯录姓名通过首字母排序。
package com.lixu.letterlistview; import java.util.ArrayList; import java.util.List; import org.apa ...
- 利用开源框架Volley来下载文本和图片。
Android Volley是Android平台上很好用的第三方开源网络通信框架.使用简单,功能强大. 下载连接地址:http://download.csdn.net/detail/zhangphil ...
- JS获取上传文件的绝对路径,兼容IE和FF
<input type="file" id="fileBrowser" name="fileBrowser" size="5 ...
- u-boot 之配置分析 (2)
Makefile简要分析所有这些目录的编译连接都是由顶层目录的makefile来确定的. 1.在makefile中有: unconfig: @rm -f $(obj)include/config.h ...
- 如何判断Intent有没有对应的Activity去处理?
如何判断Intent有没有对应的Activity去处理?至少有以下两种方法,最近使用过,随笔记下来,以供查阅. 第一种, 如下: public boolean isIntentResolvable(I ...
- java中的日志组件-log4j
1.为什么使用日志组件 Log4J是Apache的一个开放源代码项目,它是一个日志操作包,通过使用Log4J,可以指定日志信息输出的目的地,如控制台.文件.CUI组件.NT的事件记录器:还可以控制每一 ...