Button group trong bootstrap 5

11/12
Thạch
Bootstrap 5
0
180

Chúng ta sẽ tìm hiểu về nhóm button trong Bootstrap, bao gồm cách tạo nhóm nút mặc định, tạo nhóm nút to/nhỏ, nhóm nút căn theo chiều dọc/ngang...

Bài 10: Button trong Bootstrap 5

Button Group cho phép bạn nhóm các nút liên tiếp nhau vào thành 1 dòng duy nhất. Điều này rất hữu ích nếu bạn muốn sắp xếp các nút có cùng cấp, cùng dòng, cùng định dạng lại với nhau. Nút sau khi đã nhóm lại sẽ có các định dạng như sau:

Nhóm nút ngang

Để tạo cụm nút như trên ta sẽ sử dụng thẻ <div> kết hợp với class .btn-group với nội dung code đầy đủ như sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Sinitc.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Nhóm nút trên Bootstrap</h2>
  <p>Lớp .btn-group tạo một nhóm nút:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sinitc.com</button>
    <button type="button" class="btn btn-primary">SNI.vn</button>
    <button type="button" class="btn btn-primary">SNI</button>
  </div>
</div>

</body>
</html>

Mẹo: Thay vì áp dụng kích thước chung cho mọi nút trong nhóm, hãy sử dụng lớp .btn-group-lg cho nhóm nút lớn hoặc .btn-group-sm cho nhóm nút nhỏ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Sinitc.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Kích thước nhóm Button trên Bootstrap</h2>
  <p>Thêm lớp .btn-group-* cho nút kích thước lớn/nhỏ.</p>
  <h3>Nút lớn:</h3>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Sinitc.com</button>
    <button type="button" class="btn btn-primary">SNI.vn</button>
    <button type="button" class="btn btn-primary">SNI</button>
  </div>
  <hr>
  <h3>Nút mặc định:</h3>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sinitc.com</button>
    <button type="button" class="btn btn-primary">SNI.vn</button>
    <button type="button" class="btn btn-primary">SNI</button>
  </div>
  <hr>
  <h3>Nút nhỏ:</h3>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-primary">Sinitc.com</button>
    <button type="button" class="btn btn-primary">SNI.vn</button>
    <button type="button" class="btn btn-primary">SNI</button>
  </div>
</div>

</body>
</html>

Bạn sẽ thấy kết quả như sau:

Nhóm nút dọc

Trong nhiều trường hợp bạn sẽ cần trình bày các dạng nút theo dạng xếp dọc thay vì xếp thành hàng như trên, lúc này, thay vì dùng .btn-group, bạn hãy sử dụng class .btn-group-vertical.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Sinitc.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Nhóm nút trên Bootstrap</h2>
  <p>Lớp .btn-group-vertical tạo một nhóm nút:</p>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Sinitc.com</button>
    <button type="button" class="btn btn-primary">SNI.vn</button>
    <button type="button" class="btn btn-primary">SNI</button>
  </div>
</div>

</body>
</html>

File HTML trên sẽ có nội dung hiển thị như sau:

Tạo nhiều nhóm nút cạnh nhau

Theo mặc định, các nhóm nút sẽ cùng nằm "inline" nên bạn hoàn toàn có thể đặt nhiều nhóm nút cạnh nhau liên tiếp trên 1 dòng, câu lệnh như sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Sinitc.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Nhóm nút trên Bootstrap</h2>
  <p>Các nhóm nút mặc định sẽ có định dạng "inline", điều này làm cho chúng xuất hiện cạnh nhau khi bạn có nhiều nhóm:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sinitc.com</button>
    <button type="button" class="btn btn-primary">SNI.vn</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sinitc.com</button>
    <button type="button" class="btn btn-primary">SNI.vn</button>
  </div>
</div>

</body>
</html>

Sẽ có kết quả như sau:

Nhóm nút lồng nhau và Menu thả xuống

Các nhóm nút lồng nhau để tạo menu dạng thả xuống, bạn có thể thấy dạng menu lồng nhau và thả xuống cơ bản sẽ như sau:

Đoạn code HTML để tạo được menu như trên là:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap - Sinitc.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Nhóm Menu thả xuống</h2>
  <p>Các nhóm nút lồng nhau để tạo menu thả xuống:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sinitc.com</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">SNI</button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Thiết bị y tế</a></li>
        <li><a class="dropdown-item" href="#">Đồ gia dụng</a></li>
      </ul>
    </div>
  </div>
</div>

</body>
</html>

Đó là ví dụ thôi, còn để tìm hiểu kỹ hơn về từng loại menu thả xuống, bạn hãy tiếp tục theo dõi trong các bài sau nhé!

Bài 12: Badge trong Bootstrap 5