.class 基本表格
<!doctype html><html lang="en"><head> <meta chart="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>
.table-striped 条纹表格
<!doctype html><html lang="en"><head> <meta chart="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>
.table-bordered 带边框的表格
<!doctype html><html lang="en"><head> <meta chart="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>
.table-hover 带鼠标悬停效果的表格
<!doctype html><html lang="en"><head> <meta chart="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>
.table-tark 黑色背景表格
<!doctype html><html lang="en"><head> <meta chart="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>
.table-derk .table-striped 黑色条纹表格
<!doctype html><html lang="en"><head> <meta chart="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@ex本三分数线ample.com</td> </tr> <tr> <td>july</td> <td>dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> </div> </div></body></html>
.table-dark .table-hover 带鼠标悬停效果的黑色表格
<!doctype html><html lang="en"><head> <meta chart="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"></scrip地理怎么才能学好t></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> <t感动中国十大人物2012d>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>
指定意义的颜色类
<!doctype html><html lang="en"><head> <meta chart="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-condary"> <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>
.table-sm 较小的表格
<!doctype html><html lang="en"><head> <meta chart="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.抗日14年为什么说8年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-condary"> <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-condary"> <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>
.table-responsive 响应式表格
<!doctype html><html lang="en"><head> <meta chart="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-condary"> <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>
本文发布于:2023-04-03 18:09:26，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/ba5b1e2b22aaea8cb2257d38b240e505.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：Bootstrap4 表格练习.doc
本文 PDF 下载地址：Bootstrap4 表格练习.pdf
| 留言与评论（共有 0 条评论） |
