Bootstrap
/
BootstapStudy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 菜单事件及更新方案

Browse Source
main
bicijinlian 2 years ago
parent e8fc07b77c
commit 12692264a8
9 changed files with 215 additions and 8 deletions
Show Stats Download Patch File Download Diff File

4
BlazorStudy.BootstrapLatest/BlazorStudy.BootstrapLatest.csproj
Unescape Escape View File

@ -6,10 +6,6 @@
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<Folder Include="wwwroot\shared\" />
</ItemGroup>
<ItemGroup>
<Content Update="wwwroot\study\index.html">
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>

19
BlazorStudy.BootstrapLatest/wwwroot/Index.html
Unescape Escape View File

@ -60,7 +60,7 @@
<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="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>
@ -99,13 +99,13 @@
</div>
</div>
<div class="flex-grow-1">
<div class="flex-grow-1" id="main_content">
<div class="card content-card">
<div class="card-footer">
<strong>组件学习</strong>
<strong>Bootstrap5 学习</strong>
</div>
<div class="card-body">
主内容区
点右侧菜单，如果菜单为连接，则调用jQuery远程加载连接地址，并局部刷新内容。
</div>
</div>
</div>
@ -159,6 +159,17 @@
<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>

51
BlazorStudy.BootstrapLatest/wwwroot/Test.html
Unescape Escape View File

@ -0,0 +1,51 @@
<!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">
</div>
<div class="container d-flex justify-content-between">
<div class="me-3 left-menu" id="left-menu-box">
</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></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 ()
{
$(".container:first").load("/Shared/Header.html");
$("#left-menu-box").load("Shared/LeftMenu.html");
$(".container:last").load("/Shared/Footer.html");
});
</script>
</body>
</html>

BIN
BlazorStudy.BootstrapLatest/wwwroot/images/B5B_logo_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

21
BlazorStudy.BootstrapLatest/wwwroot/pages/Card.html
Unescape Escape View File

@ -0,0 +1,21 @@
<div class="card content-card">
<div class="card-footer">
<strong>卡片学习</strong>
</div>
<div class="card-body">
<div class="card">
<img class="card-img-top" src="../images/B5B_logo_1.png" />
<div class="card-body">
<h5 class="card-title">card 标题文字</h5>
<h5 class="card-subtitle">card 副标题</h5>
<p class="card-text">内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本</p>
</div>
<div class="card-footer">
页脚是可选的
</div>
</div>
</div>
<div class="card-footer">
<p class="card-text">3分钟前</p>
</div>
</div>

46
BlazorStudy.BootstrapLatest/wwwroot/shared/Footer.html
Unescape Escape View File

@ -0,0 +1,46 @@
<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>

18
BlazorStudy.BootstrapLatest/wwwroot/shared/Header.html
Unescape Escape View File

@ -0,0 +1,18 @@
<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>

64
BlazorStudy.BootstrapLatest/wwwroot/shared/LeftMenu.html
Unescape Escape View File

@ -0,0 +1,64 @@
<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>

BIN
文件下载/bootstrap-icons-1.10.5.zip
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save