Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。当前最新版本是3.2.0;

使用的第一步，可以直接复制官方的模版，另存为index.html. 这一过程相当于是搭好一个框架，像我们使用yii需要引入它的框架文件一样。

模板是这个样子的：

<!DOCTYPE html>

<html lang="zh-cn">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

如果只是初步的学习，其实可以只引入“bootstrap.min.css”这一个就可以了。其它文件都可以看成是功能的扩展和增强。

说到bootstrap，首先要了解的是它的栅格系统。这让我不禁想起了用表格布局的年代，但是这个栅格和表格还是有很大的不同的。

要用珊格系统呢，首先要创建一个容器，container或container-fluid.

<div class="container">

  ...

</div>

<div class="container-fluid">

  ...

</div>

　　

这相当于是创建一个<table></table>,所以接下来，要创建行和列也是情理之中的啦。

<div class="row">

      <div class="col-xs-4">col-xs-4</div>

     <div class="col-xs-8">col-xs-8</div>

</div>

<div class="row"></div> 这个就相当于是<tr></tr>,<div class="col-xs-4"></div>就相当于是<td></td>

col-xs-4 是代表了三个意义：col表是创建的是一个列，xs表示小屏设备，4呢，表示把一行划分成12份，它占4份。它就是用这种方法来实现布局的，所以，这和表格的布局方式多少有几分相似，但是表格呢不会根据屏幕的宽度实现自动增减列数和调整列宽，栅格系统可以看成是一个更灵活的表格。

栅格系统用于通过一系列的行（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）”所在的元素将被作为一个整体另起一行排列。

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

  超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12
最大列（column）宽 自动 ~62px ~81px ~97px
槽（gutter）宽 30px （每列左右均有 15px）
可嵌套 是
偏移（Offsets） 是
列排序 是
 
 
将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-*和 .col-md-*。请看下面的实例，研究一下这些是如何工作的。
<!-- Stack the columns on mobile by making one full-width and the other half-width -->

<div class="row">

  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>

  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

</div>

通过观察css样式，可以发现，如果在class中写了多个不同类型的col,那么bootstrap会自动匹配当前屏莫的宽度，来选择最适合的col类型。通过观察css可以发现，
@media (max-width: @screen-xs-max) { ... }

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }

@media (min-width: @screen-lg-min) { ... }
原来是应用了媒体查询。
关于布局，还有一个知识点，那就是列偏移。

列偏移

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

学会用bootstrap的第一步呢，就是要撑握它的栅格布局。

bootstrap 学习总结的更多相关文章

  1. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  2. Bootstrap学习（3）

    Bootstrap 图片  Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来 ...

  3. BootStrap学习（2）

    使用Bootstrap添加代码框 可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...

  4. Bootstrap 学习（1）

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...

  5. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  6. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

  7. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  8. BootStrap学习之先导篇——响应式网页

    Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点 ...

  9. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  10. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

随机推荐

  1. mysql单列去重复group by分组取每组前几条记录加order by排序

    mysql分组取每组前几条记录(排名) 附group by与order by的研究,需要的朋友可以参考下 --按某一字段分组取最大(小)值所在行的数据 复制代码代码如下: /* 数据如下: name ...

  2. 一键保存Feedly里的文章到有道笔记

    写在之前:今天升级了有道笔记3.5,发现有道笔记支持发邮件保存笔记了,所以就分享一下怎么通过IFTTT保存到有道笔记.因为IFTTT是外国货,所以一直没有有道笔记的频道,不过有了发邮件保存笔记的功能, ...

  3. go中安装Beego不成功笔记

    在go.Git等等之类的相关软件安装好了之后,便可以安装Beego. 1.开始的时候是由于网络限制,不能访问Github,这个还好说找VPNFQ... 2.之后的问题,在git Bash中输入go g ...

  4. PHP uniqid 高并发生成不重复唯一ID

    http://www.51-n.com/t-4264-1-1.html PHP uniqid()函数可用于生成不重复的唯一标识符,该函数基于微秒级当前时间戳.在高并发或者间隔时长极短(如循环代码)的情 ...

  5. Android 6.0 使用HttpURLConnection 使用Get提交遇到405等问题。

    HttpURLConnection 在调用connection.setDoOutput(true)之后会自动把提交方式改为POST.然后调用方法的时候有可能会出现这种情况 在调用get的时候设置为co ...

  6. MyEclipse新建web project和navicat110_mysql_en工具

    首先注意几点: 1.eclipse web项目:项目名称不得超过五个字符,要求全部小写,不管变量名.类名.函数名.文件名,在没有特殊理由的时候,不要用下划线,同时表名和类名用两个单词,尽量不要用Stu ...

  7. .NET的Actor模型：Orleans

    Orleans是微软推出的类似Scala Akka的Actor模型,Orleans是一个建立在.NET之上的,设计的目标是为了方便程序员开发需要大规模扩展的云服务, 可用于实现DDD+EventSou ...

  8. SQL Server 2012大幅增强T-SQL

    SQL Server 2012对T-SQL进行了大幅增强,其中包括支持ANSI FIRST_VALUE和LAST_VALUE函数,支持使用FETCH与OFFSET进行声明式数据分页,以及支持.NET中 ...

  9. Nova PhoneGap框架 第六章 使用Mock

    在我们的框架中引入了一个很重要的设计,那就是使用Mock. 这里的mock是指cordova.mock.js文件,它模拟了PhoneGap(Cordova)的API,从而可以在浏览器中运行测试我们的程 ...

  10. Python学习笔记

    1. 进行浮点数运算时,整数要写成浮点数形式,否则Python默认按照整数进行运算了,譬如3/5应该写成3.0/5.0: 2. Python没有switch: 3. Python中没有重载,但是可以通 ...