Accordions là một trong những công cụ gây phiền nhiễu mà một số bạn có thể đã thấy.
Nó có một trong những ống thổi với một bàn phím dưới
đây và sau đó bạn thổi và sau đó chơi nhạc với các phím ở đó.
Và không phải ai cũng thích nó.
Tôi khá chắc chắn. Nhưng không có ý xúc phạm với người chơi accordion.
Accordions trong bootstrap là rất thú vị cho chắc chắn.
Chúng ta sẽ xem xét cách chúng ta áp dụng accordions để có thể tiết lộ và
ẩn nội dung trong trang web của chúng tôi trong bài tập này.
Quay trở lại About Us tại trang HTML nơi chúng tôi đã có thông tin lãnh đạo của công ty.
Bây giờ, tôi sẽ thay thế điều hướng trên cùng với một điều hướng dựa trên accordion.
Tôi sẽ loại bỏ UL này xác định thuật ngữ điều hướng hoàn toàn.
Và sau đó chúng ta sẽ thiết kế đàn accordion xung quanh nội dung mà chúng ta đã có.
Vì vậy, chúng ta hãy xóa UL này có chứa điều hướng tab để chúng sẽ được để lại
chỉ với phần này được bao bọc bên trong bảng điều khiển trên cùng và nội dung trên cùng.
Vì vậy, chúng ta sẽ đi và sửa đổi điều này.
Đi đến div này ở đây,
Tôi sẽ loại bỏ lớp này từ đó và sau đó tôi áp dụng id như accordion.
Chúng ta cần id này sau này để có thể tạo ra accordion rằng div, có
chứa nội dung này vẫn còn tại chỗ đó.
Vì vậy, nội dung hàng đầu bây giờ được thay đổi thành accordion.
Bây giờ, mỗi nội dung ở đây,
chúng ta sẽ chuyển đổi nó thành một
cấu trúc dựa trên thẻ ở đó để họ có thể tiết lộ nội dung trong
mỗi thẻ để bạn sẽ thấy tôi sử dụng thẻ và
các lớp cơ thể thẻ ở đó để kèm theo nội dung này.
Bây giờ, đi vào nội dung thực tế ở đây,
Tôi sẽ bắt đầu áp dụng các lớp thẻ ở đây với div có.
Vì vậy, chúng ta sẽ nói, “thẻ lớp div” và
sau đó đóng div ở đó và sau đó nội dung này đi vào div có.
Bây giờ, trong đây, chúng ta sẽ đi vào và tạo ra
một div với lớp “tiêu đề thẻ”.
Tôi sẽ chỉ cho bạn một trong số họ và sau đó chúng ta sẽ
lặp lại quá trình này cho ba còn lại cũng.
Vì vậy, chúng ta sẽ nói, “thẻ tiêu đề cuộn tab” và sau đó “id peterhead.”
Tôi sẽ lấy h3 này từ dưới đây,
cắt nó ra và sau đó dán nó vào bảng điều khiển thẻ.
Vì vậy, h3 này xác định tên của
người lãnh đạo doanh nghiệp được cắt từ
bên trong bảng điều khiển tab và sau đó chuyển vào tiêu đề thẻ ở đây.
Nó sẽ đóng vai trò hỗ trợ điều hướng của tôi.
Bây giờ, để h3 này, tôi sẽ áp dụng một lớp được gọi là mb-0.
Vì vậy, đây là mb-0 ở đây.
Bây giờ, tên này chính nó,
Tôi sẽ kèm theo này bên trong và một,
vì vậy tôi sẽ đi đến dòng tiếp theo và sau đó nói,
“một chuyển đổi dữ liệu” và chuyển
đổi dữ liệu sẽ nói, “sụp đổ”.
Vì vậy, bây giờ, bạn thấy rằng bạn đang sử dụng plugin sụp đổ.
Vì vậy, chúng tôi có h3 đóng cửa này ở đó.
Vì vậy, tôi sẽ chuyển nó sang dòng tiếp theo
ở đây và sau đó tôi sẽ đóng một thẻ ngay tại đó.
Vì vậy, với điều này, một thẻ bây giờ bao gồm tên của CEO ở đây.
Và sau đó thẻ h3 tất nhiên đóng h3 trên đầu trang và sau đó đây là
bên trong div đó là tiêu đề thẻ lớp.
Vì vậy, điều này tạo thành cấu trúc tiêu đề cho div accordion của tôi.
Đi bây giờ đến bảng điều khiển tab bên dưới,
tôi sẽ thay đổi lớp này từ bảng điều khiển tab mờ dần để sụp đổ.
Vì vậy, đây sẽ là một plugin sụp đổ mà sẽ hữu ích cho accordion của chúng tôi
và tôi cũng sẽ loại bỏ lớp hoạt động
này cho điều này và id sẽ được để lại như peter cho điều này.
Và sau đó bạn sẽ nói, “dữ liệu cha mẹ” và bạn sẽ chỉ định accordion.
Bạn thấy lý do tại sao chúng tôi đã cho id của accordion để div bao quanh tất cả các nội dung này.
Vì vậy, đây là cách để xác định rằng điều này sẽ
tạo thành một phần của accordion mà bạn đang xây dựng ở đó.
Vì vậy, đó là lý do tại sao dữ liệu cha mẹ accordion.
Bây giờ, nội dung bên trong bảng điều khiển tab này,
Tôi sẽ kèm theo nó bên trong div với
cơ thể thẻ lớp
và đóng div đó ở đây,
và sau đó thụt lề nội dung này trong đó.
Hãy lưu các thay đổi và sau đó đi và xem trang web của chúng tôi vào thời điểm này.
Đi đến trang web của chúng tôi bây giờ bạn nhận thấy rằng trong lãnh đạo doanh nghiệp,
tên của Giám đốc điều hành được đánh dấu ở đây trong tiêu đề thẻ ở đây.
Và sau đó nội dung ở dưới đây.
Bây giờ, chúng ta sẽ tạo ra ba phần còn lại dưới đây và sau đó kèm theo tất cả chúng trong đó.
Tôi sẽ lặp lại cùng một cấu trúc cho những người còn lại.
Vì vậy, tôi sẽ có thẻ với tiêu đề thẻ,
và tiêu đề thẻ sẽ kèm theo tên của người như thế này.
Vì vậy, bạn khá nhiều sẽ làm theo
cùng một cấu trúc cho ba phần còn lại của nội dung.
Vì vậy, chúng ta hãy thực hiện các thay đổi và sau đó chúng tôi sẽ quay lại và xem lại mã.
Trở lại với mã,
bây giờ bạn thấy rằng trong ba còn lại,
bạn nhận thấy rằng tôi vẫn đang sử dụng thẻ ở đây
với tiêu đề thẻ ở đây và h3 với mb-0.
Đây là bên trong thẻ tiêu đề lớp div có và sau đó xuống
dưới lớp chỉ như sụp đổ và sau đó với id
và sau đó cơ thể thẻ bao bọc P có.
Cùng một điều với hai người còn lại cũng.
Vì vậy, với sự thay đổi
này, ba thông tin lãnh đạo doanh nghiệp còn lại này sẽ
bị thu gọn nhưng thông tin bị sẹo của Peter Pan
sẽ được tiết lộ khi lần đầu tiên hiển thị trang web.
Vì vậy, với sự thay đổi
này, bây giờ, đoạn mã này rõ ràng là có sẵn trong
các hướng dẫn theo đây vì vậy không cần phải lo lắng quá nhiều.
Bạn luôn có thể tham khảo điều đó để đảm bảo rằng bạn đã thực hiện nó một cách chính xác.
Vì vậy, chúng ta hãy lưu các thay đổi.
Chuyển đổi trở lại trang web của chúng tôi,
bây giờ bạn thấy accordion được xây dựng ở đây.
Vì vậy, bạn thấy rằng thông tin của các nhà lãnh đạo doanh nghiệp đầu tiên được hiển thị ở đây.
Ba người còn lại bị sụp đổ trong thời điểm này.
Vì vậy, đó là lý do cho việc sử dụng plugin sụp đổ và cũng là lý do để chuyển
tên của nhà lãnh đạo công ty vào tiêu đề thẻ.
Thấy anh thấy nó sẽ được hiển thị như thế này trong đó.
Bây giờ, nhấp vào bất kỳ một trong số họ bây giờ bạn nhận thấy rằng khi bạn nhấp vào
rằng nội dung đó sẽ được tiết lộ nhưng ba còn lại được ẩn.
Vì vậy, đây là hành vi accordion ở đây.
Vì vậy, với điều này, chúng tôi hoàn thành bài tập này.
Đây là thời điểm tốt để bạn thực hiện một cam kết git với accordion tin nhắn..