Buttons

为表单、对话框等操作定制的按钮样式。

Bootstrap Docs

Solid (default)

<!-- Primary button -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Accent button -->
<button type="button" class="btn btn-accent">Accent</button>

<!-- Secondary button -->
<button type="button" class="btn btn-secondary">Secondary</button>

<!-- Success button -->
<button type="button" class="btn btn-success">Success</button>

<!-- Danger button -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Warning button -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Info button -->
<button type="button" class="btn btn-info">Info</button>

<!-- Light button -->
<button type="button" class="btn btn-light">Info</button>

<!-- Dark button -->
<button type="button" class="btn btn-dark">Dark</button>

<!-- Link button -->
<button type="button" class="btn btn-link">Link</button>

// Primary button
button(type="button").btn.btn-primary
  | Primary

// Accent button
button(type="button").btn.btn-accent
  | Accent

// Secondary button
button(type="button").btn.btn-secondary
  | Secondary

// Success button
button(type="button").btn.btn-success
  | Success

// Danger button
button(type="button").btn.btn-danger
  | Danger

// Warning button
button(type="button").btn.btn-warning
  | Warning

// Info button
button(type="button").btn.btn-info
  | Info

// Light button
button(type="button").btn.btn-light
  | Light

// Dark button
button(type="button").btn.btn-dark
  | Dark

// Link button
button(type="button").btn.btn-link
  | Link

Outline

<!-- Primary button -->
<button type="button" class="btn btn-outline-primary">Primary</button>

<!-- Accent button -->
<button type="button" class="btn btn-outline-accent">Accent</button>

<!-- Secondary button -->
<button type="button" class="btn btn-outline-secondary">Secondary</button>

<!-- Success button -->
<button type="button" class="btn btn-outline-success">Success</button>

<!-- Danger button -->
<button type="button" class="btn btn-outline-danger">Danger</button>

<!-- Warning button -->
<button type="button" class="btn btn-outline-warning">Warning</button>

<!-- Info button -->
<button type="button" class="btn btn-outline-info">Info</button>

<!-- Light button -->
<button type="button" class="btn btn-outline-light">Info</button>

<!-- Dark button -->
<button type="button" class="btn btn-outline-dark">Dark</button>

// Primary button
button(type="button").btn.btn-outline-primary
  | Primary

// Accent button
button(type="button").btn.btn-outline-accent
  | Accent

// Secondary button
button(type="button").btn.btn-outline-secondary
  | Secondary

// Success button
button(type="button").btn.btn-outline-success
  | Success

// Danger button
button(type="button").btn.btn-outline-danger
  | Danger

// Warning button
button(type="button").btn.btn-outline-warning
  | Warning

// Info button
button(type="button").btn.btn-outline-info
  | Info

// Light button
button(type="button").btn.btn-outline-light
  | Light

// Dark button
button(type="button").btn.btn-outline-dark
  | Dark

Button shadow (solid buttons only)

<!-- Primary button -->
<button type="button" class="btn btn-primary btn-shadow">Primary</button>

<!-- Accent button -->
<button type="button" class="btn btn-accent btn-shadow">Accent</button>

<!-- Secondary button -->
<button type="button" class="btn btn-secondary btn-shadow">Secondary</button>

<!-- Success button -->
<button type="button" class="btn btn-success btn-shadow">Success</button>

<!-- Danger button -->
<button type="button" class="btn btn-danger btn-shadow">Danger</button>

<!-- Warning button -->
<button type="button" class="btn btn-warning btn-shadow">Warning</button>

<!-- Info button -->
<button type="button" class="btn btn-info btn-shadow">Info</button>

<!-- Light button -->
<button type="button" class="btn btn-light btn-shadow">Info</button>

<!-- Dark button -->
<button type="button" class="btn btn-dark btn-shadow">Dark</button>

// Primary button
button(type="button").btn.btn-primary.btn-shadow
  | Primary

// Accent button
button(type="button").btn.btn-accent.btn-shadow
  | Accent

// Secondary button
button(type="button").btn.btn-secondary.btn-shadow
  | Secondary

