carousel-inner là gì

Khối div card gồm có các thành phần bên trong:

+ Hình ảnh class=”card-img-top”. Nếu các bạn muốn hình có padding, sử dụng thêm class=”img-thumbnail”

+ Phần nội dung chính nằm trong khối class=”card-body”

+ Tiêu đề dùng class=”card-title”

+ Nội dung dùng class=”card-text”

độ rộng của khối có thể chỉnh bằng cách tăng/giảm thuộc tính style=”width: 18rem;”

Carousel – tạo slideshow trình chiếu

Cách dùng: để trong 1 khối row khác để tách biệt với các phần khác

banner là class mình tự định dạng. Tùy ý các bạn chỉnh lại nhé.

Button group và Button toolbar

Ngoài ra, đầu video, mình cũng hướng dẫn về button group

Trước Sau

Giải thích ví dụ:
– Phần tử div ngoài cùng [div id=”myCarousel” style=”width:500px” class=”carousel slide” data-ride=”carousel”] dùng để định nghĩa 1 carousel với chỉ số id=”myCarousel”. Lớp .carousel để mô tả thẻ div này chứa 1 carousel. Lớp .slide để thêm các hiệu ứng động và chuyển tiếp, làm cho 1 đối tượng sẽ có hiệu ứng trượt khi hiển thị mới, nếu bạn không muốn có hiệu ứng này thì bỏ qua không định nghĩa. Thuộc tính data-ride=”carousel” nhằm kích hoạt hiệu ứng hoạt hình sẽ lập tức hoạt động khi trang được tải.
– Phần “Indicators” là các chấm nhỏ ở dưới đáy của mỗi slide [chỉ ra có bao nhiêu slide, và slide nào đang được hiển thị. Lớp .carousel-indicators định nghĩa các indicator. Thuộc tính data-target để chỉ đến id của carousel. Thuộc tính data-slide-to mô tả slide nào để được hiển thị nhấn chuột lên hình.
– Phần “Wrapper for slides” được định nghĩa bên trong thẻ div với lớp .carousel-inner. Nội dung của mỗi slide sẽ được định nghĩa trong lớp .item, nội dung này có thể là hình ảnh hoặc văn bản. Lớp .active để mô tả slide nào sẽ được hiển thị đầu tiên.
– Phần “Left and right controls” là các nút cho phép người dùng xem hình ảnh trước sau khi nhấn chuột lên các nút này. Thuộc tính data-slide cho phép dùng từ khóa “prev” hay “next”, để định nghĩa vị trí tiếp theo của 1 slide dựa vào vị trí của slide hiện tại.

Thêm chú thích vào slide
Để thêm chú thích vào các slide trong 1 carousel, đơn giản là thêm phần tử div class=”carousel-caption” bên trong mỗi phần tử div class=”item” để tạo chú thích cho mỗi slide.
Trước Sau

Đến đây, bạn đã nắm cách tạo 1 carousel [slideshow] trong Bootstrap. Ngoài ra, có rất nhiều cách để tạo slide cũng như phong cách mới lạ khác nhau, bạn có thể tự khám phá để làm sinh động hơn giao diện trang Web của mình nhé.