Bootstrap笔记(十一) 表格篇

最新推荐文章于 2023-07-25 15:40:01 发布

XI_MILU

最新推荐文章于 2023-07-25 15:40:01 发布

阅读量668

点赞数

分类专栏： Bootstrap 文章标签： bootstrap html html5 前端

本文链接：https://blog.csdn.net/XI_MILU/article/details/120084041

版权

Bootstrap 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

表格篇

表格样式与效果

Bootstrap提供以下类别用来设定表格样式与效果:

表格样式与效果

範例1: 表格与标题

使用 .table 类别，自动套用Bootstrap提供的表格样式，包括宽度、高度、框线、背景色彩、储存格间距等。
使用 .caption-top 类别，使标题显示在表格上方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>表格與表格標題</title>
</head>
<body>
    <div class="container">
        <table class="table caption-top">
        	<!-- 表格标题 -->
            <caption>菜單</caption>
            <!-- 表格标题列 -->
            <thead>
                <tr>
                    <th>編號</th>
                    <th>姓名</th>
                </tr>
            </thead>
            <!-- 表格主体(主要内容) -->
            <tbody>
                <tr>
                    <td>01</td>
                    <td>牛排</td>
                </tr>
                <tr>
                    <td>02</td>
                    <td>雞排</td>
                </tr>
                <tr>
                    <td>03</td>
                    <td>豬排</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

表格与标题
範例2: 交替色彩

只需要在<table>元素中加入 .table 和 .table-striped 类别即可实现。

<table class="table caption-top table-striped">

交替色彩

範例3: 显示表格与储存格框线

只需要在<table>元素中加入 .table 和 .table-bordered 类别即可实现。

<table class="table caption-top table-bordered">

显示表格与储存格框线

範例4: 取消表格与储存格框线

只需要在<table>元素中加入 .table 和 .table-borderless 类别即可实现。

<table class="table caption-top table-borderless">

取消表格与储存格框线

範例5: 游标移过表格主体时显示变色的效果

只需要在<table>元素中加入 .table 和 .table-hover 类别即可实现。

<table class="table caption-top table-hover">

游标移过表格主体时显示变色的效果

範例6: 表格的列或储存格显示反白效果

在表格元素中加入 .table-active 类别即可实现。

<td class="table-active">牛排</td>

反白效果

範例7: 储存格紧缩

只需要在<table>元素中加入 .table 和 .table-sm 类别即可实现。

<table class="table caption-top table-sm">

储存格紧缩

表格内容的垂直对齐方式

若要设定表格的列或储存格的垂直对齐方式，可以在该列或储存格加上以下类别。

範例: 表格内容垂直对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>表格內容的垂直對齊方式</title>
</head>
<body>
    <div class="container">
        <table class="table table-sm">
            <tr>
                <td><img src="https://picsum.photos/200/200/?random=1"></td>
                <td class="align-top">靠上</td>
            </tr>
            <tr>
                <td><img src="https://picsum.photos/200/200/?random=2"></td>
                <td class="align-middle">置中</td>
            </tr>
            <tr>
                <td><img src="https://picsum.photos/200/200/?random=3"></td>
                <td class="align-bottom">靠下</td>
            </tr>
        </table>
    </div>
</body>
</html>

垂直对齐方式

特定意义色彩类别

可以为表格、列、储存格设定不同色彩以表示不同的意义。

範例:色彩类别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>特定意義色彩</title>
</head>
<body>
    <table class="table">
        <tr class="table-primary"><td>table-primary</td></tr>
        <tr class="table-secondary"><td>table-secondary</td></tr>
        <tr class="table-success"><td>table-success</td></tr>
        <tr class="table-danger"><td>table-danger</td></tr>
        <tr class="table-warning"><td>table-warning</td></tr>
        <tr class="table-info"><td>table-info</td></tr>
        <tr class="table-light"><td>table-light</td></tr>
        <tr class="table-dark"><td>table-dark</td></tr>
    </table>
</body>
</html>

色彩类别

响应式表格

响应式表格可以随着刘览器的宽度调整表格。只要在放置<table>元素的容器加上 .table-responsive 类别即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>響應式表格</title>
</head>
<body>
	<!-- 在容器加上 .table-responsive 类别 -->
    <div class="container table-responsive">
        <table class="table">
            <tr>
                <th>編號</th>
                <th>姓名</th>
            </tr>
            <tr>
                <td>01</td>
                <td>小丸子 (個性無厘頭、樂觀的小女孩)</td>
            </tr>
            <tr>
                <td>02</td>
                <td>小玉 (小丸子的好朋友、個性文靜善良)</td>
            </tr>
        </table>
    </div>
</body>
</html>