/Bootstrap-5-Tutorial

Primary LanguageHTML

Bootstrap 5 Tutorial

  • Bootstrap là một framework HTML, CSS, và JavaScript phổ biến nhất để phát triển website chuẩn responsive.
  • Bootstrap giúp cho quá trình thiết kế website của bạn diễn ra nhanh chóng dựa trên những thành tố cơ bản sẵn có như typography, forms, buttons, tables, grids, navigation, image carousels,…
  • Nói một cách đơn giản, Bootstrap là một bộ sưu tập các đoạn code lớn có thể tái sử dụng, được viết bằng HTML, CSS và JavaScript. Bên cạnh đó, đây cũng là framework develop front-end cho phép các developer và designer có thể nhanh chóng xây dựng các trang web responsive. Về cơ bản, framework Bootstrap giúp tiết kiệm thời gian viết CSS, từ đó ta sẽ có nhiều thời gian cho việc thiết kế các trang web hơn. Và hơn hết, nó “HOÀN TOÀN MIỄN PHÍ”.

Starter template

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

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

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Tutorial main content

Bootstrap base

  1. Bootstrap 5 Containers
  2. Bootstrap 5 Grid System
  3. Bootstrap 5 Text/Typography
  4. Bootstrap 5 Colors
  5. Bootstrap 5 Tables
  6. Bootstrap 5 Images
  7. Bootstrap 5 Alerts
  8. Bootstrap 5 Buttons
  9. Bootstrap 5 Button Groups
  10. Bootstrap 5 Badges
  11. Bootstrap 5 Spinners
  12. Bootstrap 5 Pagination
  13. Bootstrap 5 List Groups
  14. Bootstrap 5 Cards
  15. Bootstrap 5 Dropdowns
  16. Bootstrap 5 Collapse
  17. Bootstrap 5 Navs
  18. Bootstrap 5 Navbars
  19. Bootstrap 5 Carousel
  20. Bootstrap 5 Modal
  21. Bootstrap 5 Tooltip
  22. Bootstrap 5 Popover
  23. Bootstrap 5 Toasts
  24. Bootstrap 5 Scrollspy
  25. Bootstrap 5 Offcanvas
  26. Bootstrap 5 Utilities
  27. Bootstrap 5 Flex

Bootstrap Forms

  1. Bootstrap 5 Forms
  2. Bootstrap 5 Select
  3. Bootstrap 5 Checkboxes and Radio buttons
  4. Bootstrap 5 Range
  5. Bootstrap 5 Input Groups
  6. Bootstrap 5 Form Floating Labels
  7. Bootstrap 5 Form Validation