- <p contenteditable = 'true'>111</p> 将盒子变为输入框
CDN 引包
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签必须放在最前面-->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
表格基本样式
<table class=’table’>
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>蛮子</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>赵信</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>3</td>
<td>剑圣</td>
<td>男</td>
<td>23</td>
</tr>
</tbody>
</table>
button
----块级按钮
btn-block//把按钮设置为块级元素
<button class=’btn btn-block’>按钮</button>-----激活状态
active// 样式是点击时的样式不是悬停时的
<button class=’btn active ’>按钮</button>-----禁用状态
disabled//点击的时候不允许点的样式
<button class=’btn disabled’>按钮</button>
注意：disabled这个类只是写了css样式的禁用样式，没有禁用js的代码，所以js内部有关于这个button的click等事件，一样会触发。在js中禁用使用 $('button').attr("disabled",true);
form表单
<form action="当前文档所在服务器地址" method="GET(传输的数据会拼接在发送给后端的字符串中)／POST">
<form action="当前文档所在服务器地址" method="POST" enctype = "编码方式">
bootstrap下的form
<form action="当前文档所在服务器地址" method="GET(传输的数据会拼接在发送给后端的字符串中)／POST">
<label for="userid">userid:</label>
<input type="text" id="userid" name="id">
<label for="pawid">password:</label>
<input type="password" id="pawid" name="password">
<input type="submit" />
</form>
<form action="当前文档所在服务器地址" method="GET(传输的数据会拼接在发送给后端的字符串中)／POST">
<div class="form-group">
<label for="userid" class="control-label">userid:</label>
<input type="text" id="userid" name="id" class="form-control">
</div>
<div class="form-group">
<label for="pawid" class="control-label">password:</label>
<input type="password" id="pawid" name="password" class="form-control">
</div>
<input type="submit" />
</form>
- 组合
<div class="input-group">
<input type="text" name="bai" id="bai" class="form-control">
<div class="input-group-addon">百</div>
<input type="text" name="shi" id="shi" class="form-control">
<div class="input-group-addon">十</div>
<input type="text" name="shi" id="shi" class="form-control">
<div class="input-group-addon">各</div>
</div>
<div class="input-group">
<span class="input-group-addon">名字</span>
<input type="text" class="form-control" placeholder="名字">
<input type="text" class="form-control" placeholder="年龄">
<span class="input-group-addon"> </span>
</div>
- 单复选框
<div class="checkbox">
<label for="c1">成都
<input type="checkbox" id="c1" name="city" value="成都">
</label>
<label for="c2">重庆
<input type="checkbox" id="c2" name="city" value="重庆">
</label>
<label for="c3">北京
<input type="checkbox" id="c3" name="city" value="北京">
</label>
</div>
<div class="radio">
<label for="c1">
<input type="radio" id="c1" name="city" value="成都">
成都</label>
<label for="c2">
<input type="radio" id="c2" name="city" value="重庆">
重庆
</label>
<label for="c3">
<input type="radio" id="c3" name="city" value="北京">
北京
</label>
<div class="checkbox">
<label for="cc1">
<input type="checkbox" id="cc1" name="city2" value="成都">
成都</label>
<label for="cc2">
<input type="checkbox" id="cc2" name="city2" value="重庆">
重庆
</label>
<label for="cc3">
<input type="checkbox" id="cc3" name="city2" value="北京">
北京
</label>
</div>
行内元素不允许放块级元素
块级元素可以放任何元素
变量作用域 函数（参数） 对象（new关键字 构造函数 this）
