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>

一、事件綁定：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');//禁用點擊事件

二、$.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))

三、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>