Các tiện ích nhỏ trong Bootstrap 4

• 12-07-2020 20:54:11
• by: baobinhnet

Có một vài tiện ích nhỏ mình không tiện viết thành bài riêng vì quá ngắn, vì thế mình gộp chung lại một bài các tiện ích nhỏ trong bootstrap 4. Các tiện ích này về các vấn đề Float, Clearfix, tự động căn giữa, width, height, shadow, position và icon close với bootstrap. 

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

Ví 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ụ:

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ụ:

 

Kết luận

Vậy là các bạn đã biết thêm được khá nhiều tiện ích khác của Bootstrap cũng như Bootstrap 4. Hẹn các bạn trong các bài giảng tiếp theo.


 

---

• Posted by baobinhnet
• 2020-07-12 20:54:11