Tích hợp Bootstrap với JavaScript

Trong bài học này, chúng ta sẽ tìm hiểu cách sử dụng JavaScript để kiểm soát hành vi của các thành phần Bootstrap như Carousel, Modal, Dropdown. Điều này giúp giao diện web trở nên tương tác và linh hoạt hơn.

1. Giới thiệu các component tương tác

Carousel (Trình chiếu hình ảnh)

Bootstrap cung cấp Carousel giúp hiển thị trình chiếu ảnh động.

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="image1.jpg" class="d-block w-100" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="image2.jpg" class="d-block w-100" alt="Slide 2">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExample" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

Modal (Hộp thoại bật lên)

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    Mở Modal
</button>

<div class="modal fade" id="myModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tiêu đề Modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                Nội dung của modal
            </div>
        </div>
    </div>
</div>

Dropdown (Menu xổ xuống)

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Menu
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Tùy chọn 1</a></li>
        <li><a class="dropdown-item" href="#">Tùy chọn 2</a></li>
    </ul>
</div>

2. Sử dụng JavaScript để điều khiển Bootstrap Components

Ngoài việc sử dụng thuộc tính data-bs-*, chúng ta có thể dùng JavaScript để kích hoạt các thành phần Bootstrap.

Kích hoạt Modal bằng JavaScript

var myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();

Điều khiển Carousel bằng JavaScript

var myCarousel = new bootstrap.Carousel(document.getElementById('carouselExample'));
myCarousel.next();

3. Bài tập thực hành

Hãy thêm hiệu ứng tương tác vào Landing Page hoặc Dashboard bằng Bootstrap JS:

• Thêm một Carousel vào trang.
• Hiển thị Modal khi click vào một button.
• Tạo Dropdown Menu với các tùy chọn.

4. Kết luận

Qua bài học này, bạn đã biết cách sử dụng JavaScript để kiểm soát các component của Bootstrap, giúp tạo trải nghiệm người dùng tốt hơn. Hãy áp dụng vào dự án của bạn ngay nhé!