Bootstrap按鈕通過組合btn類與樣式類實現(xiàn)多樣化設計，1. 使用btn-primary至btn-link等類創(chuàng)建不同樣式按鈕，結(jié)合btn-lg、btn-sm調(diào)整大小，使用btn-outline-*創(chuàng)建輪廓按鈕；2. 通過btn-group容器將按鈕水平分組，添加btn-group-vertical實現(xiàn)垂直堆疊；3. 在按鈕組上應用btn-group-lg或btn-group-sm統(tǒng)一尺寸；4. 在按鈕組內(nèi)嵌套dropdown-toggle與dropdown-menu實現(xiàn)下拉菜單，需引入Bootstrap JavaScript與Popper.js；5. 使用btn-toolbar結(jié)合多個btn-group創(chuàng)建工具欄，並用me-2等間距類分隔組，始終添加role="group"和aria-label確?？稍L問性，最終構(gòu)建響應式且美觀的用戶界面。

Bootstrap makes it easy to style buttons and group them together for a clean, responsive UI. Here's how to use Bootstrap buttons and button groups effectively.

1. Using Bootstrap Buttons

Bootstrap provides several predefined button styles using simple classes. Just add the btn class plus a modifier class to any <button></button> or <a></a> element.

Basic Button Classes:

• btn-primary
• btn-secondary
• btn-success
• btn-danger
• btn-warning
• btn-info
• btn-light
• btn-dark
• btn-link

Example:

 <button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<a href="#" class="btn btn-danger">Link Button</a>

? Tip: Use <button> for actions and <a> with btn when navigating. Always include btn as the base class.

You can also make buttons larger or smaller:

• btn-lg → Large button
• btn-sm → Small button

 <button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-secondary btn-sm">Small</button>

And create outline (lighter) buttons with btn-outline-* :

 <button type="button" class="btn btn-outline-primary">Outline Primary</button>
<button type="button" class="btn btn-outline-danger">Outline Danger</button>

2. Using Button Groups

Button groups allow you to place multiple buttons side-by-side in a compact container. Wrap buttons in a <div> with the class btn-group .

Example of a Horizontal Button Group:

 <div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

? Always include role="group" and an aria-label for accessibility:

 <div class="btn-group" role="group" aria-label="Basic example">

Vertical Button Group:

Use btn-group-vertical to stack buttons vertically:

 <div class="btn-group-vertical" role="group">
  <button type="button" class="btn btn-info">Top</button>
  <button type="button" class="btn btn-info">Middle</button>
  <button type="button" class="btn btn-info">Bottom</button>
</div>

3. Sizing Button Groups

Apply size classes to the entire group to make all buttons inside consistent:

• btn-group-lg
• btn-group-sm

 <div class="btn-group btn-group-lg" role="group">
  <button type="button" class="btn btn-secondary">Large</button>
  <button type="button" class="btn btn-secondary">Button</button>
</div>

4. Nesting Buttons (Dropdowns in Groups)

You can include dropdown menus inside a button group.

Example:

 <div class="btn-group" role="group">
  <button type="button" class="btn btn-primary">Action</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Option 1</a></li>
      <li><a class="dropdown-item" href="#">Option 2</a></li>
    </ul>
  </div>
</div>

Make sure to include Bootstrap's JavaScript and Popper.js for dropdowns to work.

5. Button Toolbars (Grouping Multiple Button Groups)

Use btn-toolbar to combine multiple button groups (eg, for toolbars in editors):

 <div class="btn-toolbar" role="toolbar">
  <div class="btn-group me-2" role="group">
    <button type="button" class="btn btn-secondary">Bold</button>
    <button type="button" class="btn btn-secondary">Italic</button>
  </div>
  <div class="btn-group me-2" role="group">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Center</button>
    <button type="button" class="btn btn-secondary">Right</button>
  </div>
</div>

Use spacing utilities like me-2 (margin-end) to separate groups.

Basically, Bootstrap buttons are about combining btn with utility and style classes, and button groups help organize related actions. Just remember to keep accessibility in mind and test responsiveness.

以上是如何使用bootstrap按鈕和按鈕組？的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！