July 20, 2017

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

Hướng dẫn thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể


Website responsive là gì?


Ngày nay với công nghệ số phát triển, người dùng đang dần có xu hướng sử dụng điện thoại cá nhân, máy tính bảng hay iPad lướt web nhiều hơn là dùng trên máy tính bàn hay laptop. Vậy nên một website được thiết kế tốt, đầu tiên là website có giao diện đáp ứng tốt ở mọi thiết bị. Nghĩa là dù bạn có dùng thiết bị gì (iPhone, máy tính bảng, điện thoại android, v.v..) truy cập vào website, thì ngay lập tức website đó tự động hiển thị giao diện tương ứng cho thiết bị truy cập, đó gọi là responsive.

Những website không hỗ trợ responsive và chỉ thiết kế duy nhất cho một thiết bị hay một cỡ màn hình (ví dụ: website được thiết kế cho máy tính có cỡ màn hình 1024x768), thì khi người dùng xem trang website này trên các thiết bị khác, có cỡ màn hình khác nhau, nếu nhỏ hơn thì giao diện đó cũng bị thu bé lại, thành ra tất cả đều bé, chữ cũng bé tí rất khó xem, phóng to lên để xem rõ thì khó thao tác, rất khó chịu, v.v..


Giải pháp nào cho thiết kế website responsive tốt nhất?


Có rất nhiều cách để bạn thiết kế một giao diện website responsive. Nhưng với mình, hiện Bootstrap là một thư viện hỗ trợ tốt nhất cho việc design một website đáp ứng tốt mọi loại màn hình. Bootstrap hỗ trợ gần như mọi thứ và làm tất cả cho bạn rồi, bạn chỉ việc dùng và áp dụng sao cho phù hợp với thiết kế của mình mà thôi.


Vậy Bootstrap là gì?


Bootstrap là một framework CSS được Twitter phát triển. Bootstrap nói chung là một thư viện viết sẵn các CSS, giúp rút ngắn thời gian thao tác của người thiết kế. Bootstrap hỗ trợ rất nhiều, nhưng trong bài này sẽ nói đến Bootstrap Grid, vì ta sẽ dùng nó để thiết kế nên một website responsive.


Hiểu nhanh về Bootstrap Grid (Lưới Bootstrap)?


1. Trong Bootstrap Grid, mỗi một dòng (row) sẽ có 12 cột (column).

Ví dụ: Một dòng có 12 cột:

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

- Code tương ứng sẽ là:
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>

- Nếu muốn một dòng 2 cột như hình dưới này thì sao?

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

- Thì code sẽ là:
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>

Qua ví dụ trên bạn đã hiểu cách tạo một hoặc nhiều cột trong một dòng rồi. Vậy nó có tác dụng gì?
- Các cột đó của Bootstrap sẽ tự động xuống hàng nếu chiều rộng (ngang) của một thiết bị không chứa đủ.

Ví dụ: Như ví dụ trên ta đã tạo một dòng 2 cột, một cột 8 và cột 4.

- Giờ ví dụ 1 cột của Bootstrap có độ rộng là 70px => cột 8 sẽ là (8x70) 560px và cột 4 sẽ là (4x70) 280px => tổng cộng độ rộng của dòng sẽ là: 560 + 280 = 840px.

- Tiếp theo, nếu bạn xem dòng này trên máy tính có màn hình từ 840px trở lên sẽ thấy 2 cột nằm chung 1 dòng, nhưng nếu xem trên điện thoại với màn hình 400px chẳng hạn, thì cột thứ 2 sẽ tự động xuống dòng, cả 2 cột sẽ tự động co lại vừa bằng 400px.

(Xem trên máy tính)
Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

(Xem trên di động)
Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

Ok, đến đây bạn đã hiểu cách hoạt động các cột này của Bootstrap Grid rồi chứ? Ta chính là áp dụng cái này vào thiết kế website responsive, bạn cứ tạm hiểu đến đây, bạn sẽ hiểu rõ hơn nữa qua ví dụ cụ thể mình sẽ hướng dẫn bên dưới sau.


2. Các tùy chọn của lưới Bootstrap: Tùy theo thiết bị mà độ rộng của các cột cũng khác nhau. Lưới Bootstrap hiện hỗ trợ cho 4 kiểu màn hình như sau:

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

[1] : 4 loại màn hình như hình.
[2] : Độ rộng của một dòng.
[3] : Class cho từng màn hình.
[4] : Độ rộng trung bình 1 cột (Lấy cái số [2] chia cho 12 cột là ra nó).
[5] : Khoảng cách biên của phần tử có trong một cột, trái 15px + phải 15px => tổng cộng 30px. Ví dụ: Trong cột có chứa một đoạn văn bản, thì đoạn văn bản này sẽ có biên phải cách cột là 15px và biên trái cũng thế.

