Trong bài này, mình sẽ hướng dẫn các bạn về thành phần collapse – ẩn hiện nội dung trong Bootstrap. Các bạn có thể tham khảo thêm những tính năng nâng cao trong trang tài liu ca Bootstrap, mình chỉ hướng dẫn nội dung cơ bản và dễ sử dụng nhất.

Bạn đang xem: Data-toggle là gì

Bạn đang xem: Data-toggle là gì

Video – Collapse – Ẩn hiện nội dung trong Bootstrap

Ý tưởng

Collapse chủ yếu để tạo hiệu ứng ẩn hiện nội dung. Ví dụ như:


*

Nếu ấn 1 lần nữa vào button, nội dung sẽ ẩn đi. Các bạn có thể thấy dạng này trong trang web ví dụ bên dưới:


*

Trang web chính sách hành vi của AdSense cũng dùng collapse

Cấu trúc và cách thức hoạt động của collapse

"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ÁOCá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 ĐÃINế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". Bạn phải chắc rằng đã thêm bootstrap.min.css và bootstrap.min.js vào file html nhé.

⭐️ Nội dung bị ẩn

+ Là một khối có class=”collapse”, và có 1 id đặt theo ý của các bạn. Nên đặt id liên quan đến nội dung bị ẩn đi, ví dụ: id-collapse-noidung. Trong code mẫu mình đặt là noi-dung-collapse.

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

Xem thêm: Mắt Kính Phân Cực Là Gì ? Công Dụng Và Cách Nhận Biết Là Gì

Distinctio praesent eros, quibusdam nibh? Euismod. Per magni, id dolore hymenaeos excepturi incidunt eius. Necessitatibus natus faucibus corporis, quam dolores ante minus risus perspiciatis, voluptatum turpis etiam vero excepturi luctus augue donec esse optio auctor pulvinar! Vulputate quas eiusmod

⭐️ Phần điều khiển

Các bạn có thể dùng 1 button hoặc thẻ a. Định dạng tùy theo ý bạn nhé. Điều quan trọng là phải có những thuộc tính sau:

+ data-toggle=”collapse”

Ngoài ra, Collapse còn có những phần nâng cao như accordion (tập hợp nhiều collapse thành 1 list. Các bạn có thể tự tìm hiểu thêm nhé. Nhưng nhìn chung, nguyên lý sử dụng là gồm 2 phần đã trình bày như trên.

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

Bootstrap 1
1.938ShareFacebookTwitterGoogle+

Trước

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

Sau

Bài 6: Dropdowns – Tạo menu thu gọn trong Bootstrap

Bạn cũng có thể thíchBootstrap

Bài 6: Dropdowns – Tạo menu thu gọn trong Bootstrap

Bootstrap

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

Bootstrap

Bài 3: Alert và Button trong Bootstrap

Bootstrap

Bài 2: Hệ thống lưới trong Bootstrap và responsive – Grid System Bootstrap

TrướcKế tiếp Để lại một trả lời Hủy trả lời

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

Lưu thông tin của tôi

Tìm kiếm bài viếtFanpage Góc làm web“CƠM ÁO GẠO TIỀN”

Link đăng ký: NHẬN NGAY ƯU ĐÃI

Nếu các bạn click và đăng ký hosting từ link trên, mình sẽ có một ít tiền để duy trì website.

Hosting tối ưu cho WordPress

Bài viết mới nhất

Kiến thức cơ bản về tên miền domain

#15 – WP Search.php | Tùy biến form tìm kiếm…

#14 – WP Comments.php | Tùy biến form bình…

TrướcKế tiếp 1 của 54“RICE SHIRT RICE MONEY”

Nhiều người quan tâm

Hướng dẫn cài MacOS trên máy ảo VMWare

Bài 10: Hiệu ứng slide – phần html và css

Bài 13: Hiệu ứng hover với thuộc tính transition

TrướcKế tiếp 1 của 51

Bài 3: Vẽ trạm chờ xe bus – Flat design

Ngôn ngữ thiết kế UI/UX Material Design

Hướng dẫn cài MacOS trên máy ảo VMWare

Bài 2: Các thẻ HTML cơ bản – phần 1

TrướcKế tiếp 1 của 40Bản quyền thuộc về Góc Làm WebDevelopmentWP Development

#15 – WP Search.php | Tùy biến form tìm kiếm – trang kết quả…

WP Development

#14 – WP Comments.php | Tùy biến form bình luận và danh sách bình…

WP Development TrướcKế tiếp WordPressWP Development

#12 – WordPress Post Formats – Hỗ trợ nhiều định dạng bài viết