Bootstrap响应式框架-随学笔记
概览
bootstrap 移动设备优先
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签
<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。（PS:这种方式我们并不推荐所有网站使用，还是要看情况而定）
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。（PS：由于 padding 等属性的原因，这两种 容器类不能互相嵌套。）
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
栅格系统
列偏移设置
-col-offset-*
在一行12列的基础上，可以根据情况去设置相应的位置偏移。
排版和代码
表格
基本表格
<table class="table"></table>
条纹状表格
<table class="table table-striped"></table> 注：这个是依赖css选择器实现的(:nth-child)
带边框的表格
<table class="table table-bordered"></table>
鼠标的悬停设置: .table-hover 让table中的每一行对鼠标悬停状态做出响应
<table class="table table-hover"></table>
紧凑表格
<table class="table table-condensed"></table> 设置完成之后单元格中的内补（padding）均会减半。
响应式表格
<table class="table table-responsive"></table> 创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
表单
注意：由于默认设置input的宽度为100%,所以如果需要一行显示的话，需要将div设置为inlin-block
一定要添加label,如果不想让label显示的话，可以为label设置.sr-only(screen read only-增加屏幕的可阅读性)属性
PS：页面主体--bootstrap页面基准样式设置
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。
这些属性直接赋予 <body> 元素和所有段落元素。
另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
使用 Less 工具构建（variables.less 文件中定义的两个 Less 变量决定了排版尺寸：@font-size-base 和 @line-height-base。第一个变量定义了全局 font-size 基准，第二个变量是 line-height 基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的 margin、 padding 和 line-height。自定义这些变量即可改变 Bootstrap 的默认样式。）
为了提高(屏幕阅读器和残障人士)的可访问性，尽量的语义化,使用aria-*,如下案例
图标的可访问性 为避免 屏幕识读设备(sr-only)抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。
