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> <!–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>