Bootstrap là gì? Hướng dẫn tạo trang web đơn giản với Bootstrap

Bootstrap là gì?

Bootstrap là một front-end framework miễn phí giúp phát triển web nhanh hơn và dễ dàng hơn.

Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS như kiểu chữ, biểu mẫu, nút, bảng, điều hướng, phương thức, băng chuyền hình ảnh… cũng như các plugin JavaScript tùy chọn.

Bootstrap cũng cung cấp cho bạn khả năng tạo các thiết kế đáp ứng một cách dễ dàng.

Thiết kế web đáp ứng là gì?

Thiết kế web đáp ứng có nghĩa là trang web sẽ tự động thay đổi kích thước để phù hợp với mọi thiết bị, từ điện thoại nhỏ đến máy tính để bàn lớn.

>> Xem thêm: Thiết kế web đáp ứng và các bước triển khai cơ bản

Lịch sử Bootstrap

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter, và được phát hành dưới dạng sản phẩm mã nguồn mở vào tháng 8 năm 2011 trên GitHub.

Vào tháng 6 năm 2014, Bootstrap là dự án số 1 trên GitHub.

Tại sao sử dụng Bootstrap?

Ưu điểm của Bootstrap

Dễ sử dụng: Bất kỳ ai có kiến ​​thức cơ bản về HTML và CSS đều có thể bắt đầu sử dụng Bootstrap.

Các tính năng đáp ứng: CSS đáp ứng của Bootstrap thích ứng với điện thoại, máy tính bảng và máy tính để bàn.

Phương pháp ưu tiên thiết bị di động: Trong Bootstrap 3, kiểu ưu tiên thiết bị di động là một phần của khuôn khổ cốt lõi.

Khả năng tương thích của trình duyệt: Bootstrap tương thích với tất cả các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer, Edge, Safari và Opera).

Lấy Bootstrap ở đâu?

Có hai cách để bắt đầu sử dụng Bootstrap trên trang web của riêng bạn.

Bạn có thể:

Tải xuống Bootstrap từ getbootstrap.com.

– Bootstrap từ CDN.

Tải xuống Bootstrap

Nếu bạn muốn tải xuống và lưu trữ Bootstrap, hãy truy cập vào getbootstrap.com và làm theo hướng dẫn ở đó.

CDN Bootstrap

Nếu bạn không muốn tải xuống và lưu trữ Bootstrap, bạn có thể sử dụng Bootstrap từ CDN (Mạng phân phối nội dung).

>> Tìm hiểu thêm: Mạng phân phối nội dung – CDN là gì? Làm thế nào để sử dụng CDN?

Tạo trang web đầu tiên của bạn với Bootstrap

1. Thêm loại tài liệu HTML5

Bootstrap sử dụng các phần tử HTML và thuộc tính CSS yêu cầu loại tài liệu HTML5.

Luôn bao gồm loại tài liệu HTML5 ở đầu trang, cùng với thuộc tính lang và bộ ký tự chính xác:

2. Bootstrap 3 ưu tiên thiết bị di động

Bootstrap 3 được thiết kế để đáp ứng các thiết bị di động. Kiểu ưu tiên thiết bị di động là một phần của khuôn khổ cốt lõi.

Để đảm bảo hiển thị chính xác và thu phóng cảm ứng, hãy thêm phần sau gắn thẻ vào thành phần:

Phần width = device-width đặt chiều rộng của trang, tùy thuộc vào chiều rộng màn hình của thiết bị (thay đổi tùy theo thiết bị).

Phần Initial-scale = 1 đặt mức thu phóng ban đầu khi trang được tải lần đầu tiên bởi trình duyệt.

3. Bình chứa

Bootstrap cũng yêu cầu một phần tử chứa để bao bọc nội dung trang.

Có hai lớp vùng chứa để lựa chọn:

Lớp .container cung cấp một vùng chứa có chiều rộng cố định đáp ứng.

.container-liquid class cung cấp một vùng chứa có chiều rộng đầy đủ kéo dài toàn bộ chiều rộng của khung nhìn.

Hai trang Bootstrap cơ bản

Ví dụ sau đây cho thấy mã cho một trang Bootstrap cơ bản (với vùng chứa có chiều rộng cố định đáp ứng):

Ví dụ sau cho thấy mã cho một trang Bootstrap cơ bản (với vùng chứa có chiều rộng đầy đủ):

Nguồn: Tech.vccloud.vn

>> Có thể bạn quan tâm: 20 mẫu Bootstrap miễn phí cho Trang tổng quan quản trị