Khóa học đã chọn

Sử dụng Bootstrap để tạo giao diện cho trang web hỗ trợ responsive

ngày 22-02-2016

Bootstrap là một Framework HTML, CSS, và JavaScript cho phép thiết kế phát triên các website hỗ trợ responsive, hiện tại Bootstrap là một trong những thư viện CSS và Javascript được dùng nhiều nhất trên thế giới với nhiều ưu điểm như:

Chuẩn hiển thị trên mọi màn hình, mọi trình duyệt
Tự động điều chỉnh kích thước trang theo kích thước trình duyệt
Tốc độ load cao
Hỗ trợ nhiều kiểu hiển thị sẵn, nhiều kiểu box, nhiều kiểu form đẹp và sang trọng
Hỗ trợ LESS và SASS giúp lập trình viên nhanh chóng tích hợp Bootstrap

Việc tích hợp Bootstrap vào website cũng rất dễ dàng và thuận tiện, sau đây là các bước để tích hợp Bootstrap vào website

1. Tích hợp CSS vào website

Download thư viện Bootstrap tại địa chỉ: http://getbootstrap.com/getting-started/#download

Giao diện download thư viện Bootstrap

Trong trường hợp bạn không muốn download Bootstrap về máy hoặc hosting, bạn có thể sử dụng CDN (Content Delivery Network) một cách nhanh chóng bằng cách thêm các dòng sau vào trước thẻ < /head > của website:

Sử dụng Bootstrap CDN

Đối với website sử dụng WordPress, bạn download Bootstrap, giải nén và copy file bootstrap.min.css vào giao diện, tốt nhất là tạo thư mục CSS trong giao diện và thả chúng vào, chuyển sang file header.php và edit lại, thêm dòng sau vào trước thẻ đóng < /head >

2. Thiết lập cho website hỗ trợ giao diện Mobile (Mobile First !)

Để chắc chắn giao diện của website có hỗ trợ mobile hay chưa? Kiểm tra đoạn mã sau trong thẻ < head > < /head >, nếu bạn chưa có thì bổ sung vào, đoạn mã này dùng để khai báo hỗ trợ co kéo màn hình theo kích thước một cách tự động.

Tiếp tục, kiểm tra trong giao diện xem có tồn tại các lệnh “Width” trong CSS hay không?, bạn mở file các file CSS (mở file Style.css nếu là WordPress) tìm “width:” và thay thế toàn bộ bằng “max-width” để HTML co dãn theo màn hình một cách tự động!

3. Một số lưu ý khi sử dụng Bootstrap

Class Container: được fix sẵn độ rộng tùy theo độ phân giải của , padding sang hai bên là 15px, thẻ này sẽ bọc ngoài hầu hết tất cả các thẻ div về sau.
Class Container-fluid: có độ rộng full màn hình, padding sang hai bên là 15px, thẻ này sẽ bọc ngoài hầu hết tất cả các thẻ div về sau.
Class Row: Thẻ này sẽ Margin số âm: -15px nếu bạn muốn thẻ nào đó sát vào bên lề hai bên, trái ngược với Container, bạn chỉ cần đặt container bọc ngoài thẻ Row là thẻ trong đó sẽ nằm đúng lề, ví dụ:

Class container và row trong Bootstrap

Giao diện trong Bootstrap dạng lưới (grid) và được chia làm 12 cột (column) được đặt trong một class row

Hệ thống grid trong Bootstrap

Trong đó, mỗi một cột sẽ có Padding là 15px sang hai bên, các ký hiệu cột như sau:
.col-lg- : sử dụng cho màn hình có độ phân giải ≥ 1200px (Large devices – Desktop)
.col-md- : sử dụng cho màn hình có độ phân giải ≥ 992px (Medium devices – Desktop)
.col-sm- : sử dụng cho màn hình có độ phân giải ≥ 768px (Small devices – Tablets)
.col-xs- : sử dụng cho màn hình có độ phân giải < 768px (Extra small devices – Phones)

Cách hoạt động của hệ thống lưới đối với các thiết bị

Cụ thể độ rộng của các cột như sau
.col-md-1 : Cột rộng 1 phần (1 phần/12 phần) với màn hình máy tính trung bình (Medium devices)
.col-md-6: Cột rộng một nửa màn hình (6 phần/12 phần) với màn hình máy tính trung bình (Medium devices)
.col-sm-12: Cột rộng toàn màn hình (12 phần/12 phần) với màn hình máy tính bảng (Small devices)
.col-xm-12: Cột rộng toàn màn hình (12 phần/12 phần) với màn hình điện thoại (Extra small devices)

Ngoài ra còn rất nhiều các class khác, các bạn có thể khám phá thêm tại địa chỉ: http://www.w3schools.com/bootstrap/default.asp

4. Áp dụng vào website của bạn

Trước tiên, các bạn cần bọc toàn bộ nội dung trong Website bằng thẻ container (toàn bộ nội dung của trang web sẽ được đặt trong class container hoặc container-fluid)

Nếu website của bạn là WordPress:
Mở file Header.php và thêm ngay sau thẻ body đoạn code sau:

<body>
<div class="container">

