垦荒学园

简体中文

English

简体中文

English

切换主题

Bootstrap 侧边栏导航 ​

🎯 概述 ​

Bootstrap 侧边栏导航（Offcanvas）是一个隐藏的侧边栏组件，可以从屏幕边缘滑入。常用于移动端导航菜单、购物车、设置面板等。

📦 基本用法 ​

html
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
    打开侧边栏
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">侧边栏标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <p>侧边栏内容</p>
    </div>
</div>

📍 侧边栏位置 ​

html
<!-- 左侧 -->
<div class="offcanvas offcanvas-start" id="offcanvasLeft">
    <div class="offcanvas-header">
        <h5>左侧侧边栏</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">内容</div>
</div>

<!-- 右侧 -->
<div class="offcanvas offcanvas-end" id="offcanvasRight">
    <div class="offcanvas-header">
        <h5>右侧侧边栏</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">内容</div>
</div>

<!-- 顶部 -->
<div class="offcanvas offcanvas-top" id="offcanvasTop">
    <div class="offcanvas-header">
        <h5>顶部侧边栏</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">内容</div>
</div>

<!-- 底部 -->
<div class="offcanvas offcanvas-bottom" id="offcanvasBottom">
    <div class="offcanvas-header">
        <h5>底部侧边栏</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">内容</div>
</div>

💻 JavaScript API ​

javascript
const offcanvas = new bootstrap.Offcanvas('#myOffcanvas');

// 显示
offcanvas.show();

// 隐藏
offcanvas.hide();

// 切换
offcanvas.toggle();

// 销毁
offcanvas.dispose();

🌟 实际示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 侧边栏导航示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <h1>Bootstrap 侧边栏导航示例</h1>
        
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasMenu">
            打开菜单
        </button>
        
        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasMenu">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title">导航菜单</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
            </div>
            <div class="offcanvas-body">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">产品</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">服务</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

下一步 ​

下一章：Bootstrap 小工具 →