Bootstrap là gi? Hướng dẫn sử dụng bootstrap

Bootstrap là gi?

Bootstrap là một Framework có chứa HTML, CSS, JAVASCRIPT bạn hiều nôm na Framework trong tiếng việt có nghĩa là Khuân khổ, bạn sử dụng HTML, CSS, JAVASCRIPT trong Khuân khổ mà Bootstrap cho sẵn, việc sử dụng như thế sẽ giúp bạn tiết kiệm được thời gian, công sức hơn nữa việc xây dựng 2 teamplate cho giao diện Desktop và Mobile đã lỗi thời thay vào đó là Responsive, Responsive sẽ giúp website của bạn hiển thị tương thích với mọi kích thước màn hình nhờ đó bạn sẽ tùy chỉnh hiển thị được nhiều hơn trên nhiều loại màn hình khác nhau.

Xem thêm: Framework là gì?

Ưu điểm khi sử dụng Bootstrap.

Tiết kiệm thời gian:
     Boostrap giúp người thiết kế giao diện website tiết kiệm rất nhiều thời gian. Các thư viện Bootstrap có những đoạn mã sẵn sàng cho bạn áp dùng vào website của mình. Bạn không phải tốn quá nhiều thời gian để tự viết code cho giao diện của mình.

Tùy biến cao
     Bạn hoàn toàn có thể dựa vào Bootstrap và phát triển nền tảng giao diện của chính mình. Bootstrap cung cấp cho bạn hệ thống Grid System mặc định bao gồm 12 bột và độ rộng 940px. Bạn có thể thay đổi, nâng cấp và phát triển dựa trên nền tảng này.

Responsive Web Design
     Với Bootstrap, việc phát triển giao diện website để phù hợp với đa thiết bị trở nên dễ dàng hơn bao giờ hết. Đây là xu hướng phát triển giao diện website đang rất được ưu chuộng trên thế giới. 

Làm sao để sử dụng?

      Trang chủ Bootstrap có địa chỉ tại: getbootstrap.com và ở Việt Nam là: getbootstrap.com.vn

Phiên bản ổn định hiện tại là Boostrap 3, và phiên bản Beta đang là Bootstrap 4 bạn có thể tìm hiểu Bootstrap 4 tại: v4-alpha.getbootstrap.com

Có 2 cách để bạn có thể sử dụng Bootstrap đó là tải về hoặc sử dụng qua CDN.

Tải về: Bạn tải Bootstrap 3 tại: github bootstrap-3.1.1.zip và Bootstrap 4 tại: github bootstrap-4.0.0.zip

Giải nén ra bạn sẽ có 3 thư mục css, fonts, js như hình trên, với Bootstrap 4 thì chỉ có 2 thư mục css và js Bootstrap 3 và 4 có một số điểm khác nhau mình sẽ nói chi tiết ở bài sau.

Bên trong mỗi thư mục sẽ có các file như hình trên, để sử dụng bạn cần nhứng các file này vào HTML.

Mẫu template cơ bản

Bên trên là mẫu template cơ bản đã nhúng các file như bootstrap.min.css, bootstrap.min.js và thư viện Jquery.
Lưu ý: Để sử dụng được thư viện js của bootstrap bạn phải nhúng thư việ Jquery vào trước và đặt ở trên js của bootstrap. Các đường dẫn tương đối bạn cần xem lại xem chính xác chưa.

Sử dụng qua CDN.
     Với cách này, bạn không cần tải bootstrap về mà chỉ cần nhúng nó qua BootstrapCDN

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Sử dụng CDN có nhiều ưu điểm hơn khi bạn tải về và nhúng như cách 1, ưu điểm lớn nhất ở đây là nếu một trang web bạn tải trước đó sử dụng CDN này, thì khi tải trang web của bạn sẽ không phải tải lại nữa, điều này giúp website của bạn được tải xuống nhanh hơn.

Bạn xem cách sử dụng css tại: getbootstrap.com.vn/css/
Các thành phần của bootstrap tại: getbootstrap.com.vn/components
Cách sử dụng javascript của bootstrap: getbootstrap.com.vn/javascript

Đối với Bootstrap 4 cũng tương tự.

Kết luận

Bên trên mình đã hướng dẫn cách nhúng bootstrap và tài liệu sử dụng bootstrap, không đâu có thể đầy đủ hơn trang chủ của nó :)
Bootstrap là 1 framework được sử dụng phổ biến nhất hiện nay, việc sử dụng framwork sẽ giúp bạn tiết kiêm khá nhiều thời gian cho việc xây dựng, tái tạo website.

Tác giả: TranDuc

Tài liệu: Bootstrap