Bootstrap实验

1 实验类型

验证型，2学时，必选实验

2 实验目的

熟悉Bootstrap布局；熟悉Bootstrap页面内容；熟悉Bootstrap表单；熟悉Bootstrap组件。

3 实验内容与要求

使用Bootstrap的不同模块完成若干验证实验。

4 实验环境

Windows7、Microsoft Edge/Chrome/Firefox等浏览器、Visual Studio Code、bootstrap-5.2.3-dist

bootstrap下载地址：https://github.com/twbs/bootstrap/releases/download/v5.3.0-alpha1/bootstrap-5.3.0-alpha1-dist.zip

5 步骤

创建工作目录{盘符}:/{学号}/exp3_bootstrap
将bootstrap-5.2.3-dist解压到工作目录

注意：若参考代码中引用的文件路径与实际不符时，请按实际情况调整

容器

创建针对不同断点的<div>，展示Bootstrap容器的响应式效果。

编写Html代码(bs_container-01.html)，实现Bootstrap不同容器，参考代码如下：

bs_container-01.html
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <!-- 引入CSS -->
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container pt-3">
    <h1>响应式容器</h1>
    <p>重置浏览器大小查看效果.</p>
  </div>

  <div class="container-sm border">.container-sm</div>
  <div class="container-md mt-3 border">.container-md</div>
  <div class="container-lg mt-3 border">.container-lg</div>
  <div class="container-xl mt-3 border">.container-xl</div>
  <div class="container-xxl mt-3 border">.container-xxl</div>

  <!-- 引入JS -->
  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

在浏览器中打开页面，改变浏览器窗口大小并观察效果

网格

利用Bootstrap网格系统进行页面布局。

编写Html代码(bs_grid.html)，实现Bootstrap网格布局，参考代码如下：

bs_grid.html
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container-fluid mt-3">
    <h1>创建相等宽度的列</h1>
    <p>创建三个相等宽度的列! 尝试在 class="row" 的 div 中添加新的 class="col" div，会显示四个等宽的列。</p>
    <div class="row">
      <div class="col p-3 bg-primary text-white">.col</div>
      <div class="col p-3 bg-dark text-white">.col</div>
      <div class="col p-3 bg-primary text-white">.col</div>
    </div>
  </div>

  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

在浏览器中打开页面，改变浏览器窗口大小并观察效果

文字排版

利用Bootstrap网格系统进行页面布局。

编写Html代码(bs_topography-heading.html)，实现Bootstrap文字排版，参考代码如下：

bs_topography-heading.html
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <h1>h1. Bootstrap heading</h1>
  <h2>h2. Bootstrap heading</h2>
  <h3>h3. Bootstrap heading</h3>
  <h4>h4. Bootstrap heading</h4>
  <h5>h5. Bootstrap heading</h5>
  <h6>h6. Bootstrap heading</h6>

  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

在浏览器中打开页面，改变浏览器窗口大小并观察效果

图片

利用Bootstrap在一行中放入三个缩略图(图片自供)。

编写Html代码(bs_image.html)，实现Bootstrap缩略图，参考代码如下：

bs_image.html
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container mt-3">
    <div class="row">
      <div class="col">
        <img src="bootstrap-stack.png" class="img-thumbnail" alt="...">
      </div>
      <div class="col">
        <img src="bootstrap-stack.png" class="img-thumbnail" alt="...">
      </div>
      <div class="col">
        <img src="bootstrap-stack.png" class="img-thumbnail" alt="...">
      </div>
    </div>
  </div>

  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

在浏览器中打开页面，改变浏览器窗口大小并观察效果

综合

导航菜单

使用Bootstrap实现页面顶部的导航菜单

创建nav.html，用Bootstrap创建导航菜单，尝试改变菜单的外观，参考代码如下：

bs_nav.html
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>导航</title>
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <nav class="navbar bg-dark navbar-expand-sm bg-body-tertiary" data-bs-theme="dark">
    <div class="container-fluid">
      <!--<a class="navbar-brand" href="#">导航</a> -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">新闻</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              运动
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">足球</a></li>
              <li><a class="dropdown-item" href="#">篮球</a></li>
              <li><a class="dropdown-item" href="#">排球</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

对话框

使用Bootstrap实现具有标题、正文和关闭按钮的模式对话框，参考代码如下：

bs_model.html
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>模式对话框</title>
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container-fluid mt-3">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
      打开模式对话框
    </button>

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">打开模式对话框</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            哇！这是正文
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>

在浏览器中打开页面，改变浏览器窗口大小并观察效果

表单与表格

使用Bootstrap为课程表创建表单和表格界面，以下为学生表参考代码：

注意：要实验的是课程表

表单界面-学生表

stu/STUDENT_form_bootstrap.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>学生表</title>
  <link href="css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>

<body>
  <h3>学生表</h3>
  <div class="container">
    <form action="#">
      <div class="mb-3">
        <label for="no" class="form-label">学号:</label>
        <input type="text" id="no" name="no" placeholder="请输入学号.." class="form-control">
      </div>
      <div class="mb-3">
        <label for="name" class="form-label">姓名:</label>
        <input type="text" id="name" name="name" placeholder="请输入姓名.." class="form-control">
      </div>
      <div class="mb-3">
        <label for="gender" class="form-label">性别:</label>
        <input type="text" id="gender" name="gender" placeholder="请输入性别.." class="form-control">
      </div>
      <div class="mb-3">
        <label for="age" class="form-label">年龄:</label>
        <input type="number" id="age" name="age" placeholder="请输入年龄.." class="form-control">
      </div>
      <div class="mb-3">
        <label for="dept" class="form-label">所在系:</label>
        <input type="text" id="dept" name="dept" placeholder="请输入所在系.." class="form-control">
      </div>

      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  </div>
  <script src="js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

</html>

表格界面-学生表

stu/STUDENT_table_bootstrap.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>学生表</title>
  <link href="css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>

<body>
  <h3>学生表</h3>
  <table id="STUDENT" class="table">
    <thead class="table-light">
      <th><input type="checkbox" class="form-check-input" id="select_all"></th>
      <th>学号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>所在系</th>
      <th>操作</th>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="form-check-input"></td>
        <td>200215121</td>
        <td>李勇</td>
        <td>男</td>
        <td>20</td>
        <td>CS</td>
        <td><a href="javascript:void()" class="btn btn-primary btn-sm" role="button">修改</a></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="form-check-input"></td>
        <td>200215122</td>
        <td>刘晨</td>
        <td>女</td>
        <td>19</td>
        <td>CS</td>
        <td><a href="javascript:void()" class="btn btn-primary btn-sm" role="button">修改</a></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="form-check-input"></td>
        <td>200215123</td>
        <td>王敏</td>
        <td>女</td>
        <td>18</td>
        <td>MA</td>
        <td><a href="javascript:void()" class="btn btn-primary btn-sm" role="button">修改</a></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="form-check-input"></td>
        <td>200515125</td>
        <td>张立</td>
        <td>男</td>
        <td>19</td>
        <td>IS</td>
        <td><a href="javascript:void()" class="btn btn-primary btn-sm" role="button">修改</a></td>
      </tr>
    </tbody>
  </table>
  <script src="js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

</html>

拓展练习

使用Bootstrap实现课程表的表单和表格界面