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 TwitterBootstrap 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

  1. Vì là mã nguồn mở nên nó hoàn toàn miễn phí khi sử dụng.
  2. Tương thích với tất cả trình duyệt ngoại trừ Intenet Explore 9
  3. Nhẹ và có khả năng tùy biến tốt
  4. Có hệ thống tài liệu tốt và hỗ trợ cộng đồng đông đảo
  5. Rất nhiều template, chủ đề và plugin WordPress miễn phí và chuyên nghiệp
  6. 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/bootstrap@4.5.3/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/bootstrap@4.5.3/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/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/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:

Nguồn: vinasupport.com

             
SHARE

Bài viết liên quan

mode_edit Bình luận của bạn

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 *

account_circle
web