Các tiện ích nhỏ trong Bootstrap 4
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