Bootstrap笔记
特点：
1、入门比较简单
2、响应式布局
3、移动设备优先
中文网站
环境安装：
bootstrap.min.css
jquery.js
bootstrap.min.js
基本模板
1、bootstrap是基于h5的，需要用html5的文档类型定义(DTD定义)
2、字符集设置
<meta charset="utf-8">
3、移动设备优先
<meta name="viewport" content="width=device-width;initial-scale=1.0;">
CSS全局样式
1、布局容器类样式
.container固定宽度，是响应式的,左右有留白
.container-fluid自由宽度(100%宽度)，适应于显示设备
2、标题样式<h1>~<h6> .h1~.h6
.h1~h6使用了<h1>~<h6>标签的样式但是可以对行间标签使用，不换行
3、行内文本样式
b/strong/i/em/del/s(也是删除线)
4、文本对齐样式
.text-left/.text-center/text-right/text-justify(两端对齐)
5、列表样式
.list-unstyled(无符号，去掉前面的符号)/.list-inline(行内块)
6、表格样式
.table(表格全局样式，用表格必须加载)少量padding，水平分割线
.table-striped：有条纹的背景色行，隔行变色
.table-bordered：带边框的表格
.table-hover：鼠标悬停效果，放上变色，移开恢复
.table-condensed：紧凑的表格，表格的内部会减半
行(tr)或单元格(td)的背景色：.active,.success,.info,.waining,.danger
7、响应式表格
将.table元素包裹在.table-responsive元素内，即可创建响应式表格
当屏幕宽度小于768px时表格会出现滚动条
当屏幕宽度大于768px时表格的滚动条自然消失
8、表单样式
.form-group：表单组样式，将<label>和表单元素包含其中，可以获得更好的排列
.form-control表单元素样式，常用于input,textarea,select元素
*placeholder属性:html5中新加的属性，添加提示信息
.form-inline:内联表单样式，是元素一行排列，用于form元素
.sr-only：用于可以隐藏元素
.checkbox-inline:复选框选项一行显示
.form-horizontal
/*
解决IE低版本不支持HTML5元素的方法
<!-- [if lt IE 9]>
<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif] -->
*/
9、栅格系统
bootstrap提供了一套响应式、移动设备有限的流式栅格系统
bootstrap把一个容器或整个网页平均分为了12列
bootstrap的栅格系统由一个行(.row)和多个列(.col-*-*)构成，栅格系统通过行列的形式来创建网页布局，把具体的数据放入列当中。注意，栅格系统必须放在.container和.container-fluid之中
表单中使用栅格系统对form使用.form-horizontal
.col-xs-* 超小屏幕，手机
.col-sm-* 小屏幕，平板
.col-md-* 中等屏幕，桌面显示器
.col-lg-* 大屏幕。大桌面显示器
如果*的总数大于12则自动换行，小于12列不换行，右边会有空白
.col-md-offset-*：指定一栏向右偏移多少列
·列的嵌套
10、按钮样式
可做按钮使用的元素：a/input/button
.btn:按钮的全局样式
预定义的样式：.btn-default/.btn-primary/.btn-success/.btn-info/.btn-warning/.btn-danger/.btn-link
按钮的带下：.btn-lg/.btn-sm/.btn-xs
.btn-block：将按钮拉伸到撑满整个父元素
.active：按钮的激活状态
.disable：禁用状态
11、图片样式：
.img-responsive：直接为图片添加该样式，实现响应式图片
.center-block：图片居中样式
.img-rounded:圆角图片
.img-circle圆形图片
.img-thumbnail：边框圆角
12、辅助类样式
文字的颜色类：.text-muted/.text-primary/.text-success/.text-info/.text-warning/.text-danger
背景颜色类：.bg-primary/.bg-success/.bg-info/.bg-warning/.bg-danger
三角符号：<span class="caret"></span>
快速浮动类：.pull-left/.pull-right
清除浮动：为父元素添加.clearfix
让内容块网页居中：<div class="center-block"></div>
13、CSS组件--下拉菜单
.dropdown：将下拉菜单触发器和下拉菜单包含在其中(下拉菜单父元素)
.data-toggle：这个是属性,不是class，下拉菜单触发器，取值为dropdown，重要
.dropdown-menu：给ul指定下拉菜单的样式
.dropup：向上弹出的下拉菜单(下拉菜单的父元素)
下拉菜单的对其方式：.dropdown-menu-left/.dropdown-menu-right
.divider：为下拉菜单添加分隔线，用于将多个链接分组
.disable：禁用的菜单项
14、按钮组(多个按钮排列在一起)
.btn-group：设置一个按钮组
.btn-toolbar：按钮工具栏，内部可以分多个group
按钮的尺寸,给按钮组加，.btn-group-lg/.btn-group-md/.btn-group-sm
.btn-group-vertical：垂直排列的按钮组
15、按钮式的下拉菜单
btn与下拉菜单结合
16、输入框组
.input-group：只能用于文本框input，不能同于select/textarea
.input-group-addon：用于在input前后添加额外元素，赋给一个span元素即可
*注意将input-group-addon和input元素抱在input-group之中
.input-group-lg和.input-group-sm可以改变输入框组的尺寸
.input-group-btn可以作为额外元素的按钮，应该是作为button的父元素
17、标签页
.nav是一个标签页的基类
.nav-tabs是标签页类样式
.active是标签页的状态类
.nav-pills是胶囊式标签页
.nav-stacked胶囊式标签页堆放排列(需要有nav-pills)
18、路径导航
.breadcrumb 给ul/ol添加样式，内部的li会自动显示为路径导航形式
19、缩略图
.thumbnail赋给a元素，可以实现缩略图样式
.caption可以实现缩略图标题及描述
20、分页效果
.pagination给ul添加实现分页效果
« 上一页
» 下一页
.disabled 禁用状态
.active 激活状态
.pagination-lg 分页大尺寸
.pagination-sm 分页小尺寸
.pager 可以实现翻页效果。上一页、下一页效果
21、导航条
.navbar 导航栏基类(用于nav)
.navbar-default 导航栏默认样式(用于nav)
.container nav的子元素，导航栏内容都放入其中
.navbar-header 导航栏头部样式
.navbar-brand 设置品牌图标样式
.collapse 是折叠导航栏的样式的基类
.nav 是导航栏的连接基类
.navbar-nav 是导航栏的连接样式
.navbar-form 导航栏表单，可以使表单元素排在同一行
.navbar-left/right 组件排列，导航连接、表单、按钮或文本能对齐
.navbar-btn 对于不在form中的button元素，实现垂直对齐
.navbar-text 对于导航栏的普通文本有行距和颜色，常用语 p
.navbar-fixed-top(bottom) 导航栏固定在顶部，用于nav元素，需要为body设置padding-top(bottom):50px;
.navbar-static-top 导航栏静止在顶部，用于nav元素，会随着滚动条的移动而消失
.navbar-inverse： 可以实现反射导航栏，用于nav元素
另外，可以参见bootstrap中文文档，有例子
浙公网安备 33010602011771号