bootstrap表格作业

最新推荐文章于 2022-04-21 13:06:50 发布

原创最新推荐文章于 2022-04-21 13:06:50 发布 · 698 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#homework

homework 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何利用Bootstrap框架来构建响应式的表格，包括基本表格结构、行与列的样式设置、表格操作及其实现作业中的应用案例。通过实例解析，帮助读者掌握Bootstrap表格的制作技巧。

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8" />
    <title>登录</title>
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"/>
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="./bootstrap-3.3.7-dist/js/jquery-3.4.1.min.js"></script>
    <style>
        .login
        {
            margin-top: 100px;
            margin-left: auto;
            margin-right: auto;
            height: 350px;
            width: 500px;
            padding: 5%;
            padding-left: 5%;
            padding-right: 5%;
        }
        .login signal
        {
            width: 440px;
        }
        .login input, checkbox, button
        {
            margin-top: 2%;
            margin-left: 10%;
            margin-right: 10%;
        }
        .mycheckbox
        {
            margin-top: 10px;
            margin-left: 40px;
            margin-bottom: 10px;
            height: 10px;
        }

    </style>
</head>
<body>
<form id="from">
    <div class="login">
        <div class="signal">
            <div class="col-md-12 text-center text-info">
                <h1>登录页面</h1>
            </div>
            <div class="col-md-10">
                <input type="text" class="form-control" name="username" placeholder="请输入账户名" required
                       autofocus />
            </div>
            <div class="col-md-10">
            </div>
            <div class="col-md-10">
                <input type="password" class="form-control" name="password" placeholder="请输入密码" required
                       autofocus />
            </div>
            <div class="col-md-10">
            </div>
            <div class="col-md-10">
            </div>
            <div class="col-md-10">
                <button type="button" id="btn" class="btn btn-success col-md-12">
                    登录</button>
            </div>
        </div>
    </div>
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理页面</title>
    <script src="./bootstrap-3.3.7-dist/js/jquery-3.4.1.min.js"></script>
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"></link>
</head>
<body>
<table  class="table table-bordered table-striped">

    <tr>
        <td class="text-center">一个学院管理界面</td>
        <td>学员管理</td>
        <td>教师管理</td>
        <td>
                <div class="dropdown">
                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">其他管理
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#">其他1</a>
                    </li>
                    <li>
                        <a href="#">其他2</a>
                    </li>
                    <li>
                        <a href="#">其他3</a>
                    </li>
                </ul>
            </div>
        </td>
    </tr>
</table>
<table class="table table-bordered">
    <td>学号</td>
    <td>姓名</td>
    <td>班级</td>
    <td>管理</td>
    <tr>
        <td>1</td>
        <td>李子明</td>
        <td>xxx</td>
        <td>
            <button class="btn btn-danger" type="button">删除</button>
            <button class="btn" type="button">修改</button>
            <button class="btn btn-info" type="button">编辑</button>
        </td>

    </tr>
</table>
</body>
</html>