[Bootstrap] Phần 10: Nhóm nút nhấn

Trong bài này, các bạn sẽ học nhóm các nút nhấn trong Bootstrap cũng như tạo các dạng menu cơ bản dùng nút nhấn.

Nhóm nút nhấn

Bootstrap cho phép nhóm 1 các nút nhấn cùng nhau trên 1 hàng dọc hoặc 1 dòng đơn. Để làm được như vậy, chúng ta dùng phần tử div với lớp .btn-group để tạo nhóm nút nhấn.

<div class="btn-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">Sony</button>
</div>

Nhóm nút nhấn theo hàng dọc
Chúng ta có thể dùng lớp .btn-group-vertical để liệt kê các nút theo hàng dọc.

<div class="btn-group-vertical">
  <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">Sony</button>
</div>

Nhóm nút canh đều
Để tạo 1 nhóm nút có độ rộng đều nhau, bạn dùng lớp .btn-group-justified

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>

Tạo nút con bên trong nút và menu dropdown
Tiếp đến, chúng ta xét đến trường hợp tạo 1 nhóm nút bên trong 1 nút, và khi nhấn nút lên nút cha này thì sẽ xổ ra 1 danh sách các nút con.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

Trong ví dụ trên, chúng ta thấy nút có tên là Sony có thêm thuộc tính class=”dropdown-toggle” và data-toggle=”dropdown” để khai báo nguồn dữ liệu danh sách các nút con là từ dropdown và khi nhấn nút sẽ hiển thị nhóm nút con. Đoạn span class=”caret” dùng để tạo 1 nút nhỏ hình tam giác hướng xuống để tạo hiệu ứng đồ họa nút Sony chứa các nút con.

Tổng kết: qua bài này các bạn đã học được cách định nghĩa nhóm các nút và cách tạo nhóm nút con bằng menu xổ xuống.