Series 2 — Frontend Fundamentals

 

HTML → Sematic HTML → Forms & Validation → CSS

 Flexbox & Grid → Responsive Web Design → Bootstrap

 

Bài 6. Responsive Web Design – Giao diện đa thiết bị

1. Responsive Web Design là gì?

Khi xây dựng một website, chúng ta không thể giả định rằng tất cả người dùng đều truy cập bằng máy tính có cùng kích thước màn hình. Có người sử dụng laptop, có người sử dụng điện thoại hoặc máy tính bảng.

Nếu website chỉ được thiết kế cho một kích thước màn hình cố định, giao diện có thể bị tràn nội dung, chữ quá nhỏ hoặc các thành phần khó sử dụng trên thiết bị khác.

Responsive Web Design (RWD) là phương pháp thiết kế website giúp giao diện tự điều chỉnh để phù hợp với kích thước màn hình và không gian hiển thị của thiết bị.

Ví dụ, một trang sản phẩm có thể hiển thị ba cột trên máy tính, hai cột trên máy tính bảng và một cột trên điện thoại.

Mục tiêu của Responsive Web Design không chỉ là làm cho website hiển thị được trên nhiều thiết bị, mà còn giúp người dùng có trải nghiệm tốt trên từng kích thước màn hình.

2. Những yếu tố nền tảng của Responsive Web Design

2.1. Viewport

Viewport là vùng hiển thị nội dung của trang web trong trình duyệt. Trên điện thoại, nếu không khai báo viewport phù hợp, trình duyệt có thể sử dụng cách hiển thị khiến trang web trông như một phiên bản thu nhỏ của giao diện máy tính.

Trong phần head của HTML, chúng ta thường khai báo:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Trong đó:

• width=device-width: đặt chiều rộng của viewport theo chiều rộng thiết bị.
• initial-scale=1.0: thiết lập mức thu phóng ban đầu là 100%.

Đây là khai báo cơ bản cần có khi xây dựng website responsive.

2.2. Sử dụng đơn vị linh hoạt

Một lỗi thường gặp khi mới học CSS là sử dụng quá nhiều kích thước cố định bằng px. Điều này có thể khiến phần tử không vừa với màn hình nhỏ.

Ví dụ:

.container {
  width: 1200px;
}

Nếu màn hình chỉ rộng 375px, phần tử có chiều rộng 1200px sẽ dễ gây tràn ngang.

Có thể thay bằng:

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

Lúc này, container có thể co giãn theo màn hình nhưng không vượt quá chiều rộng tối đa 1200px.

Một số đơn vị thường gặp:

• %: kích thước tương đối so với phần tử chứa.
• vw và vh: tỷ lệ theo chiều rộng và chiều cao viewport.
• rem: kích thước tương đối theo font-size của phần tử gốc.
• px: đơn vị cố định, vẫn phù hợp khi cần kiểm soát những kích thước cụ thể.

Không có một đơn vị nào luôn tốt nhất. Lựa chọn phụ thuộc vào thành phần và mục đích sử dụng.

2.3. Hình ảnh linh hoạt

Hình ảnh có kích thước cố định lớn hơn phần tử chứa có thể làm vỡ bố cục trên màn hình nhỏ.

Một quy tắc CSS phổ biến là:

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% giúp hình ảnh không rộng hơn phần tử chứa, còn height: auto giữ tỷ lệ hình ảnh khi kích thước thay đổi.

3. Media Queries – Công cụ quan trọng trong Responsive

Media Queries cho phép áp dụng các quy tắc CSS khác nhau dựa trên những đặc điểm của thiết bị hoặc viewport, chẳng hạn như chiều rộng màn hình.

Ví dụ:

.product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .product-list {
    grid-template-columns: 1fr;
  }
}

Cách hoạt động:

• Khi màn hình rộng hơn 768px, danh sách sản phẩm hiển thị ba cột.
• Khi màn hình rộng không quá 768px, danh sách chuyển thành hai cột.
• Khi màn hình rộng không quá 480px, danh sách chỉ còn một cột.

