浅谈Bootstrap

Bootstrap 概述

前面介绍过前端的发展史，现在就来说一下 Bootstrap 框架。

Bootstrap，相信对于前端工程师来说并不陌生，它来自于 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于    HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。其最大的优势是响应式布局，使得开发者可以方便的让网页无论在台式机、平板设备还是在手机上都获得最佳的体验。

Bootstrap 架构

我们要学习 Bootstrap，首先要介绍而是它的整体架构——它到底由什么组成的。它是由六大方面组成：

一、12 栅格系统

每个前端框架都会首先定义好布局系统，12 栅格系统是 Bootstrap 为了更好的布局所定义的。Bootstrap 将屏幕平分 12 份（列）。

二、基础布局组件

基础布局组件就是 Bootstrap 框架内为一些基础布局的标签定义了一些统一的样式。如 Table、按钮、表单等。

三、Jquery

Bootstrap 所有的 JavaScript 插件都依赖于 Jquery 的。如果要使用这些 JS 插件，就必须引用 Jquery 库。这也是为什么我们在除了要引用 Bootstrap 的 JS 文件和 CSS 文件外，还需要引用 Jquery 库的原因，两者是依赖关系。

四、CSS 组件

Bootstrap 为我们预实现了很多 CSS 组件。如下拉框、按钮组、导航等。也就是说 Bootstrap 内帮我们定义好了很多CSS 样式，你可以将这些样式直接应用到之前的下拉框等元素里。

五、JavaScript 插件

Bootstrap 也为我们实现了一些 JS 插件，我们可以用其提供的插件要完成一些常用功能，而不需要我们再重新写 JS 代码来实现像提示框，模态窗口这样的效果了。

六、响应式设计

它会根据屏幕尺寸来自动调整页面，使得前端页面在不同尺寸的屏幕上都可以表现很好。

Bootstrap 的使用方法

1.我们首先在官网里下载，用于生产环境的 Bootstrap 的 zip 文件，解压得到一个包含 css、fonts 和 js 的文件夹。

2.我们把解压到的文件放在 text 文件夹中（文件夹名称可以自行命名）中，并在这个文件夹中创建一个 index.html 文件(根据自己创建项目自行命名)。

3.在官网中，有基础的模板，我们可以使用模板，但是是对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。

这样我们就使用 Bootstrap 完成了第一个页面设计了。快来试试看吧。

Bootstrap 常用插件

这里我就介绍一个常用的插件 —— Carousel 插件，它是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。比如网页中的轮播广告就是使用这个插件制作的。

轮播可以实现以下几个功能：1.焦点随图片的滚动而变化。2.跳跃点击焦点，会跳转到相应的图片。3.点击左右按钮会相应的触发左右跳转。4.鼠标不点击的时候会进行自动跳转。

下面就是一个简单的轮播图的效果图：

Bootstrap 的使用体验

Bootstrap 给我最深的体验是响应式布局，使得开发者可以让网页在台式机、平板设备、手机上都获得最佳的体验。栅格形式的响应式布局，和各种 class 的定义，让开发者根本不需要敲什么样式的代码，也不用仔细的研究布局和兼容的问题，Bootstrap 可以对所有浏览器兼容（IE8 以下版本除外），开发网页的速度非常快。 其次网上有许多开发者为 Bootstrap 写了开源的组件，甚至于可以说，直接复制进来就能用，不容易碰到问题，比如幻灯片，折叠菜单，或者各种原本处理起来相当复杂的效果。很多时候，制作一个网页需要用到的区块和特效，Bootstrap 都可以很容易找到，而且不需要再次去进行调整，可以直接使用，只要是版本相符。

Bootstrap 作为一套比较流行完整的前端开发框架，深受欢迎。我们在了解 Bootstrap 框架的优缺点后，在项目开发中根据需求使用 Bootstrap 框架，选择合适的开发方案。这么好用 Bootstrap 你还在等什么啊，快来一起使用吧！