写在前面的乱七八糟的前言：当当当，现在是早上9:06，emmm是我是我还是我，(*╹▽╹*)今天讲讲BT这个磨人的小妖精，为什么说磨人呢，因为用的好就不磨人了啊~咳咳就跟我女盆友一样┓( ´∀` )┏。秉承万物皆对象，对象有空间的原则，BT框架提供了很多模块化的东西，写了一堆的CSS，如果要搭建一个个性化又复杂的网站，我劝你从良，少年~那怎么搞？不学吗，辣是不可能滴这么好用的框架，不学太可惜了，一个小小建议，先学怎么应用，再学怎么使用，哦吼？应用和使用不是一回事吗？少年你又水我！no no no，简单讲，应用就是cv大法，拿来即用，你无需知道原理跟内部到底有什么牛逼的东西生成这样的部件，而使用，是你知道并弄懂源码，还能随需而动~话不多说，盘她就是了~
目录
1、bootstrap的由来
2、bootstrap的优缺
3、bootstrap的构成
3.1引用
3.2CSS样式
3.3组件
3.4JS插件
内容
1、bootstrap的由来
1.1BT简介
来自Twitter，由其设计师Mark Otto和Jacob Thornton合作开发，由Less写成，是一个UI框架，开源免费。
1.2BT官网
我是乱入的旁白：emm不知道有没有小伙伴去研究过这俩个网站的设计，今早猫了一眼，我发现个不得了的事情，我滴天，BT中文居然是用BT框架写的耶，一堆的浮动~，然鹅，BT英文导航却是flex布局的，┓( ´∀` )┏；目前，BT英文已更新到4.3，而BT中文的4还在慢慢被接受中，目前主流还是3.3.7，所以？BT4将迎来box-flex时代喵？这再次警醒着我们，要好好盘英语？？？少年，你怕不是有点虎。作为一个爱国人士，爱国就好了嘛，BT中文盘起~
1.3BT中文网
创于2012年，与众多项目关联，React中文、jQuery中文、Next.JS中文、Node.js中文等。
2、bootstrap的优缺
2.1不足:
2.1.1↑学习成本：盘她用她，要学她
2.1.2代码冗余：对于小型项目而言，大量不需要使用到的CSS样式，会造成臃肿
2.1.3个性化定制较差：若设计稿的style跟BT自身的style差个十万八千里，便需要重写n多CSS样式去覆盖原有的，那么BT我要你何用。
2.1.4兼容问题：BT将所有的元素盒模型都设置为border-box，很难兼容IE，即使目前存在许多兼容IE的方法，但仍需引入其他文件，势必导致加载速度变慢，影响用户体验。
2.1.5js插件仍需丰富内容：如导航页面是锚点而没有滚动动画
2.1.6不利于扩展、重用、维护
2.2优势：
2.2.1栅格系统与CSS模块化：↑开发效率
2.2.2规范名称定义，易维护，如CSS声明顺序：相关属性声明应归为一组，并按照下面的顺序书写
2.2.2.1定位：Position
2.2.2.2盒模型：Box Model
2.2.2.3格式排版：Typographic
2.2.2.4视觉：Visual
2.2.2.5杂项：Misc
更多参考：CSS编码规范by@mdo
2.2.3规范项目开发流程
3、bootstrap的构成
3.1引用
3.1.1直接下载：上线的最好使用这一方式，一是安全，二是稳定，三是运行反应较快
3.1.2使用BootCDN：测试练习demo使用这一方式，主要是方便，但运行反应稍差
3.1.3使用Bower/npm/Composer：小白的我从来未使用过~
3.2CSS样式
3.2.1基本模板
<!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>
CV大法好，一点点慢慢盘她，不捉急~
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
更多的写法：<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
X-UA-Compatible：针对IE8设置的，用于为IE8指定不同的页面渲染模式，即可锁定IE8使用什么标准进行渲染。
Edge 模式：通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式，即如果你有IE9的话，说明你有IE789，那么就调用高版本的那个也就是IE9
chrome=1：如果IE有安装Google Chrome Frame，那么就走安装的组件，如果没有就和<meta http-equiv="X-UA-Compatible" content="edge" />一样。
说明：针对IE 6，7，8等版本的浏览器插件Google Chrome Frame，可以让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核
<meta name="viewport" content="width=device-width,initial-scale=1"/>
更多的写法：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no"/>
meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题
width:设置layout viewport的宽度，正整数/"device-width"
initial-scale：设置页面初始缩放值，数字，可浮点可整数
minimum-scale/maximum-scale:允许用户的最小/最大缩放值，数字，可浮点可整数
height：很少用
user-scalable：是否允许用户进行缩放，yes：允许，no：不允许
@layout viewport
在PPK大佬的理论中，浏览器有三种视口：Layout viewport、visiual viewport、ideal viewport
更多拓展：PPK的三个viewport
在移动端浏览器当中，存在着两种视口：可见视口（设备大小），视窗视口（网页宽度）
若我们的屏幕是320像素*480像素的大小（iPhone4），假设在浏览器中，320像素的屏幕宽度，能够展示980像素宽度的内容
320像素的宽度就是可见视口的宽度，而能够显示的980像素的宽度就是视窗视口的宽度
参考文献：
https://blog.csdn.net/u012402190/article/details/70172371
@device-width
一般，width=phys.width：物理宽度，获取时使用：document.documentElement.clientWidth
而device-width=css.width，获取时使用：window.screen.width
更多拓展：JS中各种宽度距离
参考文献：
https://www.cnblogs.com/tenWood/p/7934942.html
https://www.cnblogs.com/wbxjiayou/p/5176815.html
我是乱入的旁白：现在是12:06，不知不觉已三小时过去了，又给自己挖了俩个坑~宽度获取与三个视口TAT
3.2.2全局样式
3.2.2.1重置css：Normalize.css
3.2.2.2布局容器：.container与.container-fluid
.container{padding：0 15px，margin：auto}（min-width：768px=750px；min-width：992px=970px；min-width：1200px=1170px）
.container-fluid{padding: 0 15px}类似于width：100%
由于使用padding，故俩类容器不能嵌套
3.2.2.3栅格系统
类似表格，系统分为12列，通过行（row）与列（column）组合布局
.row{margin:0 -15px}可看为用于抵消容器自带的padding
3.2.2.4媒体查询
emm，暂停一下，吃个饭先~饿die
3.3CSS组件
3.4JS插件
emmm，还是打算将CSS组件与JS插件另外开成各一篇，我是不会承认我就是懒滴~