欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Bootstrap4 表格练习

程序员文章站 2022-06-28 18:29:40
.class 基本表格 demo1

.class 基本表格

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12" style="background:lavender;">
                <table class="table">
                    <thead>
                      <tr>
                        <th>firstname</th>
                        <th>lastname</th>
                        <th>email</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>john</td>
                        <td>doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr>
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr>
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Bootstrap4 表格练习

 

 

.table-striped 条纹表格

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12" style="background:lavender;">
                <table class="table table-striped">
                    <thead>
                      <tr>
                        <th>firstname</th>
                        <th>lastname</th>
                        <th>email</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>john</td>
                        <td>doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr>
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr>
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Bootstrap4 表格练习

 

 

.table-bordered 带边框的表格

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12" style="background:lavender;">
                <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th>firstname</th>
                        <th>lastname</th>
                        <th>email</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>john</td>
                        <td>doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr>
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr>
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Bootstrap4 表格练习

 

 

.table-hover 带鼠标悬停效果的表格

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12" style="background:lavender;">
                <table class="table table-hover">
                    <thead>
                      <tr>
                        <th>firstname</th>
                        <th>lastname</th>
                        <th>email</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>john</td>
                        <td>doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr>
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr>
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Bootstrap4 表格练习

 

 

.table-tark 黑色背景表格

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12" style="background:lavender;">
                <table class="table table-dark">
                    <thead>
                      <tr>
                        <th>firstname</th>
                        <th>lastname</th>
                        <th>email</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>john</td>
                        <td>doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr>
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr>
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Bootstrap4 表格练习

 

 

.table-derk   .table-striped 黑色条纹表格

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12" style="background:lavender;">
                <table class="table table-dark table-striped">
                    <thead>
                      <tr>
                        <th>firstname</th>
                        <th>lastname</th>
                        <th>email</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>john</td>
                        <td>doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr>
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr>
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Bootstrap4 表格练习

 

 

.table-dark   .table-hover  带鼠标悬停效果的黑色表格

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12" style="background:lavender;">
                <table class="table table-dark table-hover">
                    <thead>
                      <tr>
                        <th>firstname</th>
                        <th>lastname</th>
                        <th>email</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>john</td>
                        <td>doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr>
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr>
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Bootstrap4 表格练习

 

 

指定意义的颜色类

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12" style="background:lavender;">
                <table class="table">
                    <thead>
                      <tr class="table-info">
                        <th>firstname</th>
                        <th>lastname</th>
                        <th>email</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="table-primary">
                        <td>john</td>
                        <td>doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr class="table-success">
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr class="table-warning">
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                      <tr class="table-danger">
                        <td>john</td>
                        <td>doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr class="table-active">
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr class="table-secondary">
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                      <tr class="table-light">
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr class="table-dark">
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Bootstrap4 表格练习

 

 

.table-sm 较小的表格

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12" style="background:lavender;">
                <table class="table">
                    <thead>
                      <tr class="table-info">
                        <th>firstname</th>
                        <th>lastname</th>
                        <th>email</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="table-primary">
                        <td>john</td>
                        <td>doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr class="table-success">
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr class="table-warning">
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                      <tr class="table-danger">
                        <td>john</td>
                        <td>doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr class="table-active">
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr class="table-secondary">
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                      <tr class="table-light">
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr class="table-dark">
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                    </tbody>
                </table>

                <table class="table table-sm">
                    <thead>
                      <tr class="table-info">
                        <th>firstname</th>
                        <th>lastname</th>
                        <th>email</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="table-primary">
                        <td>john</td>
                        <td>doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr class="table-success">
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr class="table-warning">
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                      <tr class="table-danger">
                        <td>john</td>
                        <td>doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr class="table-active">
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr class="table-secondary">
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                      <tr class="table-light">
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr class="table-dark">
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Bootstrap4 表格练习

 

 

.table-responsive 响应式表格

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-4" style="background:lavender;">
                <table class="table table-responsive">
                    <thead>
                      <tr class="table-info">
                        <th>firstname</th>
                        <th>lastname</th>
                        <th>email</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="table-primary">
                        <td>john</td>
                        <td>doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr class="table-success">
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr class="table-warning">
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                      <tr class="table-danger">
                        <td>john</td>
                        <td>doe</td>
                        <td>john@example.com</td>
                      </tr>
                      <tr class="table-active">
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr class="table-secondary">
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                      <tr class="table-light">
                        <td>mary</td>
                        <td>moe</td>
                        <td>mary@example.com</td>
                      </tr>
                      <tr class="table-dark">
                        <td>july</td>
                        <td>dooley</td>
                        <td>july@example.com</td>
                      </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Bootstrap4 表格练习