|
|
|
|
|
<!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="pages/Card.html" 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" id="main_content">
|
|
|
|
|
|
<div class="card content-card">
|
|
|
|
|
|
<div class="card-footer">
|
|
|
|
|
|
<strong>Bootstrap5 学习</strong>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
|
点右侧菜单，如果菜单为连接，则调用jQuery远程加载连接地址，并局部刷新内容。
|
|
|
|
|
|
</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>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
$(function () {
|
|
|
|
|
|
$("#left-menu-box a:not([data-bs-toggle])").on("click", function () {
|
|
|
|
|
|
var href = $(this).attr("href");
|
|
|
|
|
|
if (href.length>1) {
|
|
|
|
|
|
$("#main_content").load(href);
|
|
|
|
|
|
};
|
|
|
|
|
|
return false;
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
