[研究]Bootstrap Table (表格)

[研究]Bootstrap Table (表格)

2021-07-17

Bootstrap 4 Tables
https://www.w3schools.com/bootstrap4/bootstrap_tables.asp

Tables · Bootstrap
https://getbootstrap.com/docs/4.1/content/tables/

Bootstrap 表格 | 菜鸟教程
https://www.runoob.com/bootstrap/bootstrap-tables.html

表格 (Tables) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
https://bootstrap5.hexschool.com/docs/5.0/content/tables/

Official CDN of Bootstrap and Font Awesome · BootstrapCDN
https://www.bootstrapcdn.com/

table-striped 桌紋
table-bordered 桌邊
table-hover 桌面懸停
table-responsive 表響應式

使用範例

<table class="table table-striped table-bordered table-hover table-responsive" cellspacing="0" rules="all" border="1" width="50%" style="border-collapse: collapse;">

<asp:GridView ID="GridView1" runat="server" CssClass="table table-striped table-bordered table-hover table-responsive" >

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> <table class="table table-striped table-bordered table-hover table-responsive"> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table>

(完)