【前端开发】bootstrap框架：表格

一殊酒

已于 2023-10-04 00:37:27 修改

阅读量591

点赞数

分类专栏：前端开发文档解析文章标签： bootstrap 前端 html

于 2021-06-18 08:20:16 首次发布

本文链接：https://blog.csdn.net/weixin_48348920/article/details/118002891

版权

文档解析同时被 2 个专栏收录

87 篇文章 1 订阅

订阅专栏

前端开发

55 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <h2>表格</h2>
        <p>.table为任意'table'添加基本样式 (只有横向分隔线)</p>
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Firstname</th>
                </tr>
            </thead>
            <tbody>
                <tr class="success">
                    <td>1</td>
                    <td>.success表示成功的操作</td>
                </tr>
            </tbody>
        </table>

        <p>.table-hover在'tbody'内的任一行启用鼠标悬停状态</p>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Firstname</th>
                </tr>
            </thead>
            <tbody>
                <tr class="active">
                    <td>1</td>
                    <td>.active将悬停的颜色应用在行或者单元格上</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Debbie</td>
                </tr>
            </tbody>
        </table>

        <p>.table-bordered为所有表格的单元格添加边框</p>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Firstname</th>
                </tr>
            </thead>
            <tbody>
                <tr class="info">
                    <td>1</td>
                    <td>.info表示信息变化的操作</td>
                </tr>
            </tbody>
        </table>

        <p>.table-condensed让表格更加紧凑</p>
        <table class="table table-condensed">
            <thead>
                <tr class="info">
                    <th>#</th>
                    <th>Firstname</th>
                </tr>
            </thead>
            <tbody>
                <tr class="warning">
                    <td>1</td>
                    <td>.warning表示一个警告的操作</td>
                </tr>
                <tr class="danger" r>
                    <td>3</td>
                    <td>.danger表示一个危险的操作</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

在这里插入图片描述

一殊酒

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【前端开发】bootstrap框架：表格

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://cdn.staticfile.
复制链接

扫一扫

专栏目录