Code ẩn hiện nội dung html

Trong bài này, mình vẫn lí giải các bạn về yếu tắc collapse – ẩn hiện nay văn bản vào Bootstrap. Các chúng ta cũng có thể xem thêm hầu hết bản lĩnh cải thiện trong trang tài liu ca Bootstrap, tôi chỉ hướng dẫn văn bản cơ phiên bản với dễ thực hiện độc nhất.

Bạn đang xem: Code ẩn hiện nội dung html


Video – Collapse – Ẩn hiện ngôn từ trong Bootstrap

Ý tưởng

Collapse chủ yếu nhằm tạo thành hiệu ứng ẩn hiện nay văn bản. lấy một ví dụ như:

*

Chúng ta gồm một button với 1 thẻ a. Nội dung đã trở nên ẩn. Để hiện tại văn bản, bọn họ cliông chồng vào button hoặc thẻ a

*

Nếu ấn 1 lần tiếp nữa vào button, nội dung sẽ ẩn đi. Các chúng ta cũng có thể thấy dạng này vào trang web ví dụ mặt dưới:


*
Trang website chế độ hành vi của AdSense cũng dùng collapse

Cấu trúc với phương thức hoạt động của collapse


"Thăm nlẩn thẩn, kẹp nngay gần tuy thế vẫn không được cnhì ni (trả nợ)" đề xuất dành vài ba dòng cho QUẢNG CÁOCác bạn phải hosting PHPhường - WordPress nkhô giòn, tốt và dễ dàng thực hiện hoàn toàn có thể lựa chọn Azdigi nhé.Link đăng ký: NHẬN NGAY ƯU ĐÃINếu chúng ta ĐK hosting trường đoản cú link PR, bản thân sẽ có một không nhiều chi phí để duy trì với "cnhị ni".
Bạn cần chắc hẳn rằng đã thêm bootstrap.min.css cùng bootstrap.min.js vào tệp tin html nhé.

⭐️ Nội dung bị ẩn

+ Là một khối hận có class=”collapse”, và có một id đặt theo ý của các bạn. Nên đặt id tương quan đến nội dung bị ẩn đi, ví dụ: id-collapse-noidung. Trong code chủng loại bản thân đặt là noi-dung-collapse.

+ Các chúng ta cũng có thể sử dụng card vẫn học tập ở bài 4 để định dạng cho chỗ văn bản này.


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 chúng ta cũng có thể cần sử dụng 1 button hoặc thẻ a. Định dạng phụ thuộc vào ý bạn nhé. Điều đặc trưng là đề xuất có những ở trong tính sau:

+ data-toggle=”collapse”

+ data-target=”#id-collapse-noidung”. Trong ví dụ, bản thân dùng #noi-dung-collapse. Nh phi có du # .

Xem thêm: Hướng Dẫn Các Cách Sửa Lỗi Không Thể Tải Plugin Plugin, Sửa Lỗi Không Thể Tải Plug

Dường như, Collapse còn có đầy đủ phần nâng cấp như accordion (tập đúng theo những collapse thành 1 menu. Các chúng ta có thể từ xem thêm nhé. Nhưng nhìn bao quát, nguyên tắc thực hiện là bao gồm 2 phần đã trình diễn nhỏng bên trên.

Code mẫu: Download

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

Liên h


Bootstrap
1 1.443
ShareFacebookTwitterGoogle+

Trước

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


Sau

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


Bạn cũng có thể thích
Bootstrap

Bài 10: Navbar – Tạo menu đa cung cấp với hiệu ứng hover và responsive


Bootstrap

Bài 9: Navs – Tạo tkhô cứng thực đơn vào Bootstrap


Bootstrap

Bài 8: Modal – Tạo vỏ hộp thoại trong Bootstrap – Crúc ưng ý Popover


Bootstrap

Bài 7: Form trong Bootstrap – Tạo biểu mẫu mã vào Bootstrap


Trướcsau đó
Để lại một trả lời
Hủy trả lời

Địa chỉ email của các bạn sẽ không được ra mắt.


Lưu lên tiếng của tôi


Tìm kiếm bài xích viết
Fanpage Góc có tác dụng web
“CƠM ÁO GẠO TIỀN”

quý khách hàng MUỐN TĂNG KÍCH THƯỚC website, nhanh, phải chăng với dễ thực hiện có thể chọn hosting Azdigi nhé.

Xem thêm: Cách Loại Bỏ Dòng Bản Quyền Dưới Chân Trang Một Số Theme Miễn Phí

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

Nếu chúng ta cliông xã cùng ĐK hosting từ liên kết trên, bản thân sẽ có được một không nhiều tiền nhằm gia hạn website.


Hosting về tối ưu mang đến WordPress

Bài viết new nhất


Kiến thức cơ bản về thương hiệu miền domain


#15 – WPhường. Search.php | Tùy biến size tìm kiếm kiếm…


#14 – WPhường Comments.php | Tùy biến đổi size bình…


TrướcSau đó 1 của 57
“RICE SHIRT RICE MONEY”

Nhiều tín đồ quan liêu tâm


Hướng dẫn cài MacOS bên trên đồ vật ảo VMWare


Bài 5: Cách thực hiện shortcode WooCommerce để hiển…


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


Trướcsau đó 1 của 57

Bài 2: Cách setup WordPress trên Localhost XAMPP


#10 – WordPress Pagination – Phân…


Bài 20: Tạo bảng tất cả nhân kiệt kiếm tìm tìm cùng với jQuery


#13 – Custom WP_Query – Hiển thị bài…


TrướcTiếp đến 1 của 42
Bản quyền nằm trong về Góc Làm Web
Development
WP Development

#15 – WP Search.php | Tùy biến đổi khung search kiếm – trang kết quả…


WPhường Development

#14 – WP Comments.php | Tùy đổi mới size bình luận và list bình…


WPhường Development

Trướcsau đó
WordPress
WP Development

#15 – WP Search.php | Tùy trở thành size kiếm tìm tìm – trang kết quả…


WP Development

#14 – WPhường Comments.php | Tùy đổi mới khung bình luận cùng danh sách bình…


Chuyên mục: Lỗi Kỹ Thuật