20190430-Bootstrap之旅
写在前面的乱七八糟的前言：当当当，现在是早上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/bootstrap@3.3.7/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/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/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,可嵌套
.col-*-x:{position:relative;min-height:1px;padding:0 15px}相对定位声明，用以下面的列排序
3.2.2.3.1媒体查询
3.2.2.3.2列偏移.col-*-offset-x
.col-*-offset-x{margin-left:0:0% / 1：8.3333% / 2：16.66667% / 3:25% / 4:33.33333%}
3.2.2.3.3列排序.col-*-push-x与.col-*-pull-x
.col-*-push-x{left:0:auto / 1：8.3333% / 2：16.66667% / 3:25% / 4:33.33333%}
.col-*-pull-x{right:0:auto / 1：8.3333% / 2：16.66667% / 3:25% / 4:33.33333%}
3.2.2.4排版
3.2.2.4.1标题h1-h6副标题small
h1-h3/.h1-.h3{margin：20px 0 10px 0；line-height：1.1 }h4-h6/.h4-.h6{margin：10px 0；line-height：1.1}
small/.small{font-size:75%；line-height：1；color：#777}
3.2.2.4.2页面主体
font-size：14px；line-height：1.428，line-height使用相对单位，即font-size一改动，line-height会随之变动
p段落{margin： 0 0 10px 0}
3.2.2.5内联文本
mark标亮
del删除
ins插入
u下划线文本
strong强调
em斜体
text-left/center/right/justify/nowrap：文本对齐
text-lowercase/uppercase/capitalize：英文大小写切换
3.2.2.6缩略语
3.2.2.7地址
3.2.2.8引用
blockquote{padding: 10px 20px;margin: 0 0 20px;font-size: 17.5px;border-left: 5px solid #eee;}制造一个左边框，.blockquote-reverse，倒置右引用
footer标明引用来源，cite标明来源名称
3.2.2.9列表：无序、有序、无样式、内联、描述
3.2.2.0代码
内联：<code><code/>{
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
用户输入:<kbd><kbd/>{
padding: 2px 4px;
font-size: 90%;
color: #fff;
background-color: #333;
border-radius: 3px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}
3.2.2.11表格
table/.table
条纹状表格：.table-striped/.table-condensed
状态类：
.active：鼠标悬停在行或单元格上时所设置的颜色
.success：标识成功或积极的动作
.info：标识普通的提示信息或动作
.warning：标识警告或需要用户注意
.danger：标识危险或潜在的带来负面影响的动作
响应式表格：.table-responsive
3.2.2.12表单
内联表单：.form-inline
水平排列的表单：.form-horizontal
控件：输入框、文本域、多选和单选框、下拉列表.form-control
3.2.2.13按钮
预定义样式：.btn/.btn-default
尺寸：.btn-lg/.btn-sm/.btn-xs
点击：active
禁用：disabled
3.2.2.14图片
响应式图片：.img-responsive{
max-width：100%；
height：auto；
display：block；
}
使其居中使用：.center-block{
display：block；
margin：0 auto；
}
图片形状：.img-rounded不带边框方形；.img-circle圆形；.img-thumbnail带边框的方形
3.2.2.15辅助类
情境文本颜色：text-muted/primary/sucess/info/warning/danger
情境背景色：bg-
三角符号：caret
清除浮动：.clearfix{
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}}
3.3CSS组件
3.4JS插件
我是无处安放的小结：emmm，总的来说，应用的比较多的还是栅格系统、表单、下拉菜单、响应式图片等，重头戏部分还是在组件跟JS插件，所以还是打算将CSS组件与JS插件另外开成各一篇，我是不会承认我就是懒滴~
