一、关于引入bootstrap文件

<!-- 为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

二、布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器：

1、.container 类用于固定宽度并支持响应式布局的容器。

2、.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

三、栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
  • 通过“行（row）”在水平方向创建一组“列（column）”。
  • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
  • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
  • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
  • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
  • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

四、栅格参数

1、列偏移：使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

2、优先级

当屏幕宽度u≥1200px时，bootstrap会自动选用col-lg-*这个class；

当屏幕宽度u≥992px时，bootstrap会自动选用col-sm-*这个class；

当屏幕宽度u≥768px时，bootstrap会自动选用col-md-*这个class；

当屏幕宽度u<768px时，bootstrap会自动选用col-lg-*这个class；

3、嵌套列：为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的.col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

4、列排序：通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

Bootstrap《第一篇》，关于container、jumbotron、row、col、text-center等的学习的更多相关文章

  1. bootstrap栅格系统的container和row一些关系

    container有个15px的padding,而我们设定的每个col也都有15px的padding,如果两者直接配合,那么就会产生30px的间距,导致内容和浏览器边框的距离较大,所以用row将所有的 ...

  2. Bootstrap <第一篇>

    一.使用Bootstrap要引用的文件 要使用Bootstrap,基本架构要引用如下文件: <link href="bootstrap.min.css" rel=" ...

  3. 【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  4. jquery jtemplates.js模板渲染引擎的详细用法第一篇

    jquery jtemplates.js模板渲染引擎的详细用法第一篇 Author:ching Date:2016-06-29 jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了 ...

  5. Three.js 第一篇：绘制一个静态的3D球体

    第一篇就画一个球体吧 首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...

  6. .net开发笔记（十三） Winform常用开发模式第一篇

    上一篇博客最后我提到“异步编程模型”(APM),之后本来打算整理一下这方面的材料然后总结一下写篇文章与诸位分享,后来在整理的过程中不断的延伸不断地扩展,发现完全偏离了“异步编程”这个概念,前前后后所有 ...

  7. 国内第一篇详细讲解hadoop2的automatic HA+Federation+Yarn配置的教程

    前言 hadoop是分布式系统,运行在linux之上,配置起来相对复杂.对于hadoop1,很多同学就因为不能搭建正确的运行环境,导致学习兴趣锐减.不过,我有免费的学习视频下载,请点击这里. hado ...

  8. 学习KnockOut第一篇之Hello World

    学习KnockOut第一篇之Hello World 笔者刚开始学习KnockOut.写的内容就相当于一个学习笔记.且在此处向官网致敬,比较喜欢他们家的Live Example版块,里面有jsFiddl ...

  9. Jersey+mybatis实现web项目第一篇

    ---恢复内容开始--- Jesery第一篇:实现Jesery前后台页面交互,Form表单提交,后台控制页面跳转 该项目中有实现的功能: Mybatis实现后台数据持久化 Jersey页面数据提交 后 ...

  10. halocn/C++ (第一篇)

        在使用C++编写halcon之前,确定自己有较好的C++基础,并熟悉一套开发平台如VC   Programmers_guide.pdf chapter7中有关于creating Aplicat ...

随机推荐

  1. Shell 编程基础之 Break, Continue 练习

    一.语法 break:用来跳出循环.break N 可以跳出多层循环 break break N continue:用来跳过循环.continue N 可以跳过多层循环 continue contin ...

  2. java基础内容

    此文作java语法基础的起始页,负责总结和目录引导 想我开始接触java语法也有比较长时间了(大概是2015年十月份),到现在(2016-10-25)为止还未系统的学习总结基础语法,亡羊补牢吧,回过头 ...

  3. 关于storm的Spout、Bolt、及其可靠性

    本文导读: Component全家谱结构图 Spout分析 ——类图 ——分析(接口实现).结论 ——可靠的与不可靠的消息(推荐) Bolt分析  ——类图 ——分析(接口实现).结论 ——可靠的与不 ...

  4. flex设置成1和auto有什么区别

    首先明确一点是, flex 是 flex-grow.flex-shrink.flex-basis的缩写.故其取值可以考虑以下情况: flex 的默认值是以上三个属性值的组合.假设以上三个属性同样取默认 ...

  5. Topcoder SRM 626 DIV2 FixedDiceGameDiv2

    典型的条件概率题目. 事件A在另外一个事件B已经发生条件下的发生概率.条件概率表示为P(A|B),读作“在B条件下A的概率”. 若只有两个事件A,B,那么, P(A|B)=P(AB)/P(B) 本题的 ...

  6. 【BZOJ1012】 【JSOI2008】最大数maxnumber

    Description 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作.语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度. 2. ...

  7. hadoop CLASSNAME命令使用注意点

    Hadoop中可是使用hadoop CLASSNAME命令.这个CLASSNAME就是你写好的类名.hadoop CLASSNAME命令类似于java classname. 使用hadoop CLAS ...

  8. html学习：插入优酷视频

    第31期 读反心灵鸡汤 认清自己 擦,为什么不行??? <p>第31期 读反心灵鸡汤 认清自己</p> <div id="youku"> < ...

  9. mysql命令行参数（转）

    MySQL命令行参数 Usage: mysql [OPTIONS] [database] //命令方式  -?, --help //显示帮助信息并退出  -I, --help //显示帮助信息并退出  ...

  10. [LintCode] Happy Number 快乐数

    Write an algorithm to determine if a number is happy. A happy number is a number defined by the foll ...