Bài tập tuần 3: Tìm hiểu Bootstrap


Về cơ bản, Bootstrap là một framework cho phép những nhà phát triển thiết kế một trang web reponsive nhanh chóng dễ dàng hơn. Bootstrap được xây dựng dựa trên nền tảng HTML templates, CSS templates và Javascript cơ bản để hình thành nên những mẫu thiết kế có sẵn như typography, forms, buttons (nút bấm), tables (bảng), navigation, modals, image carousels cũng như nhiều thành phần khác nữa. Với mục đích giúp cho các nhà phát triển có thể thiết kế reponsive cho website được dễ dàng và nhanh hơn, các plugin của Javascript đã được tích hợp vào trong Bootstrap.

Bootstrap được Mark Otto và Jacob Thornton cùng nhau phát triển lên tại Twitter. Ban đầu, Bootstrap được sử dụng như một Framework với mục đích duy nhất là hỗ trợ cho công việc nội bộ của Twitter. Trước khi Bootstrap được phát triển, có rất nhiều Framework khác nhau được đưa vào sử dụng với mục đích phát triển giao diện, nhưng nó dễ dẫn đến mâu thuẫn và sung đột. Chính vì thế, khi Bootstrap được tạo ra nó đã giải quyết được những yếu tố này, cũng như góp phần thúc đẩy công việc của những nhà phát triển và lập trình được nhanh hơn, tiện lợi và đồng bộ hơn. Bắt đầu từ phiên bản 2.0 trở đi, Bootstrap cho thấy sự hỗ trợ Responsive Web Design mạnh mẽ với những thiết kế và bố cục của website tự động điều chỉnh với mọi thiết bị ( Laptop, PC, SmartPhone,….). Ngoài ra, nó còn có độ tương thích cao với mọi phiên bản mới nhất của những trình duyệt nổi tiếng như Chrome, Firefox, IE, Opera…..

Bootstrap giúp các nhà thiết kế website có thể giảm bớt được thời gian trong việc thiết kế website. Khi sử dụng Bootstrap, bạn có thể hạn chế được thời gian bỏ ra để viết code cho giao diện vì trong thư viện của nó đã có sẵn những đoạn mã có thể chèn vào trong website. Khi sử dụng Bootstrap bạn hoàn toàn có thể tùy biến được giao diện theo ý muốn của mình với hệ thống Grid System mặc định bao gồm 12 bột cùng với độ rộng 940px được tích hợp sẵn trong Bootstrap. Ngày nay, khi mà xu hướng phát triển website tương thích với mọi thiết bị thì Bootstrap nổi lên như 1 Framework cung cấp sẵn reponsive css phù hợp với mọi thiết bị như SmartPhone, tablets, dextop…..

Để sử dụng Bootstrap, trước hết bạn truy cập tại đây và tiến hành download bộ công cụ của Bootstrap.

Nhấn nút download

Sau khi download về máy và giải nén ra ta được thư mục lần lượt là css, js như ảnh dưới

Copy 2 thư mục đó vào project web

Tiến hành nhúng css các bạn xem chỗ mình bôi đen

Tiến hành nhúng js các bạn xem chỗ mình bôi đen

Vậy là có thể sử dụng được bootstrap trên project web, hy vọng xong bài này các bạn có thể biết thêm được những kiến thức mới về thiết kế website