Ví dụ: Xem ví dụ sẽ hình dung ra được cái bảng ở trên nói gì :D

- Ta có code như sau:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
- Xem cái bảng trên, nhìn số [3], sẽ thấy class col-md- hỗ trợ cho màn hình từ 992px trở lên, có chiều rộng là 970px. Nên nếu ta xem trên màn hình từ 992px trở lên sẽ thấy được 3 cột, còn dưới 992px các cột thứ 2, thứ 3 sẽ tự động bị đẩy xuống.

(Xem trên máy có màn hình 992px)
Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

(Xem trên máy có màn hình lớn hơn 992px nhiều nên dư biên 2 bên)
Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

(Xem trên máy có màn hình nhỏ hơn 992px)
Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể


Đến đây bạn đã hiểu được nguyên tắc hoạt động của lưới Bootstrap đến đâu rồi? Dĩ nhiên vẫn còn vài kiến thức mình muốn phổ biến nữa, như kết hợp cách dùng Media query. Nhưng mình cũng không biết diễn tả sao mà vừa ngắn gọn vừa dễ hiểu nhất có thể. Nên hãy cùng làm qua bài ví dụ cụ thể sau đây :)


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

(Qua ví dụ cụ thể)


1. Phát họa giao diện muốn thiết kế


- Để thiết kế bất cứ gì đi nữa thì đầu tiên bạn cần có là bản phác thảo, nó giống như một cái sườn để mình dựa vào đó xây dựng và thiết kế. Bản phác thảo đó có thể là bản vẽ nháp bằng tay trên giấy, hoặc vẽ trên máy tính, điện thoại gì cũng được. Trong bài ví dụ này, mình sẽ phác thảo một giao diện website đơn giản như sau:

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

- Với thiết kế giao diện website bằng Bootstrap, khi xem trên di động sẽ như thế này.

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể


2. Chọn cỡ màn hình thiết bị bạn muốn thiết kế cho nó là chủ yếu


Ở bài ví dụ này sẽ thiết kế giao diện website đáp ứng cho tất cả mọi thiết bị, nên mình sẽ thiết kế cho cỡ màn hình lớn nhất trước. Lý do là vì nếu giao diện bạn thiết kế có hình ảnh, thì sẽ dễ dàng chỉnh ảnh đó nhỏ lại cho thiết bị nhỏ hơn, chứ nếu thiết kế cho thiết bị nhỏ trước, hình ảnh sẽ bị vỡ nếu xem trên thiết bị có cỡ màn hình lớn hơn.


3. Thư viện cần có của Bootstrap


Để có thể chạy được code hỗ trợ website responsive, bạn cần khai báo đầy đủ các thư viện của Bootstrap.

Download ▼


- Sau khi tải về, giải nén, bạn sẽ được folder "website-responsive-with-bootstrap" có chứa các thư viện sau:

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

- Click phải vào file "index" > Edit with.. để xem code và viết code. Bạn có thể mở bằng Notepad mặc định của Win cũng được, nhưng khuyên nên mở với Notepad++, hoặc các phần mềm hỗ trợ viết code để dễ thao tác.

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

- Nếu chưa có phần mềm Notepad++, bạn tải về ở link dưới.

Download ▼


- Sau khi mở file index, có code như hình dưới:

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

[1] : Thay tên thành tên blog của bạn.
[2] : 3 thư viện cần có của Bootstrap: bootstrap.min.css // bootstrap.min.js // jquery-3.2.0.min.js
[3] : Tất cả code của Bootstrap đều phải được đặt trong thẻ: <div class="container">.

- Bây giờ hãy nhấp đôi chuột vào file index để xem thử trang nào, bạn sẽ thấy trang trống trơn. Đương nhiên rồi, vì ta chưa viết code gì lên đó mà. Ok, chuẩn bị xong hết rồi, bắt đầu viết code.


4. Viết code cho Top nav


- Mình dự định chia Top nav thành 2 cột với tỷ lệ 8-4, một cột chứa link giới thiệu, thông tin về website và một cột chứa hộp tìm kiếm. Vì mình sẽ viết code cho thiết bị có màn hình lớn nhất trước (từ 1200px trở lên), nên sẽ sử dụng class col-lg-. Code như sau:

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể


- Nhấn vào nút "Copy code" để lấy code và dán vào file index của bạn.

- Lúc này, thử F5 trang index, vẫn thấy trang trống trơn, vì mình mới chia cột thôi, chưa viết gì lên đó. Bây giờ sẽ tiến hành thêm link và hộp tìm kiếm vào Top nav, code như sau:

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể


- Bây giờ, hãy F5 trang index, để xem kết quả:

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

