gpt4 book ai didi

css - Bootstrap 5 Off Canvas 缺少 CSS/JS

转载 作者:行者123 更新时间:2023-12-03 21:44:14 28 4
gpt4 key购买 nike

我正在尝试在 Canvas 外使用 bootstrap 5。
与插件相关的 css & js 似乎没有包含在框架中。
https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/components/offcanvas/
BS 网站上的 demo 有效;但是,BS 网站上的 github 链接转到 404。
https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/offcanvas.md

最佳答案

Bootstap 5 beta 3(2021 年更新)
Bootstrap 终于引入了 官方 Offcanvas 组件 !来自官方博客...

"..the offcanvas comes with configurable backdrop, body scroll, andplacement. Offcanvas components can be placed on the left, right, andbottom of the viewport..."


Bootstrap Offcanvas demo
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Open Sidebar
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div> Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. </div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> Dropdown button </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>
Read more

Bootstap 5 beta 2(原答案)
正如您在 official Bootstrap docs 中看到的那样,Bootstrap 5 beta 中(还)没有 Off-canvas 组件。您引用的 netlify 文档基于较旧的 pre-alpha 版本。
Bootstrap 5 示例确实显示了 实验 Canvas 外布局,但与其他示例一样,它需要额外的自定义 CSS 和 JS,可以是 found here in the Bootstrap GH repo
一旦你包含了额外的 CSS/JS, off-canvas example works as expected .

关于css - Bootstrap 5 Off Canvas 缺少 CSS/JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65501628/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com