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

Bootstrap 4 cho phép gom nhóm các nút nhấn (button) với nhau, chỉ cần với phần tử div và lớp .btn-group.

<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 --- DAMMIO</button>
</div>

Kích thước nhóm nút nhấn

Bạn có 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. Nếu bạn không dùng hai lớp này có nghĩa là kích thước của nhóm nút nhấn sẽ là mặc định.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<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 --- DAMMIO</button>
</div>

<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 --- DAMMIO</button>
</div>
</div>
</body>
</html>

Nhóm nút theo chiều dọc

Để tạo nhóm nút theo chiều dọc, bạn chỉ cần sử dụng lớp .btn-group-vertical.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<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 --- DAMMIO</button>
</div>
</div>
</body>
</html>

Nhóm nút con và menu xổ xuống (dropdown)

Bootstrap 4 cũng cho phép tạo menu dạng dropdown, bạn sẽ tìm hiểu chi tiết hơn các bài tiếp theo. Ví dụ tạo một menu dropdown bên trong nhóm nút như sau. Trong ví dụ này, chúng ta 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="vi">
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<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>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Nút 3 --- DAMMIO.COM
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Nút 4</a>
      <a class="dropdown-item" href="#">Nút 5</a>
    </div>
  </div>
</div>
</div>
</body>
</html>

Phân chia nút dropdown

Nếu 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ó thể dùng lớp .caret để thể hiện mũi tên xuống để tạo nút hiển thị cho menu dropdown.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<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 dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Nút 2</a>
    <a class="dropdown-item" href="#">Nút 3 --- DAMMIO.COM</a>
  </div>
</div>
</div>
</body>
</html>

Menu dropdown theo chiều dọc

Bạn chỉ cần định nghĩa nhóm nút theo chiều dọc là .btn-group-vertical, khi đó các menu dropdown con sẽ tự động theo chiều dọc. Hãy xem ví dụ sau để biết cách thực hiện.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<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>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">C#</a>
      <a class="dropdown-item" href="#">Java</a>
    </div>
  </div>
</div>
</div>
</body>
</html>

Tạo nhóm nút nhấn bên cạnh nhau

Các nhóm nút nhấn mặc định là theo “trong dòng”, tức nằm hàng ngang trong dòng. Vì vậy, khi bạn tạo nhiều nhóm nút nhấn thì các nhóm nút này sẽ tự động nằm theo dòng hàng ngang cạnh nhau.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<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 --- DAMMIO</button>
</div>
 
<div class="btn-group">
  <button type="button" class="btn btn-primary">Nút 4</button>
  <button type="button" class="btn btn-primary">Nút 5</button>
  <button type="button" class="btn btn-primary">Nút 6 --- DAMMIO</button>
</div>
</div>
</body>
</html>

Kết luận

Bài viết đã chỉ cho bạn cách gom nhóm các nút nhấn với nhau và tạo ra nhiều cách hiển thị khác nhau như chỉnh kích thước to nhỏ, theo chiều dọc, dùng menu phụ,… Mời bạn tiếp tục theo dõi bài tiếp theo để học thêm về Bootstrap 4.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Liên quan: [Bootstrap 4] Phần 17: Phân trang ảo cho bảng biểu (Table) bằng Bootstrap 4 và DataTables

Trích dẫn bài viết

APA:
Dammio. (2019). [Bootstrap 4] Phần 11: Nhóm nút nhấn. https://www.dammio.com/2019/08/06/bootstrap-4-phan-11-nhom-nut-nhan.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[Bootstrap 4] Phần 11: Nhóm nút nhấn}, year = {2019}, url = {https://www.dammio.com/2019/08/06/bootstrap-4-phan-11-nhom-nut-nhan}, urldate = {2024-07-25} }