容器、网格基础、文字与排版、颜色、表格、图像、警告框、按钮、按钮组
<!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="" 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="" 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>
徽章、进度条、加载器、分页、列表组、卡片、下拉菜单、折叠、导航、导航栏
<!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>
模态、工具提示、弹出框、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=".css" rel="stylesheet"><script src=".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>
ElementById("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>
表单、选择菜单、复选框和单选按钮、范围、输入组、浮动标签、表单验证
<!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=".css" rel="stylesheet"><script src=".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>
本文发布于:2024-01-31 15:21:07，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170668566729474.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
