首页 > Web开发 > 详细

HTML-基于bootstrap的table表格

时间:2019-07-28 18:32:23      阅读:83      评论:0      收藏:0      [点我收藏+]
<table class="table table-bordered table-hover table-striped">//表格
        <thead>    //表头
            <tr>  //表头---行
                <th>Id</th>   //表头--头部单元格
                <th>Name</th>
                <th>Ctime</th>
                <th>Operation</th>
            </tr>
        </thead>
        <tbody>   //表体
            <tr v-for="item in search(keywords)" v-bind:key="item.id">    //表数据---行
                <td>{{item.id}}</td>   //每行的 数据单元格
                <td v-text="item.name"></td>
                <td>{{item.ctime}}</td>
                <td>
                    <a href="" v-on:click.prevent="del(item.id)">删除</a>
                </td>
            </tr>
        </tbody>
    </table>

  技术分享图片

<table class="table table-bordered table-hover table-striped">:基于bootstrap的表格,类有基础样式.table,4种附加样式(.table-bordered带边框的表格、
.table-striped带背景条纹的表格、.table-hover鼠标悬停高亮的表格、.table-condensed紧凑型表格),以及支持响应式布局的.table-responsive的容器样式。

 

HTML-基于bootstrap的table表格

原文:https://www.cnblogs.com/minyDong/p/11260255.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!