Các giá trị 768px và 480px trong ví dụ là những breakpoint do chúng ta lựa chọn, không phải quy chuẩn bắt buộc cho mọi dự án.

4. Breakpoints là gì?

Breakpoint là điểm mà tại đó giao diện cần thay đổi bố cục để phù hợp hơn với không gian hiển thị.

Ví dụ, khi một thanh điều hướng không còn đủ chỗ cho tất cả liên kết, chúng ta có thể chuyển sang menu thu gọn.

Breakpoint nên được lựa chọn dựa trên thời điểm bố cục bắt đầu gặp vấn đề, thay vì chỉ dựa vào tên thiết bị.

Có hai cách tiếp cận thường gặp:

Mobile-first: bắt đầu xây dựng giao diện cho màn hình nhỏ, sau đó mở rộng cho màn hình lớn hơn.

.product-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .product-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

Desktop-first: bắt đầu từ giao diện màn hình lớn, sau đó điều chỉnh cho màn hình nhỏ bằng các điều kiện như max-width.

Cả hai cách đều có thể sử dụng được. Tuy nhiên, Mobile-first là một lựa chọn phổ biến vì giúp ưu tiên nội dung cốt lõi và hạn chế việc phải ghi đè quá nhiều CSS khi thu nhỏ giao diện.

5. Kết hợp Flexbox và Grid trong Responsive

Ở bài trước, chúng ta đã tìm hiểu Flexbox và Grid. Đây là hai công cụ quan trọng khi xây dựng giao diện responsive.

Flexbox phù hợp với bố cục theo một chiều, chẳng hạn như thanh điều hướng, nhóm nút hoặc căn chỉnh nội dung trong một hàng.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

Thuộc tính flex-wrap: wrap cho phép các phần tử xuống dòng khi không đủ không gian.

Grid phù hợp với bố cục dạng hàng và cột, chẳng hạn như danh sách sản phẩm hoặc thư viện hình ảnh.

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

Trong ví dụ trên:

• repeat() giúp lặp lại cấu hình cột.
• auto-fit cho phép bố trí số cột phù hợp với không gian hiện có.
• minmax(220px, 1fr) đặt chiều rộng tối thiểu cho mỗi cột là 220px và cho phép cột mở rộng khi có thêm không gian.

Cách viết này giúp danh sách sản phẩm tự điều chỉnh số cột trong nhiều trường hợp mà không cần khai báo nhiều Media Queries.

6. Những lỗi thường gặp khi xây dựng Responsive

Sử dụng chiều rộng cố định cho mọi phần tử

Một phần tử có chiều rộng cố định lớn có thể gây tràn màn hình. Nên cân nhắc kết hợp width, max-width và các đơn vị linh hoạt.

Chỉ kiểm tra giao diện trên một thiết bị

Website có thể hiển thị tốt trên laptop nhưng gặp lỗi trên điện thoại hoặc máy tính bảng. Cần kiểm tra nhiều kích thước viewport, đặc biệt ở những vị trí mà bố cục thay đổi.

Sử dụng quá nhiều breakpoint

Không cần tạo một Media Query cho từng mẫu điện thoại. Hãy ưu tiên những breakpoint thực sự cần thiết khi nội dung hoặc bố cục không còn phù hợp.

Không xử lý nội dung dài

Tên sản phẩm, đường dẫn hoặc tiêu đề dài có thể làm tràn container. Cần kiểm tra cách xuống dòng, giới hạn chiều rộng và xử lý nội dung phù hợp.

Nhầm lẫn giữa responsive và mobile-only

Responsive không có nghĩa là chỉ tối ưu cho điện thoại. Mục tiêu là đảm bảo giao diện hoạt động tốt trên nhiều kích thước màn hình.

7. Kiểm tra Responsive bằng Browser DevTools

Trong quá trình phát triển Frontend, bạn có thể sử dụng DevTools của Chrome hoặc Edge để kiểm tra giao diện:

