抽屉

创建一个可以在页面上平滑地滑入滑出的抽屉。

抽屉完美适用于构建移动端导航,与那些颇受欢迎的许多原生手机应用类似,在其左上角用一个按钮来开关带有菜单的侧边栏。

用法

抽屉组件由一个遮罩层和一个弹出边栏组成。

你可以使用任何元素来切换抽屉式侧边栏。 <a>元素需要链接至抽屉容器的 id。为了使必要的 JavaScript 生效,仅需添加data-offcanvas属性即可。如果你使用了其他元素,比如按钮,仅需添加 data-offcanvas="{target:'#ID'}" 属性指向抽屉容器的 id。

示例

打开

代码

<button class="btn" data-offcanvas="{target:'#offcanvas-1'}">打开</button>
<a href="#offcanvas-1" data-offcanvas>打开</a>
<div id="offcanvas-1" class="offcanvas">
    <div class="offcanvas-bar">...</div>
</div>

翻转抽屉

示例

代码

<button class="btn" data-offcanvas="{target:'#offcanvas-2'}">打开</button>
<div id="offcanvas-2" class="offcanvas">
    <div class="offcanvas-bar offcanvas-bar-flip">...</div>
</div>

包含面板的抽屉

示例

抽屉三
面板内容

代码

<button class="btn" data-offcanvas="{target:'#offcanvas-3'}">打开</button>
<div id="offcanvas-3" class="offcanvas">
    <div class="offcanvas-bar offcanvas-bar-flip">
        <div class="panel panel-offcanvas">...</div>
    </div>
</div>