Bootstrap 5: Giới thiệu về Bootstrap

Bootstrap 5: Giới thiệu về Bootstrap - Day 1

Lịch sử Bootstrap

Bootstrap là một framework front-end phát triển bởi Twitter vào năm 2011 bởi Mark Otto và Jacob Thornton. Ban đầu, nó được gọi là "Twitter Blueprint" và được sử dụng bên trong Twitter để tạo giao diện cho ứng dụng Web của họ. Sau đó, Twitter quyết định chia sẻ nó với cộng đồng phát triển

Ngày 19 tháng 8 năm 2011, Bootstrap chính thức được phát hành.

Bootstrap 2 ra mắt vào tháng 1 năm 2012 với nhiều cải tiến và tính năng mới. Phiên bản này đã cải thiện hệ thống lưới, tương tác trang Web và hỗ trợ trình duyệt tốt hơn. Tiếp đến Bootstrap 3 được phát hành vào tháng 8 năm 2013 và đưa ra các tính năng Responsive Design, tương thích với các thiết bị di động, và nhiều thành phần giao diện mới.

Bootstrap 4 đã mất một thời gian dài để phát triển, ra mắt vào tháng 1 năm 2018 với nhiều cải tiến lớn. Bootstrap 4 cải thiện hệ thống grid, tối ưu hóa CSS, hỗ trợ Flexbox, và đem lại nhiều tính năng và sự linh hoạt hơn cho người phát triển. Đến nay Bootstrap đã nhận được sự ủng hộ mạnh mẽ từ cộng đồng phát triển. Nhiều dự án và tài liệu mở rộng đã xuất hiện để giúp người dùng sử dụng Bootstrap một cách hiệu quả.

Bootstrap 5 được phát hành vào tháng 5/2021, tiếp tục đổi mới với việc loại bỏ hỗ trợ cho Internet Explorer và sử dụng biến CSS tùy chỉnh. Đặc biệt trong phiên bản này, jQuery đã được loại bỏ.

Tại sao Bootstrap quan trọng trong thiết kế giao diện?

Bootstrap đã thay đổi cách chúng ta thiết kế giao diện bằng cách cung cấp một bộ công cụ mạnh mẽ, giúp xây dựng các trang web đáp ứng và thân thiện với điện thoại di động.

Nó cung cấp một hệ thống lưới linh hoạt, các thành phần được thiết kế sẵn và các plugin mạnh mẽ dựa trên jQuery, giúp tạo ra giao diện đẹp và dễ sử dụng.

Bằng cách sử dụng Bootstrap, các nhà phát triển có thể tập trung vào việc xây dựng trải nghiệm người dùng tốt hơn mà không phải lo lắng về việc viết mã CSS và JavaScript từ đầu.

Tạo trang Html đơn giản bằng Bootstrap 5

Mở Visual Studio Code. Bấm File -> Open Folder -> Chọn folder cần chứa project -> Select Folder.

Tạo mới 1 file html: index.html.

Gõ b5-$ rồi bấm Enter. Extension 1 sẽ tạo mới 1 file template mẫu Htm

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

        <!-- Bootstrap CSS v5.2.1 -->
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
            crossorigin="anonymous"
        />
    </head>

    <body>
        <header>
            <!-- place navbar here -->
        </header>
        <main></main>
        <footer>
            <!-- place footer here -->
        </footer>
        <!-- Bootstrap JavaScript Libraries -->
        <script
            src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
            integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
            crossorigin="anonymous"
        ></script>

        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
            integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
            crossorigin="anonymous"
        ></script>
    </body>
</html>

Trong đoạn code trên, mình sử dụng Bootstrap CDN. Các bạn có thể tải Bootstrap từ trang offical của Bootstrap

Ngoài ra, ở đoạn code trên, mình sử dụng 2 file js là popper.min.js và bootstrap.min.js. Các bạn có thể sử dụng bootstrap.bundle.min.js thay vì 2 file trên. Lựa chọn bootstrap.min.js hay bootstrap.bundle.min.js:

bootstrap.min.js: Bao gồm các tính năng JavaScript cốt lõi của Bootstrap.
bootstrap.bundle.min.js: Bao gồm cả bootstrap.min.js và thư viện Popper.js (cần thiết cho các thành phần như tooltip, popover).

Nên sử dụng bootstrap.bundle.min.js cho hầu hết các dự án để đảm bảo tất cả tính năng JavaScript của Bootstrap hoạt động chính xác.

Chúng ta có file template tương ứng nếu sử dụng CDN bootstrap.bundle.min.js

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

        <!-- Bootstrap CSS v5.2.1 -->
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
            crossorigin="anonymous"
        />
    </head>

    <body>
        <header>
            <!-- place navbar here -->
        </header>
        <main></main>
        <footer>
            <!-- place footer here -->
        </footer>
        
        <!-- Bootstrap JavaScript Libraries -->
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
            crossorigin="anonymous"
        ></script>
    </body>
</html>

ASP.NET MVC: Cơ bản về Validation

Validation (chứng thực) là một tính năng quan trọng trong ASP.NET MVC và được phát triển trong một thời gian dài. Validation vắng mặt trong phiên bản đầu tiên của asp.net mvc và thật khó để tích hợp 1 framework validation của một bên thứ 3 vì không có khả năng mở rộng. ASP.NET MVC2 đã hỗ trợ framework validation do Microsoft phát triển, tên là Data Annotations. Và trong phiên bản 3, framework validation đã hỗ trợ tốt hơn việc xác thực phía máy khách, và đây là một xu hướng của việc phát triển ứng dụng web ngày nay.

Nhật ký học tập

Tìm kiếm Blog này