1. Mở website trên trình duyệt.
2. Nhấn F12 hoặc Ctrl + Shift + I.
3. Bật chế độ giả lập thiết bị bằng biểu tượng điện thoại và máy tính bảng.
4. Thay đổi kích thước viewport.
5. Kiểm tra hiện tượng tràn ngang, chữ quá nhỏ, hình ảnh bị méo hoặc các phần tử chồng lên nhau.
6. Thử những kích thước nằm ngay trước và sau breakpoint để phát hiện lỗi bố cục.

Ngoài việc giả lập, bạn nên kiểm tra website trên thiết bị thực khi có điều kiện, vì cách tương tác và hiển thị có thể khác nhau giữa các môi trường.

8. Bài tập thực hành

Hãy xây dựng một danh sách gồm sáu thẻ sản phẩm, mỗi thẻ có hình ảnh, tên sản phẩm và giá tiền.

Yêu cầu:

• Trên màn hình lớn: hiển thị ba cột.
• Trên màn hình vừa: hiển thị hai cột.
• Trên màn hình nhỏ: hiển thị một cột.
• Hình ảnh không bị méo và không vượt khỏi thẻ.
• Container không gây tràn ngang.
• Khoảng cách giữa các thẻ phù hợp với từng kích thước màn hình.

Sau khi hoàn thành, hãy kiểm tra giao diện bằng DevTools và điều chỉnh các breakpoint nếu cần.

Kết luận

Responsive Web Design là kỹ năng nền tảng đối với Frontend Developer. Để xây dựng giao diện đa thiết bị, bạn cần hiểu viewport, sử dụng kích thước linh hoạt, xử lý hình ảnh, áp dụng Media Queries và kết hợp Flexbox hoặc Grid phù hợp với bố cục.

Điều quan trọng không phải là ghi nhớ một danh sách breakpoint cố định, mà là hiểu khi nào bố cục cần thay đổi và lựa chọn cách triển khai phù hợp.

Ở bài tiếp theo, chúng ta sẽ tìm hiểu Bootstrap – một CSS Framework giúp xây dựng giao diện nhanh hơn thông qua hệ thống lưới, các component và những lớp CSS có sẵn.

 

 

Bài 7. Bootstrap – Làm quen với CSS Framework

 

1. Bootstrap là gì?

Khi xây dựng giao diện website bằng HTML và CSS thuần, chúng ta thường phải tự viết CSS cho các thành phần như button, navbar, form, card và layout responsive. Với những dự án có nhiều thành phần giao diện, việc này có thể tốn thời gian và dẫn đến CSS lặp lại.

Bootstrap là một CSS Framework mã nguồn mở cung cấp hệ thống lưới, các component giao diện và những lớp CSS tiện ích giúp quá trình xây dựng website trở nên nhanh chóng và nhất quán hơn.

Thay vì tự viết toàn bộ CSS cho một nút bấm, bạn có thể sử dụng class có sẵn của Bootstrap:

<button class="btn btn-primary">
  Đăng ký ngay
</button>

Bootstrap sẽ áp dụng kiểu dáng tương ứng cho nút bấm mà không cần bạn tự định nghĩa từng thuộc tính CSS.

Bootstrap cũng hỗ trợ responsive, giúp bố cục có thể thích nghi với nhiều kích thước màn hình.

2. Vì sao Frontend Developer nên tìm hiểu Bootstrap?

Bootstrap mang lại một số lợi ích trong quá trình phát triển giao diện:

• Tăng tốc độ phát triển: sử dụng các component và class có sẵn thay vì viết mọi thứ từ đầu.
• Giao diện nhất quán: các thành phần như button, form và card có quy tắc thiết kế đồng bộ.
• Hỗ trợ responsive: hệ thống lưới và breakpoint giúp bố cục thích nghi với các thiết bị khác nhau.
• Dễ làm quen: có tài liệu chính thức và nhiều ví dụ thực tế.
• Giảm CSS lặp lại: những kiểu dáng phổ biến đã được định nghĩa trong framework.

