Trang chủ » HTML và CSS » Bootstrap » Bootstrap là gì? Hướng dẫn sử dụng bootstrap 4 đơn giản nhất

Bootstrap là gì? Hướng dẫn sử dụng bootstrap 4 đơn giản nhất

Bootstrap là gì? Nó hoạt động như thế nào? Nó có dễ hơn CSS không? Hôm nay mình sẽ hướng dẫn các bạn chi tiết cách sử dụng bootstrap 4 đơn giản, dễ hiểu nhất. Xem ngay thôi nào!!!

Bootstrap là gì?

Bootstrap là một framework bao gồm các mã HTML, CSS và JavaScript template được sử dụng để phát triển website của bạn chuẩn responsive nhanh chóng, đơn giản và dễ dàng hơn rất rất là nhiều so với bạn sử dụng từng dòng code để làm việc này. Dựa trên các thành phần cơ bản như form-model, buttons (success, warning, danger…), menus navigation với đủ các options đa dạng… Và còn rất nhiều các thành phần khách nữa. Hôm nay hãy cùng mình tìm hiểu về Bootstrap là gì nhé!!!

Lịch sử phát triển bootstrap

Khởi nguồn Bootstrap được tạo ra bởi một nhà thiết kế và một nhà phát triển làm việc tại Twitter. Kể từ đó đến nay, nó đã trở thành một trong số những framework front-end và dự án mã nguồn mở phổ biến nhất trên thế giới.

Bootstrap được tạo ra tại Twitter vào giữa năm 2010 bởi @mdo và @fat. Trước khi chính thức trở thành một framework mã nguồn mở, Bootstrap được biến đến như là bản thiết kế của Twitter. Sau một vài tháng đi vào phát triển, Twitter đã tổ chức Tuần lễ Hack đầu tiên và hàng loạt các nhà phát triển ở mọi trình độ đã tham gia vào dự án. Và trong hơn một năm sau đó, Bootstrap giống như một bản hướng dẫn style dành riêng cho việc phát triển các công cụ nội bộ phục vụ cho công ty trước khi nó được phát hành chính thức, và nó vẫn đóng một vai trò như vậy cho đến ngày nay.

Kể từ lần đầu tiên được phát hành vào  tới nay, chúng tôi đã có tới hơn 20 lần phát hành, bao gồm cả 2 bản viết lại chính của phiên bản 2 và phiên bản 3. Với BootStrap 2, chúng tôi đã thêm tính năng responsive như một stylesheet tùy ý. Nhưng đến khi xây dựng Bootstrap 3, chúng tôi đã viết lại thư viện một lần nữa để tích hợp tính năng responsive một cách mặc định.

Tham khảo thêm bài viết giới thiệu về Bootstrap tại đây: https://getbootstrap.com.vn/about/

Những điều nên biết về Bootstrap

Tại sao chúng ta cần sử dụng Bootstrap?

1 điều hiển nhiên mà hầu hết các bạn dev đề thấy đó là: quá dễ dàng để thiết lập và sử dụng bootstrap, nó có rất nhiều thành phần được thiết kế sẵn bởi các mã HTML, CSS, JS cho các bạn lựa chọn để thiết kế website của mình 1 cách nhanh nhất mà lại chuẩn responsive. Điều tuyệt vời nữa là nó cũng hỗ trợ các plugin của Javascript (Jquery), làm cho nó trở lên linh hoạt hơn rất nhiều.

Mục đích chính của Bootstrap

Bootstrap là một framework dành cho web tập trung vào việc đơn giản hóa việc phát triển các trang web thông tin (trái ngược với các ứng dụng web). Mục đích chính của việc thêm nó vào một dự án web là áp dụng các lựa chọn về màu sắc, kích thước, phông chữ và bố cục của Bootstrap cho dự án đó 1 cách dễ dàng đơn giản hơn.

