Bootstrap学习笔记（一）

第一部分：Bootstrap简介

·　　Bootstrap是目前非常流行的一个框架，它是由Twitter公司的Mark Otto和Jacob Thornton开发并在2011年8月在GitHub上发布的开源作品，其基于HTML、CSS、Javascript。它的一大特点是简单灵活，通过学习Bootstrap我们可以很轻松的开发Web项目。

　　Bootstrap的特点如下：

移动设备优先
所有的主流浏览器都支持
容易上手，简单易学
响应式设计--能够自适于台式机、平板电脑、手机

　　下面这个是Bootstrap的模板，我们如果要使用Bootstrap，下面的这个布局是最基本的。

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>
 
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

　　注意：

其中 html5shir.js主要是为了让不支持HTML5特性的IE浏览器版本识别HTML5中的元素，respond.js是为了让不支持css3中媒体查询( Media Query )的浏览器（主要是IE9以下的版本）支持媒体查询。
html5shiv.min.js和respond.min.js在页面顶部引入是为了避免在渲染过程中出现闪动问题，jquery.js和bootstrap.js在页面底部加载视为了避免js的阻断加载导致页面渲染缓慢的问题。
如果你不需要使用js组件，那么就不需要引入jQuery和bootstrap.js了。
其中的一些文件，我们可以使用Bootstrap中文网提供的免费CDN加速服务--基于国内云厂商的CDN服务，访问速度更快、加速效果更明显、没有速度和宽带限制、永久免费。
当然，其中的css和js文件也可以不通过cdn引入，我们也可以通过下面的网站下载得到：

　点击下载
下面是推荐CDN

<!-- 新 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>



 <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->

当然，其中的css和js文件也可以不通过cdn引入，我们也可以通过下面的网站下载得到：

　点击下载

下面是Bootstrap浏览器、设备支持情况：

第二部分：Bootstrap整体架构

1.css12栅格系统

　　栅格系统就是：

以规则的网格阵列来指导和规范网页中的版面布局和信息分布。

　　它将网页的总宽度平分为12份，开发人员可以自由按份组合，以便开发出简洁方便的程序。

2.基础布局组件

　　在12栅格系统的基础上，Bootstrap提供了多种基础布局组件，比如排版、代码、表格、按钮、表单等等。也就是说，之前我们需要使用很多的css代码来修饰html元素，但是有了bootstrap提供的基础布局组件，我们只需要给元素加上特定名称的类名就可以设计出漂亮的html元素啦，是不是很方便呢！

3.jQuery的引入

　　Bootstrap中所有的JavaScript插件都依赖于jQuery 1.0 +，如果要使用js插件，那么我们就必须要引入jQuery库；如果我们不需要使用js插件，那我们就不需要引入jQuery库，就更不用引入bootstrap.js了。

4.响应式设计

　　什么是响应式设计？

　　响应式设计就是一个网站能兼容多个终端，而不是为每一个终端做一个特定的版本。

5.css组件

　　在3.x版本例提供了20种css组件，包括下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑导航、排版等等。同样地，对于这些组件，我们只需要写出html后加上特定的class名称即可。

6.JavaScript插件

　　新版的JavaScript插件总共有12中，包括轮播图等非常实用。

第三部分：栅格系统

　　其原理十分简单，即通过定义容器的大小，平分12份，再通过调整内外边距，最后结合栅格系统即可做出强大的响应式的栅格系统。

　　注意：

行(row)必须包含在.container中。
列(column)必须包含在行(row)中。

　　1.由于是响应式设计，所以我们需要根据设备的宽度来区分4种类型的浏览器。 通过分界点768px、992px、1220px划分为超小屏、小屏、中屏、大屏。

　　2.因为要使用栅格系统，所以必须在外层有一个.container的div，这个div不会占满整个浏览器屏幕（这里假设.container的div是body的唯一子元素），而是有一定的间隙，我们查看其源代码可知：

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min- 768px) {
  .container {
     750px;
  }
}
@media (min- 992px) {
  .container {
     970px;
  }
}
@media (min- 1200px) {
  .container {
     1170px;
  }
}

会通过媒体查询来设置.container的宽度，对于超小屏幕这里没有设置，应该为100%；对于小屏幕设置为750px;对于中屏设置为970px；对于大屏，设置位1170px；除此之外，还设置了两边的padding，并且通过值为auto的左右margin使得其居中。

　　注意：

container中没有设置height，所以说如果类名为container的div下没有其他元素，那我们是看不到的，必须添加height才能将其显示出来。
在源码中可以看到*{ box-sizing: border-box;}这句代码，所以说如果我们不人工覆盖，所有的元素都是border-box，即类似与IE的盒模型。所以说我们添加更大的padding值，container这个div宽度不会增加，只是内容的宽度减小了。