Hướng dẫn thiết kế Website ứng dụng công nghệ Bootstrap Responsive (Phần 1)
(Thao Marky’s Productions) Như chúng ta đã biết, hiện nay Smart-phone, tablet (máy tính bảng) khá phổ biến phục vụ cho nhu cầu giải trí của mỗi người, từ nhân viên văn phòng, viên chức nhà nước, doanh nhân, sinh viên thậm chí cả học sinh cũng sử dụng.
Cách đây khoảng vài năm, khi công nghệ Responsive chưa phổ biến, đa số các trang web đều tạo thêm 1 giao diện Mobile (ví dụ như m.domain.com) và Redirect (chuyển hướng) sang đó khi người dùng vào bằng thiết bị di động. Điều này không thể tối ưu và mất rất nhiều thời gian khi mà phải code giao diện 2 lần và không thể truyền tải hết nội dung Website đến với khách hàng.
Tuy nhiên, kể từ khi Twitter Bootstrap xuất hiện đã giải được gánh nặng cho Coder trong việc thiết kế Website chuẩn giao diện Mobile mà không phải mất công xây dựng lại từ con số 0.
Giới thiệu về Twitter Bootstrap
Bootstrap là một Framework CSS, giúp bạn phát triển nhanh giao diện trang web dựa trên giao diện chuẩn của Twitter. Bạn cũng có thể sử dụng luôn Framework này mà không cần phải chỉnh sửa hay rành về CSS, đó là một lợi thế khi dùng Framework. Nói nôm na, đã có người viết sẵn các style cho trang web, và lưu thành một file .css. Khi viết HTML, bạn chỉ cần dùng file css này và dùng các class, id đã được định sẵn. Không phải mất công viết CSS trong khi giao diện vẫn đẹp mê hồn.
Để download công cụ Bootstrap, bạn vào Website http://getbootstrap.com bấm vào phần “Download Bootstrap“. Phiên bản mới nhất tính đến thời điểm này là V3.2.0
 |
| Hướng dẫn thiết kế Website ứng dụng công nghệ Bootstrap Responsive |
Sau khi giải nén ta được 3 thư mục css, js, fonts như ảnh dưới.
 |
| Hướng dẫn thiết kế Website ứng dụng công nghệ Bootstrap Responsive |
Để có thể sử dụng ứng dụng Bootstrap, bạn copy 3 thư mục vào ngang hàng file index của mình
 |
| Hướng dẫn thiết kế Website ứng dụng công nghệ Bootstrap Responsive |
Tiếp theo, trong file Index.html của mình, bạn khai báo như sau
 |
| Hướng dẫn thiết kế Website ứng dụng công nghệ Bootstrap Responsive |
Code đầy đủ như sau:
<!DOCTYPE html><head><title>Thao Marky’s Productions Responsive 2</title><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″/><meta http-equiv=”X-UA-Compatible” content=”IE=edge”><link rel=”stylesheet” href=”css/bootstrap.min.css” type=”text/css” /><link rel=”stylesheet” href=”css/style.css” type=”text/css” /></head><body><script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script><script src=”js/bootstrap.min.js”></script></body></html>
Oke, vậy là đã xong công đoạn chuẩn bị. Thao Marky mời các bạn xem phần 2: Hướng dẫn thiết kế Website bằng Bootstrap Responsive
Tìm kiếm trên Google
- Thiết kế Web
- Thiết Kế Web chuẩn SEO
- Thiết kế Web sử dụng Bootstrap
- Thiết kế Web sử dụng Responsive
- Hướng dẫn thiết kế Web bằng Responsive
- Hướng dẫn thiết kế Web sử dụng Responsive
- Hướng dẫn thiết kế Web bằng Bootstrap
- Lập trình Web
- Thiết kế web giao diện Mobile
- Bootstrap
- Bootstrap là gì?
- Bootstrap Twitter
- Bootstrap Twitter là gì?
- Responsive là gì?
- Hướng dẫn sử dụng Bootstrap Twitter
- Hướng dẫn thiết kế website sử dụng Responsive
- Thiết kế web theo mọi trình duyệt di động
- Hướng dẫn xử lí lỗi Shockwave Flash has Crashed trên Google Chrome và Cốc Cốc
- Hướng dẫn Gửi/nhận mail domain thông qua tài khoản Gmail
- Hướng dẫn thiết kế Website bằng Bootstrap Responsive (Phần 2)
- Hướng dẫn hẹn giờ đăng bài tự động trên WordPress
- Hướng dẫn hiển thị tên tác giả bài viết trong WordPress lên facebook
