Bootstrap的css样式初步了解
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也是⼀样的，我们可以通过官⽹来下载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">
fopen函数什么意思
<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="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!--HTML5 shim 和 Respond.js 是为了让IE8⽀持HTML5元素和媒体查询（media queries）功能-->
file: storage emulated 0<!--警告：通过 file:// 协议（就是直接将 html 页⾯拖拽到浏览器中）访问页⾯时 Respond.js 不起作⽤ -->
<!--[if lt IE9]>
<script src="cdn.jsdelivr/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="cdn.jsdelivr/npm/respond.js@1.4.2/dest/respond.min.js"></script>
powerpoint 2016<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边)-->
jquery下载的文件怎么使用<script src="cdn.jsdelivr/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!--加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。-->
<script src="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
优点和缺点
优点：
1、快速制作响应式的⽹页来适配各种终端
2、开发简单、⽅便
3、移动先⾏
4、代码开源
5、代码有良好的规范
缺点：
1、对IE678的兼容性可能不太好，因为它使⽤了⼀些CSS3样式和H5的元素，因此如果⽹站要兼容IE678，这个明显是不使⽤的
2、如果⽹站有⼤量多样化的设计，那么如果还想使⽤bootstrap就需要将框架作为底层修改：需要复写⼤量样式，CSS层次编的混乱，难以维护
python计算三角形的面积以上是我对于Bootstrap的初步了解，若是发现在了更好⽤、更好玩的技术我再分享给⼤家！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。