BOOTSTRAP LÀ GÌ? HƯỚNG DẪN DOWNLOAD VÀ CÀI ĐẶT BOOTSTRAP

Viết bởi Pum
Apr 12, 2023

Bootstrap là một framework HTML, CSS và JavaScript miễn phí dùng để tạo website và web application.

8 min reads

Bootstrap là một framework phổ biến phát triển website với những tính năng nổi bật như độ phản hồi, tương thích nhiều trình duyệt cùng với nhiều giao diện mẫu có sẵn, Bootstrap là một lựa chọn hữu ích cho các dự án phát triển web. Cùng 200Lab tìm hiểu qua bài viết bên dưới để hiểu rõ hơn về Bootstrap nhé!

Bootstrap là gì?

Bootstrap là một framework HTML, CSS và JavaScript miễn phí dùng để tạo website và web application. Bootstrap được phát triển bởi Mark Otto và Jacob Thornton của Twitter, giúp cho việc phát triển web trở nên nhanh chóng và dễ dàng hơn.

Chúng tương thích hoàn hảo với các trình duyệt (IE, Firefox và Chrome) và phù hợp với mọi kích cỡ màn hình (máy tính bàn, máy tính bảng, điện thoại). Với Bootstrap, người dùng không cần phải có kiến thức chuyên sâu về CSS hay HTML để thiết kế một trang web đẹp và hiệu quả.

Bạn có thể tham khảo thêm bài viết này để hiểu rõ hơn về CSS và HTML nhé!

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

Chúng ta có thể dễ dàng thao tác, tạo kiểu màu văn bản, màu nền, phông chữ, flex, hệ thống lưới,... cho bất kỳ trang web nào nhờ vào Bootstrap.

Hiện nay có rất nhiều CSS framework khác như Tailwind CSS , Bulma và Foundation nhưng trong số đó, Bootstrap là framework được sử dụng phổ biến nhất vì các tính năng sau:

Tiết kiệm thời gian và công sức: Bootstrap cung cấp cho người dùng các công cụ và tài nguyên để tạo ra các giao diện trang web đáp ứng nhanh chóng và dễ dàng. Việc sử dụng Bootstrap giúp giảm thiểu thời gian và công sức mà người dùng phải bỏ ra để thiết kế trang web.
Responsive: Bootstrap xây dựng reponsive CSS trên các thiết bị Iphones, tablets, và desktops. Chúng sẽ tự động thích ứng với kích thước màn hình của thiết bị người dùng.
Tiêu chuẩn hóa: Bootstrap được phát triển bởi Twitter, đây là một tiêu chuẩn được nhiều người sử dụng và có thể được tùy chỉnh để phù hợp với nhu cầu thiết kế của từng trang web.
Thư viện linh hoạt: Bootstrap cung cấp một loạt các thành phần giao diện, ví dụ như bảng, biểu đồ,... giúp người dùng thiết kế trang web dễ dàng hơn.
Dễ sử dụng: Bootstrap dễ học và sử dụng, vì vậy người dùng không cần phải có kiến thức chuyên sâu về CSS hay HTML để bắt đầu thiết kế một trang web.
Framework nguồn mở và miễn phí: có sẵn trên www.getbootstrap.com

Hướng dẫn download và cài đặt Bootstrap

Có 2 cách để bạn có thể sử dụng Bootstrap trên web của bạn.

Download Bootstrap packet từ getbootstrap.com

Truy cập www.getbootstrap.com và click vào Getting Started. Sau đó click vào Download Bootstrap.

Tệp A.zip sẽ được tải xuống. Giải nén tệp zip và chuyển đến thư mục có chứa tên CSS và JS.

<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.min.css”>
<script src=”js/bootstrap.min.js”> </script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>

Thêm liên kết tệp vào HTML document, sau đó mở trang web bằng trình duyệt web.

Ví dụ

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS library -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

    <!-- JavaScript library -->
    <script src="js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container text-center">
        <!-- Text color class used -->
        <h1 class="text-success">200Lab</h1>
        <p>Learn Deep, Go Different</p>
    </div>
</body>

</html>

Output

Thêm Bootstrap thông qua CDN link

<!– CSS library –>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”>

<!– jQuery library –>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>

<!– JavaScript library –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js” integrity=”sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1″ crossorigin=”anonymous”></script>

<!– Latest compiled JavaScript library –>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js” integrity=”sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM” crossorigin=”anonymous”></script>

Ví dụ

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
 
    <!-- Bootstrap CSS library -->
    <link rel="stylesheet"
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous">
 
    <!-- jQuery library -->
    <script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous">
    </script>
 
    <!-- JavaScript library -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous">
            </script>
 
    <!-- Latest compiled JavaScript library -->
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous">
    </script>
</head>
 
<body>
    <div class="container text-center">
        <!-- Text color class used -->
        <h1 class="text-success">GeeksforGeeks</h1>
        <p>A computer science portal for geeks</p>
    </div>
</body>
 
</html>

Output

Bootstrap 5 có gì mới?

Phiên bản mới nhất của Bootstrap là Bootstrap 5, được phát hành vào tháng 5 năm 2021. Bootstrap 5 có nhiều cải tiến và tính năng mới hơn so với phiên bản Bootstrap 4 như:

Xóa jQuery: Bootstrap 5 đã loại bỏ hoàn toàn jQuery được sử dụng trong phiên bản trước đó và sử dụng Vanilla JavaScript thay thế. Điều này giúp giảm kích thước tệp và cải thiện tốc độ tải trang.
Cải tiến khả năng linh hoạt: sử dụng CSS Flexbox và Grid để giúp tạo các mốt layout linh hoạt phù hợp với kích thước màn hình khác nhau.
Nâng cao tính tương thích với thiết bị di động: có tính năng mới là Mobile-first CSS, giúp cho trang web tương thích và hiển thị tốt trên các thiết bị di động như điện thoại di động, máy tính bảng, và desktop.
Tính năng mới: có các tính năng mới như Scrollspy, offcanvas, reset CSS,...
Cải tiến về tốc độ tải trang: Bootstrap 5 giảm kích thước tệp và sử dụng các tính năng hiệu suất như cache, preloading và nén tệp để giúp tăng tốc độ tải trang.
Thân thiện với các trình duyệt: Bootstrap 5 tương thích với các trình duyệt mới nhất và các trình duyệt cũ bao gồm Internet Explorer 11.
Cải tiến khả năng tùy biến: cải tiến khả năng tùy biến bằng cách sử dụng CSS Variable và Sass.

Bootstrap 5 là phiên bản mới nhất của Bootstrap và có nhiều cải tiến và tính năng mới giúp cho việc phát triển trang web trở nên dễ dàng, linh hoạt hơn và hiệu quả hơn.

Lời kết

200Lab hy vọng thông qua bài viết trên bạn đã nắm được Bootstrap là một framework cực kỳ hữu ích trong việc phát triển website. Với các tính năng đa dạng và thiết kế linh hoạt, Bootstrap giúp tăng tốc độ phát triển, cải thiện trải nghiệm người dùng và đảm bảo tính tương thích trên nhiều nền tảng khác nhau.

Bạn có thể tham khảo thêm những bài viết hữu ích về chủ đề "Lập trình web" tại Blog của 200Lab nhé!