Hướng dẫn responsive header in bootstrap - tiêu đề đáp ứng trong bootstrap
 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. Show
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). 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:
- Code tương ứng sẽ là: .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 - Nếu muốn một dòng 2 cột như hình dưới này thì sao?
- Thì code sẽ là: .col-md-8 .col-md-4 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ậy nó có tác dụng gì? 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) (Xem trên di động) 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: 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:
[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ế. 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) (Xem trên di động) 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: [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ế.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 :) Xem ví dụ sẽ hình dung ra được cái bảng ở trên nói gì :D - Ta có code như sau: .col-md-4 .col-md-4 .col-md-4- 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.
- Với thiết kế giao diện website bằng Bootstrap, khi xem trên di động sẽ như thế này.
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:
- 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.
- Nếu chưa có phần mềm Notepad++, bạn tải về ở link dưới. 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:
- 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. .
- Nếu chưa có phần mềm Notepad++, bạn tải về ở link dưới. - Sau khi mở file index, có code như hình dưới:[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ẻ: .
- 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:
- 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: - Bây giờ, hãy F5 trang index, để xem kết quả: - Nhìn còn xấu, định dạng CSS cho Top nav đẹp hơn xí. Code như sau:
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ẻ .... và đặt trên thẻ như hình trên.
- Sau khi thêm CSS, F5 lại trang index, có kết quả như sau:
- 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.
- Nhấp chuột vào biểu tượng như hình để xem trên chế độ responsive. - 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. - 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:- Thêm class col-md-8 và col-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: - 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: -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ả. - 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: - 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.
**Như vậy, ta đã code xong cho Header. Tiếp tục đến viết code cho Mid nav. - 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:- Bây giờ, hãy F5 trang index, để xem kết quả:/ đóng thẻ Bài Viết Liên Quan
Bản quyền © 2021 Hàng Hiệu Inc.
|
