Thu gọn html

Tất cả các bài viết. Bootstrap

  • Thu gọn html
  • Thu gọn html
  • Thu gọn html
  • Thu gọn html
  • Thu gọn html
  • Thu gọn html
    • Thu gọn html

    Hướng dẫn cách tạo Collapsible Menu bằng Bootstrap Hướng dẫn cách tạo Collapsible Menu bằng Bootstrap
    Xem  demo Tải Code Chat với hocwebgiare. com

      Thẻ.
    • Menu có thể thu gọn
    • Cách tạo Menu có thể thu gọn
    • Cách tạo menu
    • Bootstrap
    • trình đơn khởi động
    • JQUERY

    Bootstrap    Xem (3134)   Học thiết kế web

    Bạn có thể sử dụng plugin JavaScript Bootstrap sụp đổ để dễ dàng hiển thị và ẩn (hoặc mở rộng và thu gọn) các phần tử cụ thể trên một trang web

    Các nút và liên kết (tức là các phần tử và

    0) thường được sử dụng để kích hoạt chương trình được ánh xạ tới các phần tử bạn muốn chuyển đổi

    Mở rộng và thu gọn các phần tử thông qua thuộc tính dữ liệu

    Bạn có thể hiển thị và ẩn các phần tử trong Bootstrap bằng cách nhấp vào nút hoặc liên kết thông qua các thuộc tính dữ liệu mà không cần viết bất kỳ mã JavaScript nào. Hãy thử một ví dụ và xem nó thực sự hoạt động như thế nào

    
    Toggle Element
    
    1

    2

    Chúng tôi vừa tạo một bộ điều khiển có thể thu gọn mà không cần viết bất kỳ mã JavaScript nào. Chà, chúng ta hãy lần lượt xem qua từng phần của đoạn mã này để hiểu rõ hơn

    Giải thích mã

    Về cơ bản, plugin Bootstrap crash yêu cầu hai phần tử hoạt động bình thường - nút phần tử kích hoạt như hoặc siêu liên kết và bản thân phần tử có thể thu gọn

    • Thuộc tính
      3 được bổ sung vào phần tử kích hoạt hoặc bộ điều khiển tương tự với một thuộc tính
      4 (đối với các nút) hoặc
      5 (đối với các siêu liên kết) để tự động gán quyền kiểm tra một hoặc nhiều phần tử có thể thu
    • Thuộc tính
      4 hoặc
      5 chấp nhận một bộ chọn CSS (không giới hạn như bộ chọn id
      8 trong ví dụ của chúng tôi) để áp dụng thu gọn cho một phần tử có thể
    • Lớp
      9 được thêm vào phần tử có thể thu gọn (dòng số 6)
    • Bạn có thể tùy chọn thêm lớp
      0 (dòng số 6) vào phần tử có thể thu gọn bên ngoài lớp
      9 để làm cho nó mở theo mặc định

    Để làm cho các điều khiển có thể thu gọn hoạt động theo nhóm như menu accordion, bạn có thể sử dụng thành phần thẻ Bootstrap. Xem hướng dẫn về đàn accordion Bootstrap để tìm hiểu thêm về nó

    Mở rộng và thu gọn các phần tử thông qua JavaScript

    Bạn cũng có thể mở rộng và thu gọn các phần tử theo cách thủ công thông qua JavaScript - chỉ cần gọi phương thức

    2 với  bộ chọn
    3 hoặc
    4 của phần tử có thể thu gọn

    Các tùy chọn của sự sụp đổ Bootstrap

    Có một số tùy chọn nhất định có thể được truyền cho phương thức

    2 để tùy chỉnh chức năng của phần tử có thể thu gọn

    TênKiểuGiá trị mặc địnhMô tảparentselectorfalseTất cả các phần tử có thể thu gọn khác trong phần tử gốc được chỉ định sẽ bị đóng trong khi mục có thể thu gọn này được hiển thị trên lệnh gọi. togglebooleantrueChuyển đổi phần tử có thể thu gọn khi gọi

    Bạn có thể đặt các tùy chọn này bằng cách sử dụng các thuộc tính dữ liệu trên đàn accordion - chỉ cần thêm tên tùy chọn vào

    6 như
    7,
    8

    Các phương thức của sự sụp đổ Bootstrap

    Đây là phương thức tiêu chuẩn của sự sụp đổ bootstrap

    Tùy chọn cách thức truyền thông

    Bạn có thể truyền các tùy chọn để thu gọn sử dụng các tùy chọn đối tượng

    Trong ví dụ sau, việc hiển thị phần tử có thể thu gọn sẽ không thể, do tùy chọn

    9 cho phép phần tử có thể thu gọn được đặt thành
    0

    chuyển đổi

    Phương thức này bật / tắt (hiển thị hoặc ẩn) một phần tử có thể thu gọn

    buổi bieu diễn

    Phương thức này hiển thị một phần tử có thể thu gọn

    ẩn giấu

    Phương thức này ẩn một phần tử có thể thu gọn

    vứt bỏ

    Phương thức này hủy phần tử thu gọn (tức là loại bỏ dữ liệu được lưu trữ trên phần tử DOM)

    getInstance

    Đây là một phương thức tĩnh cho phép bạn lấy ví dụ về sự sụp đổ được liên kết với một phần tử DOM

    getOrCreateInstance

    Đây là một phương thức tĩnh cho phép bạn lấy ví dụ của sự sụp đổ được liên kết với phần tử DOM hoặc tạo một bản mới trong trường hợp bản thu gọn không được khởi chạy

    mẹo. Các phương thức tĩnh không thể được gọi trên các trường hợp của lớp (tức là các đối tượng). We are call from the class. Từ khóa
    1 được sử dụng để định nghĩa một phương thức tĩnh cho một lớp

    Các sự kiện của Bootstrap Collapse

    Sụp đổ lớp của Bootstrap bao gồm một số sự kiện để kết nối vào chức năng thu gọn

    Sự kiện Mô tả hiển thị. bs. crash Sự kiện này kích hoạt ngay lập tức khi phương tiện

    2 được gọi. cho xem. bs. crash Sự kiện này được kích hoạt khi một phần tử thu gọn được hiển thị cho người dùng. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi được kích hoạt. ẩn giấu. bs. crash Sự kiện này được kích hoạt ngay lập tức khi phương thức
    3 được gọi. ẩn giấu. bs. crash Sự kiện này được kích hoạt khi một phần tử thu gọn đã bị ẩn khỏi người dùng. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi được kích hoạt

    Ví dụ sau đây hiển thị thông báo cảnh báo cho người dùng khi quá trình chuyển đổi của phần tử có thể thu gọn đã hoàn tất