Nhóm các nút (button) trong Bootstrap 3

Trong bài này, các chúng ta sẽ học nhóm các nút nhấn (button) trong Bootstrap 3 cũng như tạo các dạng menu cơ bản sử dụng nút nhấn.

Nhóm các nút (button) trong Bootstrap 3

Bootstrap 3 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 sử 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">Nokia</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Nhóm nút nhấn theo hàng dọc (Vertical Button Groups)

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

Nhóm nút canh đều (Justified Button Groups)

Để 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">Nokia</a>
  <a href="#" class="btn btn-primary">Xiaomi</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>

Tạo nút con bên trong nút và menu dropdown 

Menu Dropdown là menu xổ xuống khi nhấn lên nút cha này thì sẽ xổ ra 1 danh sách các nút con. 

<div class="container">
  <h2>Nesting Button Groups</h2>
  <p>Nest button groups to create drop down menus:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Nokia</button>
    <button type="button" class="btn btn-primary">Xiaomi</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>
</div>

Ở đây chúng ta chọn nút Sony làm nút cha, menu dropdown sẽ xuất hiện ở đây. Tại nút này chúng ta 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.

Lời kết:

Với Bootstrap 3 việc nhóm các button thành Menu và sắp xết chúng tương đối dễ dàng. Hơn nữa việc tạo menu dropdown cũng đơn giản không kém. Hi vọng bài viết này giúp ích được cho các bạn. Chúc các bạn học tốt!