Angular 和 Bootstrap：Offcanvas 推送菜单模板
Posted
技术标签:
【中文标题】Angular 和 Bootstrap：Offcanvas 推送菜单模板【英文标题】：Angular & Bootstrap: Offcanvas Push Menu Template 【发布时间】：2021-10-20 04:25:56 【问题描述】：Offcanvas 侧边栏组件，例如 Halfmoon UI。我尝试使用 Offcanvas 组件和侧边栏示例制作一个，但失败了。这是 Halfmoon UI 侧边栏的实时示例，它在中等屏幕上展开。
https://rexarvind.github.io/sidebar/
https://getbootstrap.com/docs/5.0/components/offcanvas/
https://getbootstrap.com/docs/5.0/examples/sidebars/
enter image description here
enter image description here
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" data-bs-keyboard="false"
data-bs-backdrop="false" aria-labelledby="offcanvasExampleLabel">
<div>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Ricerca Layer</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div id="sidebar">
<div class="nav flex-column py-3">
<ul class="list-unstyled ps-0">
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false">
Home
</button>
<div class="collapse" id="home-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="link-dark rounded">Overview</a></li>
<li><a href="#" class="link-dark rounded">Updates</a></li>
<li><a href="#" class="link-dark rounded">Reports</a></li>
</ul>
</div>
</li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
Dashboard
</button>
<div class="collapse" id="dashboard-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="link-dark rounded">Overview</a></li>
<li><a href="#" class="link-dark rounded">Weekly</a></li>
<li><a href="#" class="link-dark rounded">Monthly</a></li>
<li><a href="#" class="link-dark rounded">Annually</a></li>
</ul>
</div>
</li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
Orders
</button>
<div class="collapse" id="orders-collapse" >
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="link-dark rounded">New</a></li>
<li><a href="#" class="link-dark rounded">Processed</a></li>
<li><a href="#" class="link-dark rounded">Shipped</a></li>
<li><a href="#" class="link-dark rounded">Returned</a></li>
</ul>
</div>
</li>
<li class="border-top my-3"></li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
Account
</button>
<div class="collapse" id="account-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="link-dark rounded">New...</a></li>
<li><a href="#" class="link-dark rounded">Profile</a></li>
<li><a href="#" class="link-dark rounded">Settings</a></li>
<li><a href="#" class="link-dark rounded">Sign out</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
data-bs-toggle="dropdown"> More </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container min-vh-100 py-2">
<div class="row">
<div class="col">
<h2 class="font-weight-light">Hello Bootstrap 5 Sidebar</h2>
<p> A Bootstrap 5 left off-canvas sidebar menu example! </p>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample"
aria-controls="offcanvasExample"> Open Sidebar </button>
</div>
<div class="col">
</div>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
导航栏
<nav class="navbar" style="background-color: #00A8B0;">
<div class="container-fluid">
<a class="navbar-brand text-white" href="#">APP.IT</a>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
<i class="bi bi-list me-3"></i>
</a>
<a class="navbar-brand" style="color: #00A8B0;">APP</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
</div>
<maga-profilo-utente></maga-profilo-utente>
</div>
</nav>
【问题讨论】：
您的问题是什么？你到底尝试了什么。请发布代码，而不是图片。 我正在尝试制作一个像有角材料但使用 boostrap (offcanvas) 的抽屉 【参考方案1】：这可能就是您所追求的。您只需删除品牌 sn-p 并将导航栏的部分移到可折叠类之外。
仅供参考。我会避免向下看完整的引导程序路线。 （您仍然可以对其余代码使用引导程序）您将浪费您的时间。我不相信使用 Bootstrap 非画布可以按照自己的方式进行操作，因此您需要使用自己的脚本。这是因为 Bootstrap 使用模型。我看着它们，就像它们是那些模态弹出窗口。使用模型是有好处的，但在我看来，它限制了代码。当他们介绍它时，我确实沿着第二条路线进行了推销，但他们认为其他好处超过了它，这在某种程度上确实是有道理的。我们只需要利用我们所拥有的就可以了。
body
padding-top: 55px;
.w-sidebar
width: 200px;
max-width: 200px;
.row.collapse
margin-left: -200px;
left: 0;
transition: margin-left .15s linear;
.row.collapse.show
margin-left: 0 !important;
.row.collapsing
margin-left: -200px;
left: -0.05%;
transition: all .15s linear;
@media (max-width:768px)
.row.collapse,
.row.collapsing
margin-left: 0 !important;
left: 0 !important;
overflow: visible;
.row>.sidebar.collapse
display: flex !important;
margin-left: -100% !important;
transition: all .25s linear;
position: fixed;
z-index: 1050;
max-width: 0;
min-width: 0;
flex-basis: auto;
.row>.sidebar.collapse.show
margin-left: 0 !important;
width: 100%;
max-width: 100%;
min-width: initial;
.row>.sidebar.collapsing
display: flex !important;
margin-left: -10% !important;
transition: all .2s linear !important;
position: fixed;
z-index: 1050;
min-width: initial;
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid fixed-top bg-dark">
<div class="col px-2 px-md-0 py-3">
<div class="d-flex">
<!-- toggler -->
<a data-bs-toggle="collapse" href="#" data-bs-target=".collapse" role="button" class="">
<i class="fa fa-bars fa-lg"></i>
</a>
<a href="#modal" data-bs-target="modal" data-bs-toggle="modal" class="ms-auto text-white"><i class="fa fa-cog"></i></a>
</div>
</div>
<div class="row collapse show g-0 d-flex h-100">
</div>
</div>
<div class="container-fluid px-0">
<div class="row vh-100 collapse show g-0 d-flex">
<div class="col-3 p-0 h-100 text-white w-sidebar navbar-collapse collapse d-none d-md-flex sidebar">
<!-- fixed sidebar -->
<div class="navbar-dark bg-dark position-fixed h-100 w-sidebar">
<h6 class="px-3 pt-3">Fixed Menu</h6>
<ul class="nav flex-column flex-nowrap text-truncate">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
<div class="col p-3">
<h3>Content..</h3>
<p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag ***lyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
<p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>【讨论】：
以上是关于Angular 和 Bootstrap：Offcanvas 推送菜单模板的主要内容，如果未能解决你的问题，请参考以下文章
Angular 和 Bootstrap：Offcanvas 推送菜单模板
协调 Angular.js 和 Bootstrap 表单验证样式
Storybook Angular 和 ng-bootstrap
导航栏下拉菜单不适用于 Angular 和 Bootstrap 4