JavaScript——BootStrap
什么是BootStrap？它的作用？
BootStrap是基于HTML、CSS、JavaScript的前端框架。该框架已经预定义了一套CSS样式和样式对应的JS代码。开发人员只需要编写HTML结构，添加bootstrap固定的样式就可以轻松完成指定效果的实现。
作用：
①使Web开发更加快捷和高效；
②bootstrap支持响应式开发，解决了移动互联网的前端开发问题。
什么使响应式布局？它能解决什么问题？
响应式布局：一个网站的展示可以兼容多个终端（手机、iPad、PC等），而不需要为每个终端单独做一个展示版本。
作用：让网站在仅使用一套样式就可以在不同分辨率下展示初不同的舒适效果，大大降低了网站开发维护成本，并且能带给用户更好的体验性。
基本模板：
<!DOCTYPE html><html lang="zh-CN"><!-- html页面使用的是中文简体 --> <head> <meta charset="utf-8"><!-- 设置HTML页面的字符集 utf-8 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 使用IE最新的渲染模式 展示页面 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <!-- viewport:视口 视口：即浏览器上网页的可视区域 以下的设置 只在移动设备上生效 width=device-width, 设置视口的宽度， device-width设备宽度 initial-scale=1 初始化缩放设置。 移动设备打开网页时，缩放级别 100% 正常 1~5 --> <title>Bootstrap 101 Template</title><!-- 以下三个是BootStrap依赖的样式和脚本 --> <link href="../css/bootstrap.min.css" rel="stylesheet"> <script src="../js/jquery-1.11.3.min.js"></script> <script src="../js/bootstrap.min.js"></script> </head> <body> <h1>你好，世界！</h1> </body></html>根据这个基本模板可以得到一个简洁的模板：
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <link href="../css/bootstrap.min.css" rel="stylesheet"> <script src="../js/jquery-1.11.3.min.js"></script> <script src="../js/bootstrap.min.js"></script> </head> <body> </body></html>对bootstrap框架有了个基本了解后，我们可以从它的网站上学习相关知识来使用它的样式。
我们只需熟悉这个框架中的css样式，需要用到其中某个效果、特效时，查看它的文档，在以上模板的基础上使用相关样式即可。
BootStrap的文档链接：/
布局容器
bootstrap必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制。
这个布局容器就相当于一个画板，我们所需要的样式和组件都在上面进行使用。
注：任意元素使用了布局容器的样式都会成为一个布局容器，建议使用div作为布局容器。
可查找：进入bootstrap文档—>全局CSS样式—>概览—>布局容器
使用方法:
栅格系统
为了方便在布局容器中进行网页的操作，bootstrap提供了一套用于响应式开发布局的栅格系统。
栅格系统将一行分为12列，通过设定元素占用的列数布局页面上的展示位置。
例如：
作用：让开发人员更加轻松进行网页布局和响应式开发。
设置屏幕时的注意事项：
示例：
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <link href="../css/bootstrap.min.css" rel="stylesheet"> <script src="../js/jquery-1.11.3.min.js"></script> <script src="../js/bootstrap.min.js"></script> </head> <body> <!-- 如果列元素 占用列数 总和 如果 12 如果列元素 占用列数 总和 小于等于12，这些列元素还排列在一行上； 如果列元素 占用列数 总和 大于12，大于12的列元素，就会另起一行排列 --> <div class="container"> <div class="row"> <div class="col-md-4" style="border:1px solid red;"> 好好学习 </div> <div class="col-md-4" style="border:1px solid red;"> 天天向上 </div> <div class="col-md-4" style="border:1px solid red;"> 加油 </div> </div> </div> </body></html>了解完这些基本知识，后面的CSS样式和JavaScript组件等都可以参照着文档来操作使用。
BootStrap的文档链接：/
JavaScript——BootStrap