Giới thiệu và hướng dẫn cách sử dụng Bootstrap Có bao giờ bạn phải viết HTML/CSS rùi ngồi suy nghĩ “Tại sao mình phải viết đi viết lại nhưng class giống nhau như thế này ?” hay “Mình sẽ làm 1 css framework để về sau sử dụng lại haha “.Rồi chợt nhận ra là mọi chuyện không đơn giản như vậy class bạn viết ra ở web này rùi lại hì hục sửa ở web khác , nhiều lúc ngồi sửa còn lâu hơn là viết mới. Hôm nay mình sẽ giới thiệu cho các bạn cách để giải quyết vấn đề trên.Đó là sử dụng Twitter Bootstrap. A- Giới thiệu về Twitter Bootstrap Twitter Bootstrap 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à 12 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- Tại sao lại sử dụng Twitter Bootstrap Như mì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.Twitter Bootstrap đị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 còn hổ trợ Responsive design một cách làm giao diện đa thiết bị rất được ưu chuộng trong thời gian gần đây C- Cách sử dụng Twitter Bootstrap Như mì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.Twitter Bootstrap đị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. Bạn có thể tải về Bootstrap tại đây: http://twitter.github.io/bootstrap/ Sau khi tải về, bạn sẽ có một file Zip. Tiến hành giải nén ta có một thư mục có tên bootstrap, bên trong có 3 thư mục : css, img, js. Bước 1: Chúng ta tạo 1 file html có tên là index.html ở trong thư mục bootstrap vừa giải nén phía trên. Vậy là xong phần head. Giờ chúng ta viết tiếp phần body với 2 textbox và 2 button như sau: Vậy là xong. Ví dụ chỉ đơn giản vậy thôi. Bạn sẽ thắc mắc là sao chạy nút submit và reset lại không nằm xuống phía dưới??? Bạn hãy thu nhỏ trình duyệt và bạn sẽ thấy điều kỳ diệu, đó chính là phần mình muốn cho các bạn thấy để dễ hình dung hơn. Còn nhiều điều thú vị nữa đang chờ bạn khám phá đấy. Chúc các bạn luôn thành công trong cuộc sống.
