feat: 页面布局
parent
794111a5ca
commit
a580007f7f
@ -1 +1,6 @@
|
||||
|
||||
.left-menu {
|
||||
min-width:200px;
|
||||
}
|
||||
.content-card {
|
||||
min-height:300px;
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
|
||||
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
|
||||
}
|
||||
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@ -1,58 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<html lang="zh-cn">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../plugs/InfoBox/css/box.css">
|
||||
<title>Bootstrap5 学习目录</title>
|
||||
<style>
|
||||
ul li {
|
||||
list-style: none;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
font-size: 20px;
|
||||
|
||||
border: 1px solid rebeccapurple;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.outer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>BS5 学习</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" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 信息框：解说 -->
|
||||
<div class="default-info ">
|
||||
<div class="default-info-item default-info-header">
|
||||
Bootstrap5 学习目录
|
||||
</div>
|
||||
<div class="default-info-item default-info-body">
|
||||
<ul class="outer">
|
||||
<li>
|
||||
<a href="#">首页</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="test.html" target="_blank">官方示例</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./study/index.html" target="_blank">学习目录</a>
|
||||
</li>
|
||||
|
||||
<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" aria-current="page">首页</a></li>
|
||||
<li class="nav-item"><a href="/study/index.html" class="nav-link active">学习</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">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item active" aria-current="true">活动项</li>
|
||||
<li class="list-group-item">第2项</li>
|
||||
<li class="list-group-item">第3项</li>
|
||||
<li class="list-group-item">第4项</li>
|
||||
<li class="list-group-item">第5项</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="default-info-item default-info-footer">
|
||||
目录
|
||||
<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>
|
||||
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue