Nhóm nút nhấn trong Bootstrap 4

Nhóm nút nhấn trong Bootstrap 4

Anh NguyễnBạn nghĩ gì về bài viết này?

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.

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

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 trong Bootstrap sẽ là mặc định.

Bootstrap Example

Button Group

The .btn-group class creates a button group:

<!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">
  <h2>Button Group</h2>
  <p>The .btn-group class creates a button group:</p>
  <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>
</div>

</body>
</html>
Code language: HTML, XML (xml)

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.

Bootstrap Example

Button Groups Sizes

Add class .btn-group-* to size all buttons in a button group.

Large Buttons:

Default Buttons:

Small Buttons:

<!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">
  <h2>Button Groups Sizes</h2>
  <p>Add class .btn-group-* to size all buttons in a button group.</p>
  <h3>Large Buttons:</h3>
  <div class="btn-group btn-group-lg">
    <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>
  <h3>Default Buttons:</h3>
  <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>
  <h3>Small Buttons:</h3>
  <div class="btn-group btn-group-sm">
    <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>
</div>

</body>
</html>
Code language: HTML, XML (xml)

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.

Bootstrap Example

Nesting Button Groups

Nest button groups to create dropdown menus:

Tablet Smartphone 
<!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">
  <h2>Nesting Button Groups</h2>
  <p>Nest button groups to create dropdown menus:</p>
  <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
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>
      </div>
    </div>
  </div>
</div>

</body>
</html>
Code language: HTML, XML (xml)

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.

Bootstrap Example

Split Buttons

Tablet Smartphone 
<!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">
  <h2>Split Buttons</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</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="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>

</body>
</html>
Code language: HTML, XML (xml)

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.

Bootstrap Example

Vertical Button Group with Dropdown

Tablet Smartphone 
<!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">
  <h2>Vertical Button Group with Dropdown</h2>
  <div class="btn-group-vertical">
    <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
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>
      </div>
    </div>
  </div>
</div>

</body>
</html>
Code language: HTML, XML (xml)

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.

Bootstrap Example

Button Group

Button groups are “inline” by default, which makes them appear side by side when you have multiple groups:

<!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">
  <h2>Button Group</h2>
  <p>Button groups are "inline" by default, which makes them appear side by side when you have multiple groups:</p>
  <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>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">BMW</button>
    <button type="button" class="btn btn-primary">Mercedes</button>
    <button type="button" class="btn btn-primary">Volvo</button>
  </div>
</div>

</body>
</html>
Code language: HTML, XML (xml)

Kết luận

Qua đây là một số chia sẻ về Bootstrap, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về Bootstrap.

Các bạn có thể tham khảo các bài viết hay về Bootstrap tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Bình luận