Bài 9: Sử dụng Button trong Bootstrap để tạo nút

Bài 9: Sử dụng Button trong Bootstrap để tạo nút

Button trong Bootstrap dùng để tạo các nút bấm, thường được sử dụng trong các biểu mẫu hoặc hộp thoại trên trang web.

Ở bài trước chúng ta đã tìm hiểu về sử dụng Breadcrumb trong Bootstrap rồi, hôm nay chúng ta sẽ tìm hiểu tiếp về nút bấm 1 trong những thành phần trong Components.

Button trong Bootstrap có gì?

Như đã giới thiệu ở trên thì Button trong Bootstrap thực sự tạo nên khác biệt, bởi vì bạn có thể tùy chỉnh kích thước, màu sắc, đường viền…

Bootstrap đã tạo sẵn cho chúng ta các style sau:

  • btn-primary
  • btn-secondary
  • btn-success
  • btn-danger
  • btn-warning
  • btn-info
  • btn-light
  • btn-dark
  • btn-link

Các ví dụ về Button

Tạo các Button Bootstrap với màu sắc riêng

Việc sử dụng các thư viện của Bootstrap đối với Buttons bạn có thể sẵn sàng sử dụng theo phong cách riêng của mình:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<button type="button" class="btn btn-primary">Primary</button>
	<button type="button" class="btn btn-secondary">Secondary</button>
	<button type="button" class="btn btn-success">Success</button>
	<button type="button" class="btn btn-danger">Danger</button>
	<button type="button" class="btn btn-warning">Warning</button>
	<button type="button" class="btn btn-info">Info</button>
	<button type="button" class="btn btn-light">Light</button>
	<button type="button" class="btn btn-dark">Dark</button>
	<button type="button" class="btn btn-link">Link</button>
    <!-- End Example Code -->
  </body>
</html>

Kết quả thu được là:

Loại bỏ màu nền trong Buttons

Có thể bạn cũng không cần thiết sử dụng backgound cho các nút để tạo phong cách riêng cho trang web của bạn.

Chỉ cần sử dụng thuộc tính btn-outline-* trong class:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<button type="button" class="btn btn-outline-primary">Primary</button>
	<button type="button" class="btn btn-outline-secondary">Secondary</button>
	<button type="button" class="btn btn-outline-success">Success</button>
	<button type="button" class="btn btn-outline-danger">Danger</button>
	<button type="button" class="btn btn-outline-warning">Warning</button>
	<button type="button" class="btn btn-outline-info">Info</button>
	<button type="button" class="btn btn-outline-light">Light</button>
	<button type="button" class="btn btn-outline-dark">Dark</button>
    <!-- End Example Code -->
  </body>
</html>

Kết quả là:

Điều chỉnh kích thước của Button

Mặc định về kích thước của Button được quy định với 2 class: btn-lg hoặc btn-sm:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<button type="button" class="btn btn-primary btn-lg">Nút Lớn</button>
	<button type="button" class="btn btn-primary btn-sm">Nút Nhỏ</button>
    <!-- End Example Code -->
  </body>
</html>

Kết quả thu được:

Chúng ta cũng quy định với kích thước và font chữ tùy thích:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<button type="button" class="btn btn-primary btn-lg">Nút Lớn</button>
	<button type="button" class="btn btn-primary btn-sm">Nút Nhỏ</button>
	<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .15rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .55rem;">
  Nút tùy chỉnh
</button>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

Vô hiệu hóa Button

Bạn cũng có thể dùng thuộc tính disabled để vô hiệu hóa các nút bấm.

Cái này bạn thường bắt gặp trong các biểu mẫu, khi điều kiện nhập vào không đáp ứng được điều kiện thì nút sẽ bị vô hiệu hóa.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<button type="button" class="btn btn-primary btn-lg" disabled>Nút Lớn</button>
	<button type="button" class="btn btn-primary btn-sm" disabled>Nút Nhỏ</button>
	<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .15rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .55rem;" disabled>
  Nút tùy chỉnh
</button>
    <!-- End Example Code -->
  </body>
</html>

Button Group

Bạn cũng có thể nhóm các nút lại với nhau tạo thành một Button Group bằng Bootstrap:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<div class="btn-group" role="group" aria-label="Basic mixed styles example">
	<button type="button" class="btn btn-danger">Left</button>
	<button type="button" class="btn btn-warning">Middle</button>
	<button type="button" class="btn btn-success">Right</button>
	</div>
    <!-- End Example Code -->
  </body>
</html>

Kết quả:

Lời kết

Qua các ví dụ trên thì bạn cũng đã biết cách sử dụng Bootstrap để tạo các Button mang phong cách riêng của mỗi chủ đề website.

Bài viết cùng chủ đề:

Cảm ơn các bạn đã quan tâm theo dõi bài viết.

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *