<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>首面</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a href="/Index.html" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<img class="bi me-2" width="40" height="32" src="/images/B5.png" />
<span class="fs-4">Bootstrap5 学习</span>
</a>
<ul class="nav nav-pills">
<li class="nav-item"><a href="Index.html" class="nav-link active" aria-current="page">首页</a></li>
<li class="nav-item"><a href="study/index.html" class="nav-link">学习</a></li>
<li class="nav-item"><a href="https://b5blazor.wanggaofeng.net" class="nav-link" target="_blank">官网</a></li>
<li class="nav-item"><a href="https://blog.wanggaofeng.net" class="nav-link" target="_blank">博客</a></li>
<li class="nav-item"><a href="http://git.wanggaofeng.cn:3000/Bootstrap/BootstapStudy" class="nav-link" target="_blank">仓库</a></li>
<li class="nav-item"><a href="https://github.com/bicijinlian/B5Blazor" class="nav-link" target="_blank">Github开源</a></li>
<li class="nav-item"><a href="About.html" class="nav-link">关于</a></li>
</ul>
</header>
</div>
<div class="container d-flex justify-content-between">
<div class="me-3 left-menu" id="left-menu-box">
<div class="card mb-2">
<div class="list-group list-group-flush border-bottom-0">
<a href="#menu_tab_layout" class="list-group-item list-group-item-action active" data-bs-toggle="collapse" role="button">布局学习</a>
</div>
<div class="list-group list-group-flush collapse show" id="menu_tab_layout" data-bs-parent="#left-menu-box">
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">断点</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">容器</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">网格(Grid)</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">列(Columns)</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">槽(Gutters)</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">实用工具</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Z-Index</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">CSS 网格</a>
</div>
</div>
<div class="card mb-2">
<div class="list-group list-group-flush border-bottom-0">
<a href="#menu_tab_component" class="list-group-item list-group-item-action active" data-bs-toggle="collapse" role="button">组件学习</a>
</div>
<div class="list-group list-group-flush collapse" id="menu_tab_component" data-bs-parent="#left-menu-box">
<a href="#" class="list-group-item list-group-item-action">手风琴(Accordion)</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">警报</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">徽章</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">面包屑</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">按钮</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">按钮组</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">卡片</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">轮播</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">折叠</a>
</div>
</div>
<div class="card">
<div class="list-group list-group-flush border-bottom-0">
<a href="#menu_tab_form" class="list-group-item list-group-item-action active" data-bs-toggle="collapse" role="button">表单学习</a>
</div>
<div class="list-group list-group-flush collapse" id="menu_tab_form" data-bs-parent="#left-menu-box">
<a href="#" class="list-group-item list-group-item-action">
表单控件
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">
选择控件
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">
复选框和单选按钮
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">
范围控件
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">
输入组控件
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">
浮动标签控件
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">
布局控件
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">
验证控件
</a>
</div>
</div>
</div>
<div class="flex-grow-1">
<div class="card content-card">
<div class="card-footer">
<strong>组件学习</strong>
</div>
<div class="card-body">
主内容区
</div>
</div>
</div>
</div>
<div class="container">
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 pt-3 mt-5 border-top">
<div class="col mb-3">
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
</a>
<p class="text-body-secondary">© 2023 版权所有,侵犯必究</p>
</div>
<div class="col mb-3">
</div>
<div class="col mb-3">
<h5>网站</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="Index.html" class="nav-link p-0 text-body-secondary">首页</a></li>
<li class="nav-item mb-2"><a href="study/index.html" class="nav-link p-0 text-body-secondary">学习</a></li>
<li class="nav-item mb-2"><a href="About.html" class="nav-link p-0 text-body-secondary">关于</a></li>
</ul>
</div>
<div class="col mb-3">
<h5>学习</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">布局</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">内容</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">组件</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">表单</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">实用程序</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">助手</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">扩展</a></li>
</ul>
</div>
<div class="col mb-3">
<h5>关于</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="https://b5blazor.wanggaofeng.net" class="nav-link p-0 text-body-secondary" target="_blank">官网</a></li>
<li class="nav-item mb-2"><a href="https://github.com/bicijinlian/B5Blazor" class="nav-link p-0 text-body-secondary" target="_blank">Github开源</a></li>
<li class="nav-item mb-2"><a href="http://git.wanggaofeng.cn:3000/Bootstrap/BootstapStudy.git" class="nav-link p-0 text-body-secondary" target="_blank">仓库</a></li>
<li class="nav-item mb-2"><a href="https://blog.wanggaofeng.net" class="nav-link p-0 text-body-secondary" target="_blank">博客</a></li>
</ul>
</div>
</footer>
</div>
<script src="jquery/jquery-3.6.4.min.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>