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

Đăng lúc: 17:14 - 24/07/2021

Trong bài viết hôm nay, Web4s tổng hợp và chia sẻ đến bạn đọc cách thiết kế giao diện web bằng Bootstrap, hướng dẫn sử dụng Bootstrap 4 để bạn hiểu rõ hơn về công cụ tạo web hữu ích được các web designer ưa chuộng này. 

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 BootstrapThiế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 BootstrapThiế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.

Hướng dẫn thiết kế website bằng Boostrap
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 BootstrapThiế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 BootstrapCách sử dụng Bootstrap

>>> XEM THÊMThiế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 4Hướ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 →
<link href = "css / bootstrap.css" rel = "stylesheet">

=> Dán (paste) vào tệp index.html trong thẻ <head>.

Bước 5
: Tiếp tục sao chép mã:
<script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.phút.js "> </ script>
<script src = "js / bootstrap.js"> </ script>

=> Thêm JavaScript Bootstrap sau Footer của index.html để tải trang nhanh.

Chắc hẳn với những chia sẻ trên của Web4s, độc giả có thể hiểu rõ hơn về cách dùng Bootstrap, cách thiết kế giao diện web bằng Bootstrap cũng như tự mình thiết kế web Boostrap để phục vụ những mục đích khác nhau.

>>> Khách hàng có nhu cầu thiết kế website trọn gói chuẩn SEO, chuẩn Responsive, liên hệ ngay đến hotline 0901191616 để được Web4s tư vấn kịp thời.
icon icon icon Đăng ký tạo website MIỄN PHÍ dùng thử trong 15 ngày để trải nghiệm dịch vụ của Web4s ngay hôm nay!

mũi tên

Dùng thử website ngay 

YÊU CẦU WEB4S GỌI LẠI ĐỂ TƯ VẤN - BÁO GIÁ NGAY

Mời bạn để lại thông tin, chúng tôi sẽ gọi lại ngay để tư vấn và báo giá dịch vụ cho bạn!

Chào bạn! Tôi Ngô Việt Cường – Là CEO Công ty TNHH Phần mềm Nhân Hòa. Tác giả tại Web4s, địa chỉ Tầng 4, Tòa nhà số 97 - 99 Láng Hạ, Đống Đa, Hà Nội. Web: https://web4s.vn/
Web4s cung cấp giải pháp thiết kế website trọn gói - Uy tín -  Chuyên nghiệp giá chỉ 9k/ngày, chuẩn TMĐT, chuẩn Seo, có tốc độ load nhanh. Tặng tên miền, Hosting, Email, SSL.. ☎️0901191616

  • Công ty TNHH Phần mềm Nhân Hòa

    • Tầng 4, Tòa nhà Petrowaco số 97 - 99 Láng Hạ, Đống Đa, Hà Nội

    • 1900 6680 - (024) 7308 6680

    • contact@sm4s.vn

    • https://web4s.vn/

Tạo Website miễn phí tốt nhất chỉ sau 1 phút
Tạo Website free chỉ sau 1 phút Tạo Website miễn phí ngay
[Khuyến mại] Thiết kế Web
Tạo Website free chỉ sau 1 phút Xem Khuyến Mại Ngay