bootstrap入门【表格】

最新推荐文章于 2023-05-08 17:53:24 发布

小章鱼哥

最新推荐文章于 2023-05-08 17:53:24 发布

阅读量507

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/u014787301/article/details/43983599

javascript 专栏收录该内容

107 篇文章

订阅专栏

本文介绍如何利用Bootstrap框架来美化HTML表格的样式，并实现响应式布局。通过不同的类设置表格样式，如斑马线效果、边框样式、鼠标悬停高亮等。同时展示了如何为表格单元格设置不同颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<link href="bootstrap.min.css" rel="stylesheet">  导入bootstrap的外部样式表

<thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
</thead>      表头

<tbody>
    <tr class="info">
        <th>表格单元格</th>
        <th>表格单元格</th>
        <th>表格单元格</th>
    </tr>
</tbody>      表格内容

table-striped  斑马线
table-bordered   边框
table-hover     鼠标响应
table-condensed   浓缩布局
table-responsive   在div中，响应式布局


单元格颜色：class="info"   蓝色class="danger"  红色
class-="warning"  黄色
class="active"  选中
class="success"  绿色


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="table-responsive">
        <!--<table class="table table-striped table-bordered table-hover table-condensed">-->
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>表格标题</th>
                    <th>表格标题</th>
                    <th>表格标题</th>
                </tr>
            </thead>
            <tbody>
                <tr class="info">
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                </tr>
                <tr class="danger">
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                </tr>
                <tr class-="warning">
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                </tr>
                <tr class="active">
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                </tr>
                <tr class="success">
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>