bootsrap的部分学习笔记
bootstrap基本概念： 用于快速开发web应用程序和网址的前端框架。基于html,css,javascript的
使用的好处:移动设备有限，版本3起，框架包含贯穿整个库的移动设备优先样式；浏览器支持，所有主流浏览器都支持bootstrap；好上手；响应式设计:bootstrap的响应式css能自适应台式、平板电脑和手机；为开发人员创建接口提供了一个简洁同意的解决方案；包含功能强大的内置组件，易于定制；提供基于web的定制；开源；
bootstrap包的内容
基本结构：自带网格系统、链接样式、背景结构。
css：自带特性，全局的css设置、定义基本的html元素样式、可扩展的class以及一个先进的网格系统。
组件:bootstrap包含十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等 。
javascript插件：bootstrap包含十几个自定义的jq插件。可以直接包含所有插件，可以一个个包含插件。
基本结构、css、组件、javascript插件。
网格系统，链接样式，背景。全局设置样式，定义基本元素样式，可扩展class及网格系统；
组件:十几个可重用组件，下拉框、导航、警告、弹出；
javascript插件:十几个自定义插件，可以直接使用，也可以单独引用
定制:定制bootstript组件、less变量、jq查看定制自己的版本
2.使用概况
css：完成bootstrap底层结构关键部分，web开发更好、更快、更健壮的最佳实践
H5文档类型（Doctype）
使用h5元素和css属性，为了让这些正常工作，需要使用h5文档类型
<!Doctype html>
<html></html>
在bootstrap创建网页不使用html5的文档类型doctype，可能会导致浏览器显示不一致，设置面临一些特定情境下的不一致，导致代码不能通过W3C标准验证
移动设备优先：bootstrap3最显著的变化。
早期版本，需要手动 引用另一个css才能使项目支持移动设备，2版本之前。
版本3，css默认支持移动设备。为了让bootstrap开发的网址对 移动设备优化，确保适当绘制和触屏缩放，需要在网页的head之中添加viewport 的meta标签。目的 ，增加对移动设备的友好度，提供适当绘制和触屏缩放。
width属性控制设备的宽度（content=“width=device-width,initial-scale=1.0”）device-width确保正确显示 在不同设备。inital-scale=1.0确保网页加载时，以1:1的比例显示，不会有任何缩放。
user-scalable=no 禁用缩放功能，用户只能滚动屏幕 ，让网站看起来更像，原生应用 。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,
user-scalable=no">
响应式图像：
<img src="..." class="img-responsive" alt="响应式图像">
添加img-responsive class可以让bootstrap 3图像对响应式布局的更友好支持。
设置图像显示为block，当将display属性设置为block时，以块级元素显示。
设置height：auto，相关元素的高度取决于浏览器，设置max-width:100%会重写任何通过width属性指定的宽度。如果需要让使用.img-responsive类图片水平居中，需要使用center-block类。
全局显示、排版和链接
基本的全局显示
bootstrap3使用body{margin:0;} 移除body的边距
body{
font-family:"Helvetica Neue",Helvetica,Arial,scans-serif;
font-size:14px;
line-height:1.428571429;
color:#333333;
background-color:#ffffff;
}
设置默认样式，设置文本默认字体大小 ，默认行高度 ，设置默认文本颜色，设置默认背景颜色。
排版:使用@font-family-base、@font-size-base、@line-height-base属性作为排版样式（字体类型，字体大小，字体高度）
链接样式：通过@link-color设置全局链接的颜色。
a:hover,a:focus
避免跨浏览器的不一致:使用noramllize来建立浏览器的一致性。normalize.css样式文件提供html元素默认样式，提供更好的跨浏览器的一致性
容器（container）
<div class="container">
...
</div>
bootstrap 3的container class用于包裹页面上内容。
默认:内边距固定宽度、外边距自动，交由浏览器决定，内边距是固定宽度，默认情况下容器是不可嵌套的。
b3-申请响应的媒体查询，再不同的媒体查询阈值返回都为container设置了max-width，用于匹配网格系统@media(min-width:768px){.container{width:750px;}}
浏览器/设备支持
bootstrap可以在最新桌面系统和移动端浏览器中工作
旧的浏览器，可能无法很好支持。
网格系统-bootstrap
提供一套响应式、设备优先的流失网格系统，随着屏幕或者视口viewport，尺寸增加，系统会自动分成最多12列。
由一系列用于组织内容的相交的直线组成的结构。广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用html和css的方法。
移动端优先策略-内容：决定什么是最重要的。布局：设计更小的宽度。基础的css是移动设备优先，媒体查询是针对于平板、台式电脑。渐进增强，随着屏幕大小的增加而添加元素。
bootstrap网格系统grid system的工作原理：通过一系列包含内容的行和列来创建页面布局，行必须放置在.container class内，以便获得适当的对齐和内边框，alignment、padding。使用行来创建列的水平组。内容应该放置在列内，且唯有列是可以是行的直接子元素。预定义的网络类，比如，row和col-xs-s。都可以用于快速创建网格布局，less混合类可用于更多语义布局。列通过内边距padding来框架列之间的间隙。该内边距是通过rows上的外边距margin取负，表示第一列和最后一列的行偏移。网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相同列，则要是用三个。col-xs-4.
媒体查询：有条件的css规则。只适用于一些基于某些规则条件的css，如果满足就应用相应的样式。媒体查询-允许基于视口大小移动、显示并隐藏内容。min-width：@screen-sm-min（sm/md/lg/xs）xs<sm<md<lg
max-width 将css的影响限制在更小的范围屏幕大小之内。
网格选项-超小设备手机小于768ox、小型设备平板电脑大于等于768px，中型设备台式电脑大于992px，大型设备台式电脑大于1200px、
尺寸：px、rem、em
px像素，相对长度单位，相对于显示器分辨率而言的，相对。显示器分辨率的像素点
em 同样是相对长度单位，相对于当前对象内文本的字体尺寸。若是相对于当前对行内文本的字体尺寸未被人为设置，就是相对于浏览器默认字体尺寸。
rem 同样是相对尺寸单位，相对的目标是html根元素。
em、px、rem：都是相对长度单位，px:相对于屏幕分辨率；em是相对与当前行内文本的字体尺寸，未被定义时，相对于浏览器默认字体尺寸；rem是相对html根元素的尺寸。
vw代表视窗（viewport）的宽度为1%，如果视窗宽度为1000px，那么50vw=500px。相对于视窗宽度。1vw等于1%的视窗宽度。
vh代表窗口高度的百分比，如果视窗高度800px 那么50vh=400px。
em、rem、px、vh、vw。的区别及相同。
xs<sm<md<lg尺寸。
基本的网格结构：外部容器container《行row《列col
响应式的列重置：我们在小设备浏览时，无法确定网格显示位置。为了解决这个问题，我们使用.clearfix class和响应式实用工具解决。
响应式可见辅助class类：
visible-*可见的设备尺寸，hidden-*不可见的页面尺寸
visible/hidden-* （phone、tablet、desktop）
偏移列：偏移是一个用于更专业的布局的有用功能，它们可用更多列腾出更多的空间。如，.col-xs-*类不支持偏移，但是它们可以通过简单地通过使用一个空的单元格来实现该效果。
为了在大屏幕显示器上使用偏移，使用.col-md-offset-*类。这些类会把一个列的外边距margin增加*列，其中*范围是从1到11.
嵌套列：为了在内容中嵌套默认的网格，添加一个新的row，并在一个已有的.col-md-*列内添加一组.col-md-*列，被嵌套的行应该包含一组列，这组列个数不能超过12列。
