Bài 4: Card và Carousel- Tạo slideshow trong Bootstrap

3

Trong bài này, chúng ta sẽ tìm hiểu về 2 component khác của Bootstrap và card và carousel, cách tạo slideshow trong Bootstrap. Đồng thời, các kiến thức về lưới Bootstrap và button cũng được sử dụng trong bài học này.

Video – Card và Carousel – Tạo slideshow trong Bootstrap

Video sử dụng tài liệu tham khảo từ getboostrap.com

Hướng dẫn chi tiết

Card

Card là một khối nội dung đã được định dạng sẵn, bao gồm các thành phần nhỏ bên trong, giúp tiết kiệm thời gian canh chỉnh các khối.

Card và Carousel- Tạo slideshow trong Bootstrap
Card trong Bootstrap

Cách sử dụng card:

<div class="card" style="width: 18rem;">
   <img class="card-img-top" src="..." alt="Card image cap">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
</div>

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

<div class=”row banner”>
   <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" style="width: 100%;">
      <div class="carousel-inner">
         <div class="carousel-item active">
            <img class="d-block w-100" style="width: 100%" src=".." alt="First slide">
         </div>
         <div class="carousel-item">
            <img class="d-block w-100" style="width: 100%" src="..." alt="Second slide">
         </div>
         <div class="carousel-item">
            <img class="d-block w-100" style="width: 100%" src="..." alt="Third slide">
         </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="sr-only">Next</span>
      </a>
   </div>
</div>

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

.banner{
   width: 100%;
   height: 450px;
   overflow: hidden; // tránh lỗi hình quá lớn đè lên nội dung các phần khác
   padding-left: 15px;
   box-sizing: border-box; // cố định kích thước của slide
}

Button group và Button toolbar

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

Dùng khối để class=”btn-group” để gom các button bên trong lại với nhau. Nếu không có khối đó bao ngoài, các button sẽ tách rời nhau.

Button toolbar là tập hợp nhiều button group lại với nhau bằng cách dùng class=”btn-toolbar” và thêm vào mỗi group class mr-2.

Đó là tất cả nội dung của bài này.

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ

  1. dat ve xe limousine nói

    Tһat is гeally intеresting, You аre a vеry professional blogger.
    Ι haνe joined yoսr feed and sit ᥙр for in quest of more of
    yоur fantastic post. Additionally, І have shared your website in my social networks

  2. […] hiểu rõ tính năng, cách hoạt động của slide, các bạn xem thêm bài 4: Card và Carousel- Tạo slideshow trong Bootstrap. Mình sẽ sử dụng code trên […]

  3. […] Các bạn có thể dùng card đã học ở bài 4 để định dạng cho phần nội dung […]

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.