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栅格系统的更多相关文章

  1. boostrap栅格系统自适应的布局

    1.栅格系统 ​ Bootstrap是基于移动优先的原则开发的,使用了一系列的媒体查询(media queries)方法,为我们的布局和界面创建自适应的的分界点.这些分界点主要是基于视口宽度的最小值, ...

  2. bootstrap课程2 bootstrap的栅格系统的主要作用是什么

    bootstrap课程2  bootstrap的栅格系统的主要作用是什么 一.总结 一句话总结:响应式布局(就是适应不同的屏幕,手机,平板,电脑) 1.bootstrap的栅格系统如何使用? row ...

  3. CSS3简单的栅格系统

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

  4. 初学者--bootstrap（四）栅格系统----在路上（8）

    ---------------------------------------栅格系统:是bootstrap提供的响应式布局方式------------------------------------ ...

  5. Bootstrap之栅格系统

    bootstrap 移动优先 中文官网  http://www.bootcss.com/ 1.基本模板 <!DOCTYPE html> <html lang="en&quo ...

  6. Bootstrap响应式栅格系统的设计原理

    1.历史背景 Bootstrap是Twitter的工程师Mark Otto和Jacob Thornton开发的一套供内部使用的UI框架,于2011年开源.2012年发布的第二版中新增了12列栅格系统和 ...

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

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

  8. bootstrap源码分析----栅格系统

    Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. bootstrap通过媒体查询解决不同分辨率屏幕下,页面主内 ...

  9. 用sass写栅格系统

    为了验证学习sass的效果,自己写了个简单的栅格系统.

随机推荐

  1. Web前端开发面试题

    1. 以下的代码有问题吗?如果有你觉着应该如何修改? for(int i=0; i<list.size(); i++) {  .....  .....  if(...)  {   list.re ...

  2. HDU-----（1083）Courses（最大匹配）

    Courses Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  3. centos修改文件及文件夹权限

    查看文件权限的语句: 在终端输入:ls -l xxx.xxx (xxx.xxx是文件名) 那么就会出现相类似的信息,主要都是这些:-rw-rw-r-- 一共有10位数 其中: 最前面那个 - 代表的是 ...

  4. Word文档增加快捷键

  5. matlab c# 混合编程

    MWArray错误: matlab 64位 vs 32位 1. visual studio没有专门的64位版.但32位版可以在64位系统上面正常使用.2.安装VS2010的时候,在安装选项里面,选择了 ...

  6. BZOJ3928 [Cerc2014] Outer space invaders

    第一眼,我勒个去...然后看到n ≤ 300的时候就2333了 首先把时间离散化,则对于一个时间的区间,可以知道中间最大的那个一定要被选出来,然后把区间分成左右两份 于是区间DP就好了,注意用左开右开 ...

  7. 项目管理办公室 PMO

    项目管理办公室是组织中指导,协调,支持项目管理工作的一个常设职能部门,也就是管理项目管理的常设职能部门. 它负责指定和贯彻标准化的项目管理方法论(包括工作流程与规章制度等),协调所辖的各项目对资源,工 ...

  8. java之通过反射，来获得某对象的所有方法(类方法提取器)

    参考Thinging in Java 在编程时, 如果不记得一个类是否有某个方法,或者不知道一个类究竟能做些什么,而又不想通过索引或 类的层次结构去查找jdk文档,这时通过反射的小工具能节省很多时间. ...

  9. 一模 （3） day1

    第一题: 题目大意:给出m个小于n的数,求出出现次数大于m div 2 的数. 1<=n<=2^31   1<=m<=10000 解题过程: 1.看到m的数据范围比较小,直接  ...

  10. Android Phonebook编写联系人UI加载及联系人保存流程（四）

    2014-01-07 10:23:22 将百度空间里的东西移过来. 5. KindSectionView KindSectionView是何方神圣呢?它又是怎么怎么和一个DataKind,以及一个Ra ...