bootstrap表格的基本操作

关注

原创最新推荐文章于 2026-03-22 00:51:48 发布 977 阅读 AI 写同款· GEO 优化 ›

Bootstrap Table前端表格插件实战 Bootstrap 是由 Twitter 推出的一款开源前端框架，旨在提升响应式网页与移动优先网站的开发效率。它基于 HTML、CSS 和 JavaScript 构建，提供了一套完整的 UI 组件库和工具类，开发者可以快速搭建美观、响应式的网页界面。其核心优势包括：响应式网格系统：通过栅格布局实现不同设备的自适应显示。丰富的 UI 组件：如按钮、导航栏、模态框、表格等，开箱即用。高度可定制：支持 Sass 变量和 Mixin 自定义主题与样式。跨浏览器兼容性。阅读详情

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>bootstrap表格的基本操作</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.3.1.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped table-bordered table-hover">
                <caption class="h3 text-center">学生信息表</caption>
                <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="active">
                        <td>01</td>
                        <td>Sam</td>
                        <td>男</td>
                        <td>29</td>
                    </tr>
                    <tr class="danger">
                        <td>02</td>
                        <td>Xiong</td>
                        <td>男</td>
                        <td>29</td>
                    </tr>
                    <tr class="info">
                        <td>03</td>
                        <td>大宝</td>
                        <td>女</td>
                        <td>20</td>
                    </tr>
                    <tr class="success">
                        <td>04</td>
                        <td>二宝</td>
                        <td>女</td>
                        <td>18</td>
                    </tr>
                    <tr class="warning">
                        <td>05</td>
                        <td>三宝</td>
                        <td>男</td>
                        <td>16</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>

更多的表格操作可看下：https://v3.bootcss.com/css/#tables

收录于