// Success button
button(type="button").btn.btn-success.btn-shadow
  | Success

// Danger button
button(type="button").btn.btn-danger.btn-shadow
  | Danger

// Warning button
button(type="button").btn.btn-warning.btn-shadow
  | Warning

// Info button
button(type="button").btn.btn-info.btn-shadow
  | Info

// Light button
button(type="button").btn.btn-light.btn-shadow
  | Light

// Dark button
button(type="button").btn.btn-dark.btn-shadow
  | Dark

Icons

<!-- Primary button with text and icon -->
<button type="button" class="btn btn-primary">
  <i class="ci-user me-2"></i>
  Profile
</button>

<!-- Secondary solid icon button -->
<button type="button" class="btn btn-secondary btn-icon">
  <i class="ci-edit"></i>
</button>

<!-- Danger outline icon button -->
<button type="button" class="btn btn-outline-danger btn-icon">
  <i class="ci-trash"></i>
</button>

<!-- Success solid icon button -->
<button type="button" class="btn btn-success btn-icon">
  <i class="ci-check"></i>
</button>

<!-- Warning pill solid icon button -->
<button type="button" class="btn btn-warning rounded-pill btn-icon">
  <i class="ci-star"></i>
</button>

<!-- Info pill outline icon button -->
<button type="button" class="btn btn-outline-info rounded-pill btn-icon">
  <i class="ci-bookmark"></i>
</button>

// Primary button with text and icon
button(type="button").btn.btn-primary
  i.ci-user.me-2
  | Profile

// Secondary solid icon button
button(type="button").btn.btn-secondary.btn-icon
  i.ci-edit

// Danger outline icon button
button(type="button").btn.btn-outline-danger.btn-icon
  i.ci-trash

// Success solid icon button
button(type="button").btn.btn-success.btn-icon
  i.ci-check

// Warning pill solid icon button
button(type="button").btn.btn-warning.rounded-pill.btn-icon
  i.ci-star

// Info pill outline icon button
button(type="button").btn.btn-outline-info.rounded-pill.btn-icon
  i.ci-bookmark

Market buttons

Download on theApp Store Download on theGoogle Play Download on theWindows Store Order now atAmazon.com

<!-- App Store button -->
<a href="#" class="btn-market btn-apple" role="button">
  <span class="btn-market-subtitle">Download on the</span>
  <span class="btn-market-title">App Store</span>
</a>

<!-- Google Play button -->
<a href="#" class="btn-market btn-google" role="button">
  <span class="btn-market-subtitle">Download on the</span>
  <span class="btn-market-title">Google Play</span>
</a>

<!-- Windows store button -->
<a href="#" class="btn-market btn-windows" role="button">
  <span class="btn-market-subtitle">Download on the</span>
  <span class="btn-market-title">Windows Store</span>
</a>

<!-- Amazon button -->
<a href="#" class="btn-market btn-amazon" role="button">
  <span class="btn-market-subtitle">Order now at</span>
  <span class="btn-market-title">Amazon.com</span>
</a>

// App Store button
a(href="#", role="button").btn-market.btn-apple
  span.btn-market-subtitle Download on the
  span.btn-market-title App Store

// Google Play button
a(href="#", role="button").btn-market.btn-google
  span.btn-market-subtitle Download on the
  span.btn-market-title Google Play

// Windows store button
a(href="#", role="button").btn-market.btn-windows
  span.btn-market-subtitle Download on the
  span.btn-market-title Windows Store

// Amazon button
a(href="#", role="button").btn-market.btn-amazon
  span.btn-market-subtitle Order now at
  span.btn-market-title Amazon.com

Shapes

<!-- Rounded solid button -->
<button type="button" class="btn btn-primary">Rounded</button>

<!-- Pill solid button -->
<button type="button" class="btn btn-primary rounded-pill">Pill button</button>

<!-- Square solid button -->
<button type="button" class="btn btn-primary rounded-0">Square</button>

<!-- Rounded outline button -->
<button type="button" class="btn btn-outline-primary">Rounded</button>

