carousel-inner là gì
|
 Show 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 BootstrapVideo sử dụng tài liệu tham khảo từ getboostrap.com "Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo" Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn Hướng dẫn chi tiếtCardCard 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. Cách sử dụng card: "Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni". Card titleSome quick example text to build on the card title and make up the bulk of the card's content. Go somewhereKhố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ếuCá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é. .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 toolbarNgoà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ệ
Bài viết sẽ hướng dẫn các bạn học cách tạo các Carousel (Slideshow) trong Bootstrap. Carousel Trong ví dụ tiếp theo, chúng ta sẽ học cách tạo 1 carousel đơn giản. Giải thích ví dụ: Thêm chú thích vào slide Carousel - dammio.comĐế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é. |
