1.Bootstrap简介

Bootstrap简介

BootstrapAPI:

https://v3.bootcss.com

Bootstrap优点：

　　响应式布局，一个框架，多种设备适用

　　Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

　　Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

　　Bootstrap简洁灵活，使得 Web 开发更加快捷。其最大的优势是响应式布局，使得开发者可以方便的让网页无论在台式机、平板设备、手机上都获得最佳的体验。

Bootstrap的缺点：

　　虽然bootstrap自适应效果很好，但是缺点是不方便修改样式，对细节的不好把握，而且Bootstrap 是由 Twitter 的开发者开发来系统化他们网站应用的样式。当你的网站应用的样式和他们不一样，这意味着你不得不覆盖掉他们的样式来。大多数网站的样式并不像 Twitter 那样。因此，如果他们安装 Bootstrap ，他们会覆盖掉很多样式。

　　配置：

<!--屏幕自适应，宽度为当前设备宽度，屏幕缩放当前不缩放为1-->
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<!-- 引入 Bootstrap -->
 
<link href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
 
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --> <!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->

如果为ie浏览器，且版本小于9，用：
 
 [if lt IE 9]>
 
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]

<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
 
<script src="jquery-3.3.1.min"></script>
 
<!-- 包括所有已编译的插件 -->
 
<script src="js/bootstrap.min.js"></script>
 
也可以直接使用 BootCDN上的库：
 
<!-- 新 Bootstrap 核心 CSS 文件 -->
 
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- 可选的Bootstrap主题文件（一般不使用） -->
 
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
 
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
 
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>