bootstrap框架学习
2023-12-18:
容器、网格基础、文字与排版、颜色、表格、图像、警告框、按钮、按钮组
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../bootstrap-5/css/bootstrap.min.css" rel="stylesheet">
<script src="../../bootstrap-5/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container pt-5 my-5 border" > <!--响应式、固定宽度的容器(并添加一个大的顶部填充)(边框)-->
<hr>
<h1 class="text-muted">h1标题</h1><!--此文本已静音。-->
<h2 class="text-primary">h2标题</h2><!--此文字很重要。-->
<h1 class="display-1 text-success">display-1</h1><!--display(1-6)标题标题用于比普通标题更突出(此文本表示成功。)-->
<h1 class="text-info">h1 heading <small>h1 heading-small</small></h1><!--small用于在任何标题中创建较小的辅助文本(此文字代表了一些信息。)-->
<p class="text-warning">使用mark元素(或.mark类)来<mark>突出显示</mark>文本</p><!--mark使用黄色背景颜色和一些内边距来设置(此文本表示警告。)-->
<p class="text-danger">abbr元素用于<abbr title="标记缩写或首字母缩略词">标记</abbr></p><!--abbr元素的样式设置为底部带有虚线边框,悬停时带有问号的光标(此文字代表危险。)-->
<blockquote class="blockquote text-secondary"><!--blockquote用于引用来源(次要文本。)-->
<p>blockquote用于显示另一个来源内容</p>
<footer class="blockquote-footer">来自XXX</footer>
</blockquote>
<dl><!--dl元素用于描述列表-->
<dt>咖啡</dt>
<dd>黑色的热饮</dd>
<dt>牛奶</dt>
<dd>白色的热饮</dd>
</dl>
<p class="text-dark">这些行内代码片段应该嵌入到code元素里:<code>daima</code></p><!--行内代码片段(此文字为深灰色。)-->
<p class="text-body">用kbd元素表示用键盘输入的内容<kbd>cltl+a</kbd></p><!--键盘输入(默认主体颜色(通常为黑色)。)-->
<p class="text-light">对于多行代码,使用pre元素:</p><!--多行代码(此文本为浅灰色——在白色背景下)-->
<pre>这是代码1
这是代码2
这是代码3
</pre>
<hr>
<table class="table table-borderless table-sm table-responsive-sm"><!--表格(无边框)(上下文类着色)(表头颜色)(小型表格)(响应式)-->
<thead class="table-warning">
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td class="table-success">内容</td>
<td class="table-danger">内容</td>
<td class="table-info">内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
</div>
<hr>
<div class="container-fluid pt-5 my-5 bg-primary text-white"><!--全宽容器(深色背景)(白色文本)-->
<p class="h1">表格</p><!--文字(标题的另一种表现)-->
<table class="table table-striped table-bordered table-hover table-dark"><!--表格(条纹行)(带边框)(有悬停效果)(深色)-->
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
</table>
</div><hr>
<div class="container mt-3"><!--(警告框)(警告链接)(关闭警告)(警告框动画)-->
<div class="alert alert-success"><strong>成功!</strong>此警报框表示成功或积极的动作</div>
<div class="alert alert-info"><strong>信息!</strong>您应该<a href="https://blog.csdn.net/s1939273302" class="alert-link">阅读这条消息</a></div>
<div class="alert alert-warning alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>信息!</strong>此警报框可能表示可能需要注意的警告
</div>
<div class="alert alert-danger alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>危险!</strong>此警报框表示危险或潜在的负面操作
</div>
</div><hr>
<div class="container mt-3"><!--(按钮)(按钮轮廓)(按钮尺寸)(块级按钮)(活动/禁用按钮)(加载器按钮)-->
<button type="button" class="btn">基础</button>
<a href="https://blog.csdn.net/s1939273302" class="btn btn-primary">链接按钮</a>
<input type="button" class="btn btn-secondary active" value="输入按钮"></input>
<input type="submit" class="btn btn-success btn-sm disabled" value="提交按钮"></input>
<input type="reset" class="btn btn-info btn-md" value="重置按钮"></input>
<button type="button" class="btn btn-outline-warning btn-lg">警告</button>
<div class="d-grid gap-3">
<button type="button" class="btn btn-danger btn-block">全宽按钮</button>
<button type="button" class="btn btn-dark btn-block">全宽按钮</button>
<button type="button" class="btn btn-light text-dark btn-block">全宽按钮</button>
</div>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
</div><hr>
<div class="container mt-3">
<!--按钮组-->
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">华为</button>
<button type="button" class="btn btn-primary">大疆</button>
<button type="button" class="btn btn-primary">小米</button>
</div>
<div class="btn-group-vertical btn-group-sm">
<button type="button" class="btn btn-primary">华为</button>
<button type="button" class="btn btn-primary">大疆</button>
<button type="button" class="btn btn-primary">小米</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">华为</button>
<button type="button" class="btn btn-primary">大疆</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">小米</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">手机</a>
<a class="dropdown-item" href="#">平板电脑</a>
</div>
</div>
</div>
</div><hr>
<hr>
<!--(图片形状:圆角、圆形、缩略图)(对齐图像)(居中图像)(响应式图像)-->
<img src="../../素材/img/000.jpg" class="rounded float-start" alt="dog" width="250" height="400">
<img src="../../素材/img/001.jpg" class="rounded-circle mx-auto d-block float-end" alt="dog" width="250" height="400" style="width: 20%;">
<img src="../../素材/img/002.jpg" class="img-thumbnail img-fluid" alt="dog" width="250" height="400">
<hr>
<div class="row"><!--网格(两个不等的响应式列)-->
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
<hr>
</body>
</html>
2023-12-19:
徽章、进度条、加载器、分页、列表组、卡片、下拉菜单、折叠、导航、导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<title>练习1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../bootstrap-5/css/bootstrap.min.css" rel="stylesheet">
<script src="../../bootstrap-5/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3"><!--徽章-->
<h1>这句话后面有个徽章<span class="badge bg-secondary">徽章</span></h1>
<h2><span class="badge bg-success">这是其它颜色和大小的徽章</span></h2>
<span class="badge rounded-pill bg-primary">胶囊徽章</span>
<button type="button" class="btn btn-danger">
元素内的徽章<span class="badge bg-info">4</span>
</button>
</div><hr>
<div class="container mt-3"><!--进度条-->
<div class="progress">
<div class="progress-bar " style="width: 50%">50%</div>
<div class="progress-bar bg-danger" style="width:10%">10%</div>
</div>
请注意,您必须为进度容器和进度条设置相同的高度:
<div class="progress" style="height: 30px;">
<div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" style="width: 60%;height: 30px;"></div>
</div>
</div><hr>
<div class="container mt-3"><!--加载器-->
<div class="spinner-border text-dark">AAAAAA</div>
<div class="spinner-grow text-warning spinner-grow-sm">OOOOOO</div>
</div>
<div class="container mt-3"><!--分页-->
<ul class="pagination pagination-sm justify-content-center" style="margin:20px 0">
<li class="page-item"><a class="page-link" href="#">上一页</a></li>
<li class="page-item disabled"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">下一页</a></li>
</ul>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">111</a></li>
<li class="breadcrumb-item active">222</li>
</ul>
</div><hr>
<div class="container mt-3"><!--列表组-->
<ul class="list-group list-group-numbered list-group-flush">
<a href="#" class="list-group-item list-group-item-action">第零项(包含链接)</a>
<li class="list-group-item list-group-item-danger d-flex justify-content-between align-items-center">第一项<span class="badge bg-primary rounded-pill">12</span></li>
<li class="list-group-item disabled">第二项(禁用)</li>
<li class="list-group-item active">第三项(活动状态)</li>
</ul>
</div><hr>
<div class="container mt-3"><!--卡片-->
<div class="card" >
<h4 class="card-title">卡片标题</h4>
<div class="card-header bg-success ">页眉</div>
<div class="card-body bg-info">内容</div>
<a href="#" class="card-link">卡片链接</a>
<div class="card-footer bg-warning">页脚</div>
</div>
<div class="container mt-3"><!--下拉列表-->
<div class="dropdown ">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
下拉按钮
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">链接 1</a></li>
<li><hr class="dropdown-divider"></hr></li>
<li><a class="dropdown-item-text" href="#">文本链接</a></li>
<li><h5 class="dropdown-header">下拉标题</h5></li>
<li><span class="dropdown-item-text">纯文本</span></li>
</ul>
</div>
</div><hr>
<div class="container mt-3"><!--折叠-->
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="btn" data-bs-toggle="collapse" href="#collapseOne">
可折叠组项目 #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
<div class="card-body">
<h3>春日</h3>
<p>胜日寻芳泗水滨,无边光景一时新。</p>
<p>等闲识得东风面,万紫千红总是春。</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
可折叠组项目 #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
<h3>初夏绝句</h3>
<p>纷纷红紫已成尘,布谷声中夏令新。</p>
<p>夹路桑麻行不尽,始知身是太平人。</p>
</div>
</div>
</div>
</div><hr>
<div class="container mt-3"><!--导航-->
<ul class="nav justify-content-center nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
</div><hr>
<div class="container mt-3"><!--导航栏-->
<nav class="navbar navbar-expand-sm bg-light sticky-top">
<div class="container-fluid">
<ul class="navbar-nav bg-success">
<li class="nav-item">
<a class="nav-link active" href="#">活动</a>
</li>
<span class="navbar-text">导航栏文本</span>
<li class="nav-item ">
<a class="nav-link " href="#">链接 </a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
2023-12-20:
模态、工具提示、弹出框、toast、Offcanvas
<!DOCTYPE html>
<html lang="en">
<head>
<title>练习2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://www.w3school.com.cn/lib/bs/bootstrap.css" rel="stylesheet">
<script src="https://www.w3school.com.cn/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container mt-3"><!--模态-->
<!-- 打开模态的按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
打开模态
</button>
<!-- 模态 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-fullscreen modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<!-- 模态标题 -->
<div class="modal-header">
<h4 class="modal-title">模态标题</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- 模态主体 -->
<div class="modal-body">
模态主体 ..
</div>
<!-- 模态页脚 -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</div><hr>
<div class="container mt-3"><!--工具提示-->
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="太棒了!">请悬停在我上面!</button>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="太棒了!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="太棒了!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="太棒了!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="太棒了!">Hover</a>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</div><hr>
<div class="container mt-3"><!--弹出框-->
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="弹出框标题" data-bs-content="弹出框内的一些内容">Toggle popover</button>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Content">Left</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">Right</a>
<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="单击文档中的任意位置可关闭此弹出窗口">点击我</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="弹出框文本">请在我上方悬停</a>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</div><hr>
<div class="container mt-3"><!--toast-->
<button type="button" class="btn btn-primary" id="toastbtn">显示 Toast</button>
<div class="toast">
<div class="toast-header">
<strong class="me-auto">Toast 标题</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
<p>toast 主体内的文本。</p>
</div>
</div>
</div>
<script>
document.getElementById("toastbtn").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
</script>
</div><hr>
<div class="container mt-3"><!--Offcanvas-->
<div class="offcanvas offcanvas-start" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">标题</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>一些文本。一些文本。一些文本。</p>
<p>一些文本。一些文本。一些文本。</p>
<p>一些文本。一些文本。一些文本。</p>
<button class="btn btn-secondary" type="button">按钮</button>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Offcanvas 侧栏</h3>
<p>Offcanvas 类似于模态,不同之处在于它经常用作侧边栏。</p>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
打开 Offcanvas 侧栏
</button>
</div>
</div>
</body>
</html>
2023-12-21:
表单、选择菜单、复选框和单选按钮、范围、输入组、浮动标签、表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<title>练习3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://www.w3school.com.cn/lib/bs/bootstrap.css" rel="stylesheet">
<script src="https://www.w3school.com.cn/lib/bs/bootstrap.js"></script>
</head>
<div class="container mt-3"><!--表单--><!--输入组-->
<div class="input-group mt-3 mb-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
下拉按钮
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">链接 1</a></li>
<li><a class="dropdown-item" href="#">链接 2</a></li>
<li><a class="dropdown-item" href="#">链接 3</a></li>
</ul>
<input type="text" class="form-control" placeholder="用户名">
</div>
<form action="/action_page.php">
<div class="input-group mb-3">
<button class="btn btn-outline-primary" type="button">基础按钮</button>
<input type="text" class="form-control" placeholder="一些文本">
</div>
<div class="mb-3 mt-3 input-group">
<label for="email">电子邮件:</label>
<span class="input-group-text">aaa </span>
<span class="input-group-text">bbb </span>
<div class="input-group-text">
<input type="checkbox">
</div>
<input type="email" class="form-control" id="email" placeholder="请输入电子邮件地址" name="email">
</div>
<div class="mb-3 input-group">
<label for="pwd">密码:</label>
<input type="password" class="form-control" id="pwd" placeholder="请输入密码" name="pswd">
<span class="input-group-text">aaa </span>
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember">记住我
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<label for="comment">评论:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="请输入电子邮件地址" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="请输入密码" name="pswd">
</div>
</div>
</form>
</div>
<div class="container mt-3"><!--选择菜单-->
<form action="/action_page.php">
<label for="sel1" class="form-label">单选菜单:</label>
<select form="form-select" id="sel1" name="sellist1">
<option>1</option>
<option>2</option>
<option>3</option>
</select><br>
<label for="sel2" class="form-label">多选菜单:</label>
<select multiple class="form-select" id="sel2" name="sellist2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button type="submit" class="btn btn-primary mt-3">提交</button>
</form>
</div><hr>
<div class="container mt-3"><!--复选框和单选按钮-->
<form action="/action_page.php">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked>
<label class="form-check-label" for="check1">选项1</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check1" name="option2" value="something">
<label class="form-check-label" for="check2">选项2</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check1" name="option3" value="something">
<label class="form-check-label" for="check3">选项3</label>
</div>
<button type="submit" class="btn btn-primary mt-3">提交</button>
</form>
<br>
<form action="/action_page.php">
<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>选项 1
<label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">选项 2
<label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" disabled>选项 3
<label class="form-check-label"></label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
<label class="form-check-label" for="mySwitch">深色模式</label>
</div>
</form>
</div><hr>
<div class="container mt-3"><!--范围-->
<form action="/action_page.php">
<label for="customRange" class="form-label">自定义范围</label>
<input type="range" min="0" max="4" class="form-range" id="customRange" name="points">
<button type="submit" class="btn btn-primary mt-3">提交</button><br>
<form action="/action_page.php">
<label for="customRange" class="form-label">自定义范围</label>
<input type="range" class="form-range" id="customRange" step="10" name="points">
<button type="submit" class="btn btn-primary mt-3">提交</button>
</form>
</form>
</div><hr>
<div class="container mt-3"><!--浮动标签-->
<form action="/action_page.php">
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" id="email" placeholder="请输入电邮地址" name="email">
<label for="email">电邮</label>
</div>
<div class="form-floating mt-3 mb-3">
<input type="text" class="form-control" id="pwd" placeholder="请输入密码" name="pswd">
<label for="pwd">密码</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
<div class="form-floating">
<textarea class="form-control" id="comment" name="text" placeholder="Comment goes here"></textarea>
<label for="comment">评论</label>
</div>
</div>
<div class="container my-3"><!--表单验证-->
<p>请尝试提交表单。</p>
<form action="/action_page.php" class="was-validated">
<div class="mb-3 mt-3">
<label for="uname" class="form-label">用户名:</label>
<input type="text" class="form-control" id="uname" placeholder="请输入用户名" name="uname" required>
<div class="valid-feedback">有效的。</div>
<div class="invalid-feedback">请填写此字段。</div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">密码:</label>
<input type="password" class="form-control" id="pwd" placeholder="请输入密码" name="pswd" required>
<div class="valid-feedback">有效的。</div>
<div class="invalid-feedback">请填写此字段。</div>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="myCheck" name="remember" required>
<label class="form-check-label" for="myCheck">我同意这些条款。</label>
</div>
</div>
</body>
</html>