bootstrapt使用

<table class="table table-hover">
<thead>
<tr>
<th class="table_name">名称</th>
<th>城市</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>

1、事件绑定：on和off分别“绑定”、“禁用”事件

jquery：

　　　　$('.table_name').on('click',function(event){ //添加绑定事件

　　　　})

　　　　$('.table_name').off('click')  //禁用点击事件

bootstrapt：

　　　　　　$(document).on('click.table.table_name','th',function(){//添加绑定事件  其中'th'：判断当前事件是否为'th'元素
　　　　　　　　alert("名称")
　　　　　　})
　　　　　　$(document).off('.table.table_name');//禁用点击事件

2、$.data():收集指定元素上所有以data-开头的自定义属性

<div id="getdata" data-role="yinfan" data-name="yinfan" data-toggle="toggle"></div>

bootstrapt：var getdata = $("#getdata").data();
　　　　　　console.log("------")
　　　　　　console.log(JSON.stringify(getdata))
　　　　　　console.log(JSON.stringify(getdata.name))

3、css

居中容器	<div class="container"> </div>
缩略语：鼠标移到缩略词上时，就显示声明在title里的属性值	<abbr title="这是一本js的书，内容很好，还有实战">js实战</abbr>
地址元素	<address> <!--每一行以<br />结尾--> 　　<strong>yinfan</strong><br /> 　　江苏省 扬州市 广陵区<br /> 　　山河西庄<br /> </address>
引用：可以引用任意HTML内容，推荐使用<p>	<blockquote> 　　<p>举一隅不以三隅反，则不复也</p> 　　<small>出自<cite title="论语.述而">论语</cite></small> </blockquote>
列表：普通列表、有序列表、去点列表、内联列表、描述列表、水平列表	普通列表： <ul> 　　<li>aa</li> 　　<li>bb</li> </ul> 有序列表： <ol> 　　<li>cc</li> 　　<li>dd</li> </ol> 去点列表： <ul class="list-unstyled"> 　　<li>aa</li> 　　<li>bb</li> </ul> 内联列表：列表项水平显示 <ul class="list-inline"> 　　<li>aa</li> 　　<li>bb</li> 　　<li>cc</li> </ul> 定义列表： <dl> 　　<dt>hi</dt> 　　<dd>i am yf</dd> </dl> 水平定义列表：列表水平显示 <dl class="dl-horizontal"> 　　<dt>hi</dt> 　　<dd>i am yf</dd> </dl>
代码：<code>、<kbd>、<pre>	要对<code>&lt;body&gt; &lt;/body&gt;</code>进行设置。  <!--单行内联代码--> <pre>&lt;body&gt; &lt;/body&gt;</pre>  <!--多行代码-->
表格	基础样式： <table class="table"> 　　<thead> 　　　　<tr> 　　　　　　<th class="table_name">名称</th> 　　　　　　<th>城市</th> 　　　　</tr> 　　</thead> 　　<tbody> 　　　　<tr> 　　　　　　<td>Tanmay</td> 　　　　　　<td>Bangalore</td> 　　　　</tr> 　　</tbody> </table> 隔行加背景： <table class="table table-striped"> </table> 带边框的表格： <table class="table table-bordered"> </table> 响应式表格： <div class="table-responsive"> 　　<table class="table table-bordered"> 　　</table> </div>
表单	基础样式： <form> 　　<fieldset> 　　　　<legend>用户登录</legend> 　　　　<div class="form-group"> 　　　　　　<label>登录账户</label> 　　　　　　<input type="email" class="form-control" placeholder="请输入你的用户名或email" /> 　　　　</div> 　　　　<div class="form-group"> 　　　　　　<label>密码</label> 　　　　　　<input type="password" class="form-control" placeholder="请输入你的密码" /> 　　　　</div> 　　　　<div class="checkbox"> 　　　　　　<label><input type="checkbox" />记住密码</label> 　　　　</div> 　　　　<button type="submit" class="btn btn-default">登录</button> 　　</fieldset> </form> 内联表单： <form class="form-inline"> </form> 横向表单：使用.form-horizontal和bootstrapt预置的栅格类 <form class="form-horizontal"> 　　<fieldset> 　　　　<legend>用户登录</legend> 　　　　<div class="form-group"> 　　　　　　<label for="account" class="col-sm-2 control-label">登录账户</label> 　　　　　　<div class="col-sm-10"> 　　　　　　　　<input type="email" class="form-control" placeholder="请输入你的用户名或email" /> 　　　　　　</div> 　　　　</div> 　　　　<div class="form-group"> 　　　　　　<label for="password" class="col-sm-2 control-label">密码</label> 　　　　　　<div class="col-sm-10"> 　　　　　　　　<input type="password" class="form-control" placeholder="请输入你的密码" /> 　　　　　　</div> 　　　　</div> 　　　　<button type="submit" class="btn btn-default">登录</button> 　　</fieldset> </form>