使用 Bootstrap 组件（逐步）
使用 Bootstrap 组件（逐步）
介绍
在本文中，您将练习将 Bootstrap 组件添加到网页中。
目标
- 将徽章组件添加到页面以通知客户新的沙拉三明治菜。
- 向页面添加警报组件，通知顾客餐厅将在元旦关闭。
- 将 Button 组件添加到带有文本 Order Online 的页面。
指示
步骤1： 打开 index.html
第2步： 在 Our Menu 文本中心 div 元素下方添加另一个 div 元素。
第 3 步： 使用值 alert alert-info 向元素添加类属性。
第4步： 将角色属性添加到值为 alert 的元素。
第 5 步： 在 div 元素内添加消息我们的餐厅将在元旦关闭。
<div class="row"> <div class="col-12"> <div class="text-center"> <h1>我们的菜单</h1> </div> <div class="alert alert-info" role="alert"> 我们的餐厅将在元旦关闭 </div> </div> </div>
第 6 步： 在 Falafel h2 元素内添加一个 span 元素，在结束 h2 标记之前。
第 7 步： 向 span 元素添加一个类属性，其值为标记 bg-secondary。
<h2>沙拉三明治<span class="badge bg-secondary">新</span></h2>
第 8 步： 在最后一行元素之后添加另一个 div 元素。
第 9 步： 将具有值行的类属性添加到 div 元素。
第 10 步： 在行 div 元素内添加一个 div 元素。
第 11 步： 将值为 col-12 的类属性添加到 div 元素。
第 12 步： 在 col-12 div 元素内添加另一个 div 元素。
第十三步： 将值为 text-center 的类属性添加到 div 元素。
第 14 步： 在 text-center div 元素内添加一个按钮元素。
第 15 步： 使用值按钮添加类型属性。
第 16 步： 添加一个值为 btn btn-primary 的类属性。
第十七步： 在按钮元素内添加文本 Order Online。
<div class="row"> <div class="col-12"> <div class="text-center"> <button type="button" class="btn btn-primary">网上订购</button> </div> </div> </div>
第十八步： 保存文件。
第十九步： 点击编辑器右下方的“上线”。
一旦服务器启动并运行，您将看到暴露的端口。
第 20 步： 现在点击浏览器预览。
输入网址为 http://localhost：<exposed port>
第 21 步： 验证警报是否显示在网页上。
第 22 步： 验证新徽章显示在沙拉三明治标题上。
第 23 步： 确认显示“在线订购”按钮。
第 24 步： 完成实验后，请确保通过单击公开的端口号（例如 5500）来关闭服务器。
您应该会看到这样的通知，确认服务器已停止。
提示
- 确保将列添加到行元素。
- 请记住，Bootstrap 使用 12 列网格系统。
- Bootstrap 文档中有很多示例。
- 复习课程 使用引导样式 和 引导组件。
祝你好运 ： ）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
