Add to Cart Dropdowns
点击这里，解锁更多精彩体育赛事信息和互动社区！
Bootstrap Docs
Static examples
<!-- Dropdown example 1 -->
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Regular link</a>
<a href="#" class="dropdown-item">Another regular link</a>
<a href="#" class="dropdown-item active">Active link</a>
<a href="#" class="dropdown-item disabled">Disabled link</a>
</div>
<!-- Dropdown example 2 -->
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separeted link</a>
</div>
<!-- Dropdown example 3 -->
<div class="dropdown-menu">
<a href="#" class="dropdown-item">
<i class="ci-home me-2"></i>
Regular link
<span class="badge rounded-pill bg-faded-dark text-body ms-2">2</span>
</a>
<a href="#" class="dropdown-item">
<i class="ci-user-circle me-2"></i>
Profile
<span class="badge rounded-pill bg-primary ms-2">3</span>
</a>
<a href="#" class="dropdown-item">
<i class="ci-message me-2"></i>
Messages
<span class="badge rounded-pill bg-success ms-2">5</span>
</a>
<a href="#" class="dropdown-item">
<i class="ci-settings me-2"></i>
Settings
<span class="badge rounded-pill bg-warning ms-2">1</span>
</a>
</div>// Dropdown example 1
.dropdown-menu
a(href="#").dropdown-item
| Regular link
a(href="#").dropdown-item
| Another regular link
a(href="#").dropdown-item.active
| Active link
a(href="#").dropdown-item.disabled
| Disabled link
// Dropdown example 2
.dropdown-menu
h6.dropdown-header
| Dropdown header
a(href="#").dropdown-item
| Action
a(href="#").dropdown-item
| Another action
.dropdown-divider
a(href="#").dropdown-item
| Separated link
// Dropdown example 3
.dropdown-menu
a(href="#").dropdown-item
i.ci-home.me-2
| Home
span.badge.rounded-pill.bg-faded-dark.text-body.ms-2
| 2
a(href="#").dropdown-item
i.ci-user-circle.me-2
| Profile
span.badge.rounded-pill.bg-primary.ms-2
| 3
a(href="#").dropdown-item
i.ci-message.me-2
| Messages
span.badge.rounded-pill.bg-success.ms-2
| 5
a(href="#").dropdown-item
i.ci-settings.me-2
| Settings
span.badge.rounded-pill.bg-warning.ms-2
| 1
Dark dropdowns
<!-- Dark dropdown example 1 -->
<div class="dropdown-menu dropdown-menu-dark">
<a href="#" class="dropdown-item">Regular link</a>
<a href="#" class="dropdown-item">Another regular link</a>
<a href="#" class="dropdown-item active">Active link</a>
<a href="#" class="dropdown-item disabled">Disabled link</a>
</div>
<!-- Dark dropdown example 2 -->
<div class="dropdown-menu dropdown-menu-dark">
<h6 class="dropdown-header">Dropdown header</h6>
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separeted link</a>
</div>
<!-- Dark dropdown example 3 -->
<div class="dropdown-menu dropdown-menu-dark">
<a href="#" class="dropdown-item">
<i class="ci-home me-2"></i>
Regular link
<span class="badge rounded-pill bg-light text-body ms-2">2</span>
</a>
<a href="#" class="dropdown-item">
<i class="ci-user-circle me-2"></i>
Profile
<span class="badge rounded-pill bg-primary ms-2">3</span>
</a>
<a href="#" class="dropdown-item">
<i class="ci-message me-2"></i>
Messages
<span class="badge rounded-pill bg-success ms-2">5</span>
</a>
<a href="#" class="dropdown-item">
<i class="ci-settings me-2"></i>
Settings
<span class="badge rounded-pill bg-warning ms-2">1</span>
</a>
</div>// Dark dropdown example 1
.dropdown-menu.dropdown-menu-dark
a(href="#").dropdown-item
| Regular link
a(href="#").dropdown-item
| Another regular link
a(href="#").dropdown-item.active
| Active link
a(href="#").dropdown-item.disabled
| Disabled link
// Dark dropdown example 2
.dropdown-menu.dropdown-menu-dark
h6.dropdown-header
| Dropdown header
a(href="#").dropdown-item
| Action
a(href="#").dropdown-item
| Another action
.dropdown-divider
a(href="#").dropdown-item
| Separated link
// Dark dropdown example 3
.dropdown-menu.dropdown-menu-dark
a(href="#").dropdown-item
i.ci-home.me-2
| Home
span.badge.rounded-pill.bg-light.text-body.ms-2
| 2
a(href="#").dropdown-item
i.ci-user-circle.me-2
| Profile
span.badge.rounded-pill.bg-primary.ms-2
| 3
a(href="#").dropdown-item
i.ci-message.me-2
| Messages
span.badge.rounded-pill.bg-success.ms-2
| 5
a(href="#").dropdown-item
i.ci-settings.me-2
| Settings
span.badge.rounded-pill.bg-warning.ms-2
| 1
Forms inside dropdown
<!-- Forms inside dropdown -->
<div class="dropdown-menu" style="width: 17rem;">
<form class="p-4">
<div class="mb-3">
<label for="exampleDropdownFormEmail" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail" placeholder="[email protected]" required>
</div>
<div class="mb-3">
<label for="exampleDropdownFormPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword" placeholder="Password" required>
</div>
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label for="dropdownCheck" class="form-check-label">Remember me</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign In</button>
</form>
</div>// Forms inside dropdown
.dropdown-menu(style="width: 17rem;")
form.p-4
.mb-3
label(for="exampleDropdownFormEmail").form-label
| Email address
input(type="email", id="exampleDropdownFormEmail", placeholder="[email protected]", required).form-control
.mb-3
label(for="exampleDropdownFormPassword").form-label
| Password
input(type="password", id="exampleDropdownFormPassword", placeholder="Password", required).form-control
.mb-3
.form-check
input(type="checkbox", id="dropdownCheck").form-check-input
label(for="dropdownCheck").form-check-label
| Remember me
button(type="submit").btn.btn-primary
| Sign In
Directions
<!-- Dropdown -->
<div class="btn-group dropdown">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
<!-- Dropup -->
<div class="btn-group dropup">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
<!-- Dropright -->
<div class="btn-group dropend">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
<!-- Dropleft -->
<div class="btn-group dropstart">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>// Dropdown
.btn-group.dropdown
button(type="button", data-bs-toggle="dropdown", aria-haspopup="true", aria-expanded="false").btn.btn-outline-secondary.dropdown-toggle
| Dropdown
.dropdown-menu
a(href="#").dropdown-item
| Action
a(href="#").dropdown-item
| Another action
.dropdown-divider
a(href="#").dropdown-item
| Something else here
// Dropup
.btn-group.dropup
button(type="button", data-bs-toggle="dropdown", aria-haspopup="true", aria-expanded="false").btn.btn-outline-secondary.dropdown-toggle
| Dropup
.dropdown-menu
a(href="#").dropdown-item
| Action
a(href="#").dropdown-item
| Another action
.dropdown-divider
a(href="#").dropdown-item
| Something else here
// Dropright
.btn-group.dropend
button(type="button", data-bs-toggle="dropdown", aria-haspopup="true", aria-expanded="false").btn.btn-outline-secondary.dropdown-toggle
| Dropright
.dropdown-menu
a(href="#").dropdown-item
| Action
a(href="#").dropdown-item
| Another action
.dropdown-divider
a(href="#").dropdown-item
| Something else here
// Dropleft
.btn-group.dropstart
button(type="button", data-bs-toggle="dropdown", aria-haspopup="true", aria-expanded="false").btn.btn-outline-secondary.dropdown-toggle
| Dropleft
.dropdown-menu
a(href="#").dropdown-item
| Action
a(href="#").dropdown-item
| Another action
.dropdown-divider
a(href="#").dropdown-item
| Something else here
Menu alignment
<!-- Dropdown -->
<div class="btn-group dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-end">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>// Dropdown
.btn-group.dropdown
button(type="button", data-bs-toggle="dropdown", aria-haspopup="true", aria-expanded="false").btn.btn-primary.dropdown-toggle
| Right-aligned menu
.dropdown-menu.dropdown-menu-end
a(href="#").dropdown-item
| Action
a(href="#").dropdown-item
| Another action
.dropdown-divider
a(href="#").dropdown-item
| Something else here
Split button
<!-- Solid split button -->
<div class="btn-group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="visually-hidden">Toggle dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
<!-- Outline split button -->
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">Button</button>
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="visually-hidden">Toggle dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>// Solid split button
.btn-group
button(type="button").btn.btn-primary
| Button
button(type="button", data-bs-toggle="dropdown", aria-haspopup="true", aria-expanded="false'").btn.btn-primary.dropdown-toggle.dropdown-toggle-split
span.visually-hidden
| Toggle dropdown
.dropdown-menu
| ...
// Outline split button
.btn-group
button(type="button").btn.btn-outline-primary
| Button
button(type="button", data-bs-toggle="dropdown", aria-haspopup="true", aria-expanded="false'").btn.btn-outline-primary.dropdown-toggle.dropdown-toggle-split
span.visually-hidden
| Toggle dropdown
.dropdown-menu
| ...