03/08/2018, 09:50

Twitter Bootstrap la gi? Tìm hiểu Bootstrap CSS

Hiện nay PHP có rất nhiều Framework và CMS hỗ trợ giúp cho công việc lập trình trở nên đơn giản và thống nhất với nhau. Nhưng bạn có nghĩ trong ...

Hiện nay PHP có rất nhiều Framework và CMS hỗ trợ giúp cho công việc lập trình trở nên đơn giản và thống nhất với nhau. Nhưng bạn có nghĩ trong CSS cũng có những Framework như vậy hay không? Nếu bạn nghĩ không có thì bài này sẽ giúp bạn mở rộng tầm mắt đấy.

1. Twitter Bootstrap là gì?

Bootstrap là một Font-end Framework được viết bằng SASS và biên dịch thành CSS, nó là một bộ thư viện mạnh mẽ được tích hợp nhiều CSS có sẵn giúp cho việc lập trình HTML & CSS trở nên đơn giản và dễ dàng hơn. Thông thường khi chúng ta lập trình bằng CSS thuần thì công việc kiểm tra tính tương thích trên các trình duyệt khác nhau và trên các thiết bị di động khác nhau  rất là khó khăn, nhưng với Bootstrap thì lập trình viên không cần phải tốn nhiều công sức nữa vì mọi thứ đã có người tạo nên Bootstrap lo.

Bootstrap chia layout của một trang web ra thành 960 Grid và gồm 12 cột, mỗi cột 80Grid và đây chính lả chuẩn thiết kế HTML & CSS của Bootstrap. Nó có hỗ trợ hầu hết các module của một trang web như menu, tabs, tooltip, popup, ... Ngoài ra nó còn sử dụng thêm Javascript để xử lý các hiệu ứng cấp cao, code javascript của nó sử dụng jquery nên để sử dụng được bắt buộc bạn phải bổ sung thêm thư viện jQuery nữa.

Hiện nay Version mới nhất là Version 4.0 và đang là phiên bản Beta, nhưng chỉ vài tháng nữa thôi nó sẽ được release.

2. Các lợi ích khi sử dụng Bootstrap

Qua phần Bootstrap là gì thì chắc hẳn bạn có thắc mắc tại sao lại nên sử dụng Bootstrap đúng không nào? Có nhiều lý do nhưng mình chỉ liệt kê một số lý do chính khuyên bạn nên sử dụng.

Phát riển giao diện nhanh chóng

Bạn dễ dàng phát riển giao diện website một cách rất nhanh, nếu một trang bình thường thì bạn có thể cắt xong trong một ngày hoặc chưa tới một ngày. Chưa kể đến tính tương thích với các trình duyệt và thiets bị di động

Dễ học, dễ sử dụng

Cộng đồng đông đúc và tài liệu tham khảo rõ ràng chính là sức mạnh của Bootstrap.

Javascrip

Hỗ trợ Javacript sử dụng jQuery, vì vậy bạn dễ dàng Custom làm theo ý của riêng mình mà không sợ bị đụng code JS.

SASS

Trước đây Bootstrap sử dụng LESS để xây dựng, tuy nhiện hiện nay Version mới nhất là 4.x người ta đã thay thế LESS bằng SASS nhằm mục đích tối ưu CSS và giúp cho nó hoạt động hiệu quả hơn.

Hỗ trợ SEO tốt

Đây là lý do quan trọng nhất bởi vì hiện nay Google đã cập nhật thuật toán tìm kiếm và Responsive là một yếu tố rất quan trọng để đưa từ khóa lên tóp.

3. Lời kết

Qua bài tìm hiểu Twitter Bootstrap là gì hy vọng sẽ giải đáp được thắc mắc của các bạn. Và mình cũng xin giới thiệu hiện nay trên website code24h.com có hai serie viết về Bootstrap và bạn có thể tham khảo tại:

  • Học Bootstrap 3
  • Học Bootstrap 4
BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

SASS/SCSS là gì? Tìm hiểu cách viết CSS bằng SASS/SCSS

Làm việc với CSS là việc thường xuyên của mọi thể loại dev :v. Có khi nào bạn thấy chán cách viết CSS 'chay' mà bạn vẫn đang viết thường ngày? Có cách nào để viết CSS một cách chuyên nghiệp hơn không ? Có đấy, cùng tìm hiểu trong bài viết này nhé. CSS Preprocessors là ngôn ngữ tiền xử lý ...

Bùi Văn Nam viết 3 tuần trước

Selector là gì? Tìm hiểu về Selector trong CSS

CSS là gì? Cú pháp CSS Thuộc tính background trong CSS Thuộc tính định dạng văn bản trong CSS CSS Selector có vai trò quan trọng trong code layout cho website. Dưới đây mình trình bày một số Selector căn bản, thông dụng nhất. Tìm hiểu về Selector chi tiết dưới đây! Video ...

Bùi Văn Nam viết 17:21 ngày 04/09/2018

Tìm hiểu DOM CSS trong Javascript

Return TRUE/FALSE của Events trong Javascript Hướng dẫn DOM HTML trong Javascript Cách thêm sự kiện (Event) bằng Javascript Tìm hiểu hàm addEventListener() trong Javascript Tìm hiểu nhanh DOM CSS trong Javascript , các thao tác thay đổi CSS bằng Javascript và xử lý các hiệu ứng để ...

Bùi Văn Nam viết 16:56 ngày 04/09/2018

Javascript là gì? Tìm hiểu về Javascript

Tìm hiểu biến và khai báo biến trong Javascript Tìm hiểu các hàm alert() – confirm() – prompt() trong Javascript Javascript là ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa ra, javascript được sử dụng phổ biến trong các ứng dụng Website. Nội dung ...

Vũ Văn Thanh viết 16:55 ngày 04/09/2018

HTML là gì? Tìm hiểu về HTML

Các thẻ và thuộc tính trong HTML Các thẻ định dạng văn bản trong HTML HTML là từ viết tắt của HyperText Markup Language, ý nghĩa là ngôn ngữ đánh dấu siêu văn bản. HTML là gì và tại sao nó quan trọng với website luôn là những câu hỏi của các bạn khi mới bước chân vào lập trình web. ...

Tạ Quốc Bảo viết 16:50 ngày 04/09/2018
0