Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)

Bootstrap Collapse

4.6/5 - (10 bình chọn)

Chào các bạn! Hôm nay, chúng ta sẽ tiếp tục series bài học bootstrap. Trong bài trước chúng ta đã cùng nhau tìm hiểu về Bootstrap Dropdown, cách làm menu xổ xuống chuyên nghiệp và đẹp mắt.

Xem thêm: Bootstrap Dropdowns

Đó là với các danh mục trong menu, với nội dung thì sao? Bạn có nhiều danh mục, trong mỗi danh mục lại có phần nội dung dài và bạn muốn chúng đều được hiển thị ở một trang nào đó mà không làm ảnh hưởng đến bố cục của trang. Hay làm thế nào để hiển thị/ẩn một bảng, danh mục nội dung?

Trong bài này, chúng ta sẽ cùng nhau tìm hiểu cách giúp bạn thực hiện và tối ưu những mong muốn trên.

  1. Collapsible

Collapsible rất hữu ích trong việc giúp bạn ẩn hiển một lượng lớn nội dung mà không làm ảnh hưởng đến bố cục trang.

Bootstrap Collapse 1-1

Giải thích ví dụ trên:

  • Lớp .collapse được đặt ở phần tử<div> chứa nội dung. Nó cho biết một phần tử đóng lại hoặc hiển thị ra. Phần nội dung sẽ được hiển thị hoặc ẩn bằng một nút bấm.
  • Để kiểm soát hiển thị/ẩn nội dung, thêm thuộc tính data-toggle=“collapse” vào một phần tử <a> hoặc một phần tử <button> (Trong ví dụ trên mình thêm vào phần tử <button>). Sau đó, thêm thuộc tính data-target=“#id” để kết nối với nút có nội dung thu gọn (Trong ví dụ trên: id=“demo”).

Lưu ý: Với phần tử <a> bạn có thể sử dụng thuộc tính href thay cho thuộc tính data-target.

Theo mặc định phần nội dung được ẩn đi. Tuy nhiên, bạn có thể để phần nội dung mặc định là hiển thị bằng cách thêm lớp .in vào phần tử <div> chứa lớp .collapse.

Bootstrap Collapse 2-1

Xem Thêm: Bootstrap table Bảng Bootstrap

  1. Collapsible Panel

Collapsible Panel cách hiển thị/ẩn một bảng

Bootstrap Collapse 3-1

Để mặc định hiển thị thì tương tự như phần trên bạn chỉ cần thêm lớp .in vào phần tử <div> chứa lớp .collapse.

  1. Collapsible List Group – Nhóm danh sách thu gọn

Collapsible List Group cách hiển thị một nhóm danh sách. Cách hiển thị này thường được sử dụng để hiển thị ra danh mục sản phẩm, trong mỗi mục sản phẩm lại có các danh mục con.

Bootstrap Collapse 4-1

Xem Thêm: Bootstrap Form – Biểu mẫu Bootstrap

  1. Tùy chỉnh hiển thị/thu gọn nội dung

Nếu để ý thì trong các phần trên bạn sẽ thấy phần nội dung, bảng, nhóm danh sách sẽ được hiển thị/ẩn tất cả khi bạn nhấp chuột vào nút. Đặt vấn đề nếu bạn muốn tạo ra nhiều nút thì sao? Thì bạn chỉ cần tạo ra nhiều mục như trên là xong phải không nào? Đó là một cách nhưng chưa thực sự tối ưu vì khi muốn mở mục dưới bạn phải đóng mục trên lại để thu gọn trang.

Bootstrap Collapse 5-1-1024x543

Sử dụng thuộc tính data-parent để đảm bảo rằng tất cả các phần tử thu gọn bên dưới được mặc định sẽ bị đóng khi một trong các mục đóng được hiển thị ra.

Với phần tử <div> có id=“collapse1” mình thêm lớp .in nên nó mặc định được hiển thị.

Tổng kết

Qua bài trên bạn đã biết cách hiển thị/ẩn nội dung, bảng và các danh mục. Bạn cần nắm rõ các lớp, thuộc tính nào có tác dụng giúp hiển thị/ẩn nội dung để từ đó tùy biến phần hiển thị theo mong muốn của mình. Theo kinh nghiệm cá nhân mình thì phần bài này rất hay được sử dụng trong các theme có bố cục lớn, nó sẽ giúp bạn tiết kiệm không gian của chủ đề để bố trí những mục khác.

Xem Thêm: Dịch vụ thiết kế website

Tin mới nhất

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Giới thiệu cách tự thêm ảnh tiêu biểu trong bài viết vào theme mặc định của WordPress AMP cho những...
    12 giây trước
  2. Tối ưu hóa doanh thu cho trang web di động Ngày nay 21% người dùng trên toàn cầu chỉ sử...
    8 giây trước
  3. Với mỗi SEOer các công cụ hay các phần mềm SEO là điều không thể thiếu trong quá trình làm...
    30 giây trước
  4. Ngày nay, đi đôi với sự phát triển khoa học công nghệ hiện đại, vấn đề tiết kiệm năng lượng...
    7 giây trước
  5. Google SERP (Kết quả Trang Công cụ Tìm kiếm) đã trở thành một môi trường cực kỳ năng động trong...
    30 giây trước
  6. Hôm nay là đúng vào dịp nghỉ lễ, người người vui vẻ, nô nức đi mua sắm, vui chơi khiến...
    19 giây trước
  7. Có thể kiếm được 100.000 đô la một năm từ Google AdSense (hoặc bằng cách bán quảng cáo trên trang web hoặc...
    17 giây trước
  8. Hình ảnh luôn là công cụ khiến bài viết của chúng ta trở nên sinh động hơn, AutoDraw phần mềm...
    16 giây trước
  9. Xin chào tất cả các bạn, hôm nay chúng ta gặp lại nhau trong loạt bài hướng dẫn lập trình...
    19 giây trước
  10. Ở bài viết trước chúng ta đã hiểu về SEO , hiểu khái niệm “như thế nào là SEO “...
    19 giây trước