bootstrap学习笔记细化(表格)

最新推荐文章于 2024-06-14 15:02:13 发布

donggu5275

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量120

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/linjiaxiaomeiainia/p/7018874.html

版权

主要属性：
　　全屏宽度带水平线的表格　　.table

　　带边框的表格　　　　　　　.table-bordered
　　条纹状表格　　　　　　　　.table-striped
　　悬停变色表格　　　　　　　.table-hover
　　紧凑风格表格　　　　　　　.table-condensed

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        
        <table class="table" table-striped table-hover>
            
            <thead>
                <tr class="danger">
                    <th>标题一</th>
                    <th>标题二</th>
                    <th>标题三</th>
                    <th>标题四</th>
                    <th>标题五</th>
                </tr>
            </thead>
            <tbody>
                <tr class="warning">
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                    <td>内容五</td>
                </tr>
                <tr class="success">
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                    <td>内容五</td>
                </tr>
                <tr class="active">
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                    <td>内容五</td>
                </tr>
            </tbody>
        </table>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript" src="js/bootstrap.min.js" ></script>
    </body>
</html>

源码

效果图片：

转载于:https://www.cnblogs.com/linjiaxiaomeiainia/p/7018874.html

donggu5275

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap学习笔记细化(表格)

主要属性：　　全屏宽度带水平线的表格　　.table　　带边框的表格　　　　　　　.table-bordered　　条纹状表格　　　　　　　　.table-striped　　悬停变色表格　　　　　　　.table-hover　　紧凑风格表格　　　　　　　.table-condensed<!DOCTYPE html><html lang="...
复制链接

扫一扫