Bài 3: Alert và Button trong Bootstrap

1

Trong bài này, mình sẽ giới thiệu cho các bạn những thành phần chính là Alert và Button trong Bootstrap. Ngoài ra, mình cũng giới thiệu sơ lược về Breadcrumb và Badges.

Video – Alert và Button trong Bootstrap

Các bạn tham khảo video nhé, ngoài ra mình còn xem tài liệu trên getbootstrap.com

Video cũng có sử dụng kiến thức về hệ thống lưới Bootstrap của bài 2. Ngoài ra các bạn cũng nên biết về JavaScript.

Hướng dẫn chi tiết

Sử dụng mã js của Bootstrap và jQuery

Thêm 2 thẻ script chỉ đường dẫn đến file jquery.js (hoặc jquery.min.js) và file bootstrap.js (hoặc bootstrap.min.css)

Lưu ý: Để thẻ jquery trước thẻ bootstrap nhé. jQuery tải về tại đây Download

<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

Alert – Thông báo

Cách sử dụng: dùng class alert alert-*loại alert*

Có tất cả 8 loại alert với 8 màu mang ý nghĩa khác nhau

+ primary: thông thường

+ secondary: thông báo thứ cấp

+ success: thông báo thành công

+ danger: thông báo nguy hiểm

+ warning: cảnh báo

+ info: thông báo thông tin

+ light: màu sáng

+ dark: màu tối

Alert và Button trong Bootstrap
Các loại alert trong bootstrap. Nguồn getbootstrap.com

Ví dụ về cách dùng

<div class="alert alert-warning">Đây là cảnh báo nguy hiểm</div>

Bạn đoán và chạy thử kết quả như thế nào nhé.

Button – Nút

Để dùng button, các bạn sử dụng class=” btn btn-*loại button*”

Tương tự Alert, Button cũng có 8 loại class mang 8 màu khác nhau và có thêm 1 loại là button link.

+ primary: thông thường

+ secondary: thông báo thứ cấp

+ success: thông báo thành công

+ danger: thông báo nguy hiểm

+ warning: cảnh báo

+ info: thông báo thông tin

+ light: màu sáng

+ dark: màu tối

+ link: thể hiện đường dẫn

Button trong bootstrap 4Các bạn chạy thử ví dụ sau nhé:

<button class="btn btn-danger">Cancel</div>

Ngoài ra, Bootstrap còn có loại button chỉ có viền mà không có màu nền. Khi hover vào button mới có nền gọi là outline button.

Cách dùng: sử dụng class=”btn btn-outline-*loại button*”

Alert và Button trong Bootstrap
Các loại outline button trong bootstrap. Nguồn getbootstrap.com

Ví dụ:

<a href="" class="btn btn-info">Xem thêm</a>

Kết hợp Alert và Button

Các class cần chú ý của alert

alert-dismissible: cho phép đóng thông báo

fade show: hiệu ứng biến mất

Các class cần có của button: class=”close”

Ngoài ra, chúng ta thêm 2 attribute (thuộc tính) sau: data-dismiss=”alert” và aria-label=”Close”

Code mẫu:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
   <strong>Holy guacamole!</strong> You should check in on some of those fields below.
   <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
   </button>
</div>

Chạy thử và xem kết quả nhé. Nhé phải thêm 2 thẻ js của jquery và bootstrap nha.

Một số thành phần (component) khác

Breadcrumb (vụn bánh mì) – Đường dẫn chuyên mục

Breadcrumb dùng để hiện thị đường dẫn để xem bài viết.

Ví dụ mẫu về breadcrumb trong bootstrap. Nguồn: getbootstrap.com

Cách dùng: sử dụng class=”breadcrumb” và “breadcrumb=item”. Class=“active” để cho biết vị trí hiện tại của bạn. Dùng các thẻ nav, ol, li

<nav aria-label="breadcrumb">
   <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item" aria-current="page"><a herf="#">Library</a></li>
      <li class="breadcrumb-item active" aria-current="page">Data</li>  
   </ol>
</nav>

Badges – Thẻ hiệu

Dùng badge để nhấn mạnh nội dung như new, hot

Ví dụ mẫu về badge trong bootstrap. Nguồn: getbootstrap.com

Cách dùng class=”badge badge-*loại badge*”

Có tất cả 8 loại với 8 màu khác nhau, tương tự như alert.

Ví dụ

<span class="badge badge-secondary">New</span>

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ

  1. […] nhớ là data-dismiss=”modal” để đóng hộp thoại. Điểm này khá giống với Alert mà mình đã giới […]

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.