Bootstrap官网

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

一：什么是Bootstrap？

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

二：Bootstrap的概念：

包含jquery.js、bootstrap.min.js、bootstrap.min.css文件，可将常规的html文件改为使用bootstrap模版。

jquery.js需在bootstrap.min.js前引入。

优点：支持主流浏览器。响应式布局。开发快。

缺点：不兼容低版本浏览器，如果定制的话，会产生大量冗余代码。违背了内容与表现分离原则。

三：为什么要使用Bootstrap？

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

四：Bootstrap如何帮助我们？

举个例子：响应式导航栏

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

五：下载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 所提供的许多组件都依赖 JavaScript 才能运行。具体来说，这些组件都依赖 jQuery、Popper.js 以及我们自己的 JavaScript 插件。所以我们还需要下载jquery.js和popper.js文件来运行Bootstrap的js代码。

Jquery下载：https://jquery.com/download/

Popper下载:          https://unpkg.com/@popperjs/core@2.5.4/dist/umd/popper.min.js

基本的模板如下:

引入一个按钮布局后如下图：

这样你的Bootstrap环境就搭建好了。

接下来就简单的介绍下Bootstrap布局方式和几个组件：

一、响应式布局：

步骤：

1：定义容器:相当于之前的table。

容器的分类：

container(固定宽度)：两边有空白，除了最小的屏幕。

container-fluid(全屏宽度) ：每一种设备都是100%宽度。

2：定义行:相当于之前的 tr 样式：row

3：定义元素:指定该元素在不同的设备上，所占的格子数目。

样式：col-设备代号-格子数目。

设备代号:

.col- 针对所有设备

.col-sm- 平板 - 屏幕宽度等于或大于 576px

.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)

.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)

.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

注意事项：

响应式布局可以将一行平均分为12个格子，可以指定元素占几个格子

一行中如果格子数目超出12，那么就会自动换行

栅格类属性可以向上兼容

如果真实设备的宽度小于了设置栅格属性的设备代码的最小值，会一个元素占满一整行。

代码显示如下：

代码实现的效果如下图：

二、CSS组件:

本部分内容以一个登录—注册页面来简单的介绍CSS组件

代码如下：

所呈现的内容如下：

首先，就是搭建一个响应式布局，这里为了呈现的更加清楚特意添加了1px的边框来分辨响应式布局的区域划分，所有的内容都在 div.container 中进行编辑。

界面内主要有标题，表单和按钮三个，这里主要江表单和按钮。

账号和密码所涉及的便是Bootstrap里的表单组件，账号(密码类似)处的代码主要在 .form-group 的div 里面进行编辑，然后利用 创建文本框上的标题，在下面添加表单元素(.form-control 类：表单宽度设置为 100%。)这样就创建好了一个表单。

“记住我的密码”处主要利用了复选框组件，创建一个 .form-check 的一个div。在里面添加一个 .form-check-label 的一个label框，内部写一个 type="checkbox" 的表单。复选框的制作就完成了。

最后就是登录和注册按钮，这两个都是利用的button来创建的，共同创建一个 type="submit" class="btn btn-default” 的button按钮，在里面写入一个a标签，作为点击时跳转的链接。

这样一个简单的登录—注册静态界面就制作好了。

结语：

本篇博客主要介绍了如何使用Bootstrap以及简单介绍了Bootstrap的几个组件，如果需要更深入的学习Bootstrap，小编建议请移步到菜鸟教程上或者Bootstrap官网上学习。希望各位学有所获，做出代码更少，内容更丰富的网页出来。

本期编辑:廖逸行