8. Image Trong Bootstrap 5

Image trong Bootstrap 5:

Trong Bootstrap 5, bạn có thể sử dụng các lớp và thành phần liên quan để làm việc với hình ảnh (images) một cách dễ dàng và linh hoạt. Dưới đây là một số cách sử dụng hình ảnh trong Bootstrap 5 cùng với ví dụ:

1. Hiển Thị Hình Ảnh Cơ Bản:

Sử dụng thẻ <img> để hiển thị hình ảnh cơ bản.

html

<img src="path/to/image.jpg" alt="Image" class="img-fluid">

2. Hiển Thị Hình Ảnh Với Kích Thước Tùy Chỉnh:

Thêm lớp img-{size} để tùy chỉnh kích thước của hình ảnh.

html

<img src="path/to/image.jpg" alt="Image" class="img-fluid img-thumbnail">

3. Làm Hình Ảnh Tròn:

Sử dụng lớp rounded-circle để làm hình ảnh tròn.

html

<img src="path/to/image.jpg" alt="Image" class="img-fluid rounded-circle">

4. Tạo Hình Ảnh Đa Dạng:

Sử dụng các lớp img-{variant} để thêm hiệu ứng màu sắc đa dạng vào hình ảnh.

html

<img src="path/to/image.jpg" alt="Image" class="img-fluid img-primary">

5. Lớp Background Hình Ảnh:

Sử dụng lớp bg-image để tạo nền hình ảnh cho một phần tử.

html

<div class="bg-image" style="background-image: url('path/to/image.jpg');"></div>

6. Lớp Bảng Bordered:

Sử dụng lớp table-bordered để thêm đường viền cho bảng.

html

<table class="table table-bordered">
    <!-- Nội dung bảng tương tự như ví dụ trước -->
</table>

7. Bảng Hover:

Sử dụng lớp table-hover để thêm hiệu ứng hover vào bảng.

html

<table class="table table-hover">
    <!-- Nội dung bảng tương tự như ví dụ trước -->
</table>

8. Bảng Responsively:

Sử dụng lớp table-responsive để làm cho bảng trở nên đáp ứng và cuộn ngang khi kích thước màn hình nhỏ hơn.

html

<div class="table-responsive">
    <table class="table">
        <!-- Nội dung bảng tương tự như ví dụ trước -->
    </table>
</div>

Đây chỉ là một số ví dụ cơ bản về cách sử dụng hình ảnh trong Bootstrap 5. Bootstrap cung cấp nhiều lựa chọn và lớp để tùy chỉnh giao diện hình ảnh theo ý muốn. Bạn có thể tìm hiểu thêm thông tin chi tiết trong tài liệu chính thức của Bootstrap.

Dưới đây là một ví dụ cụ thể về cách sử dụng hình ảnh 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 Image Example</title>
</head>
<body>
    <div class="container mt-5">
        <h2>Image Examples</h2>
        <div class="row">
            <div class="col-md-4">
                <img src="https://via.placeholder.com/150" alt="Image" class="img-fluid">
                <p class="mt-2">Basic Image</p>
            </div>
            <div class="col-md-4">
                <img src="https://via.placeholder.com/150" alt="Image" class="img-fluid img-thumbnail">
                <p class="mt-2">Image with Custom Size</p>
            </div>
            <div class="col-md-4">
                <img src="https://via.placeholder.com/150" alt="Image" class="img-fluid rounded-circle">
                <p class="mt-2">Round Image</p>
            </div>
        </div>
    </div>

    <div class="container-fluid bg-dark text-light mt-5 p-4">
        <h2>Background Image Example</h2>
        <div class="bg-image" style="background-image: url('https://via.placeholder.com/800x400');">
            <div class="p-5">
                <p>This is a background image example.</p>
            </div>
        </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 các lớp và thuộc tính như img-fluid, img-thumbnail, rounded-circle để tùy chỉnh hiển thị và kích thước của hình ảnh.
Chúng tôi sử dụng thuộc tính background-image để tạo nền hình ảnh cho phần tử bằng cách sử dụng lớp bg-image.

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