Bootstrap là gì? Hướng dẫn tạo template với Bootstrap

Trong bài viết: Top 10 CSS Framework tốt nhất để lập trình Front-End, mình có đề cập tới Bootstrap – Đây là 1 CSS Framework nổi tiếng, được sử dụng rộng rãi. Nó là 1 trong những CSS Framework đầu tiên trên thế giới. Hôm nay, VinaSupport sẽ giới thiệu, và hướng dẫn sử dụng Bootstrap.

Bootstrap là gì?

Được phát triển bởi Twitter, Bootstrap là 1 CSS Framework miễn phí, mã nguồn mở (open source), phổ biến và lâu đời nhất. Nó giúp bạn nhanh chóng tạo ra các giao diện UI/UX một cách dễ dàng, nhanh chóng phù hợp cho cho tất cả các thiết bị di dộng, màn hình máy tính.

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

Vì là mã nguồn mở nên nó hoàn toàn miễn phí khi sử dụng.
Tương thích với tất cả trình duyệt ngoại trừ Intenet Explore 9
Nhẹ và có khả năng tùy biến tốt
Có hệ thống tài liệu tốt và hỗ trợ cộng đồng đông đảo
Rất nhiều template, chủ đề và plugin WordPress miễn phí và chuyên nghiệp
Sử dụng JQuery – 1 plugin phổ biến cho các lập trình viên

Hướng dẫn tạo template với Bootstrap

Đầu tiên chúng ta tạo file index.html chứa nội dung sau:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <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/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Kết quả khi xem trên trình duyệt: