Bootstrap學習筆記系列2-------Bootstrap簡單表格處理


標簽

  • <table> 為表格添加基礎樣式
  • <thead> 表格標題行的容器元素,用來識別列
  • <tbody> 表格主提中的表格行的容器元素
  • <tr> 單行的容器元素,用來存放
  • <th> 在中使用,用來存放列名單元格
  • <td> 表數據單元格
  • <caption> 關於表格存儲內容的描述或者總結

應用於表格樣式的類(全部都是在
  • .table 為表格添加基本的樣式(只有橫向的分隔線)
  • .table-striped 形成斑馬紋
  • .table-bordered 為所有的單元格添加邊框
  • .table-hover<tbody>內鼠標懸停會賦予該行不同的顏色
  • .table-condensed 讓表格變得更緊湊

<tr>,<th><td>類樣式

  • .active 將表示懸停的顏色用在目標的行或者單元格上
  • .success 表示成功的操作(綠色)
  • .info 表示信息變化的操作(藍色)
  • .warning 表示一個警告的操作(黃色)
  • .danger表示一個危險的操作(紅色)

響應式表格

通過把任意的.table包括在.table-responsive內,就可以通過水平滾動條來兼容小型的設備(小於768px),在其他類型的設備上看則不會有區別。

<div class= "table-responsive ">
      <table class="table">
            ...
      </table>
</div>
posted @ 2016-11-12 21:47  帆帆帆  閱讀( 2763)  評論( 2編輯  收藏
中添加)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM