加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Bootstrap 表格

发布时间：2020-12-17 21:04:48 所属栏目：安全 来源：网络整理
导读：[html] view plain copy pre ? code_snippet_id = "316343" ? snippet_file_name = "blog_20140428_1_5629365" ? name = "code" ? class = "html" / pre !DOCTYPE?html br ?? html br ?? ?? head br ?? ???? title Bootstrap?表格 / title br ?? ???? meta ?


[html] view plain copy

在CODE上查看代码片

派生到我的代码片

  1. <pre?code_snippet_id="316343"?snippet_file_name="blog_20140428_1_5629365"?name="code"?class="html"></pre><!DOCTYPE?html><br>??
  2. <html><br>??
  3. ??<head><br>??
  4. ????<title>Bootstrap?表格</title><br>??
  5. ????<meta?charset="utf-8"><br>??
  6. ????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0"><br>??
  7. ????<!--?Bootstrap?--><br>??
  8. ????<link?href="bootstrap/css/bootstrap.css"?rel="stylesheet"?media="screen"><br>??
  9. ????<link?href="bootstrap/css/bootstrap-responsive.css"?rel="stylesheet"?media="screen"><br>??
  10. ????<script?src="bootstrap/js/jquery.js"></script><br>??
  11. ????<script?src="bootstrap/js/bootstrap.min.js"></script><br>??
  12. ??</head><br>??
  13. ??<body?style="padding:50px;"><br>??
  14. ??<h3>基本的表格</h3><br>??
  15. ??<p>使用方法：在table后面添加.table的类即可</p><br>??
  16. ??<table?class="table"><br>??
  17. ????????<thead><br>??
  18. ??????????<tr><br>??
  19. ????????????<th>Student-ID</th><br>??
  20. ????????????<th>First?Name</th><br>??
  21. ????????????<th>Last?Name</th><br>??
  22. ????????????<th>Grade</th><br>??
  23. ??????????</tr><br>??
  24. ????????</thead><br>??
  25. ????????<tbody><br>??
  26. ??????????<tr><br>??
  27. ????????????<td>001</td><br>??
  28. ????????????<td>Rammohan?</td><br>??
  29. ????????????<td>Reddy</td><br>??
  30. ????????????<td>A+</td><br>??
  31. ??????????</tr><br>??
  32. ??????????<tr><br>??
  33. ????????????<td>002</td><br>??
  34. ????????????<td>Smita</td><br>??
  35. ????????????<td>Pallod</td><br>??
  36. ????????????<td>A</td><br>??
  37. ??????????</tr><br>??
  38. ??????????<tr><br>??
  39. ????????????<td>003</td><br>??
  40. ????????????<td>Rabindranath</td><br>??
  41. ????????????<td>Sen</td><br>??
  42. ????????????<td>A+</td><br>??
  43. ??????????</tr><br>??
  44. ????????</tbody><br>??
  45. ??????</table><br>??
  46. ??????<br><hr><br>??
  47. ???????<h3>带条纹背景的表格</h3><br>??
  48. ??<span?style="white-space:pre"></span>??<p>使用方法：在table后面添加.table?和table-striped的类即可</p><br>??
  49. ??????<table?class="table?table-striped"><br>??
  50. ????????<thead><br>??
  51. ??????????<tr><br>??
  52. ????????????<th>Student-ID</th><br>??
  53. ????????????<th>First?Name</th><br>??
  54. ????????????<th>Last?Name</th><br>??
  55. ????????????<th>Grade</th><br>??
  56. ??????????</tr><br>??
  57. ????????</thead><br>??
  58. ????????<tbody><br>??
  59. ??????????<tr><br>??
  60. ????????????<td>001</td><br>??
  61. ????????????<td>Rammohan?</td><br>??
  62. ????????????<td>Reddy</td><br>??
  63. ????????????<td>A+</td><br>??
  64. ??????????</tr><br>??
  65. ??????????<tr><br>??
  66. ????????????<td>002</td><br>??
  67. ????????????<td>Smita</td><br>??
  68. ????????????<td>Pallod</td><br>??
  69. ????????????<td>A</td><br>??
  70. ??????????</tr><br>??
  71. ??????????<tr><br>??
  72. ????????????<td>003</td><br>??
  73. ????????????<td>Rabindranath</td><br>??
  74. ????????????<td>Sen</td><br>??
  75. ????????????<td>A+</td><br>??
  76. ??????????</tr><br>??
  77. ????????</tbody><br>??
  78. ??????</table><br>??
  79. ??????<br><hr><br>??
  80. ??????<h3>带边框的表格</h3><br>??
  81. ??<span?style="white-space:pre"></span>??<p>使用方法：在table后面添加.table?和table-bordered的类即可，会呈现圆角边框的效果,追加一个table-hover的类，会鼠标悬停的行会呈现浅灰色背景</p><br>??
  82. ??????<table?class="table?table-bordered?table-hover"><br>??
  83. ????????<thead><br>??
  84. ??????????<tr><br>??
  85. ????????????<th>Student-ID</th><br>??
  86. ????????????<th>First?Name</th><br>??
  87. ????????????<th>Last?Name</th><br>??
  88. ????????????<th>Grade</th><br>??
  89. ??????????</tr><br>??
  90. ????????</thead><br>??
  91. ????????<tbody><br>??
  92. ??????????<tr><br>??
  93. ????????????<td>001</td><br>??
  94. ????????????<td>Rammohan?</td><br>??
  95. ????????????<td>Reddy</td><br>??
  96. ????????????<td>A+</td><br>??
  97. ??????????</tr><br>??
  98. ??????????<tr><br>??
  99. ????????????<td>002</td><br>??
  100. ????????????<td>Smita</td><br>??
  101. ????????????<td>Pallod</td><br>??
  102. ????????????<td>A</td><br>??
  103. ??????????</tr><br>??
  104. ??????????<tr><br>??
  105. ????????????<td>003</td><br>??
  106. ????????????<td>Rabindranath</td><br>??
  107. ????????????<td>Sen</td><br>??
  108. ????????????<td>A+</td><br>??
  109. ??????????</tr><br>??
  110. ????????</tbody><br>??
  111. ??????</table><br>??
  112. ??????<br><hr><br>??
  113. ??????<h3>紧缩的表格</h3><br>??
  114. ??<span?style="white-space:pre"></span>??<p>使用方法：在table后面添加.table的类，并追加一个table-condensed的类，会减少一半的内边距，以缩紧表格</p><br>??
  115. ??????<table?class="table?table-striped?table-bordered?table-hover?table-condensed"><br>??
  116. ????????<thead><br>??
  117. ??????????<tr><br>??
  118. ????????????<th>Student-ID</th><br>??
  119. ????????????<th>First?Name</th><br>??
  120. ????????????<th>Last?Name</th><br>??
  121. ????????????<th>Grade</th><br>??
  122. ??????????</tr><br>??
  123. ????????</thead><br>??
  124. ????????<tbody><br>??
  125. ??????????<tr><br>??
  126. ????????????<td>001</td><br>??
  127. ????????????<td>Rammohan?</td><br>??
  128. ????????????<td>Reddy</td><br>??
  129. ????????????<td>A+</td><br>??
  130. ??????????</tr><br>??
  131. ??????????<tr><br>??
  132. ????????????<td>002</td><br>??
  133. ????????????<td>Smita</td><br>??
  134. ????????????<td>Pallod</td><br>??
  135. ????????????<td>A</td><br>??
  136. ??????????</tr><br>??
  137. ??????????<tr><br>??
  138. ????????????<td>003</td><br>??
  139. ????????????<td>Rabindranath</td><br>??
  140. ????????????<td>Sen</td><br>??
  141. ????????????<td>A+</td><br>??
  142. ??????????</tr><br>??
  143. ??????????<tr><br>??
  144. ????????????<td>002</td><br>??
  145. ????????????<td>Smita</td><br>??
  146. ????????????<td>Pallod</td><br>??
  147. ????????????<td>A</td><br>??
  148. ??????????</tr><br>??
  149. ????????</tbody><br>??
  150. ??????</table><br>??
  151. ??????<br><hr><br>??
  152. ??????<h3>表格行的类</h3><br>??
  153. ??????<p>表格行（tr）后添加.success[绿]/error[红]/warning[黄]/info[蓝]四种背景色显示</p><br>??
  154. ??????<table?class="table?table-bordered?table-hover"><br>??
  155. ????????<thead><br>??
  156. ??????????<tr><br>??
  157. ????????????<th>Student-ID</th><br>??
  158. ????????????<th>First?Name</th><br>??
  159. ????????????<th>Last?Name</th><br>??
  160. ????????????<th>Grade</th><br>??
  161. ??????????</tr><br>??
  162. ????????</thead><br>??
  163. ????????<tbody><br>??
  164. ??????????<tr?class="success"><br>??
  165. ????????????<td>001</td><br>??
  166. ????????????<td>Rammohan?</td><br>??
  167. ????????????<td>Reddy</td><br>??
  168. ????????????<td>A+</td><br>??
  169. ??????????</tr><br>??
  170. ??????????<tr?class="error"><br>??
  171. ????????????<td>002</td><br>??
  172. ????????????<td>Smita</td><br>??
  173. ????????????<td>Pallod</td><br>??
  174. ????????????<td>A</td><br>??
  175. ??????????</tr><br>??
  176. ??????????<tr?class="warning"><br>??
  177. ????????????<td>003</td><br>??
  178. ????????????<td>Rabindranath</td><br>??
  179. ????????????<td>Sen</td><br>??
  180. ????????????<td>A+</td><br>??
  181. ??????????</tr><br>??
  182. ??????????<tr?class="info"><br>??
  183. ????????????<td>002</td><br>??
  184. ????????????<td>Smita</td><br>??
  185. ????????????<td>Pallod</td><br>??
  186. ????????????<td>A</td><br>??
  187. ??????????</tr><br>??
  188. ????????</tbody><br>??
  189. ??????</table><br>??
  190. ??</body><br>??
  191. </html><pre?code_snippet_id="316343"?snippet_file_name="blog_20140428_1_5629365"?name="code"?class="html"><span?style="font-family:Arial,?Helvetica,?sans-serif;"><span?style="white-space:?normal;">??
  192. </span></span><pre?code_snippet_id="316343"?snippet_file_name="blog_20140428_1_5629365"></pre>??
  193. <pre></pre>??
  194. <pre></pre>??
  195. <pre></pre>??
  196. <pre></pre>??
  197. <pre?code_snippet_id="316343"?snippet_file_name="blog_20140428_1_5629365"?name="code"?class="html">预览图片（缩放50%）：</pre><pre?code_snippet_id="316343"?snippet_file_name="blog_20140428_1_5629365"?name="code"?class="html"><img?src="http://img.blog.csdn.net/20140428114447171?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTE3NTQxMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast"?alt="">??
  198. </pre>??
  199. </pre>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同