<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
| 超小设备手机(<768px) | 小型设备平板电脑(>=768px) | 中型设备台式电脑(>=992px) | 大型设备台式电脑(>=1200px) |
|---|---|---|---|
| .col-xs- | .col-sm- | .col-md- | .col-lg- |
表格
基本结构
<table><thead><th></th></thead><tbody><tr><td></td></tr></tbody>
</table>
- table-striped:带条纹
- table-bordered:带边框
- table-hover:悬停带浅灰色背景
- table-condensed:精简表格
- 响应式表格
<div class="table-responsive"></div>
表单
form-horizontal:水平表单
- form元素添加class .form-horizontal
- 把标签和控件放在带有class .form-group的div中
- 向标签添加class .control-label
表单类型
- input: 输入框
- textarea：文本框
- checkbox：复选框
- radio：单选框
- select ：选择框
表单布局
可以使用col-sm-*来规定控件的大小
<form role="form"><div><label class="col-sm-2">名称</label><div class="col-sm-6"><input class="form-control" id="name" placeholder="请输入名称"></div></div>
<form>
按钮
以下class属性可以用于a,button,input
- btn-default:默认
- btn-promary:原始
- btn-link:链接按钮
- btn-success:成功按钮
- btn-danger:危险按钮
- btn-warning:警告按钮
- btn-info：信息按钮
- btn-lg:制作大按钮
- btn-sm：制作小按钮
- btn-xs:制作超小按钮
- active:激活状态
- disabled:禁用
按钮组
div中使用.btn-group创建按钮组
- btn-group-lg|sm|xs：控制按钮组的大小
- btn-group-vertical:设置垂直方向的按钮
- btn-group-justified:设置自适应大小的按钮组
<div class="container"><div class="col-sm-2 col-xs-1"><div class="btn-group-vertical"><a class="btn btn-primary">链接1</a><a class="btn btn-primary">链接2</a><a class="btn btn-primary">链接3</a><a class="btn btn-primary">链接4</a><div class="btn-group-vertical"><a class="btn btn-primary dropdown-toggle" data-toggle="dropdown">链接5</a><ul class="dropdown-menu" role="menu"><li><a href="#">link1</a></li><li><a href="#">link2</a></li></ul></div></div></div>
</div>-- 下拉
<a class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu"><li><a href="#">link1</a></li><li><a href="#">link2</a></li>
</ul>
