Twitter Bootstrap - Thiết kế website theo phong cách hiện đại

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 !

A- Giới thiệu về Twitter Bootstrap

Twitter Bootstrap là một CSS Framework theo phong cách hiện đại, bao gồm các mã CSS + HTML cơ bản cho typography, forms, buttons, tables, grids, navigation, và nhiều thành phần khác của website.

Twitter Bootstrap cung cấp lưới cố định (fixed) rộng 940px và 16 cột. Tất nhiên là cũng có giải pháp cho việc dùng layout dạng động (fluid).

Style của các phần tử HTML trong Twitter Bootstrap khá đơn giản và thanh lịch. Ví dụ như phần đổ bóng trong input, highlight của bảng biểu, các mã CSS hiển thị cảnh báo, tabs, phân trang… Bạn có thể thấy chúng ngay trên trang chủ http://twitter.com

B- Tại sao lại sử dụng Twitter Bootstrap

Như đã giới thiệu ở trên, Twitter Bootstrap giúp chúng ta giảm thiểu thời gian thiết kết html và css bằng cách định nghĩa sẳn các class css. Công việc của chúng ta chỉ là sử dụng các class đó vào mục đích của mình.

Twitter Bootstrap hổ trợ Responsive design - một cách làm giao diện đa thiết bị di động (iPhone, iPad...) rất được ưu chuộng trong thời gian gần đây.

Nếu bạn thích sử dụng Less (một cách xử lý CSS giúp phát triển web nhanh & dễ hơn) hơn là sử dụng CSS tĩnh, bạn có thể xem thêm hướng dẫn trên trang chủ của Twitter Bootstrap.

Ngoài ra nó còn tích hợp sẵn 1 số hiệu ứng jQuery như dropdown menu, tab, modal,… Bạn có thể tìm hiểu thêm ở đây http://twitter.github.io/bootstrap/javascript.html

C- Cách sử dụng Twitter Bootstrap

1 trang web sử dụng Twitter Bootstrap sẽ có cấu trúc như sau:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Để enable Responsive design thì chúng ta thêm đoạn này vào trong thẻ head

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Twitter Bootstrap đã viết sẳn rất nhiều components để chúng ta có thể sử dụng. Ví dụ như button, navbar, dropdown, breadcrumbs, table…. Chúng ta chỉ việc copy đoạn HTML đó và chèn vào vị trí mong muốn và chỉnh sửa lại là xong. Các bạn có thể vào trang http://twitter.github.io/bootstrap/components.html để xem tất cả các components và cách sử dụng chúng.

Đây là 1 ví dụ sử dụng Twitter Bootstrap để tạo 1 thanh NavigationBar cho trang web:

Thật đơn giản mà giao diện cũng khá ấn tượng phải không các bạn ?

Hãy truy cập vào trang chủ Twitter Bootstrap để download và sử dụng framework này cho website của bạn ngay nhé.

Mọi thắc mắc các bạn hãy comment ở phía dưới bài viết, mình sẽ trả lời trong thời gian sớm nhất có thể.