BS第一天

1、

布局：基础的CSS是移动设备优先

响应式网格系统随着屏幕或视口尺寸的增加，系统会自动文芬最多12列

工作原理：必须放置在.container class内，以便获得适当的对齐（alignment）和内边距（padding）

2、媒体查询

/* 超小设备（手机，小于 768px） */

/* 小型设备（平板电脑，768px 起） */

/* 中型设备（台式电脑，992px 起） */

/* 大型设备（大台式电脑，1200px 起） */

3、网格选项

	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数量和	12	12	12	12
最小列宽	Auto	60px	78px	95px
间隙宽度	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

4、列偏移：使用 .col-md-offset- 类

5、视口

视口：可视窗口的区域

<Meta name="viewport" content="width=device-width, initial-scale=1.0">中

width=device-width 表示让视口的宽度等于设备的宽度

initial-scale=1.0 表示初始化的缩放比例为1：1

user-scalable = yes  表示是否可以缩放

maximum-scale=2  表示最大放大比例为2倍

minimum-scale=0.5  表示最小缩小比例为0.5

6、表格

.table:基本表格

.table-striped:条纹表格（斑马线）

.table-bordered:每个元素周围都有边框，且占整个表格是圆角的

.table-hover:当指针悬停在行上时会出现浅灰色背景

.table-condensed:行内边距（padding）被切为两半

7、表单

垂直或基本表单        <form role="form">

内联表单                  <form class="form-inline" role="form">

水平表单                  <form class="form-horizontal" role="form"> 

8、按钮

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

9、辅助类

pull-left  浮动到左边
pull-right  浮动到右边
clearfix  清除浮动
show  强制元素显示 （display）
hidden  强制元素隐藏  （display）

10、响应式实用工具

visible-xs  仅在超小屏显
visible-sm   仅在小屏幕显示
……
hidden-xs 仅在超小屏隐藏
hidden-sm 仅在小屏隐藏

11、插件

模态框（菜鸟）Bootstrap 模态框（Modal）插件 | 菜鸟教程
标签页 tab切换  Bootstrap 标签页（Tab）插件 | 菜鸟教程
手风琴  （菜鸟）Bootstrap 折叠（Collapse）插件 | 菜鸟教程
轮播图  （菜鸟）Bootstrap 轮播（Carousel）插件 | 菜鸟教程
附加导航（吸顶）  Bootstrap 附加导航（Affix）插件 | 菜鸟教程