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 | Thao Marky's Productions
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 | Thao Marky's Productions
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 | Thao Marky's Productions
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 | Thao Marky's Productions
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> <!–Tiêu đề trang web–>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <!–Tự động nhận dạng thiết bị để co vào cho phù hợp–>
<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” /> <!– Gọi đến thư viện Bootstrap để sử dụng–>
<link rel=”stylesheet” href=”css/style.css” type=”text/css” /> <!– Đây là file CSS của bạn–>
</head>
<body>
<!– Code bạn đặt trong đây–>
<!– Kết thúc Code của bạn–>
    <!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
    <!– Include all compiled plugins (below), or include individual files as needed –>
    <script src=”js/bootstrap.min.js”></script>
<!– 2 file JS này là thư viện của Bootstrap, nên đặt ở trước thẻ </body> để tăng tốc độ tải trang–>
 </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
Posted By: Thao Marky
Mọi Bình luận/Phản hồi vui lòng gửi Email đến địa chỉ thaomarky@gmail.com hoặc Skype: thaomarky để hỗ trợ nhé!
back to top