Giới Thiệu Bootstrap

Vài năm trở lại đây, với sự phát triển chóng mặt của các thiết bị di động hiện đại, đã kéo theo nhu cầu về thiết kế, lập trình website cũng phải phát triển cho phù hợp với các thiết bị đó. Chắc hẳn các bạn cũng đã nghe về khái niệm "Responsive Web Design". Nói một cách nôm na thì nó giúp chúng ta phát triển những website, có khả năng tự thay đổi kích cỡ cho phù hợp từng kích cỡ màn hình, từng thiết bị khác nhau. Hiện nay, chúng ta có thể phát triển web responsive một cách dễ dàng với các css framework như Bootstrap Twitter, Foundation....

Trong blog này, tôi sẽ giới thiệu với các bạn Bootstrap Twitter, nó không chỉ giúp chúng ta dễ dàng phát triển web responsive, mà còn là một thư viện css tuyệt vời giúp chúng ta có thể tiết kiệm rất nhiều thời gian trong việc code html và css. Bootstrap đã xây dựng sẵn các class css, các plugin jquery, công việc của chúng ta chỉ là sử dụng lại thư viện mà bootstrap đã xây dựng. Rất tiện phải không nào?

 Đến thời điểm hiện tại thì Bootstrap đã được phát triển đến phiên bản 3.0.3. Các bạn có thể tải thư viện này về tại trang chủ của bootstrap. Bạn có thể tải bản đầy đủ hoặc có thể tùy chọn thư viện bạn muốn, bằng cách vào menu customize của bootstrap và tick bỏ chọn những phần bạn không muốn. Nhưng theo tôi thì họ đã mất công tạo ra thì mình cứ sử dùng hết thôi.

Sau khi tải bootstrap về, bạn sẽ được một file zip. Để có thể sử dụng bootstrap thì bạn cần phải include nó vào dự án của bạn. Sau khi giải nén file zip, bạn sẽ được một thư mục có cấu trúc giống như sau:

bootstrap/

├── css/ 

│ ├── bootstrap.css 

│ ├── bootstrap.min.css 

│ ├── bootstrap-theme.css 

│ └── bootstrap-theme.min.css 

├── js/ 

│ ├── bootstrap.js 

│ └── bootstrap.min.js 

└── fonts/ 

├── glyphicons-halflings-regular.eot 

├── glyphicons-halflings-regular.svg 

├── glyphicons-halflings-regular.ttf 

└── glyphicons-halflings-regular.woff  

Giờ bạn có thể gọi các thư viện css và jquery vào dự án của mình để sử dụng được rồi. Bài đầu tiên tôi sẽ dừng ở đây. Trong bài tiếp theo, tôi sẽ hướng dẫn các bạn cách ứng dụng bootstrap để có thể tạo ra một giao diện website responsive.