藥丸按鈕

您的体育娱乐指南！

Bootstrap 文件

基本範例

<!-- Nav pills -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

// Nav pills
ul(class="nav nav-pills")
  li.nav-item
    a(href="#", class="nav-link active")
      | Active
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link disabled", tabindex="-1", aria-disabled="true")
      | Disabled

藥丸形藥丸按鈕

<!-- Rounded nav pills -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a href="#" class="nav-link rounded-pill active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link rounded-pill">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link rounded-pill">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link rounded-pill disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

// Rounded nav pills
ul(class="nav nav-pills")
  li.nav-item
    a(href="#", class="nav-link rounded-pill active")
      | Active
  li.nav-item
    a(href="#", class="nav-link rounded-pill")
      | Link
  li.nav-item
    a(href="#", class="nav-link rounded-pill")
      | Link
  li.nav-item
    a(href="#", class="nav-link rounded-pill disabled", tabindex="-1", aria-disabled="true")
      | Disabled

填滿與置中

<!-- Nav pills: Fill -->
<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

<!-- Nav pills: Justified -->
<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

// Nav pills: Fill
ul(class="nav nav-pills nav-fill")
  li.nav-item
    a(href="#", class="nav-link active")
      | Active
  li.nav-item
    a(href="#", class="nav-link")
      | Much longer nav link
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link disabled",  tabindex="-1", aria-disabled="true")
      | Disabled

// Nav pills: Justified
ul(class="nav nav-pills nav-justified")
  li.nav-item
    a(href="#", class="nav-link active")
      | Active
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link disabled",  tabindex="-1", aria-disabled="true")
      | Disabled

帶有下拉式選單的藥丸按鈕

<!-- Pills with dropdowns -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a href="#" class="dropdown-item">Action</a>
      <a href="#" class="dropdown-item">Another action</a>
      <a href="#" class="dropdown-item">Something else here</a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

// Pills with dropdowns
ul(class="nav nav-pills")
  li.nav-item
    a(href="#", class="nav-link active")
      | Active
  li.nav-item.dropdown
    a(href="#", class="nav-link dropdown-toggle", data-bs-toggle="dropdown", role="button", aria-haspopup="true", aria-expanded="false")
      | Dropdown
    .dropdown-menu
      a(href='#').dropdown-item Action
      a(href='#').dropdown-item Another action
      a(href='#').dropdown-item Something else here
      .dropdown-divider
      a(href='#').dropdown-item Separated link
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link disabled",  tabindex="-1", aria-disabled="true")
      | Disabled

垂直藥丸按鈕

<!-- Vertical pills -->
<ul class="nav nav-pills flex-column">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

// Vertical pills
ul(class="nav nav-pills flex-column")
  li.nav-item
    a(href="#", class="nav-link active")
      | Active
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link disabled", tabindex="-1", aria-disabled="true")
      | Disabled

JavaScript 行為

im体育中文平台提供专业体育赛事直播、实时资讯、互动交流及社区。快速获取比赛信息，参与活动，体验完整功能。界面清晰直观，操作顺畅，访问稳定可靠。安全、全面、便捷的在线体育娱乐平台。

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

想了解更多im体育分析相关内容，尽在im体育。

<!-- Nav pills -->
<ul class="nav nav-pills mb-3" role="tablist">
  <li class="nav-item">
    <a href="#" class="nav-link active" id="pills-home1" data-bs-toggle="pill" role="tab" aria-controls="home1" aria-selected="true">
      <i class="ci-home me-2"></i>
      Home
    </a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link" id="pills-profile1" data-bs-toggle="pill" role="tab" aria-controls="profile1" aria-selected="false">
      <i class="ci-user me-2"></i>
      Profile
    </a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link" id="pills-messages1" data-bs-toggle="pill" role="tab" aria-controls="messages1" aria-selected="false">
      <i class="ci-message me-2"></i>
      Messages
    </a>
  </li>
</ul>

<!-- Pills content -->
<div class="tab-content">
  <div id="home1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="pills-home1">
    ...
  </div>
  <div id="profile1" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-profile1">
    ...
  </div>
  <div id="messages1" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-messages1">
    ...
  </div>
</div>

// Nav pills
ul(class="nav nav-pills mb-3", role="tablist")
  li.nav-item
    a(href="#home1", class="nav-link active", id="pills-home1", data-bs-toggle="pill", role="tab", aria-controls="home1", aria-selected="true")
      i.ci-home.me-2
      | Home
  li.nav-item
    a(href="#profile1", class="nav-link", id="pills-profile1", data-bs-toggle="pill", role="tab", aria-controls="profile1", aria-selected="false")
      i.ci-user.me-2
      | Profile
  li.nav-item
    a(href="#messages1", class="nav-link", id="pills-messages1", data-bs-toggle="pill", role="tab", aria-controls="messages1", aria-selected="false")
      i.ci-message.me-2
      | Messages

// Pills content
.tab-content
  #home1.tab-pane.fade.show.active(role="tabpanel", aria-labelledby="pills-home1")
    | ...
  #profile1.tab-pane.fade(role="tabpanel", aria-labelledby="pills-profile1")
    | ...
  #messages1.tab-pane.fade(role="tabpanel", aria-labelledby="pills-messages1")
    | ...