Lập trình web resposive với Bootstrap

Hướng dẫn bootstrap
Hướng dẫn bootstrap

Giới thiệu về Bootstrap

Ở đây mình sẽ không đi vào lịch sử Bootstrap hay những vấn đề bên lề dài dòng.

Bootstrap là một Framework phổ biến nhất thế giới cho việc xây dựng giao diện web responsive tương thích với mọi kích thước màn hình: moblie, desktop, phiên bản mới nhất hiện nay là 4.0 Alpha. Trong khuôn khổ seri hướng dẫn này mình sẽ dùng phiên bản được sử dụng phổ biến 3.1.1, tại trang chủ http://getbootstrap.com/

Series lập trình Web Responsive với Bootstrap

Trong series này mình sẽ hướng dẫn các bạn lập trình web resposive với Bootstrap, tìm hiểu các thành phần trong bootstrap và sử dụng bootstrap để xây dựng layout web responsive theo hướng mobile first (bạn xem khái niệm bên dưới). Các phần như biên dịch less, sass mình sẽ đề cập ở series nâng cao.

Các khái niệm:

Responsive Web
Responsive Web

Responsive web: là giao diện web tự động thay đổi phù hợp khi duyệt ở các màn hình khác nhau không làm vỡ bố cục của trang web. Không phải dùng giao diện riêng cho thiết bị di động (giống như facebook có trang giao diện trên điện thoại m.facebook.com).

Mobile First: là quy trình thiết kế giao diện đi từ giao diện cho điện thoại di động đến các thiết bị cỡ lớn hơn như máy tính bảng, desktop.

Các bạn nhìn hình: đầu tiên mình sẽ thiết kế cho giao diện trên điện thoại một cột, khi lên màn hình lớn hơn như ipad chuyển thành 2 cột, khi lên màn hình lớn như desktop sẽ thanh 3 cột.

Giao diện thiết kế theo hướng mobile first
Giao diện thiết kế theo hướng mobile first

Vì sao phải thiết kế theo hướng mobile first: nếu không có mobile first các thiết bị có màn hình nhỏ hơn desktop đều hiển thị 1 cột, không thuận tiện cho người duyệt web trên máy tính bảng.

Cài đặt Bootstrap

Để sử dụng được JavaScript của bootstrap yêu cầu phải có jquery. Các bạn tải jquery tại địa chỉ

https://jquery.com/download/

Có 2 cách để sử dụng bootstrap dễ dàng nhất

Tải trực tiếp giải nén và upload vào thư mục gốc website của bạn, tải bản 3.1.1 tại đây.

Sử dụng CDN (cách này phù hợp với các bạn sử dụng blog không có hosting riêng như blogspot):

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Sau khi tải về, bạn giải nén ra sẽ được một tệp có cấu trúc như sau:

Bootstrap đã biên dịch
Bootstrap đã biên dịch

Bootstrap gồm những gì:

CSS: bao gồm bootstrap.css, bootstrap-theme.css và tệp nén của nó bootstrap.min.css, bootstrap-theme.min.css chứa các class được style sẵn và grid system cho phép bạn tạo được giao diện cơ bản mà không cần thêm bất cứ dòng css nào. Bạn có thể loại bỏ 2 tệp bootstrap.css và bootstrap-theme.css chỉ sử dụng tệp nén của nó để tăng tốc độ website.

JavaScript: bootstrap xây dựng một thư viện javascript có sẵn để dễ dàng tạo ra các menu xổ, slide, các scroll… trong tập tin bootstrap.js.

Bộ font: chứa Font Glyphicons.

Trong series này chúng ta sẽ đi tìm hiểu:

Tìm hiểu về css trong bootstrap

Tìm hiểu về Components trong bootstrap

Sử dụng Javascript trong bootstrap

Tùy chỉnh bootstrap theo nhu cầu sử dụng

Thiết kế một website sử dụng bootstrap

Thiết kế giao diện WordPress sử dụng bootstrap

 

 

 

 

Lập trình web resposive với Bootstrap
5 (100%) 1 vote

Be the first to comment

Leave a Reply

Your email address will not be published.


*