2. Hướng Dẫn Cài đặt Bootstrap 5 Trong VS Code

Sau đâu là Hướng dẫn cài đặt Bootstrap 5 trong VS code

Để cài đặt Bootstrap 5 trong Visual Studio Code, bạn cần thực hiện các bước sau:

Bước 1: Tạo dự án mới trong Visual Studio Code

Mở Visual Studio Code.
Tạo một thư mục mới cho dự án của bạn và mở thư mục đó trong Visual Studio Code.

Bước 2: Tạo tệp HTML và cài đặt Bootstrap 5

Trong thư mục dự án của bạn, tạo một tệp HTML mới ví dụ index.html.
Mở tệp index.html và thêm mã cơ bản sau để tạo một trang web đơn giản sử dụng Bootstrap 5:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Example</title>
    <!-- Thêm liên kết đến Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>Hello, Bootstrap 5!</h1>
        <p>This is a simple example using Bootstrap 5.</p>
    </div>

    <!-- Thêm liên kết đến Bootstrap JavaScript (tuỳ chọn) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Trong đoạn mã trên:

Chúng ta đã thêm liên kết đến tệp CSS của Bootstrap từ một nguồn tài nguyên xa (https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css).
Tuỳ chọn: Chúng ta có thể thêm liên kết đến tệp JavaScript của Bootstrap (bootstrap.bundle.min.js) để kích hoạt các tính năng JavaScript của Bootstrap.

Bước 3: Xem trang web của bạn

Lưu tệp index.html.
Nhấn chuột phải vào tệp và chọn “Open with Live Server” (nếu bạn đã cài đặt tiện ích mở rộng Live Server trong Visual Studio Code).

Sau khi làm đúng các bước trên, bạn sẽ thấy trang web của mình được hiển thị trong trình duyệt với giao diện đã sẵn sàng từ Bootstrap 5.

Lưu ý rằng việc sử dụng liên kết từ CDN (Content Delivery Network) như trên là cách nhanh chóng để bắt đầu với Bootstrap 5. Tuy nhiên, trong môi trường thực tế, bạn có thể tải xuống các tệp Bootstrap và liên kết tới chúng từ thư mục cục bộ của dự án của bạn để giảm thiểu phụ thuộc vào các nguồn tài nguyên bên ngoài.

Leave a Comment Cancel Reply