Trung tâm div bootstrap
Tiếp theo phiên bản thứ 3 là Bootstrap 4, nó được bổ sung hệ thống lưới Grid để thiết kế trang web Responsive. Trong bài viết Bootstrap là thứ mà chúng tôi đã hướng dẫn cơ bản về cách cài đặt và cách sử dụng bạn có thể xem lại. Trong khuôn khổ bài viết này SONMAWEB sẽ hướng dẫn sử dụng Bootstrap 4 để xây dựng nên một trang web đẹp và tiết kiệm thời gian nhất Cách sử dụng Bootstrap 4Trước tiên, bạn cần chạy chương trình này bằng cách sử dụng Notepad++ hoặc Sublime Text để lưu lại với tên là chỉ mục. html
Trong Bootstrap, bạn cần lưu ý các lớp sau
Cũng với ví dụ trên giờ sẽ thay đổi thành
Thêm một chút CSS để dễ dàng phân biệt Thêm Menu Tiếp theo sẽ thêm một chút mã CSS để trang trí đẹp hơn .jumbotron { margin-bottom: 0; } .navbar-nav { max-width: 1140px; margin: 0 auto; } Cuối cùng là thêm 3 cột ở Footer
Và sau khi thêm nội dung vào chúng ta sẽ có một trang web thiết kế bằng Bootstrap 4 gần như hoàn chỉnh Bootstrap 4 là một Framework khá tuyệt vời để xây dựng trang web Frontend tiện lợi. Sử dụng Bootstrap, bạn sẽ không cần phải viết quá nhiều mã CSS hoặc sợ bị vỡ khung bởi mọi thứ đã được thiết kế hoàn hảo Tại W3Schools, bạn sẽ tìm thấy một tài liệu tham khảo Bootstrap đầy đủ về tất cả các lớp CSS, Thành phần và plugin JavaScript - tất cả đều có các ví dụ "Tự dùng thử" Bootstrap Chủ đề / MẫuChúng tôi đã tạo một số Mẫu Bootstrap mà bạn có thể sử dụng. Chúng hoàn toàn miễn phí để sử dụng Bootstrap 5 so với. Bootstrap 3 & 4Hướng dẫn này tuân theo Bootstrap 3, được phát hành vào năm 2013. Tuy nhiên, chúng tôi cũng bao gồm các phiên bản mới hơn; Bootstrap 5 là phiên bản mới nhất của Bootstrap; . Nó hỗ trợ các bản phát hành ổn định, mới nhất của tất cả các trình duyệt và nền tảng chính. Tuy nhiên, Internet Explorer 11 trở xuống không được hỗ trợ Sự khác biệt chính giữa Bootstrap 5 và Bootstrap 3 & 4 là Bootstrap 5 đã chuyển sang JavaScript thay vì jQuery Ghi chú. Bootstrap 3 và Bootstrap 4 vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu, và hoàn toàn an toàn khi tiếp tục sử dụng chúng. Tuy nhiên, các tính năng mới sẽ KHÔNG được thêm vào chúng |