9. Jumbotron Trong Bootstrap 5

Jumbotron trong Bootstrap 5: Trong Bootstrap 5, Jumbotron là một thành phần giúp bạn tạo ra các phần đầu trang lớn, nổi bật và thu hút sự chú ý. Jumbotron thường được sử dụng để giới thiệu, thông báo hoặc tạo điểm nhấn cho nội dung quan trọng trên trang web của bạn. Dưới đây là một ví dụ về cách sử dụng Jumbotron trong Bootstrap 5:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <title>Bootstrap 5 Jumbotron Example</title>
</head>
<body>
    <div class="jumbotron">
        <div class="container">
            <h1 class="display-4">Welcome to Our Website</h1>
            <p class="lead">This is a simple and attractive jumbotron example in Bootstrap 5.</p>
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn More</a>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Trong ví dụ trên:

Chúng tôi sử dụng lớp jumbotron để tạo ra một Jumbotron.
Trong Jumbotron, chúng tôi sử dụng lớp container để bao bọc nội dung và giới hạn chiều rộng của Jumbotron.
Chúng tôi sử dụng các lớp display-4 để tạo tiêu đề lớn, lead để tạo văn bản dẫn dắt, và btn btn-primary btn-lg để thêm một nút chức năng.

Vui lòng lưu ý rằng bạn cần thêm liên kết đến tệp CSS và JavaScript của Bootstrap để chạy đúng cách.

Dưới đây là một ví dụ cụ thể về cách sử dụng Jumbotron trong Bootstrap 5:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <title>Bootstrap 5 Jumbotron Example</title>
</head>
<body>
    <div class="jumbotron text-center bg-primary text-white">
        <div class="container">
            <h1 class="display-4">Welcome to Our Website</h1>
            <p class="lead">Explore the amazing features and services we offer.</p>
            <a class="btn btn-light btn-lg" href="#" role="button">Learn More</a>
        </div>
    </div>

    <div class="container mt-5">
        <h2>Our Services</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Trong ví dụ trên:

Chúng tôi sử dụng lớp jumbotron để tạo ra một Jumbotron.
Sử dụng lớp text-center để căn giữa nội dung trong Jumbotron.
Sử dụng lớp bg-primary text-white để thiết lập màu nền và màu chữ cho Jumbotron.
Trong Jumbotron, chúng tôi sử dụng lớp container để bao bọc nội dung và giới hạn chiều rộng của Jumbotron.
Chúng tôi sử dụng các lớp display-4 để tạo tiêu đề lớn, lead để tạo văn bản dẫn dắt, và btn btn-light btn-lg để thêm một nút chức năng.

Vui lòng lưu ý rằng bạn cần thêm liên kết đến tệp CSS và JavaScript của Bootstrap để chạy đúng cách.

Leave a Comment Cancel Reply