Bootstrap 5 Off Canvas缺少CSS/JS [英] Bootstrap 5 Off Canvas Missing CSS/JS

问题描述

我正在尝试使用Bootstrap 5的关闭画布.的css&与插件关联的js似乎未包含在框架中.

I am trying to use bootstrap 5's off canvas. The css & js associated with the plugin do not seem to be included in the framework.

https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/components/offcanvas/

BS网站上的演示正常工作；但是，BS网站上的github链接转到404. https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/offcanvas.md

The demo on the BS website works; However, the github link on the BS website goes to a 404. https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/offcanvas.md

推荐答案

Bootstap 5 beta 3(更新2021年)

Bootstrap终于引入了 Offcanvas官方组件！来自官方博客...

Bootstrap has finally introduced an official Offcanvas component! From the offical blog...

" .. offcanvas带有可配置的背景，正文滚动和放置.Offcanvas组件可以放置在左侧，右侧和右侧视口底部..."

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

Bootstrap Offcanvas演示

<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>

了解详情

Bootstap 5 beta 2(原始答案)

您可以在官方Bootstrap文档中看到

Bootstrap 5示例确实显示了实验的非画布布局，但是像其他示例一样，它需要额外的自定义CSS和JS，可以是

The Bootstrap 5 examples do show an experimental off-canvas layout, but like the other examples it requires extra custom CSS and JS that can be found here in the Bootstrap GH repo

一旦您添加了额外的CSS/JS，画布外示例便可以正常使用

Once you include the extra CSS/JS, the off-canvas example works as expected.

这篇关于Bootstrap 5 Off Canvas缺少CSS/JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！