|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 bootstrap框架因為其使用方便,布局美觀,且可以進行響應式布局,所以被廣泛使用,這篇文章用bootstrap table實例和大家講講bootstrap中table的使用方法,以及table的相關樣式,有一定的參考價值,感興趣的朋友可以參考一下。在使用bootstrap框架布局前,一定要先引入相關的jQuery,CSS,JS文件,不清楚的小伙伴可以看看我以前寫文章,如何在HTML頁面中使用bootstrap框架,或者參考Bootstrap視頻教程。 一、基本表格 基本布局完成以后,給<table>標簽添加class類名 .table 就可以實現基本的表格樣式(少量的內補(padding)和水平方向的分隔線)。 bootstrap table實例:制作一個六行四列的表格用于統計學生信息,具體代碼如下: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table class="table" style="width: 800px;" >
<thead>
<tr><th>學號</th><th>姓名</th><th>年齡</th><th>地址</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
<tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
<tr><td>3</td><td>楊容</td><td>24</td><td>江西</td></tr>
<tr><td>4</td><td>許悅</td><td>21</td><td>浙江</td></tr>
<tr><td>5</td><td>張柏芝</td><td>22</td><td>新疆</td></tr>
</tbody>
</table>
</body>
</html>效果圖:
二、條紋狀表格 在基本表格的基礎上,給<table>標簽添加class類名 .table-striped 就可以給 <tbody> 之內的每一行增加斑馬條紋樣式。 <table class="table table-striped " style="width: 800px;" > 效果如圖所示:
三、帶邊框的表格 在<table>標簽中,添加class類名.table-bordered 就可以為表格和其中的每個單元格增加邊框。 <table class="table table-bordered " style="width: 800px;" > 效果如圖所示:
四、鼠標懸停表格 在<table>標簽中,添加class類名 .table-hover 就可以讓 <tbody> 中的每一行對鼠標懸停狀態作出響應。當鼠標經過第一行時,第一行的背景顏色變成了灰色。 <table class="table table-hover " style="width: 800px;" > 效果如圖所示:
五、緊縮表格 在<table>標簽中,添加class類名 .table-condensed 可以讓表格變得更加緊湊,單元格中的內補(padding)均會減半。 <table class="table table-condensed " style="width: 800px;" > 對比上面的圖片,看看緊縮表格的效果:
六、響應式表格 將含有class類名 .table 的元素包裹在含有類名 .table-responsive 的元素里面,就可以創建響應式表格,當屏幕小于768px時,水平滾動,當屏幕大于 768px 寬度時,水平滾動條消失。 <table class="table" >
<thead>
<tr><th>學號</th><th>姓名</th><th>年齡</th><th>地址</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
<tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
<tr><td>3</td><td>楊容</td><td>24</td><td>江西</td></tr>
<tr><td>4</td><td>許悅</td><td>21</td><td>浙江</td></tr>
<tr><td>5</td><td>張柏芝</td><td>22</td><td>新疆</td></tr>
<tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
<tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
<tr><td>3</td><td>楊容</td><td>24</td><td>江西</td></tr>
<tr><td>4</td><td>許悅</td><td>21</td><td>浙江</td></tr>
<tr><td>5</td><td>張柏芝</td><td>22</td><td>新疆</td></tr>
</tbody>
</table>效果如圖所示:
以上用bootstrap table實例介紹了表格table的使用方法和相關的樣式,比較簡單,如有不清楚的可以訪問bootstrap框架官網:http://v3.bootcss.com,希望這篇文章對你有所幫助!更多相關教程請訪問Bootstrap在線手冊 以上就是圖文詳解bootstrap框架中table的使用方法和相關樣式的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!