Tuy nhiên, Bootstrap không thay thế hoàn toàn HTML và CSS. Nếu chưa hiểu cách hoạt động của chúng, bạn có thể gặp khó khăn khi tùy chỉnh giao diện hoặc xử lý những trường hợp framework không đáp ứng đúng yêu cầu.

3. Cách sử dụng Bootstrap

Có nhiều cách đưa Bootstrap vào dự án. Với người mới học, sử dụng CDN là cách đơn giản để bắt đầu.

Thêm đoạn mã sau vào phần head của trang HTML:

<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
>

Sau đó, bạn có thể sử dụng các class của Bootstrap trực tiếp trong HTML.

Ví dụ:

<div class="container mt-4">
  <h1 class="text-primary">Xin chào Bootstrap</h1>

  <p class="text-muted">
    Đây là website sử dụng Bootstrap.
  </p>

  <button class="btn btn-primary">
    Bắt đầu
  </button>
</div>

Trong ví dụ trên:

• container: tạo vùng nội dung có chiều rộng phù hợp theo breakpoint.
• mt-4: thêm khoảng cách phía trên.
• text-primary: sử dụng màu chữ theo màu chủ đạo của Bootstrap.
• text-muted: sử dụng màu chữ phụ.
• btn btn-primary: tạo nút bấm với kiểu dáng chính.

Lưu ý: đoạn CDN trên sử dụng phiên bản Bootstrap 5.3.8. Khi bắt đầu dự án thực tế, nên kiểm tra tài liệu chính thức để chọn phiên bản phù hợp và tránh trộn các phiên bản khác nhau.

4. Những thành phần nền tảng trong Bootstrap

4.1. Grid System – Hệ thống lưới

Grid System là một trong những tính năng quan trọng nhất của Bootstrap, giúp chia bố cục thành các cột và xây dựng giao diện responsive.

Bootstrap sử dụng hệ thống 12 cột cho bố cục lưới thông thường.

Ví dụ:

<div class="container">
  <div class="row">
    <div class="col-md-8">
      Nội dung chính
    </div>

    <div class="col-md-4">
      Sidebar
    </div>
  </div>
</div>

Ý nghĩa:

• container: tạo vùng chứa nội dung.
• row: tạo hàng trong hệ thống lưới.
• col-md-8: chiếm 8/12 cột từ breakpoint md trở lên.
• col-md-4: chiếm 4/12 cột từ breakpoint md trở lên.

Trên màn hình nhỏ hơn breakpoint md, các cột này mặc định có thể xếp thành các hàng riêng nếu không có class kích thước nhỏ hơn được khai báo.

Một số breakpoint phổ biến của Bootstrap 5:

Tiền tố	Kích thước viewport
sm	từ 576px
md	từ 768px
lg	từ 992px
xl	từ 1200px
xxl	từ 1400px

Ví dụ, col-12 col-md-6 col-lg-4 có nghĩa là:

• Màn hình nhỏ: chiếm toàn bộ 12 cột.
• Từ md: chiếm 6/12 cột, tương đương nửa hàng.
• Từ lg: chiếm 4/12 cột, tương đương một phần ba hàng.

Cách viết này rất hữu ích khi xây dựng danh sách sản phẩm, bài viết hoặc các thẻ thông tin.

4.2. Buttons – Nút bấm

Bootstrap cung cấp nhiều kiểu nút bấm để thể hiện mức độ quan trọng hoặc trạng thái của hành động.

<button class="btn btn-primary">
  Lưu
</button>

<button class="btn btn-secondary">
  Hủy
</button>

<button class="btn btn-danger">
  Xóa
</button>

<button class="btn btn-outline-primary">
  Xem thêm
</button>

Các class phổ biến:

• btn: class nền tảng để tạo kiểu nút.
• btn-primary: nút hành động chính.
• btn-secondary: nút hành động phụ.
• btn-danger: thường dùng cho hành động nguy hiểm như xóa.
• btn-outline-primary: nút dạng viền.

