Lời nói đầu tôi xin gửi lời chào tới tất cả các bạn đang theo dõi bài viết này của tôi. Đã lâu rồi tôi không có đóng góp bài viết cho freetuts vì một số lý do cá nhân. Nay tôi quyết định quay lại và gửi tới các bạn loạt bài hướng dẫn sử dụng Bootstrap 3 để xây dựng giao diện web. Đối với nhiều Web developer thì khái niệm về Bootstrap nghe rất là quen thuộc rồi nhé, còn đối với các bạn newbie mới bắt đầu tìm hiểu về “Thiết kế website” thì nên chuẩn bị một số thứ sau đây.
1. Cần chuẩn bị gì để chinh phục twitter bootstrap 3?
- Để có thể control bootstrap 3 thì đòi hỏi các bạn cần có kiến thức căn bản về HTML & CSS, nếu bạn nào mới chân ướt chân ráo vào đọc bài này thì xin vào W3shool đầu tư kiến thức vỡ lòng về bộ môn thiết kế website.
- Một bộ IDE (Công cụ soạn thảo code), có rất nhiều lựa chọn cho các bạn nhé, nhưng tôi khuyên nên dùng Sublime text 3 và install thêm plugin Boostrap 3 Snippets.
- Sự kiên nhẫn cũng như sự tập trung cao độ nếu như các bạn muốn sớm chinh phục được bootstrap 3.
2. Sợ lược về twitter bootstrap 3
Hình ảnh bootstrap 3
Twitter Bootstrap được trang bị với HTML, CSS và JavaScript cho nhiều thành phần web và giao diện người dùng.Bootstrap là một khuôn khổ front-end mạnh mẽ để phát triển web nhanh hơn và dễ dàng hơn. Nó bao gồm HTML và CSS dựa trên các mẫu thiết kế cho các thành phần giao diện người dùng thông thường như Typograph, Buttons, Navigations, Dropdowns, Alerts, modals, Tabs, Accordion,Carousel và nhiều người thành phần khác cũng như khả năng mở rộng với javascript.
Thiết kế chuẩn giao diện website tương thích với màn hình của smartphone và tự động co giãn theo độ phân giải của từng smartphone & tablet.
Các Bootstrap stylesheet cung cấp 960 grid và bố trí hiệu quả, cũng như phong cách chuyên nghiệp thủ công cho kiểu chữ, chuyển hướng, bảng, biểu mẫu, các nút, và nhiều hơn nữa, Ngoài ra còn cung cấp một bộ thư viện cũng được xây dựng của jQuery plugin chotrình đơn thả xuống, các tab, hộp phương thức, chú giải công cụ, các thông điệp cảnh báo, và nhiều hơn thế nửa.
Hỗ trợ cho trình duyệt IE8, sử dụng font và các biểu tượng chữ bằng css thay cho các hình ảnh thông thường.
Dưới đây tôi sẽ liệt kê một số lợi thế vì sao các bạn nên sử dụng bootstrap 3:
- Phát triển giao diện website nhanh chóng: Bạn có thể mất vài ngày để hoàn thành giao diện một website với cách dùng css thông thường, còn nếu như các bạn sử dụng bootstrap thì thời gian sẽ được rút ngắn hơn. Sự tương thích của trình duyệt với thiết bị đã được kiểm tra nhiều lần nên bạn hoàn toàn có thể tin tưởng kết quả mình làm ra và nhiều khi không cần kiểm tra lại nên giúp cho dự án của bạn tiết kiệm được thời gian và tiền bạc và chất xám 😀
- Dễ học & dễ sử dụng: Bootstrap cung cấp cho chúng ta một bộ user guide quá đầy đủ, chỉ cần bạn khá tiếng anh hoặc cũng có thể dùng google dịch thì việc chinh phục bootstrap chỉ nằm trong tầm tay của các bạn thôi.
- Javascrip: Bootstrap được trang bị với các thư viện JavaScript và vượt ra ngoài cơ bản về cấu trúc và phong cách. JavaScriptthường trở thành một phần không thể thiếu trong một website . Với Bootstrap, các bạn có thể dễ dàng thao tác alert…vvv
- Tự phát triển: Bootstrap được trang bị nhiều yếu tố đang được xem xét tương lai có một thiết kế riêng của mình. Ví dụ cả HTML5 và CSS3 là những điều mà sẽ được nâng cấp trong tương lai. Nó hứa hẹn sẽ đánh bật mọi đối thủ khó chịu như là Foundation, bluepink…vv
3. Lời kết:
Vì đây chi là bài viết giới thiệu để các bạn có cái nhìn tổng quan hơn về lợi thế khi sử dụng bootstrap cho dự án website của mình nên tôi viết hơi ngắn gọn nhưng đầy đủ và xúc tích, theo tôi được biết thì hầu như mọi website lớn trên thế giới phần Front-end đều được xây dựng bằng nền tảng bootstrap 3. Ở Việt Nam cũng thế các công ty tuyển dụng Front-end developer đều có yêu cầu là biết sử dụng bootstrap, đó cũng chính là lý do vì sao tôi tìm hiểu bootstrap 3 và chia sẽ với các bạn. Trong quá trình viết có thể mắc nhiều sai sót mong các bạn rộng lòng bỏ qua và góp ý để series bài chất lượng hơn.
