Bootstrap 学习笔记
一、Bootstrap 三部分
1.全局 CSS 样式
设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。 (任何的HTML标签都可以使用Bootstrap中提供样式增强显示效果，栅格系统:网格布局系统，排版系统，分栏系统)
2.组件（html模板）
无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
3.JavaScript 插件
jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。其中包括：
模式对话框、标签页、滚动条、弹出框等。
二、Bootstrap使用入门
1.下载
官方网站：http://www.getbootstrap.com
2 . 创建WEB项目，并且在项目中导入bootstrap
新建html文件，引入相关资源
Bootstrap 必须要jQuery,因为Bootstrap组件是基于jQuery;
三、Bootstrap布局
Bootstrap把HTML标签中原来的样式都进行重置（重写）
Bootstrap布局我们有两种
1 固定布局
2 流式布局
3 我们一般可以对两种布局进行嵌套
eg:
四、Bootstrap按钮&按钮组
|
按钮组加上图标显示 |
|
<div class="container"> <div class="btn-group"> <button class="btn">添加<i class="icon-plus"></i></button> <button class="btn">删除<i class="icon-remove"></i></button> <button class="btn">修改<i class="icon-edit"></i></button> </div> </div> |
| |
五、Bootstrap导航
|
<ul class="nav nav-tabs"> <li class="active"> <a href="#">首页</a> </li> <li><a href="#">第二页</a></li> <li><a href="#">第三页</a></li> </ul> |
更多图标 ：
六、Bootstrap栅栏格
浮动的另外一种写法
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列;
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中:
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
.container 和 .container-fluid 就是包含行(row)。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格系统模板：
col-lg-（n~12） : 屏幕大于1200px的时候，宽度为盒子容器的(100*n/12) %; 如果小于1200px那么宽度就为100%；
col-md-(n~12) : 屏幕大于992px的时候，宽度为盒子容器的(100*n/12)%; 如果小于992px那么宽度就为100%；
.col-sm-(n~12):屏幕大于768px的时候，宽度为盒子容器的(100*n/12)%; 如果小于768px那么宽度就为100%；
col-xs-(n~12) : 任何屏幕大小，宽度为盒子容器的(100*n/12)%;
超大屏幕的栅格系统，只对设备大小大于等于1200px有效，否则就是独占一行。
标准屏幕的栅格系统，只对设备大小大于等于992px有效，否则就是独占一行。
小屏幕栅格系统，只对设备大小大于等于768px有效，否则就是独占一行。
超小屏幕栅格系统，（任何设备下，都占相应比例。）
6.1 移动设备和桌面屏幕设置布局
优先级：
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
注意：大屏的类样式应该写在后面，因为-xs-永远生效的，大屏的类样式只有在屏幕宽度大于某个值得时候才生效，如果小于某个值，相当于没有写那个样式，会用xs小屏幕的类样式；
列偏移（margin-left）
.col-lg-offset-*
.col-md-offset-*
.col-sm-offset-*
.col-xs-offset-*
(* 取值 1-12列；) 注意lg,md,sm只有在屏幕大小满足的时候才会生效；
隐藏或显示