Thứ Năm, 19 tháng 3, 2015

Bootstrap - Ẩn/hiện nội dung

Author:  |   |  No Comments | 

Trong bài viết có quá nhiều nội dung, bạn muốn ẩn các thông tin chưa cần thiết để hiển thị tránh tình trạng làm rối mắt người xem. Bootstrap JS có một vài class hỗ trợ làm điều đó :
  • .collapse : ẩn nội dung
  • .collapse in : hiện nội dung
  • .collapsing : được thêm vào khi bắt đầu và xóa khi kết thúc
Trước khi sử dụng, bạn cần thêm các thư viện vào thẻ <head> để có thể chạy : 

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"></link>


Ví dụ : khi bắt đầu, nội dung được ẩn đi, còn nếu muốn hiển thị trước thì sửa .collapse thành .collapse in
    
     

Đây là nội dung.

Trong đoạn code trên, data-target="#demo" dùng để chỉ ra thẻ html nào có id="demo" sẽ bị tác động.

Chia từng phần

Trong trường hợp bạn muốn chia từng phần với nhiều nội dung khác nhau, bạn có thể dùng cách sau :

Phần 1

Nội dung 1.

Phần 2

Nội dung 2.

Phần 3

Nội dung 3.
Đây là code cho hiển thị trên : 




        
        Phần 1
      




Nội dung 1.






        
        Phần 2
      




Nội dung 2.






        
        Phần 3
      




Nội dung 3.




Đơn giản quá phải không, chỉ vài lệnh gọi class là bạn đã có thể ẩn hiện nội dung tùy thích, bạn có thể tham khảo các bài viết khác để tạo giao diện đẹp hơn, linh hoạt hơn.
Tham khảo

, ,

0 nhận xét:

Đăng nhận xét

Popular Posts

  • DISTINCT trong SQL
    Câu lệnh   SELECT   sẽ trả về thông tin về các cột trong bảng. Nhưng nếu chúng ta không muốn lấy về các giá trị trùng nhau thì sau? Với SQL,...
  • Bootstrap - Phân trang
    Nếu như bạn có một website với nhiều nội dung được hiển thị, khi đó cần phân trang cho các nội dung đó, tránh việc hiển thị quá nhiều nội du...
  • Bootstrap - Table
    Table trong bootstrap bao gồm một lớp đệm và một đường chỉ ngang để phân biệt giữa các dòng. Thêm .table vào bảng : Ví dụ : <...
  • Bootstrap - giới thiệu
    Bootstrap là các HTML, CSS và JS framework phổ biến nhất cho phát triển web. Nó được thiết kế cho bất cứ ai (chuyên hoặc không chuyên) và bấ...
  • Bootstrap - Button Groups
    Bootstrap cho phép ghép các nút khác nhau lại thành một nhóm như hình bên dưới : Sử dụng thẻ <div> và .btn-group để tạo một nhóm but...
  • Bootstrap - Ẩn/hiện nội dung
    Trong bài viết có quá nhiều nội dung, bạn muốn ẩn các thông tin chưa cần thiết để hiển thị tránh tình trạng làm rối mắt người xem. Bootstrap...
  • Hướng dẫn sửa lỗi USB
    Trong một thời gian lăn la, chiếc USB của bạn có thể do Virus hay format quá nhiều lần.....v.v... gây ra lỗi. Khi bị lỗi, chiếc USB của bạn ...
  • PHP - Cú pháp
    Basic PHP PHP script có thể được đặt ở bất cứ đâu trong file PHP script bắt đầu bằng <?php và kết thúc với ?> Ví dụ : <?php ec...
  • Hướng dẫn Backup Windows 8.1 bằng lệnh CMD
    Trong quá trình sử dụng, có thể do Virus mà hệ thống của bạn bị lỗi quá nặng, bạn cảm thấy chán nản và muốn cài lại windows. Việc cài lại th...
  • Tải file cài đặt windows dạng ISO nguyên gốc từ Microsoft
    Có rất nhiều bản cài đặt Windows riêng lẽ hiện nay, gây khó khăn cho các kỹ thuật viên khi phải mang theo bên mình nhiều bản cài như vậy. Ch...

Recent Posts

Unordered List

Text Widget

Được tạo bởi Blogger.