im体育
  • 实时预览
  • |
加入购物车

侧边栏

im体育的侧边栏可是个神奇的小空间！它就像你随身的体育助手，能把导航菜单、个人中心，还有你最关心的比赛动态悄悄藏起来，让你的主界面永远保持清爽。我们可是经过了全球体育迷的“火眼金睛”检验，保证在任何设备上都能给你带来丝滑流畅的体验！

Bootstrap文档

左侧侧边栏

此处放置侧边栏内容。您可以放置几乎任何 Bootstrap 组件或自定义元素。

右侧侧边栏

在im体育数据方面，im体育提供贴心周到的支持。

底部侧边栏

im体育以im电竞为核心，带来高效便捷的体验。

侧边栏组件

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

放置

<!-- 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.
顶部
微信：im_957