<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Bootstrap 是移动设备优先的，为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
禁用缩放 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
1）排版
定义了.h1~.h6六个类名,为的是给内联（inline）属性的文本赋予标题的样式。 <small>标签 .small类
1.标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。
2.固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。
3.重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
使用<small>标签来制作副标题
行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；
2）段落 14px 行高20px 深灰色（#333） .lead强调 加大加粗 <b>和<strong>粗体 <em>和<i>斜体
.text-muted：提示 浅灰色（#999) .text-primary：主要 蓝色（#428bca）.text-success：成功，浅绿色(#3c763d)
.text-info：通知信息，浅蓝色（#31708f）.text-warning：警告，黄色（#8a6d3b） .text-danger：危险，褐色（#a94442）
文字对齐 .text-left：左对齐 .text-center：居中对齐 .text-right：右对齐 .text-justify：两端对齐
去点列表 .list-unstyled 内联列表（水平导航） .list-inline
定义列表<dl><dt><dd> 水平定义列表.dl-horizontal(有最小宽度) 标题宽度超过160px时，将会显示三个省略号
改变大小写：text-lowercase text-uppercase text-capitalize
3）表格 .table：基础表格 .table-striped：斑马线表格 .table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格 .table-condensed：紧凑型表格
.table-responsive：响应式表格 浏览器可视区域小于768px时，表格底部会出现水平滚动条
表格行的类 .active .success .info .warning .danger
------------------------------------------表单----------------------------------------
常将checkbox radio放在label里面 div有.checkbox和.radio样式 水平排列 label上checkbox（radio）-inline
form-horizontal水平表单，配合col-sm-1 col-sm-offset-1
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-1 control-label" for="exampleInput" > 邮箱:</label>
<div class="col-sm-3"><input labype="email" class="form-control" id="exampleInput" placeholder="请输入邮箱"></div>
</div> </form>
control-label form-control(boots默认form样式)
form-inline内联表单 下拉选择框<select (multiple)><option> </option></select> 文本域<textarea rols,cows>
input-sm input-lg:让控件比正常大小更小（大） disabled禁止输入 <fieldset（分组） disabled>禁止域
<fieldset><legend>对于整个禁用的域中，如果legend(标题)中有输入框的话，这个输入框是无法被禁用
表单验证(class为form-group的div上) .has-warning:警告状态（黄色）.has-error：错误状态（红色） .has-success：成功状态（绿色） has-feedback
表单提示信息 与input同级 help-block，将提示信息以块状显示在控件底部。 <span class="help-block">请输入正确信息</span>
help-inline行内提示 使用栅格 scss自定义
input支持：type=text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
文本域 <textarea class="form-control" rows="3"></textarea>
静态控件 <p class="form-control-static">email@example.com</p>
checkbox-inline
-------------------------按钮 -------------------------------------------
class: btn btn-default btn-primary/info/success/warning/danger/link
大小：btn-lg/sm/xs
块状按钮.btn-block 使按钮宽度充满整个父容器 按钮活动状态：悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）
通过类名“.disable”来禁用按钮，不会禁止按钮的默认行为。。元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。
关闭按钮：<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
三角符号：<span class="caret"></span>
------------------------ 图像 -------------------------------
img-responsive：响应式图片，针对于响应式设计 img-rounded：圆角图片； img-circle：圆形图片； img-thumbnail：缩略图片
图像大小由容器控制（display：block）
！！！ 圆角，圆形依赖于css3，IE8以下不支持！！！
让内容块居中：为任意元素设置 display: block 属性 <div class="center-block">...</div>
在 Internet Explorer 8-10 中，设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题，在出问题的地方添加 width: 100% \9; 即可
文字前景色：text-muted/primary/info/success/warning/danger
文字背景色：bg-primary/info/success/warning/danger
快速浮动：<div class="pull-left">...</div>
<div class="pull-right">...</div> 优先级高
清除浮动：为父元素添加 .clearfix 类
-------------------- -------网格系统--------------------
将容器平分成12份。 xs(phone)--sm(pad)--md(pc)--lg(pc)
col-md-2：从起点处起，占据2个空间
列偏移 class="col-md-2 col-md-offset-4" 将起点向右偏移4格，占据两个空间
要保证列与偏移列的总数不超过12，不然会致列断行显示
列排序 添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。
列的嵌套 子网格根据其父网格所占据空间分布
<--------------------------下拉菜单-------------------
原理：点击时，div.dropdown”会添加类名'open' aria-expanded变成true（显示）
data-toggle这个自定义属性是给js预留的钩子（js中只有看到data-toggle=“dropdown”才能进行列表的展示和隐藏
下拉分隔线 空的<li>,添加类名“divider"; 菜单标题 给<li>加class="dropdown-header"
默认左对齐，右对齐在<ul>上添加一个“pull-right”或者“dropdown-menu-right”类名，同时一定要为.dropdown添加float:left的css样式。
菜单项状态 悬浮状态（:hover）和焦点状态（:focus）当前状态（.active）和禁用状态（.disabled）
<div class="dropdown "> //dropup：向上弹出
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
<span class="caret"></span> //下拉菜单三角形箭头
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> //.dropdown-menu-right 类让菜单右对齐。
<li class="dropdown-header">Dropdown header</li> //标题
<li role="separator" class="divider"></li> //分割线
<li class="disabled"><a href="#">Disabled link</a></li> //禁用项
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</div>
<----------------------------按钮组------------------------------------------>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button>
按钮工具栏 btn-toolbar 按钮组放在按钮工具栏中 .btn-group-lg/sm/xs:大/小/超小 按钮组
嵌套菜单 下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级
等分按钮 btn-group-justified 要注意防溢出 按钮下拉菜单 “div.dropdown”换成了“div.btn-group"好像没啥区别
为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中
<div class="btn-group" role="group" aria-label="..."> //btn-group-vertical垂直按钮组
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
按钮式下拉菜单
分裂式按钮下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
输入框组
<------------------导航与导航条------------------------->
基础样式.nav .标签形导航 nav-tabs 胶囊形（pills）导航 .nav-pills 垂直导航 .nav-stacked <li>nav-divider分割线
active的使用 $(".nav li").mouseover(function() {
$(this).addClass('active').siblings().removeClass('active'); });
自适应导航 nav-justified 要和“nav-tabs”或者“nav-pills”一起使用,不能配合.nav-stacked 自适应宽度过小变为垂直显示
导航与下拉菜单 用导航中的<li>代替<div>，<a>代替<button> 面包屑式导航:<ol>加入.breadcrumb类
基础导航条 <div class="navbar navbar-default" role="navigation"><ul class="nav navbar-nav">
“navbar-header" “navbar-brand” 导航条添加标题
<div class="navbar-header"> <a href="##" class="navbar-brand">标题</a> </div>
带表单的导航条 navbar-form navbar-left/right 浏览器视窗宽度大于768px生效。
navbar-btn和navbar-link navbar-text
固定导航条 .navbar-fixed-top .navbar-fixed-bottom
bug:页面主内容顶部和底部都被固定导航条给遮住了
1.body {
padding-top: 70px;/*有顶部固定导航条时设置
padding-bottom: 70px;/*有底部固定导航条时设置}
2.把固定导航条都放在页面内容前面
navbar-fixed-top ~ .content {
padding-top: 70px;
}.navbar-fixed-bottom ~ .content {
padding-bottom: 70px;}
★响应式导航条 http://www.imooc.com/code/3124
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse(或者ID)"><span></button><a>
<div class="collapse navbar-collapse navbar-responsive-collapse(或者ID)">折叠内容</div>
反色导航条:navbar-inverse 注意屏幕大于屏幕宽度大于767px时，二级菜单还是default样式，需手动改变
分页导航：带页码<ul class="pagination"><li></li></ul>
翻页：<ul class="pager">
<li class="previous（next）"><a href="#">«（raquo）;上一页</a></li></ul>
标签：<span class="label label-default">默认标签</span> 定义样式使用浮动
徽章：<a href="#">Inbox <span class="badge">42</span></a>
<nav>包含一个 .container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内补
<div class="navbar navbar-default nav-justified navbar-fixed-top">
<ul class="nav nav-pills navbar-nav">
<li><a href="#" title="">111</a></li>
<li><a href="#" title="">111</a></li>
<li><a href="#" title="">111</a></li>
<li><a href="#" title="">111</a></li>
</ul>
</div>
<---------------------缩略图----------------->
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
//响应式布局，col-xs-6表示在小屏幕中会占一半的大小，col-md-3表示在中屏幕中占4份之一的大小
col-lg-6大屏幕一行只显示2张的
<a href="#" class="thumbnail">
<img src="" alt=""> //图片
</a>
<div class="caption">
内容部分，文字，
按钮
</div>
</div>
<div class="col-xs-6 col-md-3">
//响应式布局，col-xs-6表示在小屏幕中会占一半的大小，col-md-3表示在中屏幕中占4份之一的大小
col-lg-6大屏幕一行只显示2张的
<a href="#" class="thumbnail">
<img src="" alt=""> //图片
</a>
<div class="caption">
内容部分，文字，
按钮
</div>
</div>
<div class="col-xs-6 col-md-3">
//响应式布局，col-xs-6表示在小屏幕中会占一半的大小，col-md-3表示在中屏幕中占4份之一的大小
col-lg-6大屏幕一行只显示2张的
<a href="#" class="thumbnail">
<img src="" alt=""> //图片
</a>
<div class="caption">
内容部分，文字，
按钮
</div>
</div>
</div>
</div>
-----------------------------警示框 可关闭的（button）-----------------------------------
<div class="alert alert-success/info/warning/danger alert-dismissable(可关闭的)" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>恭喜您操作成功！</div>
警示框的链接 <a href="" class="alert-link">链接网址</a>
----------------------进度条------------------------------------------
<div class="progress progress-striped active（进度条样式）">
<div class="progress-bar（进度条进度）progress-bar-info" style="width:40%" role="progressbar">此处label可选</div>
<div class="progress-bar progress-bar-success" style="width:40%" role="progressbar">此处label可选</div>
</div>
progress-bar-info/success/warning/danger 蓝/绿/黄/红
条纹进度条：progress-striped 原理为CSS3的线性渐变 动态条纹进度条：active 原理为CSS3的animation
层叠进度条：同一div内进度条可重叠（左浮动），不能超过100%
----------------------容器--------------------
：“media"; “media-object”表示就是媒体对象中的对象，常常是图片; 标题：“media-heading”
“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容
媒体对象-嵌套：将另一个媒体对象结构放置在媒体对象的主体内“media-body”
媒体对象-列表<ul class="media-list"><li class="media">...</li></ul>
<div class="media">
<a href="#" class="pull-left"><img class="media-object" src="" alt="x"></a>
<div class="media-body"> <h4 class="media-heading">我是title</h4><p>content</p> </div></div>
---------------------列表组----------------------------
<ul class="list-group"> <li class="list-group-item">揭开CSS3的面纱</li> </ul>
带徽章 <span class="badge">13</span>
带链接 将ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换
头部：list-group-item-heading； 主要内容：list-group-item-text；active/disabled：表示当前状态/禁用状态
多彩：list-group-item-primary/success/info/warning/danger
--------------------面版-------------------------------------
<div class="panel panel-default（primary/success/info/warning/danger）">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">…</div>
<ul class="list-group"><li></li></ul>
<div class="panel-footer">作者：大漠</div></div>
面板中嵌套表格/列表组,一般将其提取出来，放在panel-body之后
5592
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
