Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Component Collapse và Dropdown Trong Bootstrap (Phần 10)

Component Collapse và Dropdown Trong Bootstrap (Phần 10)


Ngày 2 Tháng 4 Năm 2020

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu tiếp về các component collapse và dropdown trong Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!

Component Collapse:

Component collapse này giúp chúng ta thực hiện ẩn và hiện nội dung một cách dễ dàng mà không cần ghi bất cứ đoạn code Javascript nào cả, ví dụ như thông tin về sản phẩm của bạn quá nhiều làm ảnh hưởng đến thẩm mỹ của trang thì chúng ta có thể sử dụng component này để khi nào người dùng muốn xem thêm thông tin thì họ sẽ nhấn vào nút có liên kết với nội dung. Để hiểu hơn các bạn xem ví dụ dưới đây nhé:

Component Collapse:

See the Pen Component Collapse Bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ở ví dụ trên mình có một vài lưu ý nhỏ khi bạn sử dụng component này là:

  • Đối với nội dung cần hiển thị thì mình bắt buột phải đặt id và class collapse nhé.
  • Để liên kết nội dung với button thì mình bắt buộc phải có thuộc tính data-toggle="collapse"data-target="#id" với id là tên id của thẻ div chứa nội dung của bạn.

Ở ví dụ trên, ban đầu nội dung đã được ẩn đi vậy nếu bạn muốn hiển thị nội dung ngay khi trang vừa load thì chúng ta có thể sử dung class show trong the div class collapse. Để nắm rõ hơn bạn xem ví dụ dưới đây nhé:

Class show trong collapse:

See the Pen Class show Collapse by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ngoài ra bạn có thể sử dụng component với thẻ a và chỉ cần thay thuộc tính data-target="#id" bằng thuộc tính href="#id". Để hiểu rõ hơn hãy xem ví dụ dưới đây nhé:

Component collapse với thẻ a:

See the Pen a with collapse Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Trong Bootstrap cung cấp cho chúng ta một tiện ích là Accordion được kết hợp component card và collapse giúp chúng ta quản lý những nội dung trong trang web bằng thanh điều hướng. Để hiểu rõ hơn hãy cùng mình đi vào ví dụ cụ thể nhé:

Tiện ích Accordian:

See the Pen Accordian Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để xem rõ hơn bạn chuyển sang chế độ screen 0.5x, 0.25x trong Codepen nhé.

Component Dropdown:

Component Dropdown thường được sử dụng trong navbar dùng để gộp những liên kết có chung tính chất lại với nhau và chỉ hiển thị nếu người dùng nhấn vào component này. Để sử dụng được Dropwdown thì trong file HTML của bạn phải thêm một file js là Popper.js. Các bạn có thể gắn liên kết CDN trực tiếp như sau đây:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

Hoặc bạn có thể tải file Popper JS ở đây : Filr PopperJS. Sau đó bạn nhớ liên kết với file HTML và đặt nó nằm ở cuối cùng nhé.

Hay bạn cũng có thể xem trong ví dụ dưới đây nha mình đã để đầy đủ các đường dẫn bạn có thể copy về để sử dụng nhé.

Component Dropdown:

See the Pen Dropdown component by haycuoilennao19 (@haycuoilennao19) on CodePen.

Mình có một vài ý nhỏ trong component này là:

  • Để gọi component Dropdown thì mình sẽ gọi một thẻ div với class dropdown.
  • Trong thẻ div trên, chúng ta sẽ tạo một nút dùng để liên kết với các đường dẫn bằng thuộc tính data-toggle="dropdown" và class dropdown-toggle.
  • Trong component Dropdown thì ta sẽ tạo một thẻ div với class dropdown-menu và trong nó sẽ chứa thẻ a với class dropdown-item dùng chứa đường dẫn.

Màu Cho Component Dropdown:

Để các component Dropdown của mình thêm đẹp hơn thì chúng ta sẽ màu sắc cho nó bằng cách sử dụng class btn-(color) với color là các màu sắc mặc định trong Bootstrap như là primary, success... Để nắm rõ hơn bạn xem ví dụ dưới đây nhé:

See the Pen color-dropdown Bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu như trong một Dropdown menu mà chúng ta có hai nhóm đường dẫn có tính chất khác nhau thì có thể sử dụng class dropdown-divider để tạo đường viền ngăn cách giữa chúng. Để hiểu rõ hơn bạn xem ví dụ dưới đây nhé:

Class dropdown-divider:

See the Pen dropdown-divider Bootstrap 4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để thấy được hiệu ứng bạn nhấp vào dropdown menu nhé. Bước tiếp theo mình muốn giới thiệu với bạn là class dropdown-header dùng để đặt tiêu đề cho các nhóm đường dẫn giúp người dùng có thêm thông tin về những nhóm này. Để hiểu rõ hơn bạn xem ví dụ sau đây nha:

Class dropdown-header:

See the Pen dropdown-header by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thông thường ở ví dụ trên bạn sẽ thấy là dropdown menu có vị trị nằm bên dưới button. Ở đây Bootstrap cung cấp thêm cho chúng ta để điều chỉnh vị trí của component dropdown bằng class dropleft nằm bên trái, class dropright nằm bên phải và class dropup nằm phí trên button. Để nắm rõ hơn hãy cùng mình tìm hiểu thông qua ví dụ sau đây nhé:

Vị Trí Dropdown Menu:

See the Pen position of dropdown by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để xem được kết quả bạn chỉnh chế độ screen sang 0.5x, 0.25x trong Codepen nhé. Đối với class dropup thì bạn phải xóa class dropdown và thay thế bằng dropup trong thẻ div thì nó mới hoạt động nha. Tiếp theo là chúng ta sẽ tạo một nhóm button với hai button bình thường và 1 button là dropdown menu bằng cách sử dụng class btn-group. Để nắm rõ hơn hãy cùng mình đi vào ví dụ dưới đây nhé:

Class btn-group dropdown:

See the Pen btn-group dropdown Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Chúng ta cũng có thể chia button dropdown thành hai thành phần riêng biệt là button chứa chữ và button chứa icon liên kết với dropdown menu bằng cách sử dụng class dropdown-toggle-split. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

See the Pen dropdown-toggle-split by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bước cuối cùng là mình sẽ kết hợp component navbar và dropdown, ta sẽ thêm component dropdown vào trong thẻ div với class nav-item trong component navbar. Để nắm rõ hơn bạn xem ví dụ dưới nhé:

Kết hợp component dropdown và navbars:

See the Pen Kết hợp navbar và dropdown by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp các bạn nắm được thêm các component trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!