Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Ttiện Ích Flex Và Shadow Trong Bootstrap (Phần 14)

Ttiện Ích Flex Và Shadow Trong Bootstrap (Phần 14)


Ngày 4 Tháng 4 Năm 2020

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu về tiện ích Flex và shadow trong Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!

Flex Bootstrap 4:

Theo mình tìm hiểu thì điểm khác biệt lớn nhất giữa Bootstrap 3 và Bootstrap 4 đó là việc Bootstrap 4 sử dụng flexbox thay cho thuộc tính float để xử lý bố cục cho trang web (layout). Nó giúp chúng ta dễ dàng và linh hoạt trong việc thiết kế cấu trúc bố cục responsive mà không cần phải sử dụng thuộc tính position hay là float. Nếu bạn muốn tìm hiểu về thuộc tính flex thì có thể tham khảo ở đây nha: Tìm hiểu FlexBox. Bây giờ ta sẽ đi vào tìm hiểu cách tạo một flexbox container và chuyển các thành phần con trong nó thành flex items. Để nắm rõ hơn bạn xem ví dụ dưới đây nhé:

Flex Bootstrap 4:

See the Pen flex-box Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để tạo một inline flexbox container thì ta sẽ sử dụng class d-inline-flex. Để nắm rõ hơn bạn xem ví dụ dưới đây nhé:

See the Pen d-inline-flex by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bây giờ chúng ta sẽ hiển thị các flex item theo hướng ngang bằng class flex-row. Và nếu bạn muốn các flex item canh phải thì có thể sử dụng class flex-row-reverse. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

Flex Row Và Flex Row Reverse:

See the Pen Flex Row Và Flex Row Reverse by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tiếp theo chúng ta sẽ hiển thị các flex item theo hướng dọc bằng cách sử dụng class flex-column. Và nếu bạn muốn đảo ngược hướng của các flex item thì có thể sử dụng class flex-column-reverse. Để nắm rõ hơn hãy cùng mình đi vào ví dụ dưới đây nhé:

Flex Column Và Flex Column Reverse:

See the Pen Flex Column Và Flex Column Reverse by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để thay đổi vị trí của các flex item trong flexbox container thì chúng ta sẽ sử dụng class justify-content-(vị trí) với vị trí là start(mặc định), end, center, between và around. Để hiểu hơn về class này bạn xem ví dụ sau đây nhé:

Justify Content trong Flexbox:

See the Pen Vị trí flex item trong flexbox by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tiếp theo mình sẽ thiết lập độ rộng bằng nhau cho các flex item trong flexbox container bằng class flex-fill. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

Class Flex Fill:

See the Pen Use flex-fill Bootstrap 4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thông thường thì mỗi flex item chỉ cần độ dài vừa đủ để hiển thị nội dung nên thường sẽ dư ra một khoảng trống không sử dụng đến. Do đó Bootstrap cung cấp cho chúng ta một class flex-grow-1 dùng để thiết lập độ rộng của một flex item sẽ bằng độ rộng của nó cộng với độ rộng dư ra trong flexbox container. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

Class Flex Grow 1:

See the Pen Class Flex Grow 1 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tiếp theo chúng ta sẽ đi vào sử dụng thuộc tính auto margin cho flex item với class mr-auto sẽ đẩy các flex item còn lại sang bên phải và ml-auto sẽ đẩy các item phía trước sang bên trái. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

Class mr-auto và ml-auto:

See the Pen Class mr-auto và ml-auto by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bây giờ mình sẽ đi vào căn chỉnh vị trí theo chiều dọc cho các flex item bằng cách sử dụng class .align-items-(vị trí) với vị trí là start, end, center, baseline và stretch(mặc định). Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

Vị trí flex item theo chiều dọc:

See the Pen vị trí flex-item theo chiều doc by haycuoilennao19 (@haycuoilennao19) on CodePen.

Shadow Bootstrap 4:

Tiếp theo mình sẽ đi vào cách tạo shadow giúp cho các thẻ div chứa nội dung trông đẹp mắt hơn. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

Class shadow:

See the Pen Shadow Bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp các bạn nắm được thêm các class trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!