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 4

Trướ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




 Ví dụ về Bootstrap









Tiêu đề của website

Đây là phần mô tả trang web

Column 1

Nội dung

Column 2

Nội dung

Column 3

Nội dung

Trong Bootstrap, bạn cần lưu ý các lớp sau

  • Vùng chứa. is not space in fixed width with size min-width. 1200px sẽ là 1140px
  • bình chứa chất lỏng. is not time width of full màn hình
  • col-sm-4. Hệ thống lưới sẽ được chia thành 12 cột. Khi set col-sm-4, get 12/4 = 3. Do đó một cột sẽ chiếm 3 cột
  • jumbotron là một hộp màu xám màu chứa xám văn bản, được sử dụng để tăng thêm sự chú ý cho văn bản trong đó

Cũng với ví dụ trên giờ sẽ thay đổi thành

Column 1

Nội dung

Thêm một chút CSS để dễ dàng phân biệt

Trung tâm div bootstrap

Thêm Menu

Trung tâm div bootstrap

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

Trung tâm div bootstrap

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ẫu

Chú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 & 4

Hướ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