Bootstrap的CSS简介
Bootstrap的简介
大家好! 我是：Bootstrap来自Twitter公司，是目前最流行的前端框架，我是基于HTML、CSS、JavaScript的一个简洁灵活的开源框架（我非常喜欢免费又好用的东西）。
为什么要使用Bootstrap
Bootstrap库中包含很多现成的带有各种样式和功能的代码片段，这些代码可以为你的网站增加更多的活力，比如在初学HTML的时候开发一个网站，如果你需要一些特殊的好看的小图标大部分都是通过爬取别人的网站的，这样的工作非常的浪费时间，而现在Bootstrap提供了免费的好看的小图片，你只需要使用语法引用即可。Web开发者不必花费时间、花费精力地编辑，只需要找到合适的代码，插入即可。最主要的是这些代码是经过封装的，可以用于不同的终端开发，不管你是在PC端还是在手机端和平板端，都可以很好地显示网页。兼容性very good！
Bootstrap的兼容性
Twitter公司当初开发该工具的时候也考虑了兼容性，
可以在Chrome、Firefox…等浏览器中可以看到统一的界面
在这里需要注意的地方是IE浏览器，IE8和IE8以下版本的是不支持Bootstrap的，so你如果想使用IE浏览器和Bootstrap，你的IE浏览器需要在IE9以上。
Bootstrap使用在那些些地方
Boostrap是最受欢迎的HTML、CSS和JavaScript框架，可以用于响应式页面、移动端页面、后台页面、带有交互效果的页面。可以说这是一个“万能”的框架，只要有网页的地方都可以使用到。
Bootstrap如何下载
在使用之前需要下载它的文件，如果你使用过jQuery的话应该有经验，在每次使用jQuery的时候你都要引入jQuery的类库，
Bootstrap也是一样的，我们可以通过官网https://v3.bootcss.com/getting-started/#disable-responsive来下载Bootstrap，进去之后大家会看到
这里的三个下载从左到右，第一个就是我们开发的时候需要用到的了，该链接是编译后可以直接使用的，我们在开发的时候往往就是使用原始的、未经压缩的文件，方便debug跟踪。
第二个下载的是用于编译CSS的Less源码，以及各个插件的JS源码文件。
第三个是下载用于编译CSS的Sass源码，以及各个插件的JS源文件。
在这里我们直接下载第一个就可以了
Less和Sass都是基于CSS的高级语言，其目的是使CSS开发更加灵活，更强大。有兴趣的朋友也可到百度一下。我在这里就不过多介绍了
提一个小意见，建议大家下载最稳定的版本，而不是最新的版本，以我现在目前来看是bootstrap-3.3.7的版本比较好，大家下载了之后可以看到这三个文件：
里面的架构是这样的：
在这里bootstrap.min.css和bootstrap.min.js是用于生产环境使用的，而普通的bootstrap.css和bootstrap.js是用于开发环境进行调试、分析的，我们在使用的时候直接把这三个文件复制，粘贴到你的项目里面就可以了。
如何引入Bootstrap框架文件呢
两种方法
使用压缩处理文件bootstrap.min,css,bootstrap.min.js(静态方法)
使用Bootstrap中文网提供的免费SDN加速服务（网页的形式加载）
bootstrap可以使用 BootCDN 提供的免费 CDN 加速服务（同时支持 http 和 https 协议）
在这里需要注意的地方是
如果要使用Bootstrap的JS插件，必须引入先jQuery
因为bootstrap.js是依赖于jQuery的文件
<!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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
优点和缺点
优点：
1、快速制作响应式的网页来适配各种终端
2、开发简单、方便
3、移动先行
4、代码开源
5、代码有良好的规范
缺点：
1、对IE678的兼容性可能不太好，因为它使用了一些CSS3样式和H5的元素，因此如果网站要兼容IE678，这个明显是不使用的
2、如果网站有大量多样化的设计，那么如果还想使用bootstrap就需要将框架作为底层修改：需要复写大量样式，CSS层次编的混乱，难以维护
以上是我对于Bootstrap的初步了解，若是发现在了更好用、更好玩的技术我再分享给大家！
