2_模板页面怎么修改 -- 谈谈小应用的那些事儿

1.使用前端框架

制作模板页面，我们使用了前端框架 -- Bootstrap 5

<!-- 导入 Bootstrap 5 框架的代码 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

2.改变题目设计

a.先要有按钮

在菜鸟教程查看 Bootstrap 5 文档

<!-- 蓝色按钮代码 -->
<button type="button" class="btn btn-primary">主要按钮</button>
<!-- 红色按钮代码 -->
<button type="button" class="btn btn-danger">危险</button>

b.按钮的形状变为圆形

在菜鸟教程查看 Bootstrap 5 文档

获得我们需要的按钮及代码

<!-- 蓝色按钮代码 -->
<button type="button" class="btn btn-primary rounded-circle">A</button>
<!-- 红色按钮代码 -->
<button type="button" class="btn btn-danger rounded-circle">B</button> 

c.选择按钮的边框颜色

在菜鸟教程查看 Bootstrap 5 文档

将需要的代码进行组合

<!-- 蓝色按钮代码 -->
<button type="button" class="btn btn-primary rounded-circle my-1">A</button>
<!-- 红色按钮代码 -->
<button type="button" class="btn btn-danger rounded-circle my-1">B</button> 
<!-- 蓝色边框按钮代码 -->
<button type="button" class="btn btn-outline-primary rounded-circle my-1">C</button>

d.将按钮带入题目中，看看效果

大字体效果

小字体效果

3.改变答案设计

a.查看字体颜色

在菜鸟教程查看 Bootstrap 5 文档

b.将有颜色的字体带入答案中，看看效果

4.查看模板页面的整体效果

5.接下来做什么

接下来要 jQuery（JavaScript 库）实现做题的动态功能。