diff --git a/BlazorStudy.BootstrapLatest/wwwroot/Index.html b/BlazorStudy.BootstrapLatest/wwwroot/Index.html
index c4f39c8..4486102 100644
--- a/BlazorStudy.BootstrapLatest/wwwroot/Index.html
+++ b/BlazorStudy.BootstrapLatest/wwwroot/Index.html
@@ -32,14 +32,72 @@
</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 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">
diff --git a/BlazorStudy.BootstrapLatest/wwwroot/css/app.css b/BlazorStudy.BootstrapLatest/wwwroot/css/app.css
index 1ab8083..708ed22 100644
--- a/BlazorStudy.BootstrapLatest/wwwroot/css/app.css
+++ b/BlazorStudy.BootstrapLatest/wwwroot/css/app.css
@@ -1,5 +1,6 @@
.left-menu {
- min-width:200px;
+ min-width:300px;
+ width: 300px;
}
.content-card {
min-height:300px;