标签：js交互 role ima 固定 boot menu off 注意 pen
1、bootstrap引入：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
2、bootstrap栅格系统：
分12列 row col
阈值：1200>= 992>= 768>= 768<
容器：
流体（百分比）：container-fluid
固定（px）：container 响应式：1170 970 750 auto
由大到小：
col-lg-（1-12）:大于1200px
col-md- (1-12):992-1200px
col-sm- : 768-992px
col-xs- : 小于768
列偏移：
col-lg-offset-（1-12）：向右偏移几个网格
col-md-offset-
col-sm-offset-
col-xs-offset-
行排序：
col-lg-push-(1-12):向右偏移几个网格
col-lg-pull-(1-12):向左偏移几个网格
浮动：
左浮动：pull-left
右浮动：pull-right
嵌套：出现嵌套是，子级以父级为一个整体划分栅格
清除浮动：在要清除浮动的元素前面添加：<div class="clearfix"></div>
固定定位：affix
3、响应式工具：
针对不同设备展示或隐藏页面内容
可见类：visible-(lg\md\sm\xs)-(block\inline\inline-block)
隐藏类：hidden-(lg\md\sm\xs)
4、Glyphicons字体图标：
好处：减少请求、容易控制样式
将font文件夹放在同一目录，或者更改bootstrap.css源码中的font-face的url
<span class="glyphicon glyphicon-search"></span>
5、预定义样式风格：
default 默认、 primary 首选项、success 成功 、info 一般信息、warning警告、danger危险
btn-primary、text-primary、bg-primary、alert-warning、panel-warning等...
6、按钮：
基类：btn
样式：btn-default、btn-link(链接)...
大小：btn-（lg、sm、xs）
状态：active、disabled
种类：a、input、button
块级：btn-block
按钮组：btn-group、btn-group-justified（根据父级自适应）、btn-group-vertical、btn-group-(lg\sm\xs)
注意：当使用btn-group-justified时，a类按钮可以实现对应效果，button和input类要给每一个按钮添加一个父级div设置class为btn-group
纵向按钮btn-group-vertical，不需要再添加btn-group
按钮小箭头：（默认dropdown向下，向上添加dropup类）<button class="btn btn-primary"><span class="caret"></span></button>
注意：input不行
7、下拉菜单
data- ： JS交互触发器的接口
aria- \ role=‘‘ :针对特殊人群(盲人)
基类：dropdown
下拉按钮：class：btn btn-default dropdown-toggle 、默认关闭，展开open 、data-toggle="dropdown"
下拉列表：dropdown-menu
下拉列表分组标题：dropdown-header
下拉列表分组的分割线：divider
····看文档
标签：js交互 role ima 固定 boot menu off 注意 pen
原文地址：http://www.cnblogs.com/hello-web/p/7221474.html
