tnblog
首页
视频
资源
登录

bootstrap表格样式

8973人阅读 2020/7/1 10:32 总访问:434271 评论:1 收藏:0 手机
分类: 前端


1、table-striped:斑马线表格


2、table-bordered:带边框的表格


3、table-hover:鼠标悬停高亮的表格

前面三种组合在一起大概的代码如下:

  1. <table class="table table-striped table-bordered table-hover">
  2.     <thead>
  3.     <tr>
  4.         <th>Student-ID</th>
  5.         <th>First Name</th>
  6.         <th>Last Name</th>
  7.         <th>Grade</th>
  8.     </tr>
  9.     </thead>
  10.     <tbody>
  11.     <tr>
  12.         <td>001</td>
  13.         <td>Rammohan </td>
  14.         <td>Reddy</td>
  15.         <td>A+</td>
  16.     </tr>
  17.     <tr>
  18.         <td>002</td>
  19.         <td>Smita</td>
  20.         <td>Pallod</td>
  21.         <td>A</td>
  22.     </tr>
  23.     <tr>
  24.         <td>003</td>
  25.         <td>Rabindranath</td>
  26.         <td>Sen</td>
  27.         <td>A+</td>
  28.     </tr>
  29.     </tbody>
  30. </table>



4、table-condensed:紧凑型表格(单元格的内距由8px调至5px。)

也就是现实更紧凑一点了




5、table-responsive:响应式表格(当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失)





评价

只若初见

2020/7/1 16:31:37

哇哦!

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一个不错的树形组件

先看看效果嘛,还是有点乖的,功能也算是比较强大,支持右键菜单,支持随意拖动。哈哈哈长得好看,还有内涵html:其实除了引...
吃亏决不亏,惜福才有福
排名
12
文章
74
粉丝
4
评论
15
ASP.NET中webform中的几个生命周期函数
修心 : 什么周期除了这些还有什么呢
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术