Bên cạnh hỗ trợ đa dạng màu sắc và kiểu nút thì Bootstrap 4 cũng hỗ trợ người dùng nhóm các nút nhấn với nhau. Trong bài học này chúng ta sẽ tìm hiểu về cách nhóm các nút trong Bootstrap 4, cách tạo nhóm nút theo các chiều và cả cách tạo menu dropdown nữa nhé.
Nhóm nút nhấn trong Bootstrap 4
Bootstrap 4 cho phép người dùng gom nhóm các nút nhấn (button) với nhau, chỉ cần sử dụng phần tử div và lớp .btn-group.
<div class="container"> <div class="btn-group"> <button type="button" class="btn btn-primary">Nút 1</button> <button type="button" class="btn btn-primary">Nút 2</button> <button type="button" class="btn btn-primary">Nút 3</button> <button type="button" class="btn btn-primary">Nút 4</button> <button type="button" class="btn btn-primary">Nút 5</button> </div> </div>
Kích thước nhóm nút ấn
Tương tự như với các nút nhấn chúng ta ó thể dùng hai lớp .btn-group-lg và .btn-group-sm để định nghĩa kích thước nhóm nút nhấn nhỏ hay lớn. Mặc định nếu không sử dụng 2 lớp này thì kích thước của nhóm nút nhấn là mặc định.
<div class="container"> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">Nút 1</button> <button type="button" class="btn btn-primary">Nút 2</button> <button type="button" class="btn btn-primary">Nút 3</button> <button type="button" class="btn btn-primary">Nút 4</button> <button type="button" class="btn btn-primary">Nút 5</button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-primary">Nút 1</button> <button type="button" class="btn btn-primary">Nút 2</button> <button type="button" class="btn btn-primary">Nút 3</button> <button type="button" class="btn btn-primary">Nút 4</button> <button type="button" class="btn btn-primary">Nút 5</button> </div> </div>
Nhóm nút theo chiều dọc
Để tạo nhóm nút theo chiều dọc trong Bootstrap 4 chúng ta cần sử dụng lớp .btn-group-vertical.
Ví dụ:
<div class="container"> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Nút 1</button> <button type="button" class="btn btn-primary">Nút 2</button> <button type="button" class="btn btn-primary">Nút 3</button> <button type="button" class="btn btn-primary">Nút 4</button> <button type="button" class="btn btn-primary">Nút 5</button> </div>
Nhóm nút con và menu xổ xuống (dropdown)
Bootstrap 4 cũng cho phép chúng ta tạo menu dạng dropdown. Ví dụ dưới đây tạo một menu dropdown bên trong nhóm nút. Trong ví dụ này chúng mình tạo một nút với lớp là dropdown-toggle và thuộc tính data-toggle có giá trị downdown.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="btn-group"> <button type="button" class="btn btn-primary">Nokia</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"> Apple </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">iPhone 15</a> <a class="dropdown-item" href="#">iPhone 30</a> </div> </div> </div> </div> </body> </html> </body> </html>
Chi tiết hơn về menu dropdown chúng ta sẽ tìm hiểu ở bài sau nhé các bạn.
Phân chia nút dropdown
Trong trường hợp bạn muốn phân chia nút nhấn và menu dropdown ra thành 2 nút khác nhau, bạn cần sử dụng lớp .caret để thể hiện mũi tên xuống để tạo nút hiển thị cho menu dropdown.
<div class="container"> <div class="btn-group"> <button type="button" class="btn btn-primary">Nokia</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">Apple </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">iPhone 15</a> <a class="dropdown-item" href="#">iPhone 30</a> </div> </div> </div> </div>
Menu Dropdown theo chiều dọc
Vô cùng đơn giản chúng ta chỉ cần sử dụng lớp . btn-group-vertical để định nghĩa nhóm nút theo chiều dọc , khi đó các menu dropdown con sẽ tự động theo chiều dọc
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Nokia</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">Apple </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">iPhone 15</a> <a class="dropdown-item" href="#">iPhone 30</a> </div> </div> </div> </div> </body> </html> </body> </html>
Tạo nhóm nút nhấn bên cạnh nhau
Theo mặc định các nhóm nút nhấn sẽ nằm trên 1 dòng tức là nằm hàng ngang bởi vậy khi chúng ta tạo nhiều nhóm nút nhất thì các nhóm này sẽ tự động nằm theo hàng ngang cạnh nhau trên 1 dòng.
Lời kết:
Vậy là chúng ta đã tìm hiểu xong về cách nhóm các nút nhất (button) trong Bootstrap 4 rồi đấy. Qua bài này các bạn có thể vận dụng linh hoạt các nhóm nút nhấn cũng như các menu dropdown để tạo menu cho trang web của mình như ý. Chúc các bạn thành công.