Ưu điểm của Bootstrap là gì?

  1. Ít bị dính lỗi trên trình duyệt
  2. 1 framework nhất quán cho tất cả các trình duyệt và sửa lỗi CSS tương thích trên các trình duyệt khác nhau
  3. Rất nhẹ và có độ tùy biến rất cao
  4. Cấu trúc và cách hoạt động đáp ứng được 1 số plugin của JavaScript (Sử dụng Jquery)
  5. Tài liệu rất tốt và cộng đồng hỗ trợ rất lớn
  6. Các mẫu, theme đẹp, đa dạng miễn phí và chuyên nghiệp

Bootstrap có dễ hơn CSS không?

Bootstrap sử dụng CSS, tuy nhiên nó khác với việc viết CSS của riêng bạn vì tất cả đã được thực hiện trước nên bạn chỉ cần thêm một class vào một phần tử HTML và sau đó nó sẽ sử dụng CSS đó. … Bootstrap rất tuyệt vì nó cho phép bạn dễ dàng tạo một trang web tương thích với nhiều trình duyệt, nhiều màn hình độ phân giải khác nhau đơn giản, đáp ứng dễ dàng.

Cách cài đặt Bootstrap

Những thông tin trên chỉ giúp bạn hiểu sơ lược về Bootstrap còn cách cài đặt, cách sử dụng Bootstrap thì bạn tiếp tục theo dõi bài viết dưới đây nhé

Có 2 cách chính mà bạn có thể cài đặt để sử dụng Bootstrap:

  1. Tải trực tiếp Bootstrap tại trang cung cấp
  2. Sử dụng thông qua CDN Bootstrap

Tải về từ trang Getbootstrap

Tải bootstrap về từ trang getBootstrap
Tải bootstrap về từ trang getBootstrap

Bạn truy cập vào trang https://getbootstrap.com/ để download source bootstrap mới nhất về. Sau đó bạn sẽ nhận được 1 file .zip bản mới nhất về. Giải nén xong sẽ thấy 2 thư mục CSS và JS như này:

Thư mục CSS và JS trong Bootstrap
Thư mục CSS và JS trong Bootstrap

Sau đó bạn chỉ cần thêm 2 thư mục này vào dự án của mình, rồi gọi file bootstrap ra sử dụng thôi. Ví dụ ở đây mình muốn sử dụng file Bootstrap.min.css và Bootstrap.min.js

Đầu tiên bạn thêm đoạn code dưới đây vào thẻ <head> để gọi file bootstrap.min.css trong thư mục css ra:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

Sau đó bạn gọi thêm jquery và file bootstrap.min.js trong thư mục js ra:

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Kết quả:

Gọi file Bootstrap CSS và JS ra sử dụng
Gọi file Bootstrap CSS và JS ra sử dụng

Lưu ý: Khi sử dụng file bootstrap.min.js thì bạn phải sử dụng Jquery và JS bootstrap phải load sau nhé !!!

Sử dụng thông qua CDN Bootstrap

Cài đặt bootstrap bằng sử dụng CDN
Cài đặt bootstrap bằng sử dụng CDN

Nếu bạn không muốn download bootstrap về. Hay bạn muốn cài đặt nhanh bootstrap cho dự án, website của mình thì đây là giải pháp dành cho bạn. Chỉ cần gọi trực tiếp đường dẫn bootstrap mà bạn cần vào là sử dụng thôi. Để thêm bootstrap bằng CDN:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Để có được đoạn code này bạn chỉ cần ấn vào Get Started để có bản cập nhật mới nhất hoặc copy đoạn trên của mình nhé!!!

Hướng dẫn sử dụng bootstrap 4 đơn giản

Sau mình sẽ có 1 Series riêng về chủ đề này. Mong các bạn đón nhận nhé

Mình mong rằng bài viết này đã giúp các bạn hiểu hơn về Bootstrap là gì? và cách cài đặt sử dụng bootstrap. Chúc các bạn có thể tự tạo riêng cho mình 1 website, dự án sử dụng bootstrap 1 cách thuận thục và hiệu quả <3

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *