Hướng dẫn sử dụng Bootstrap thiết kế web responsive

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

Chắc hẳn các bạn cũng đã biết lợi ích của việc sử dụng 1 framework css để design trang web. Ngày trước mình hay sử dụng 960 grid nhưng giờ đã chuyển sang dùng Bootstrap. Đơn giản là vì mình thấy Bootstrap support nhiều class hơn và có thể switch sang thiết kế responsive dễ dàng.

Chúng ta bắt đầu nhé !

Trước hết bạn cần tải Bootstrap về từ link này: http://getbootstrap.com/

Hiện tại có 2 phiên bản là Bootstrap 2.3.2 và Bootstrap 3.0.0. Cách sử dụng 2 phiên bản này có nhiều điểm khác nhau. Phiên bản 3.0.0 vừa ra mắt được vài tháng, hỗ trợ flat-desgin, bạn xem chi tiết các phần update của version này tại đây: http://itdl.blogspot.com/2013/08/bootstrap-3-rc1-huong-toi-phong-cach.html

Bài viết xin hướng dẫn bạn sử dụng version 2.3.2, nếu bạn sử dụng thành thạo thì cũng sẽ sử dụng được version 3.0.0 nhanh chóng.

Sau khi download, bạn sẽ được 1 file .zip, giải nén bạn sẽ được 3 thư mục là css, img và js:

Hãy copy 3 folder này vào project của bạn.

Bây giờ chúng ta sẽ tạo 1 file index.html trong project của bạn, phần head sẽ có nội dung như sau:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
  </head>

Vậy là xong phần head, giờ ta tiếp tục build phần body

Để sử dụng bootstrap bạn sẽ phải sử dụng 1 <div class="container">...</div> bao ngoài cho toàn bộ nội dung body

    <div class="container">
      <h1>Bootstrap starter template</h1>
      <p>Use this document as a way to quick start any new project.</p>
    </div> <!-- /container -->

Nếu bạn muốn thiết kế responsive thì cần thêm đoạn này vào phần head

  <link href="css/bootstrap-responsive.min.css" rel="stylesheet">

và thêm -fluid vào sau class "container"

  <div class="container-fluid">
     ...
  </div>

Việc cần phải làm tiếp theo là bạn phải nắm rõ bố cục grid của bootstrap.
Bootstrap phân giao diện thành 12 cột, container có chiều rộng 940px (nếu không sử dụng responsive). Nếu sử dụng responsive container sẽ rộng từ 724px đến 1170px tùy vào màn hình thiết bị (viewport)

Bạn có thể tìm hiểu chi tiết về layout, grid và responsive của Bootstrap tại đây: http://getbootstrap.com/2.3.2/scaffolding.html

Để dễ hiểu, mình sẽ design 1 trang login sử dụng responsive như sau:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
    <style>
     body {
      padding-top: 60px;
     }
     form input, form button, form label {
      margin: 10px 0;
     }
     </style>
  </head>
<body>
 <div class="container-fluid">
  <div class="span12">
   <form class="form-inline well">
     <input type="text" class="input-small span4" placeholder="Username...">
     <input type="password" class="input-small span4" placeholder="Password...">
     <label class="checkbox">
       <input type="checkbox"> Remember me
     </label>
     <button type="submit" class="btn btn-primary">Sign in</button>
   </form>
  </div>
 </div>
</body>
</html>

Đây là giao diện trang login

Bây giờ bạn hãy thử thu nhỏ dần màn hình hiển thị (viewport) nhé. Giao diện trang login sẽ thay đổi dần theo với các mức nhất định:

Demo các bạn có thể xem tại đây: http://itdl.zz.mu/bootstrap/login-responsive.html

Hy vọng với bài hướng dẫn này, các bạn có thể hiểu được phần nào về cách thiết kế sử dụng Bootstrap và Responsive Web Design.
Mọi thắc mắc các bạn có thể post comment bên dưới, mình sẽ giải đáp trong phạm vi có thể.

Chúc các bạn thành công !