Hướng dẫn và ví dụ Bootstrap Button Group

Xem thêm các chuyên mục:

Các hướng dẫn Bootstrap

Bootstrap Button Group
Button Group thẳng đứng
Button Group với Dropdown
Bootstrap Button Toolbar

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

1- Bootstrap Button Group

Bao bọc một danh sách các Bootstrap Button (.btn) trong một .btn-group để tạo ra một Button Group. Lớp .btn-group sẽ làm cho các .btn nằm sát nhau trên một hàng.


<div class="btn-group" role="group" aria-label="Basic example">
   <button type="button" class="btn btn-secondary">Left</button>
   <button type="button" class="btn btn-secondary">Middle</button>
   <button type="button" class="btn btn-secondary">Right</button>
</div>

Đối với <div class="btn-group"> bạn nên sử dụng các thuộc tính role, aria-label, mặc dù điều này không bắt buộc nhưng nó là code thân thiện với các thiết bị như Screen Reader.

Xem ví dụ đầy đủ cho Button Group:

button-group-example.html


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Button Group</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <h4 class="mb-4">Wrap series of .btn(s) in .btn-group</h4>

         <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-secondary">Left</button>
            <button type="button" class="btn btn-secondary">Middle</button>
            <button type="button" class="btn btn-secondary">Right</button>
         </div>

         <h4 class="mt-5 mb-4">Serials of .btn(s)</h4>
         <div>
           <button type="button" class="btn btn-secondary">Left</button>
           <button type="button" class="btn btn-secondary">Middle</button>
           <button type="button" class="btn btn-secondary">Right</button>
         </div>


      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

2- Button Group thẳng đứng

Sử dụng lớp .btn-group-vertical để tạo một Button Group thẳng đứng.


<div class="btn-group btn-group-vertical" role="group" aria-label="Vertical Button Group">
   <button type="button" class="btn btn-secondary">Top</button>
   <button type="button" class="btn btn-secondary">Middle</button>
   <button type="button" class="btn btn-secondary">Bottom</button>
</div>

3- Button Group với Dropdown

Các Dropdown Menu cũng có thể tham gia vào trong một Button Group.

Bootstrap Dropdowns

button-group-dropdown-example.html


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Button Group</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container-fluid">
         <h4 class="mb-4">Button Group with Dropdown Menu</h4>
         <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <button type="button" class="btn btn-primary dropdown-toggle"
               data-toggle="dropdown"
               aria-haspopup="true" aria-expanded="false">
            Sony
            <span class="sr-only">Toggle Dropdown</span>
            </button>
            <div class="dropdown-menu">
               <a class="dropdown-item" href="#">Tablet</a>
               <a class="dropdown-item" href="#">Smart Phone</a>
            </div>
         </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

4- Bootstrap Button Toolbar

Bao bọc (wrap) một danh sách các .btn-group bên trong một .btn-toolbar bạn sẽ có một thanh công cụ phức tạp. Nó giống như hình minh họa dưới đây:


<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
   <div class="btn-group mr-2" role="group" aria-label="Clipboard group">
      <button type="button" class="btn btn-primary">Copy</button>
      <button type="button" class="btn btn-primary">Paste</button>
      <button type="button" class="btn btn-primary">Cut</button>
   </div>
   <div class="btn-group mr-2" role="group" aria-label="Styles group">
      <button type="button" class="btn btn-secondary">Font</button>
      <button type="button" class="btn btn-secondary">Size</button>
   </div>
   <div class="btn-group" role="group" aria-label="Source group">
      <button type="button" class="btn btn-success">Source</button>
   </div>
</div>

.mr-2 (Margin Right 2) là một lớp tiện ích của Bootstrap, bạn có thể tìm hiểu về các lớp tiện ích trong Bootstrap trong bài viết dưới đây:

Bootstrap Spacing

Xem thêm các chuyên mục:

Các hướng dẫn Bootstrap