Nói về thiết kế giao diện web thì phần đầu tiên là HTML và CSS, trong lúc chúng ta tạo giao diện web có đoạn code nào hay hoặc định dạng cái form cái menu nào đẹp thường mình lưu lại và sử dụng cho lần sau được nhanh hơn, cũng chính vì thế lâu dần tao ra một thư viện nho nhỏ đó là nền tảng của CSS framework.
CSS framework là một trong những vũ khí rất cần thiết cho một người thiết kế web, nó giúp ta tạo ra giao diện web nhanh chóng và chuẩn xác hơn khi chúng ta tự code từ đầu đến cuối. Gần đây có một CSS framework rất tốt và được sử dụng rông rãi nhất là twitter bootstrap 3 framework vậy chúng ta cùng tìm hiểu về thư viện CSS này nhé.
Giới thiệu về Bootstrap
Bootstrap Framework là một thư viện CSS, HTML và JavaScript được phát triển bởi Mark Otto và Jacob Thornton tại Twitter được xuất bản vào năm 2011, framework này cho phép bạn thiết kế giao diện thân thiện với các thiết bị di động hay gọi là responsive design, Bootstrap thiết kế sẵn cho bạn nhiều biểu mẫu cơ bản bằng HTML CSS và JavaScript bạn chỉ việc sử dụng và tùy chỉnh lại theo ý của mình.
Vì sao bạn nên sử dụng Bootstrap
- Bootstrap sở dĩ được nhiều người sử dụng mặc dù mới ra đời trong thời gian vài năm trở lại đây bởi sự ổn định, dễ sử dụng, chạy tốt trên mọi kích cỡ màn hình phát triển mã nguồn mở nên được cộng đồng thế giới đóng góp và hoàn thiện hơn, bạn có thể tạo giao diện web nhanh hơn bình thường rất nhiều.
- Bootstrap cũng như các CSS Framework khác sử dụng đạng grid để định hình giao diện web nên bạn có thể tùy chỉnh dễ dàng. Grid Bootstrap phân ra 12 cột tương tự như Grid960.
- Bootstrap có cả các bài document chi tiết rất dễ học, có ví dụ cho từng biểu mẫu nên bạn cứ canh chỉnh theo hướng dẫn và dùng.
- Sử dụng một thư viện JavaScript rất phong phú gần như hỗ trợ tất cả các biểu mẫu cần thiết cho một website.
- Cơ chế có thể tự phát triển theo ý mình dựa trên nền tảng Bootstrap, đây là một trong những điểm mạnh của Bootstrap mà ít có Framework nào hiện tại cạnh tranh được.
Cài đặt Bootstrap như thế nào?
Có hai cách để import thư viện Bootstrap 3 vào website để sử dụng, bạn có thể download trực tiếp để vào website qua địa chỉ: Get Boostrap 3. Còn cách thứ 2 bạn import những địa chỉ như code sau vào site của mình.
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Bài đầu tiên mình chỉ giới thiệu tổng quan về nó thôi, các bài tiếp theo hãy cùng hungit blog tìm hiểu và sử dụng bootstrap để xây dựng giao diện website như ý muốn nhé! Chúc các bạn thành công!
