Bootstrap使用及环境搭建详解

Bootstrap官网

官网：https://getbootstrap.com/ 中文网：http://www.bootcss.com/

为什么要使用Bootstrap？

首先，观察Bootstrap文件树（下图）不难发现，文件都是我们常见的一些css、js文件。

Bootstrap为我们写好测试了各种兼容、疑难问题，并构建了一套非常优秀成熟的响应式类，并及时提供了移动端优先的响应式系统，我们只需使用Bootstrap已经封装好的class。

Bootstrap如何帮助我们？

举个例子：响应式导航栏

如果没有Bootstrap，我需要知道移动端、平板设备等屏幕尺寸，然后通过@media不同尺寸引入不同样式，来完成一个响应式，其中还要考虑IE8等浏览器是否兼容，等一些列的问题都可能存在，不仅项目开发的周期会很长，一些潜在的BUG也可能存在，每次开发，都要重复造轮子。

扯个题外话，如果你们团队中有10个前端开发人员，还是响应式导航栏为例子，我相信每个人的写法和思路都不同，有可能你用ul列表，别人用div，这就是导致思路不统一，需要沟通等问题，如果我们都用Bootstrap构建，这样就有了统一的思路与解决方案，缩短项目开发周期。

下载Bootstrap

（1）用于生产环境（项目开发） less文件编译并压缩后的 CSS、JavaScript 和字体文件，不包含文档和源码文件，大小相对于源码包减少一些，用于项目开发生产环境中使用。 （2）源码（学习或更改再次封装） 文件都是源码，未经过压缩，可以在编辑器或记事本等直接打开，供学习其思路及更改自己所需样式，再者基于Bootstrap源码封装项目所需类，其包含Less、JavaScript 和 字体文件的源码，并且带有清晰的文档，但需要 Less 编译器和一些设置工作。 （3）sass（针对 Sass 的项目中引入） 从 Less 到 sass 的源码移植项目，用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入，一般情况下用不到此包。

了解了各包的介绍，我们下载Bootstrap压缩版，下载后会得到一个文件夹，包含以下文件树：

压缩版文件树： 源码包文件树： 下载后，我们先放在一边备用。

了解CDN

即内容分发网络（Content Delivery Network），CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率，其关键技术主要有内容存储和分发技术，其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

我们不难发现，简单来说只是换了一种方式支持Bootstrap，从本地文件方式，换到了网页方式。

BootstrapCDN

推荐一款稳定、快速、免费的前端开源项目 CDN 加速服务，同样是Bootstrap项目。 BootCDN：https://www.bootcdn.cn/

引入Bootstrap

我们需要引入的文件有以下：

（1）css/bootstrap.min.css CDN：

（2）js/bootstrap.min.js CDN：

（3）还需要有JQuery的支持：js/JQuery.min.js CDN：

注意：这篇是Bootstrap的搭建，所以不介绍JQuery请自行下载，下载和用法与Bootstrap大同小异。

   
      完整的Bootstrap模板
      
      
      
      
      
      
      
   
   
      Hello, world!
 
      
      
      
      
   

写在后面

如果觉得本文帮助了你，还请高抬贵手赠予 uh5 项目 一个 Star。