BootStrap初识

1.Bootstrap是什么?

• 当下流行的前端框架（界面工具集）
• 移动端优先的设计理念
• 灵活简洁，代码优美，美观大方
• 目的是为了让Web开发更敏捷
• Twitter公司的两名前端工程师在2011年发起的，完成第一个版本的开发 

2.视口

• width:视口的宽度
• initial-scale:初始化缩放
• user-scalable:是否允许用户自行缩放（yes:1; no:0）
• minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
• maximum-scale:最大缩放

3.栅格系统

1. 行的类名——row
2. 列的类名——col
3. 偏移列——col-md-offset-number

• col-xs-[列数]：在超小屏幕下展示几份
• col-sm-[列数]：在小屏幕下展示几份
• col-md-[列数]：在中等屏幕下展示几份
• col-lg-[列数]：在大屏幕下展示几份
• xs: 超小屏幕 手机（<768px）
• sm: 小屏幕 平板（>=768px）
• md: 中等屏幕 桌面显示器（>=992px）
• lg: 大屏幕 大桌面显示器（>=1200px）

4.表格

 (1)表格类

• .table-----为任意 <table> 添加基本样式 (只有横向分隔线)
• .table-striped-----在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
• .table-bordered-----为所有表格的单元格添加边框
• .table-hover-----在 <tbody> 内的任一行启用鼠标悬停状态
• .table-condensed-----让表格更加紧凑

(2)<tr>/<th>/<td>类

• .active-----将悬停的颜色应用在行或者单元格上
• .success-----表示成功的操作
• .info-----表示信息变化的操作
• .warning-----表示一个警告的操作
• .danger-----表示一个危险的操作

5. 表单

• vertical-----垂直表单（默认）
• 内联表单（form-inline）：它的所有元素是内联的，向左对齐的，标签是并排的
• 水平表单（form-horizontal）

6.按钮

• 为按钮添加基本样式——btn
• 默认/标准按钮——btn-default
• 原始按钮样式（未被操作）——btn-primary
• 表示成功的动作——btn-success
• 该样式可用于要弹出信息的按钮——btn-info
• 表示需要谨慎操作的按钮——btn-warning
• 表示一个危险动作的按钮操作——btn-danger
• 让按钮看起来像个链接 (仍然保留按钮行为)——btn-link
• 制作一个大按钮——btn-lg
• 制作一个小按钮——btn-sm
• 制作一个超小按钮——btn-xs
• 块级按钮(拉伸至父元素100%的宽度)——btn-block
• 按钮被点击——active
• 禁用按钮——disabled
   

7.图片

• .img-rounded-----为图片添加圆角 (IE8 不支持)
• .img-circle-----将图片变为圆形 (IE8 不支持)
• .img-thumbnail-----缩略图功能
• .img-responsive-----图片响应式 (将很好地扩展到父元素) 

8.辅助类

• pull-left：元素浮动到左边
• pull-right：元素浮动到右边
• center-block：设置元素为 display:block 并居中显示
• clearfix：清除浮动
• show：强制元素显示
• hidden：强制元素隐藏
• sr-only：除了屏幕阅读器外，其他设备上隐藏元素

9.响应式实用工具 

• visible-xs：只在超小屏幕可见
• visible-sm：只在小屏幕可见
• visible-md：只在中等屏幕可见
• visible-lg：只在大屏幕可见
• hidden-xs：只在超小屏幕隐藏
• hidden-sm：只在小屏幕隐藏
• hidden-md：只在中等屏幕隐藏
• hidden-lg：只在大屏幕隐藏