Sau đó mở file Footer.php để đóng nó, tạo cho cả website nằm trong thẻ Container sẽ cách đều hai bên là 15px.
Tiếp theo, các bạn vào Style.css để chỉnh kích thước maximum của màn hình, thông thường website sẽ rộng nhất là 1200px hoặc 980px.
body {max-width:1200px; margin:0 auto}

Như layout ví dụ trên, Website có độ rộng 1200px maximum, trong Content chính để class là col-md-8 với ý nghĩa là độ rộng 8 phần / 12 phần, còn sidebar dùng class col-md-4 để rộng 4 phần / 12 phần, tổng thể của chúng phải luôn là 12 phần.

Tiếp theo các bạn co màn hình vào khoảng 780px độ rộng, đó là nơi dành cho màn hình trung bình của máy tính bảng, tại thẻ bọc content vừa nãy ta dùng class là col-md-8, các bạn bổ sung thêm col-xm-12 vào, làm tương tự với sidebar cũng cho thêm col-sm-12 vào, như vậy khi người dùng sử dụng màn hình máy tính bảng thì Content và Sidebar đều dãn hết cỡ, vừa vặn với độ rộng màn hình.

Tiếp tục, các bạn có thể bổ sung thêm col-xs-12 để làm việc với màn hình điện thoại hoặc nếu muốn chia đôi màn hình điện thoại thì sử dụng col-xs-6 cho cả content và sidebar.

5. Một số lỗi thường gặp trong quá trình sử dụng Bootstrap

-  Giao diện hiển thị không chính xác trên các thiết bị khác nhau: khi sử dụng Bootstrap, một trong những điều lưu ý đầu tiên là trong các trang định dạng (stylesheet) không được sử dụng thuộc tính width mà phải thay bằng max-width để giới hạn độ rộng của điều khiển, phần còn lại sẽ để cho Bootstrap tự xử lý. Nếu xử dụng width sẽ khiến cho giao diện không thể tự co giãn cho phù hợp với các thiết bị khác nhau.
-   Thay đổi nội dung của file bootstrap.css: nếu thay đổi nội dung của file bootstrap sẽ khiến cho toàn bộ thiết kế bị hư khi muốn nâng cấp file Bootstrap. Để tránh lỗi này thay vì sửa nội dung của file Bootstrap.css thì bạn có thể viết đè (overwrite) trong trang định dạng (stylesheet) của riêng bạn để thay đổi các thiết lập mặc định của Bootstrap về colors (màu sắc), styles (định dạng), margins (lề ngoài), paddings (lề trong) cũng như mọi thứ khác
-   Hiển thị hộp hội thoại (Bootstrap modals) không đúng cách: như hiển thị nhiều hơn một modal, hiển thị modal không đúng cách (nằm dưới phần nền)

Bootstrap không hỗ trợ hiển thị chồng các modals (overlapping). Chỉ 1 modal tại 1 thời điểm có thể hiển thị. Nếu muốn hiển thị nhiều hơn 1 modal tại 1 thời điểm có thể chỉnh sửa code để thực hiện điều này nhưng sẽ khiến cho thư viện bootstrap bị lỗi khi nâng cấp

Nếu đối tượng chứa modal hoặc thành phần cha của nó có thuộc tính position là fixed hoặc relative, modal sẽ không hiển thị đúng. Luôn luôn chắc rằng đối tượng chứa modal và thành phần cha của nó không dùng thuộc tính position đặc biệt. Cách tốt nhất là đặt mã HTML của modal ngay trước thẻ đóng < /body >, hoặc tốt hơn nữa là ngay sau thẻ mở < body >. Đây là cách tốt nhất để tránh những thành phần khác ảnh hưởng tới giao diện và tính năng của modal.

- Không sử dụng các thuộc tính “data-“: nếu các bạn chưa quen sử dụng Bootstrap sẽ dễ dàng bỏ qua các thuộc tính “data-“ mà phải viết thêm các đoạn code JavaScript để thực hiện xử lý. Ví dụ: để kích hoạt một modal chúng ta có thể sử dụng 1 tag html để kích hoạt đơn giản như sau thay vì phải sử dụng JavaScript:
su_dung_boostrap_cho_web_responsive_9

data-toggle="modal": chỉ định nút lệnh sẽ kích chọn modal khi được nhấn.
data-target="#myModal": chỉ định modal có id là myModal sẽ được hiển thị
data-backdrop="static": không đóng modal khi người dùng click ra ngoài modal
data-keyboard="false": không đóng modal khi người dùng nhấn phím Escape.

- Không khai báo thư viện hỗ trợ với trình duyệt IE8 và các trình duyệt cũ hơn: Bootstrap hoạt động tốt nhất trên những trình duyệt mobile và máy tính mới. Những trình duyệt cũ sẽ hiển thị giao diện với định dạng khác đi, nhưng mọi thứ vẫn hoạt động bình thường. Để có sự hỗ trợ đầu đủ cho Internet Explorer 8 và những trình duyệt cũ hơn khác, bạn cần dùng công cụ hỗ trợ cho những truy xuất CSS3 (CSS3 Media Queries) là Respond.js và HTML5 shim, những công cụ này cho phép hiển thị những thành phần HTML5, và thêm một thẻ < meta > để đảm bảo IE không chạy trong chế độ compatibility mode