- Nhìn còn xấu, định dạng CSS cho Top nav đẹp hơn xí. Code như sau:

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể


Lưu ý: Tất cả các code CSS chèn trực tiếp vào trang, đều phải được đặt trong thẻ <style>....</style> và đặt trên thẻ </head> như hình trên.

- Sau khi thêm CSS, F5 lại trang index, có kết quả như sau:

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

- Cũng tạm ổn. Bây giờ thử test trên nhiều thiết bị xem sao, bằng cách: Click chuột phải vào trang > Chọn Inspect.

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

- Nhấp chuột vào biểu tượng như hình để xem trên chế độ responsive.

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

- Nhấp chuột vào menu Responsive và chọn Responsive như hình để test thử ở nhiều thiết bị. Bạn sẽ thấy cỡ màn hình từ 1200px trở lên mới hiện 2 cột một dòng, còn lại các thiết bị có cỡ màn hình nhỏ hơn 1200px đều bị đẩy cột xuống thành 2 dòng.

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

- Vậy giờ bạn muốn vẫn hiển thị 2 cột một dòng trên thiết bị có màn hình từ 992px trở lên thì sao? Thì ta thêm code như sau:

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

- Thêm class col-md-8col-md-4 vào vị trí như hình, lý do là vì class col-md- hỗ trợ cho màn hình từ 992px trở lên. Bây giờ bạn F5 trang index và xem thử với màn hình từ 992px trở lên, sẽ thấy hiện 2 cột một dòng.

**Đến đây coi như đã code xong cho Top nav rồi. Giờ làm tiếp cái Header.


5. Viết code cho Header


- Như bản vẽ phát thảo, header mình dự định chia làm 2 cột, một cột tiêu đề blog và một cột trống sẽ dùng để chèn quảng cáo. Mình sẽ chia theo tỷ lệ 3-9. Code như sau:

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể


- Chèn code trên vào bên dưới code của Top nav (như hình).

- Tiếp theo, viết code CSS cho header. Code như sau:

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể


-Tương tự cũng chèn code CSS của header sau code CSS của Top nav (như hình).

- Nhấn F5 trang index để xem kết quả.

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

- Cũng như Top nav, Header cũng sẽ hiện 2 cột một dòng với thiết bị từ 992px trở lên.

- Bây giờ mình muốn không hiện cột quảng cáo ở thiết bị có cỡ màn hình dưới 992px thì sao? Tức là khi xem website trên thiết bị có màn hình nhỏ hơn 992px, cột chứa quảng cáo sẽ bị ẩn đi. Thì mình sẽ code như sau:

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể


- Chèn code CSS @media vào dưới code CSS của header (như hình).

- F5 trang index và xem thử trên thiết bị di động › cột quảng cáo đã bị ẩn đi khi xem trên thiết bị dưới 992px rồi.

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

**Như vậy, ta đã code xong cho Header. Tiếp tục đến viết code cho Mid nav.


6. Viết code cho Mid nav


- Chèn đoạn code sau dưới code của Header như hình:

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể


[2] : Đoạn code để tạo menu responsive cho Mid nav.
Lưu ý: Code mình đưa thiếu dấu / đóng thẻ <script>. Bạn copy code về thêm dấu / vô để đóng thẻ như hình nha.

- Tiếp tục chèn code CSS của Mid nav vào dưới code CSS của Header (như hình):

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể


- F5 trang index xem kết quả:

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

- Bây giờ, thử xem trên thiết bị di động, khi màn hình nhỏ hơn 600px, menu Mid nav sẽ chuyển sang dạng responsive như thế này:

Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể
Thiết kế giao diện website responsive bằng Bootstrap qua ví dụ cụ thể

**Kết thúc phần viết code cho Mid nav.

Mình chỉ hướng dẫn đến đây thôi. Các phần còn lại cách làm cũng tương tự như cách viết mình đã hướng dẫn trên, nên mình không ví dụ thêm nữa. Đến đây chắc bạn cũng hiểu về cách hoạt động code của Bootstrap Grid hỗ trợ responsive cho website như thế nào rồi chứ? Mình chỉ ví dụ đơn giản nên giao diện chưa được trau chuốt lắm, chủ yếu để bạn hiểu cách thiết kế giao diện website responsive bằng Bootstrap là như thế.

[End Tut]
Viết bởi: CTG blog

Bản quyền bài viết thuộc về/ CTG blog
DMCA.com Protection Status



BÀI VIẾT LIÊN QUAN:

3 comments:

  1. Thank ban nhieu, bai viet rat hay

    ReplyDelete
  2. Bài viết rõ ràng bổ ích cho những người mới như mình. Cảm ơn bạn!

    ReplyDelete
  3. cám ơn bạn rất nhiều nhé !

    ReplyDelete