Những class này chủ yếu định dạng giao diện. Muốn nút thực hiện hành động, bạn vẫn cần bổ sung JavaScript hoặc cơ chế xử lý phù hợp của ứng dụng.

4.3. Forms – Biểu mẫu

Bootstrap hỗ trợ định dạng các thành phần biểu mẫu như input, select và checkbox.

<div class="mb-3">
  <label for="email" class="form-label">
    Email
  </label>

  <input
    type="email"
    class="form-control"
    id="email"
    placeholder="Nhập email của bạn"
  >
</div>

Trong ví dụ:

• mb-3: tạo khoảng cách phía dưới.
• form-label: định dạng nhãn.
• form-control: định dạng trường nhập liệu.

Bootstrap giúp biểu mẫu trông đồng bộ hơn, nhưng bạn vẫn cần xử lý validation, thông báo lỗi và gửi dữ liệu theo yêu cầu của ứng dụng.

4.4. Cards – Thẻ nội dung

Card là component thường dùng để hiển thị sản phẩm, bài viết, thông tin người dùng hoặc dịch vụ.

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Frontend Developer</h5>

    <p class="card-text">
      Tìm hiểu HTML, CSS và JavaScript.
    </p>

    <a href="#" class="btn btn-primary">
      Tìm hiểu thêm
    </a>
  </div>
</div>

Một số class quan trọng:

• card: tạo khung card.
• card-body: phần nội dung.
• card-title: tiêu đề.
• card-text: đoạn văn bản.

Trong dự án thực tế, bạn có thể kết hợp Card với Grid System để tạo danh sách nhiều thẻ trên cùng một hàng.

4.5. Navbar – Thanh điều hướng

Navbar là thành phần giúp người dùng di chuyển giữa các trang hoặc khu vực trong website.

Bootstrap cung cấp các class như navbar, navbar-expand-lg, navbar-brand, navbar-nav và nav-link để xây dựng thanh điều hướng có khả năng thích nghi với màn hình nhỏ.

Khi sử dụng navbar thu gọn hoặc các component có tương tác, bạn có thể cần thêm Bootstrap JavaScript bundle. CSS riêng lẻ không tự xử lý mọi hành vi đóng, mở menu.

5. Utility Classes – Các lớp tiện ích

Utility Classes cho phép áp dụng nhanh những thuộc tính CSS phổ biến mà không cần tạo class riêng.

Ví dụ:

<div class="d-flex justify-content-between align-items-center p-3">
  <h2 class="mb-0">Sản phẩm</h2>
  <button class="btn btn-primary">Thêm mới</button>
</div>

Một số nhóm class thường dùng:

Nhóm	Ví dụ	Công dụng
Spacing	mt-3, p-4, mb-2	Điều chỉnh margin và padding
Display	d-none, d-flex, d-block	Điều khiển kiểu hiển thị
Flexbox	justify-content-center, align-items-center	Căn chỉnh phần tử
Text	text-center, fw-bold	Căn chữ và điều chỉnh độ đậm
Colors	text-primary, bg-dark	Đặt màu chữ và màu nền
Width	w-100	Đặt chiều rộng theo tỷ lệ có sẵn

Utility Classes giúp triển khai giao diện nhanh hơn. Tuy nhiên, nếu đặt quá nhiều class vào một phần tử, HTML có thể khó đọc và khó bảo trì. Với những kiểu dáng riêng hoặc được sử dụng lặp lại nhiều lần, bạn vẫn nên cân nhắc tạo class CSS phù hợp.

6. Bootstrap và CSS thuần khác nhau như thế nào?

Tiêu chí	CSS thuần	Bootstrap
Cách viết	Tự định nghĩa quy tắc CSS	Kết hợp class có sẵn
Tốc độ ban đầu	Có thể chậm hơn khi phải tự xây dựng mọi thành phần	Nhanh với những giao diện phổ biến
Tùy chỉnh	Kiểm soát trực tiếp mọi kiểu dáng	Có thể cần ghi đè hoặc tùy chỉnh biến và class
Tính nhất quán	Phụ thuộc vào cách tổ chức CSS của dự án	Có sẵn hệ thống thiết kế cơ bản
Responsive	Tự xây dựng Media Queries và bố cục	Có sẵn breakpoint và Grid System
Phụ thuộc framework	Không	Có

