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. Sum Root to Leaf Numbers [LeetCode]

    Problem description: http://oj.leetcode.com/problems/sum-root-to-leaf-numbers/ Basic idea: To store ...

  2. 你不知道的JavaScript--大白话讲解Promise

    转载:http://blog.csdn.net/i10630226/article/details/50867792 一.Promise小试 复杂的概念先不讲,我们先简单粗暴地把Promise用一下, ...

  3. A-Making the Grade(POJ 3666)

    Making the Grade Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4656   Accepted: 2206 ...

  4. ANGULAR JS WATCH监听使用

    ANGULAR 监听使用: 当angular数据模型发生变化时,我们需要如果需要根据他的变化触发其他的事件. $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. ...

  5. 一步一步配置NLB

    废话不说,配置NLB需要准备以下环境: 1. 至少两个服务器,我的是windows server 2008 R2; 我的两个服务器名分别为NLB3和NLB2,其中NLB3是主,为什么呢?后面会谈到,在 ...

  6. linux常用的重要的命令： netstat

    Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 (Multicast Membershi ...

  7. Writing an Hadoop MapReduce Program in Python

    In this tutorial I will describe how to write a simpleMapReduce program for Hadoop in thePython prog ...

  8. 10 notorious computer virus

    The history of computer virus is the same as computer history. With more and more powerful computers ...

  9. Catalan数

    先看2个问题: 问题一: n个元素进栈(栈无穷大),进栈顺序为1,2,3,....n,那么有多少种出栈顺序? 先从简单的入手:n=1,当然只有1种:n=2,可以是1,2  也可以是2,1:那么有2种: ...

  10. COleDateTime类型的应用

    使用COleDateTime类1) 获取当前时间.      CTime time;      time = CTime::GetCurrentTime();2) 获取时间元素.      int y ...