[MUSIC]
Bây giờ chúng ta hãy nói về một plugin rất hữu ích trong Bootstrap được gọi là Collapse.
Chúng tôi đã thấy ứng dụng của nó trong thanh điều hướng trước đó.
Chúng tôi sẽ xem lại mã đó và xem nhanh nó một cách chi tiết hơn.
Một thành phần liên quan được gọi là Accordion.
Accordion sử dụng plugin Collapse cho hoạt động của nó.
Và chúng ta sẽ thấy rằng chi tiết trong bài tập sau.
Plugin Thu gọn cung cấp một cách dễ dàng để tiết lộ và
ẩn nội dung trên trang web của bạn.
Việc tiết lộ và ẩn nội dung này thường được kích hoạt
bởi người dùng nhấp vào một nút hoặc một liên kết trong trang web của bạn.
Bây giờ bạn sẽ thấy nhiều nơi mà loại
hành vi thu gọn được tận dụng rất tốt để hiển thị nội dung.
Chúng tôi sẽ xem lại navbar của chúng tôi để xem plugin Thu gọn trong hành động, và
sau đó chúng tôi cũng sẽ thấy một ví dụ Accordion tiếp theo.
Quay trở lại trang web của chúng tôi, bạn sẽ nhớ lại rằng khi chúng tôi tạo ra navbar
trong trang web của chúng tôi cho màn hình cực nhỏ, navbar đã bị sụp đổ và
sau đó nó đã được tiết lộ khi chúng tôi nhấp vào nút ở đây.
Bây giờ đây là một ví dụ về việc sử dụng plugin Thu gọn ở đây.
Khi chúng ta nhìn vào mã, chúng ta sẽ thấy rằng chúng ta thực sự áp dụng plugin Thu gọn để
div có chứa thanh điều hướng này.
Hãy nhìn vào mã cho
thanh điều hướng của chúng tôi mà chúng tôi thiết kế trước đó, bạn đã thấy rằng trong đây,
bên trong container, chúng tôi tạo ra nút này được hiển
thị cho kích thước màn hình cực nhỏ bằng cách sử dụng lớp navbar-toggle.
Nhìn vào div mà sau nút này ở đây.
Đối với div sau nút này, chúng tôi đã sử dụng lớp sụp đổ.
Vì vậy, đây là việc sử dụng plugin Collapse trong navbar của chúng tôi.
Vì vậy, những gì điều này tạo ra là nội dung đặc biệt này,
navbar của chúng tôi được bao bọc bên trong div này, sẽ được thu gọn cho
kích thước màn hình cực nhỏ.
Và sau đó cùng với plugin Thu gọn, nút này xuất hiện
ở đó sẽ kích hoạt hiển thị và ẩn của navbar này ở đây.
Đó là lý do tại sao khi bạn nhìn vào nút, bạn sẽ thấy rằng ngay tại đó,
chúng tôi cung cấp các thuộc tính chuyển đổi dữ liệu với sự sụp đổ ở đây,
và sau đó là mục tiêu dữ liệu là #Navbar ở đây.
Và lưu ý rằng id cho div này mà chúng tôi áp dụng ở đây là Navbar.
Vì vậy, chúng tôi đang xác định về cơ bản rằng nút này sẽ hoạt động như cơ
chế kích hoạt cho plugin sụp đổ này để làm việc trên div này ở đây.
Vì vậy, đây là việc sử dụng plugin Thu gọn trong trang web của bạn.
Ngoài ra, chúng ta sẽ xem xét các thành phần khác, đó là Accordion trong Bootstrap.
Một Accordion cư xử như thế nào?
Vì vậy, đây là một ví dụ về một Accordion mà chúng ta sẽ xây dựng trong bài tập
sau đó.
Vì vậy, ở đây, bạn sẽ thấy rằng tôi đã thay thế điều hướng tab mà chúng tôi
đã làm trong bài tập trước đó bằng cách sử dụng một Accordion ở đây.
Cách hoạt động của Accordion là một phần nội dung được tiết lộ và
ba phần còn lại được ẩn đi.
Vì vậy, điều này sử dụng plugin Thu gọn cho mục đích này.
Vì vậy, khi bạn nhấp vào bất kỳ một trong những tên của lãnh đạo công ty khác,
sau đó chi tiết của lãnh đạo công ty đó được tiết lộ và
ba người còn lại bị giấu đi.
Vậy đây là hành vi của Accordion ở đây.
Nếu bạn đã quen thuộc với một accordion,
nhạc cụ, bạn biết làm thế nào các bellows của accordion hoạt động.
Vì vậy, theo một ý nghĩa nào đó, đây là hành xử giống như ống thổi của đàn accordion.
Vì vậy, đó là lý do tại sao thành phần này được gọi là một Accordion trong Bootstrap.
Một ví dụ nữa về plugin Thu gọn đang được sử dụng là trên trang web khóa học của riêng bạn.
Vì vậy, nếu bạn vào trang web khóa học của bạn, và
sau đó bạn đi vào nội dung của trang web khóa học của bạn và
bắt đầu xem nội dung ở đây, bạn sẽ nhận thấy rằng ở phía bên trái,
bạn có một điều hướng đi vào hình ảnh ở phía bên trái.
Vì vậy, đây là điều hướng ở đó.
Vì vậy, khi bạn nhấp vào mỗi một trong số họ, bạn nhận thấy nội dung ở đây
được ẩn và tiết lộ như thế nào bằng cách nhấp vào mỗi liên kết ở đó.
Vì vậy, điều này giống như plugin Collapse mà chúng tôi đã thấy trong Bootstrap.
Mặc dù, tất nhiên, trang Coursera thực sự không sử dụng Bootstrap.
Chúng tôi sẽ chuyển sang bài tập tiếp theo, nơi chúng tôi sẽ thấy cách chúng tôi xây dựng
Accordion để hiển thị thông tin lãnh đạo công ty của chúng tôi.
[ NHẠC]