收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

bootstrap表格样式

6867人阅读 2020/8/14 14:50 总访问：5194032 评论：0 收藏：0 手机
分类: CSS

bootstrap3中的写法：

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. 	<meta charset="utf-8">

  5. 	<title>Bootstrap 实例 - 上下文类</title>

  6. 	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  

  7. 	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

  8. 	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  9. </head>

  10. <body>

  11. 

  12. <table class="table">

  13. 	<caption>上下文表格布局</caption>

  14. 	<thead>

  15. 		<tr>

  16. 			<th>产品</th>

  17. 			<th>付款日期</th>

  18. 			<th>状态</th>

  19. 		</tr>

  20. 	</thead>

  21. 	<tbody>

  22. 		<tr class="active">

  23. 			<td>产品1</td>

  24. 			<td>23/11/2013</td>

  25. 			<td>待发货</td>

  26. 		</tr>

  27. 		<tr class="success">

  28. 			<td>产品2</td>

  29. 			<td>10/11/2013</td>

  30. 			<td>发货中</td>

  31. 		</tr>

  32. 		<tr  class="warning">

  33. 			<td>产品3</td>

  34. 			<td>20/10/2013</td>

  35. 			<td>待确认</td>

  36. 		</tr>

  37. 		<tr  class="danger">

  38. 			<td>产品4</td>

  39. 			<td>20/10/2013</td>

  40. 			<td>已退货</td>

  41. 		</tr>

  42. 	</tbody>

  43. </table>

  44. 

  45. </body>

  46. </html>

效果：




bootstrap4中的写法：

  1. <table class="table">

  2.     <thead>

  3.         <tr>

  4.             <th>产品</th>

  5.             <th>付款日期</th>

  6.             <th>状态</th>

  7.         </tr>

  8.     </thead>

  9.     <tbody>

  10.         <tr class="table-active">

  11.             <td>产品1</td>

  12.             <td>23/11/2013</td>

  13.             <td>待发货</td>

  14.         </tr>

  15.         <tr class="table-success">

  16.             <td>产品2</td>

  17.             <td>10/11/2013</td>

  18.             <td>发货中</td>

  19.         </tr>

  20.         <tr class="table-warning">

  21.             <td>产品3</td>

  22.             <td>20/10/2013</td>

  23.             <td>待确认</td>

  24.         </tr>

  25.         <tr class="table-danger">

  26.             <td>产品4</td>

  27.             <td>20/10/2013</td>

  28.             <td>已退货</td>

  29.         </tr>

  30.     </tbody>

  31. </table>


效果：



颜色会深一些，如果想要保持bootstrap3中的写法可以自己写一下样式：

  1. .table-active {

  2.     background-color: #f5f5f5;

  3. }

  4. 

  5. .table-active>td {

  6.     background-color: #f5f5f5;

  7.     border-color: #f5f5f5

  8. }

  9. 

  10. .table-success>td {

  11.     background-color: #dff0d8;

  12.     border-color: #dff0d8

  13. }

  14. 

  15. .table-success {

  16.     background-color: #dff0d8

  17. }

  18. 

  19. .table-warning>td {

  20.     background-color: #fcf8e3;

  21.     border-color: #fcf8e3

  22. }

  23. 

  24. .table-warning {

  25.     background-color: #fcf8e3

  26. }

  27. 

  28. .table-danger>td {

  29.     background-color: #f2dede;

  30.     border-color: #f2dede

  31. }

  32. 

  33. .table-danger {

  34.     background-color: #f2dede

  35. }


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

bootstrap单选框重叠问题
从bootstrap模板中复制出来就有两个重叠的现象 看源码是生成了两次 重复生成了,所以boostrap那个模板中页面也...

bootstrap文字居中问题
静态页上面的效果是这样的可以看到文字和左边的下拉列表是居中的但是如果你直接复制过去可能就是这样的了我们来看看静态页...

bootstrap动态生成的单选框复选框等无法点击选中的问题
bootstrap的单选框、复选框是要经过渲染的，然后才显示出来的经过渲染的是这样的没有经过渲染的就是最原始的样子所以它的选...

bootstrap 栅格布局一小例子
效果很简单，就是显示一个头像与一个名字html：&lt;divclass=&quot;col-md-12&quot;style=&quot;margin-top:20px&quot;&gt;...

bootstrap内容灰白背景
其实就是page-container-bg-solid 样式加上右边内容就有灰色的背景效果如下如果不加就是全白的背景、如果需要根据不同的内...

bootstrap分页条样式
其实就是一个pagination即可&lt;divclass=&quot;dataTables_paginatepagination&quot;&gt; &lt;ulid=&quot;pagination&quo...

bootstrap模板 form的一点布局用法
bootstrap form的布局可以在form stuff里边看到,我们就复制form layouts里边的吧复制这里的我们实现一个简单的资源上传的页...

ASP.NET MVC + WebUploader+bootstrap实现文件上传进度条显示
引入需要的资源文件：&lt;scriptsrc=&quot;~/Content/jquery-1.9.1.min.js&quot;&gt;&lt;/script&gt; &lt;linkhref=&quot;...

bootstrap中的dataTables
就是这种直接支持页面分页，排序，搜索什么的注意需要相关的js和样式然后js把表格变成dataTable就可以了Bootstrap模板中使...

bootstrap 勾选不需要的列并记住状态
最近有个需求是要求记住这些没打勾的列因为不需要展示本来想建表去做一个状态选择，但是太麻烦了，会出现加载过慢的情况，...

bootstrap实现一个简单的图书显示
效果如下：代码：代码：&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;/&gt; &lt...

bootstrap cdn地址
https://www.bootcdn.cn/simple-line-icons

bootstrap metronic模板中的一些页面固定菜单等
这个可以看到上边的一点菜单这种效果还是可以这个可以让左边的菜单支持滚动，但是好像效果并不是很好一样要实现整个菜单固...

bootstrap div垂直居中
code:&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;UTF-8&quot;&gt; &lt;metaname=&quot;vi...

bootstrap表格样式
1、table-striped：斑马线表格2、table-bordered：带边框的表格3、table-hover：鼠标悬停高亮的表格前面三种组合在一起大概...

bootstrap一个不错的树形组件
先看看效果嘛，还是有点乖的，功能也算是比较强大，支持右键菜单，支持随意拖动。哈哈哈长得好看，还有内涵html:其实除了引...