Không có lựa chọn nào luôn tốt hơn trong mọi trường hợp.

CSS thuần giúp bạn hiểu sâu cách trình duyệt xử lý giao diện và phù hợp khi cần thiết kế theo yêu cầu riêng. Bootstrap hữu ích khi cần phát triển nhanh, đặc biệt với các giao diện có nhiều thành phần phổ biến.

Trong thực tế, một dự án cũng có thể kết hợp Bootstrap với CSS tùy chỉnh.

7. Những lưu ý khi làm việc với Bootstrap

Không chỉ học thuộc tên class

Bạn nên hiểu class đó đang áp dụng kiểu dáng gì. Chẳng hạn, cần phân biệt d-flex với justify-content-between: class đầu tiên bật Flexbox, còn class thứ hai phân bố các phần tử trên trục chính.

Không lạm dụng utility classes

Việc thêm quá nhiều class vào HTML có thể khiến cấu trúc khó đọc. Hãy tổ chức các thành phần hợp lý và sử dụng CSS riêng khi cần thiết.

Chú ý phiên bản Bootstrap

Cú pháp và một số component có thể khác nhau giữa các phiên bản. Hãy đọc đúng tài liệu của phiên bản đang dùng.

Không mặc định Bootstrap sẽ xử lý toàn bộ JavaScript

Một số tính năng như dropdown, modal và navbar thu gọn cần JavaScript của Bootstrap. Bạn nên kiểm tra tài liệu để biết component nào cần phần này.

Kiểm tra giao diện responsive

Dù Bootstrap có Grid System và breakpoint có sẵn, bạn vẫn cần kiểm tra nội dung dài, hình ảnh, biểu mẫu và bố cục thực tế trên nhiều kích thước màn hình.

Đảm bảo khả năng truy cập

Sử dụng HTML có ngữ nghĩa, nhãn biểu mẫu rõ ràng, trạng thái focus dễ nhận biết và tên nút có ý nghĩa. Một giao diện đẹp không đồng nghĩa với việc mọi người đều có thể sử dụng dễ dàng.

8. Bài tập thực hành

Hãy xây dựng một trang danh sách sản phẩm bằng Bootstrap với các yêu cầu:

• Có thanh điều hướng chứa logo và các liên kết.
• Có tiêu đề và mô tả ngắn cho trang.
• Hiển thị ít nhất sáu thẻ sản phẩm bằng Grid System.
• Mỗi thẻ gồm hình ảnh, tên, giá và nút xem chi tiết.
• Sử dụng các utility classes để căn chỉnh nội dung và tạo khoảng cách.
• Đảm bảo bố cục hiển thị hợp lý trên điện thoại, máy tính bảng và máy tính.

Sau khi hoàn thành, hãy thử thay đổi một số class Bootstrap và quan sát kết quả. Tiếp theo, thử tự viết lại một component nhỏ bằng CSS thuần để so sánh hai cách triển khai.

Kết luận

Bootstrap là một công cụ hữu ích giúp Frontend Developer xây dựng giao diện nhanh chóng nhờ Grid System, các component có sẵn và Utility Classes.

Tuy nhiên, mục tiêu khi học Bootstrap không chỉ là ghi nhớ các class. Bạn cần hiểu những kiến thức HTML, CSS, Flexbox, Grid và Responsive Web Design đứng phía sau framework để có thể tùy chỉnh giao diện và xử lý vấn đề hiệu quả.

Khi đã nắm vững nền tảng này, bạn có thể tiếp tục tìm hiểu những công cụ giao diện khác như Tailwind CSS, đồng thời áp dụng kiến thức vào các dự án React hoặc Next.js.