BootStrap快速上手

简介

BootStrap是什么

BootStrap是基于HTML、CSS和JavaScript的框架，使你只需要写简单的代码就可以很快的搭建一个还不错的前端界面，它是后端程序员的福音，使他们只需要专注业务逻辑，而无须浪费太多的精力在界面设计上。

全响应

它可以开发全响应式网页——不论你使用手机、平板电脑、普通个人电脑浏览网站内容，所有的元素都可以很优雅的呈现，减轻了因为兼容性而带来的工作量。

版本

它的最新版本是4.0，国内目前用的较多的是3.x,本教程也基于BootStrap3.x版本。

二次开发

你可以使用默认的BootStrap样式、组件和插件，你也可以对其进行二次开发，甚至你还可以基于BootStrap环境使用自己开发的组件。

下载

如果你想把BootStrap文件放在项目中供本地使用，那么首先你要下载它，那么在哪可以下载到BootStrap文件呢？

下载完整版

你可以登陆http://v3.bootcss.com 点击页面中的下载BootStrap按钮下载完整版。

按需下载

如果你感觉整个BootStrap文件有些大的话，你也可按需定制你所需要的部分。 你可以访问http://v3.bootcss.com/customize/ 在线定制css、组件、javascript插件

使用本地BootStrap文件

如果你想稳定的使用BootStrap（不会因为断网而无法使用），那么，我建议你还是把它下载下来，放在本地项目中使用它。在本地使用它很简单。

1.首先把它的文件按照类别放在项目的文件夹中

你可以把CSS文件——bootstrap.min.css放在类似stylesheets这样专门放CSS的文件夹。把js文件——bootstrap.min.js放在类似Scripts文件夹中。当然，最终如何部署可以按照你的个人喜好。

2.在页面中使用BootStrap

将BootStrap的文件bootstrap.min.css、bootstrap.min.js引入当前页面中，由于BootStrap是基于Jquery的，所以在引入它的js文件之前，一定要先引入Jquery.js。注意：这里考虑到文件大小，我们引入了min版的文件，当然，你也可以引入完整版的文件。

示例代码如下：

<!-- Bootstrap 核心 CSS 文件 --></p>
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">

<!-- jQuery文件 -->
<script src="/scripts/jquery.min.js"></script>

<!-- Bootstrap 核心 JavaScript 文件 -->
<p><script src="/scripts/bootstrap.min.js"></script>

使用BootStrap CDN

如果你对你的网路环境很有信心，而又不想费事下载BootStrap，那么，你可以使用互联网上提供的CDN服务。示例代码如下：

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

BootStrap栅格布局

在项目中使用BootStrap的第一步该怎么做呢？首先，你需要弄清楚一个问题——栅格布局。

BootStrap栅格布局是灵活使用BootStrap的基础。BootStrap将屏幕分为12等分，在具体的DIV中，可以通过设置DIV的所占等分的数字确定其在屏幕中占有的宽度。如：

<div class="row“><!--表示另起一行-->
  <div class="col-md-8" style="border:1px solid black;height:100px;"></div>
  <div class="col-md-4" style="border:1px solid black;height:100px;"></div>
  </div>

在第一个DIV中class=”col-md-8”,第二个DIV中class=”col-md-4”, 其中‘8’和‘4’就是其DIV所占屏幕宽度的数值，加在一起等于‘12’。也就是第一个DIV占整个屏幕宽度的‘8/12’,第二个DIV占‘4/12’。 注：在上述代码中为了突显区块，我们设置了DIV的边框宽度为1像素黑色实线，高度设为100像素。

布局屏幕分类

前面说过，BootStrap是一种全响应的技术，那么针对不同的屏幕，它是怎么提供支持的呢？ 别担心，针对不同的显示屏幕尺寸，BootStrap提供了不同的栅格布局的属性：

col-xs-* 超小屏幕 手机 (<768px)
col-sm-* 小屏幕 平板 (≥768px)
col-md-* 中等屏幕 桌面显示器 (≥992px)
col-lg-* 大屏幕 大桌面显示器 (≥1200px)

多个布局属性

如果想让一个DIV在不同的屏幕中占有不同的屏宽该怎么做呢？ BootStrap允许我们在一个DIV中写多个类别的布局属性，从而让该DIV在不同的屏幕中呈现不同的屏宽。如：

  <div class="row">
  <div class="col-md-8 col-xs-6 col-lg-4"></div>
  </div>

该DIV在中等屏幕中占有‘8/12’，在手机中占有‘6/12’，在大屏幕中占有屏幕比例的‘4/12’。

获得BootStrap资源

你可以登陆BootStrap中文网 （本课程所有原生的BootStrap代码都来源于这里），获取所有的BootStrap资源，包括基本的CSS、组件、JavaScript插件等，当然你也可以通过汇智网的BootStrap课程学习掌握它们的使用。