Bootstrap学习笔记（一）

时间 2019-11-20

原文原文链接

Bootstrap学习笔记（一）

第一部分：Bootstrap简介

·　　Bootstrap是目前很是流行的一个框架，它是由Twitter公司的Mark Otto和Jacob Thornton开发并在2011年8月在GitHub上发布的开源做品，其基于HTML、CSS、Javascript。它的一大特色是简单灵活，经过学习Bootstrap咱们能够很轻松的开发Web项目。css

　　Bootstrap的特色以下：html

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

　　下面这个是Bootstrap的模板，咱们若是要使用Bootstrap，下面的这个布局是最基本的。html5

<!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引入，咱们也能够经过下面的网站下载获得：jquery

　点击下载css3
下面是推荐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浏览器、设备支持状况：架构

第二部分：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-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

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

　　注意：

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