Bài 21: Một vài tiện ích hỗ trợ trong Bootstrap 4

0
62

Xin chào các bạn, bài hôm nay chúng ta sẽ đi tìm hiểu về 1 số tiện ích hỗ trợ trong Bootstrap 4, giúp các bạn 1 số vấn đề trong trang trí giao diện nhé.

Trong Bootstrap 4 có 1 số tiện ích hay class hỗ trợ để chúng ta trang trí các đối tượng HTML 1 cách nhanh chóng nhất mà không cần sử dụng nhiều đến CSS chay.

Class Borders

Border là 1 thuộc tính Box Model giúp chúng ta có đường viền của 1 đối tượng nào đó, thông thường làm CSS thì chúng ta sẽ code thuộc tính border đi kèm với các giá trị màu, kiểu và độ dày đường viền. Còn trong Bootstrap 4 cũng hỗ trợ class .border để các bạn trang trí nhanh hơn, chỉ cần gọi class và sử dụng.

Ví dụ như sau:

Các kiểu đường viền đều có đúng không nào, quá nhanh gọn.

Border Color – Màu sắc đường viền

Định dạng đường viền có rồi, giờ trang trí màu sắc cho đường viền với class như sau:

  • border-primary
  • border-secondary
  • border-success
  • border-danger
  • border-warning
  • border-info
  • border-light
  • border-dark
  • border-white

Mỗi class sẽ được sử dụng trong từng ngữ cảnh thích hợp.

Ví dụ:

Hiển thị:

Border Radius

Border Radius giúp bo viền các góc cho khối, Bootstrap 4 hỗ trợ các class bo viền là .rounded

Ví dụ:

Hiển thị:

Float và Clearfix

Float là thuộc tính căn chỉnh vị trí cho thành phần, sang phải thì sử dụng class .float-right, sang trái thì sử dụng class .float-left, và muốn clear vùng float các bạn sử dụng class .clearfix

dụ:

Căn giữa thành phần

Để căn thành phần ra giữa, sử dụng class .mx-auto, class này chính là việc các bạn sử dụng code CSS là margin-left và margin-right giá trị auto.

Ví dụ:

Hiển thị:

Thiết lập độ rộng width, chiều cao height cho khối

Để thiết lập độ rộng sử dụng class theo cú pháp w-*, * chính là giá trị bạn muốn khối chiếm trong 100%.

Ví dụ: .w-25.w-50.w-75.w-100.mw-100

Để thiết lập chiều cao sử dụng class theo cú pháp h-*, * chính là giá trị bạn muốn khối chiếm trong 100%.

Ví dụ: .h-25.h-50.h-75.h-100.mh-100

Đổ bóng Shadow

Shadow là thuộc tính giúp tạo các hiệu ứng đổ bóng cho khối, cho text. Trong Bootstrap 4 thì chúng ta sử dụng class .shadow để không cần CSS nữa.

Ví dụ:

Position

Sử dụng các class để cố định, định vị vị trí thành phần như sau:

  • .fixed-top: cố định thành phần trên cùng
  • .fixed-bottom: cố định thành phần dưới cùng
  • .sticky-top: thành phần sẽ cuộn lên đến vị trí trên cùng và dừng cố định tại đó

Icon đóng Close

Sử dụng class .close để trang trí tạo ta icon dấu nhân đóng. Còn HTML để tạo icon này là ×

Ví dụ:

Hiển thị:

Kết luận

OK, như vậy là bài giới thiệu về các tiện ích hỗ trợ xong rồi, quá nhiều thứ trong Bootstrap mà các bạn phải tìm hiểu đúng không nào. Bài này chỉ là tổng hợp những class tiện ích hay sử dụng trên web, ngoài ra các bạn vẫn phải dành thời gian đi tìm hiểu thêm nhiều class khác nữa thì mới tự tin kiểm soát được việc sử dụng Bootstrap nhé.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây