<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:精简表格
-
响应式表格
表单
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创建按钮组