<!-- Pill outline button -->
<button type="button" class="btn btn-outline-primary rounded-pill">Pill button</button>

<!-- Square outline button -->
<button type="button" class="btn btn-outline-primary rounded-0">Square</button>

// Rounded solid button
button(type="button").btn.btn-primary
  | Rounded

// Pill solid button
button(type="button").btn.btn-primary.rounded-pill
  | Pill button

// Square solid button
button(type="button").btn.btn-primary.rounded-0
  | Square

// Rounded outline button
button(type="button").btn.btn-outline-primary
  | Rounded

// Pill outline button
button(type="button").btn.btn-outline-primary.rounded-pill
  | Pill button

// Square outline button
button(type="button").btn.btn-outline-primary.rounded-0
  | Square

Sizes

<!-- Large solid button -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>

<!-- Normal solid button -->
<button type="button" class="btn btn-primary">Normal button</button>

<!-- Small solid button -->
<button type="button" class="btn btn-primary btn-sm">Small button</button>

<!-- Large outline button -->
<button type="button" class="btn btn-outline-primary btn-lg">Large button</button>

<!-- Normal outline button -->
<button type="button" class="btn btn-outline-primary">Normal button</button>

<!-- Small outline button -->
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>

<!-- Block solid button -->
<button type="button" class="btn btn-primary d-block w-100">Block level button</button>

<!-- Block outline button -->
<button type="button" class="btn btn-outline-primary d-block w-100">Block level button</button>

// Large solid button
button(type="button").btn.btn-primary.btn-lg Large button

// Normal solid button
button(type="button").btn.btn-primary Normal button

// Small solid button
button(type="button").btn.btn-primary.btn-sm Small button

// Large outline button
button(type="button").btn.btn-outline-primary.btn-lg Large button

// Normal outline button
button(type="button").btn.btn-outline-primary Normal button

// Small outline button
button(type="button").btn.btn-outline-primary.btn-sm Small button

// Block solid button
button(type="button").btn.btn-primary.d-block.w-100 Block level button

// Block outline button
button(type="button").btn.btn-outline-primary.d-block.w-100 Block level button

States

<!-- Button states -->
<button type="button" class="btn btn-primary active">Active</button>
<button type="button" class="btn btn-secondary active">Active</button>
<button type="button" class="btn btn-primary" disabled>Disabled</button>
<button type="button" class="btn btn-secondary" disabled>Disabled</button>
<button type="button" class="btn btn-primary" data-bs-toggle="button">Button toggle</button>
<button type="button" class="btn btn-primary">
  <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
  Loading...
</button>
<button type="button" class="btn btn-secondary">
  <span class="spinner-grow spinner-grow-sm me-2" role="status" aria-hidden="true"></span>
  Loading...
</button>

// Button states
button(type="button").btn.btn-primary.active Active
button(type="button").btn.btn-secondary.active Active
button(type="button", disabled).btn.btn-primary Disabled
button(type="button", disabled).btn.btn-secondary Disabled
button(type="button", data-bs-toggle="button").btn.btn-primary Button toggle
button(type="button").btn.btn-primary
  span(role="status", aria-hidden="true").spinner-border.spinner-border-sm.me-2
  | Loading...
button(type="button").btn.btn-secondary
  span(role="status", aria-hidden="true").spinner-grow.spinner-grow-sm.me-2
  | Loading...

Like / dislike buttons

Idle state

Active state

<!-- Like / dislike idle state -->
<div class="text-nowrap">
  <button type="button" class="btn-like">16</button>
  <button type="button" class="btn-dislike">4</button>
</div>

<!-- Like / dislike active state -->
<div class="text-nowrap">
  <button type="button" class="btn-like active">16</button>
  <button type="button" class="btn-dislike active">4</button>
</div>

// Like / dislike idle state
.text-nowrap
  button(type="button").btn-like
    | 16
  button(type="button").btn-dislike
    | 4

// Like / dislike active state
.text-nowrap
  button(type="button").btn-like.active
    | 16
  button(type="button").btn-dislike.active
    | 4