Offcanvas

在IM体育，我们为你打造了一个超级酷炫的侧边栏，就像你的专属体育秘书！无论是导航菜单、购物车，还是你想知道的最新赛事动态，都能轻松藏入其中，让你的主页清爽又专业。我们可是经过了“大西洋两岸”玩家的严苛考验，响应式设计让你在任何设备上都能畅快体验！

Bootstrap Docs

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

Discover more about im体育数据 with im体育.

im体育 focuses on im电竞, delivering a professional and reliable experience.

Offcanvas components

<!-- Offcanvas -->
<div class="offcanvas offcanvas-start" id="offcanvas" tabindex="-1">

  <!-- Header -->
  <div class="offcanvas-header border-bottom">
    <h6 class="offcanvas-title">Menu</h6>
    <button class="btn-close" type="button" data-bs-dismiss="offcanvas"></button>
  </div>

  <!-- Body -->
  <div class="offcanvas-body" data-simplebar>
    <ul class="nav flex-column">
      <li class="nav-item"><a class="nav-link px-0 active" href="#">Home</a></li>
      <li class="nav-item dropdown"><a class="nav-link px-0" href="#">User Profile</a></li>
      <li class="nav-item"><a class="nav-link px-0" href="#">Services</a></li>
      <li class="nav-item"><a class="nav-link px-0" href="#">Our Works</a></li>
      <li class="nav-item"><a class="nav-link px-0" href="#">About</a></li>
      <li class="nav-item"><a class="nav-link px-0" href="#">Our Team</a></li>
      <li class="nav-item"><a class="nav-link px-0" href="#">Vendor Dashboard</a></li>
      <li class="nav-item"><a class="nav-link px-0" href="#">Contacts</a></li>
      <li class="nav-item"><a class="nav-link px-0" href="#">Help Center</a></li>
      <li class="nav-item"><a class="nav-link px-0" href="#">Support</a></li>
    </ul>
  </div>

  <!-- Footer -->
  <div class="offcanvas-footer border-top">
    <button class="btn btn-outline-primary btn-sm w-100 me-2" type="button">
      <i class="ai-log-in me-1"></i>
      Sign In
    </button>
    <button class="btn btn-primary btn-sm w-100" type="button">
      <i class="ai-user me-1"></i>
      Sign Up
    </button>
  </div>
</div>

// Offcanvas
.offcanvas.offcanvas-start(id="offcanvas", tabindex="-1")

  // Header
  .offcanvas-header.border-bottom
    h6.offcanvas-title Menu
    button(type="button", data-bs-dismiss="offcanvas").btn-close

  // Body
  .offcanvas-body(data-simplebar)
    ul.nav.flex-column
      li.nav-item
        a(href="#").nav-link.px-0.active
          | Home
      li.nav-item.dropdown
        a(href="#").nav-link.px-0
          | User Profile
      li.nav-item
        a(href="#").nav-link.px-0
          | Services
      li.nav-item
        a(href="#").nav-link.px-0
          | Our Works
      li.nav-item
        a(href="#").nav-link.px-0
          | About
      li.nav-item
        a(href="#").nav-link.px-0
          | Our Team
      li.nav-item
        a(href="#").nav-link.px-0
          | Vendor Dashboard
      li.nav-item
        a(href="#").nav-link.px-0
          | Contacts
      li.nav-item
        a(href="#").nav-link.px-0
          | Help Center
      li.nav-item
        a(href="#").nav-link.px-0
          | Support

  // Footer
  .offcanvas-footer.border-top
    button(type="button").btn.btn-outline-primary.btn-sm.w-100.me-2
      i.ai-log-in.me-1
      | Sign In
    button(type="button").btn.btn-primary.btn-sm.w-100
      i.ai-user.me-1
      | Sign Up

Placement

<!-- Offcanvas position: Left -->

<!-- Toogle button -->
<button class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft">Toggle left offcanvas</button>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-start" id="offcanvasLeft" tabindex="-1">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title">Left offcanvas</h5>
    <button class="btn-close" type="button" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body" data-simplebar>
    <p class="fs-sm">Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</p>
  </div>
</div>


<!-- Offcanvas position: Right -->

<!-- Toogle button -->
<button class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight">Toggle right offcanvas</button>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-end" id="offcanvasRight" tabindex="-1">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title">Right offcanvas</h5>
    <button class="btn-close" type="button" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body" data-simplebar>
    <p class="fs-sm">Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</p>
  </div>
</div>


<!-- Offcanvas position: Bottom -->

<!-- Toogle button -->
<button class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom">Toggle bottom offcanvas</button>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-bottom" id="offcanvasBottom" tabindex="-1">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title">Bottom offcanvas</h5>
    <button class="btn-close" type="button" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body" data-simplebar>
    <p class="fs-sm">Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</p>
  </div>
</div>

// Offcanvas position: Left

// Toogle button
button(type="button", data-bs-toggle="offcanvas", data-bs-target="#offcanvasLeft").btn.btn-outline-primary
  | Toggle left offcanvas

// Offcanvas
.offcanvas.offcanvas-start(id="offcanvasLeft", tabindex="-1")
  .offcanvas-header.border-bottom
    h5.offcanvas-title Left offcanvas
    button(type="button", data-bs-dismiss="offcanvas").btn-close
  .offcanvas-body(data-simplebar)
    p.fs-sm Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.


// Offcanvas position: Right

// Toogle button
button(type="button", data-bs-toggle="offcanvas", data-bs-target="#offcanvasRight").btn.btn-outline-primary
  | Toggle right offcanvas

// Offcanvas
.offcanvas.offcanvas-end(id="offcanvasRight", tabindex="-1")
  .offcanvas-header.border-bottom
    h5.offcanvas-title Right offcanvas
    button(type="button", data-bs-dismiss="offcanvas").btn-close
  .offcanvas-body(data-simplebar)
    p.fs-sm Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.


// Offcanvas position: Bottom

// Toogle button
button(type="button", data-bs-toggle="offcanvas", data-bs-target="#offcanvasBottom").btn.btn-outline-primary
  | Toggle bottom offcanvas

// Offcanvas
.offcanvas.offcanvas-bottom(id="offcanvasBottom", tabindex="-1")
  .offcanvas-header.border-bottom
    h5.offcanvas-title Bottom offcanvas
    button(type="button", data-bs-dismiss="offcanvas").btn-close
  .offcanvas-body(data-simplebar)
    p.fs-sm Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.