Hướng dẫn container bootstrap là gì
Nội dung bài viết Giới thiệu nội dung bài viếtTrong quá trình lập trình web, chắc hẳn các bạn sẽ gặp phải tình huống muốn thiết lập độ dài cố định cho nội dung các phần tử trong website để nội dung được bố trí rõ ràng hơn. Từ đó giúp người dùng có những trải nghiệm tốt nhất khi sử dụng trang web của bạn. Show
1. Container là gìContainer chúng ta sử dụng để bọc tất cả các thành phần của web vào trong nó. Nó giống như một cái khung trong đó ta chứa đựng các thành phần của web. Có 2 loại containers được sử dụng để bao bọc các phần tử web đó là container và container-fluid Như các em thấy thiết kế blog của anh. Ngay tại trang chủ levunguyen.com anh sử dụng container để bao bọc các thành phần website. Các em sẽ thấy có khoảng trống ở bên tay trái và tay phải. Còn nội dung sẽ ở phần ở giữa. Sử dụng container khi chúng ta muốn thiết lập độ dài cố định cho nội dung các phần tử trong website Còn khi các em vào các bài đọc chi tiết anh sử dụng container-fluid thì nội dung sẽ tràn đầy màn hình không có khoảng trống bên trái và bên phải 2. Thiết lập độ dài cố địnhChúng ta sử dụng container khi muốn nội dung cố định của khung hiển thị.
3. Thiết lập độ dài tràn màn hìnhChúng ta sử dụng container-fluid để tạo ra khung có chiều dài là tràn màn hình.
4. Cấu hình padding cho containerMặc định các container trong bootstrap có padding left và right là 15px. Nó không có padding top và bottom. Chúng ta có thể thêm thuộc tính pt để container có thể padding top như sau
5. Cấu hình border và color cho container
6. Cấu hình Responsive kích thước cho container
7. Video demo
8. Thực hành và Source code
Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềmCác khoá học lập trình MIỄN PHÍ tại đây |