bootstrap

栅格系统

概念：分12列 row col

分辨率阈值：768 992 1200
<768	手机
768< <992	pad
992< <1200	中等屏幕
>1200	大屏幕

容器
container-fluid	流体
container	固定 1170 970 750 auto 针对不同的分辨率有不同的尺寸

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.container{ width:1000px !important; border:1px #000 solid;}
</style>
</head>

<body>
<!--<div class="container-fluid">
	aaaaaaaaa
</div>
-->
<div class="container">
	aaaaaaaaa
</div>

</body>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.js"></script>
</html>

语法


col-lg-*
col-md-*
col-sm-*
col-xs-*

列偏移
col-[]-offset-

列排序
col-[]-push-
col-[]-pull-

嵌套
嵌套的一行按照父级进行分配

清浮动
cleanfix

响应式

概念：针对不同设备展示或隐藏页面内容。

可见类
visible--	lg md sm xs block inline inline-block
hidden-*

打印类
visible-print-*
hidden-print

固定定位
affix

字体图标

Glyphicons字体图标

好处： 1、减少请求 2、容易控制样式

用法：font-face 字体路径

自制图标：http://jingyan.baidu.com/article/f79b7cb346cf499145023e78.html

预定义样式风格

预定义样式风格
primary	首选项
success	成功
info	一般信息
warning	警告
danger	危险

按钮

基类：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

标签页

头部
nav
nav-tabs
nav-justified	端点对齐
nav-tabs-justified
nav-pills
nav-stacked	竖状菜单

内容
tab-content
tab-pane
data-toggle=”tab”
href对应id
淡入淡出方式
鼠标移入方式

导航条

导航条
navbar
navbar-default
nav navbar-nav
navbar-inverse	相反的色调
navbar-static-top
navbar-fixed-top
navbar-fixed-bottom

导航条
navbar-header
navbar-brand
navbar-left
navbar-right
navbar-btn
navbar-link
navbar-text
navbar-form

例子：知乎导航条

响应式导航条
navbar-toggle
collapse navbar-collapse

滚动监听
data-spy
data-target
data-offset