Bootstrap5OffCanvas缺少CSS/JS
我正在尝试在画布外使用 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 测试版 3(2021 年更新)
Bootstrap 终于推出了官方的 Offcanvas 组件!来自官方博客...
“..offcanvas 带有可配置的背景、身体滚动和放置。Offcanvas 组件可以放置在视口的左侧、右侧和底部......”
Bootstrap Offcanvas 演示
<button type="button" aria-controls="offcanvasExample">
Open Sidebar
</button>
<div tabindex="-1" aria-labelledby="offcanvasExampleLabel">
<div>
<h5>Offcanvas</h5>
<button type="button" aria-label="Close"></button>
</div>
<div>
<div> Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. </div>
<div>
<button type="button"> Dropdown button </button>
<ul aria-labelledby="dropdownMenuButton">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
阅读更多
Bootstap 5 beta 2(原始答案)
正如您在官方 Bootstrap 文档中所见,Bootstrap 5 beta 中(还)没有 Off-canvas 组件。您引用的 netlify 文档基于较旧的 pre-alpha 版本。
Bootstrap 5 示例确实显示了一个实验性的画布布局,但与其他示例一样,它需要额外的自定义 CSS 和 JS,可以在 Bootstrap GH 存储库中找到
一旦您包含额外的 CSS/JS,画布外示例将按预期工作。