Thiết kế giao diện web bằng Bootstrap - Hướng dẫn sử dụng Bootstrap

Tìm hiểu về Bootstrap, thiết kế giao diện web bằng Boostrap

Bootstrap là gì?

Bootstrap là framwork (bộ khung/ đoạn code được viết sẵn) của nền tảng HTML, CSS, JavaScript được sử dụng rộng rãi nhất hiện nay để thiết kế web chuẩn Responsive (tương thích với mọi thiết bị di động). 

Thiết kế web bằng Bootstrap

Tại sao nên sử dụng Bootstrap để thiết kế web?

Ưu điểm của việc thiết kế giao diện web bằng Bootstrap

- Bootstrap có sẵn một thư viện “khổng lồ” để người dùng có thể tự thiết kế giao diện và lưu trữ web. Bạn chỉ cần lựa chọn mẫu giao diện web mình yêu thích, chỉnh sửa màu sắc/ text, thêm media (hình ảnh, video,…).
- Thao tác sử dụng Bootstrap đơn giản do chúng được tạo ra từ các mã nguồn mở. Người dùng có thể chủ động lựa chọn các thuộc tính/ phần tử phù hợp với nhu cầu tạo website của bản thân.

Thiết kế giao diện web bằng Bootstrap

- Tiết kiệm dung lượng máy nhờ CDN Bootstrap.
- Hỗ trợ Responsive web giúp giao diện website tương thích với mọi thiết bị di động và tất cả các trình duyệt.
- Bootstrap cho phép tùy chỉnh khung (framwork) web trước khi download.

Hướng dẫn cách sử dụng Bootstrap, thiết kế giao diện website bằng Bootstrap

Hướng dẫn dùng Bootstrap

Hai cách dùng Bootstrap trên website

Cách 1 - Tải và lưu trữ Bootstrap trên máy tính: Truy cập website getbootstrap.com => Click Download (Tải xuống) Bootstrap và thực hiện theo các bước hướng dẫn.

Cách 2 - Nhúng Bootstrap qua CDN: Sử dụng CDN (Mạng phân phối nội dung) để nhúng Bootstrap.

Cách thiết kế giao diện website bằng Bootstrap

Thiết kế bố cục web
Tùy vào loại web bạn muốn xây dựng, theo lĩnh vực ngành nghề kinh doanh, bạn có thể lên ý tưởng, phác thảo và phân chia bố cục web cho hợp lý. Trong bài viết này, Web4s gợi ý cách chia bố cục web bán hàng bao gồm: Thanh menu – Slide hình ảnh – Danh sách sản phẩm.
- Đối với Thanh menu, bạn có thể sử dụng Navbar (thanh menu/ thanh điều hướng chính nằm ngang, có tính năng Responsive) được thiết kế sẵn trong Bootstrap hoặc tự code (nếu bạn am hiểu lập trình web).
- Đối với Slide hình ảnh: Tạo slide trình chiếu bằng cách code trên Bootstrap, sử dụng caruosel slide with indictor (carousel là plugin trong Bootstrap có tác dụng giúp cho slide có hiệu ứng trượt ảnh), tùy chỉnh kích thước, thêm đường dẫn…

Thiết kế website bằng Bootstrap

Về phần nội dung website
Với phần nội dung chính của website, sử dụng Div Container và Div row cho mục giới thiệu sản phẩm.
- Tên mỗi sản phẩm tương ứng với  một thẻ tiêu đề H.
- Thêm class mt-5 để tạo Margin top; dùng Card trong mỗi cột để làm khối sản phẩm; thêm class mb-3 để tạo Margin bottom cho các khối.
- Cách chia cột để giúp nội dung web hiển thị dễ dàng trên mọi thiết bị:
+ Màn hình lớn chia 4 cột, màn hình máy tính bảng chia 2 cột và màn hình mobile chia 1 cột.
+ Chia lưới Bootstrap trong thẻ Div nhóm sản phẩm: class=”col-md-3 col-sm-6 col-12”.
+ Thêm padding left và right: 5px để Responsive về 1 cột.

Cách sử dụng Bootstrap

>>> XEM THÊM: Thiết kế giao diện web bằng HTML

Hướng dẫn sử dụng Bootstrap 4

Boostrap 4 là framwork khá đơn giản, người sử dụng không cần chuyên môn cao cũng có thể tự thiết kế website với Bootstrap, hơn nữa Bootstrap 4 có khả năng tương thích với mọi trình duyệt web mới nhất.
Bước 1: Download Bootstrap 4 tại địa chỉ website: https://getbootstrap.com/docs/4.1/getting-started/download/
=> và giải nén các tệp.
Bước 2: Tạo thư mục HTML
Bước 3: Sau khi giải nén tệp, sao chép (copy) tệp CSS và tệp JS trong thư mục HTML => Tạo tệp index.html

Hướng dẫn sử dụng Bootstrap 4

Bước 4: Liên kết tệp CSS Bootstrap => Sao chép mã sau:
<! - CSS lõi Bootstrap →

=> Dán (paste) vào tệp index.html trong thẻ.
Bước 5: Tiếp tục sao chép mã: