<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- ie按照默认版本渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 设置视窗大小 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 双内核浏览器按照极速模式（谷歌内核）渲染 -->
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
表单:
单行文本框 .form-control
单选框、复选框 .checkbox .radio
如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，
请向 <form> 标签添加 class .form-inline。
horizontal: 水平拖拽 vertical: 上下拖拽
<textarea rows="form-control" cols="" style="resize: vertical;"></textarea>
<div style="cursor: pointer;"></div>
<p><kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>三个组成能够快速唤醒任务管理器</p>
<code></code>的作用是：能够用高亮的背景向时代码
按钮:
<button class="btn">anniu</button>
btn: user-select: none; 禁止用户选择
.btn-block 转为块元素 宽度百分百 -
图片:
通过class引用:
.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
图片:缩略图: img-thumbnail
容器:缩略图: thumbnail
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
通过img标签引用:
通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。
.img-responsive 类将 max- 100%; 和 height: auto; 样式应用在图片上：
辅助类:
文本:
以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗：
类 描述 实例
.text-muted color: #777;
.text-primary color: #337ab7;
.text-success color: #3c763d;
.text-info color: #31708f;
.text-warning color: #8a6d3b;
.text-danger color: #a94442;
背景:
以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗：
类 描述 实例
.bg-primary color: #fff;
background-color: #337ab7;
.bg-success background-color: #dff0d8;
.bg-info background-color: #d9edf7;
.bg-warning background-color: #fcf8e3;
.bg-danger background-color: #f2dede;
其他
类 描述 实例
.pull-left 元素浮动到左边 float: left!important;
.pull-right 元素浮动到右边 float: right!important;
.center-block 设置元素为 display:block 并居中显示 display: block;
margin-right: auto;
margin-left: auto;
.clearfix 清除浮动
.show 强制元素显示 display: block!important;
.hidden 强制元素隐藏 display: none!important;
.sr-only 除了屏幕阅读器外，其他设备上隐藏元素 position: absolute;
1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
.sr-only-focusable 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.text-hide 将页面元素所包含的文本内容替换为背景图 font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
.close 显示关闭按钮 float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
.caret 显示下拉式功能++
隐藏:
display:none; 元素消失，且不占用空间。
visibility:hidden;元素消失，占用空间
文字隐藏:text=hide
显示关闭按钮:close
显示下拉功能:caret
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>