Source

Hiển thị tài sản

Chuyển đổi nhanh chóng và nhạy bén giá trị hiển thị của các thành phần và hơn thế nữa với các tiện ích hiển thị của chúng tôi. Bao gồm hỗ trợ cho một số giá trị phổ biến hơn, cũng như một số tính năng bổ sung để kiểm soát hiển thị khi in.

Làm thế nào nó hoạt động

Thay đổi giá trị của thuộc displaytính bằng các lớp tiện ích hiển thị đáp ứng của chúng tôi. Chúng tôi cố ý chỉ hỗ trợ một tập hợp con của tất cả các giá trị có thể có cho display. Các lớp có thể được kết hợp để tạo ra các hiệu ứng khác nhau khi bạn cần.

Ký hiệu

Hiển thị các lớp tiện ích áp dụng cho tất cả các điểm ngắt , từ xsđến xl, không có chữ viết tắt điểm ngắt trong chúng. Điều này là do các lớp đó được áp dụng từ min-width: 0;trở lên và do đó không bị ràng buộc bởi một truy vấn phương tiện. Tuy nhiên, các điểm ngắt còn lại bao gồm chữ viết tắt của điểm ngắt.

Do đó, các lớp được đặt tên bằng cách sử dụng định dạng:

  • .d-{value}vìxs
  • .d-{breakpoint}-{value}cho sm, và . md_lgxl

Trong đó giá trị là một trong:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

Các truy vấn phương tiện ảnh hưởng đến chiều rộng màn hình với điểm ngắt đã cho hoặc lớn hơn . Ví dụ: .d-lg-nonebộ display: none;trên cả hai lgvà xlmàn hình.

Các ví dụ

d-inline
d-inline 
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
khối d khối d 
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

Các yếu tố ẩn

Để phát triển thân thiện với thiết bị di động nhanh hơn, hãy sử dụng các lớp hiển thị đáp ứng để hiển thị và ẩn các phần tử theo thiết bị. Tránh tạo các phiên bản hoàn toàn khác nhau của cùng một trang web, thay vào đó hãy ẩn các phần tử một cách thích ứng cho từng kích thước màn hình.

Để ẩn các phần tử, chỉ cần sử dụng .d-nonelớp hoặc một trong các .d-{sm,md,lg,xl}-nonelớp cho bất kỳ biến thể màn hình đáp ứng nào.

Để chỉ hiển thị một phần tử trên một khoảng kích thước màn hình nhất định, bạn có thể kết hợp một .d-*-nonelớp với một .d-*-*lớp, ví dụ: .d-none .d-md-block .d-xl-nonesẽ ẩn phần tử cho tất cả các kích thước màn hình ngoại trừ trên các thiết bị vừa và lớn.

Kích thước màn hình Lớp
Ẩn trên tất cả .d-none
Chỉ ẩn trên xs .d-none .d-sm-block
Chỉ ẩn trên sm .d-sm-none .d-md-block
Chỉ ẩn trên md .d-md-none .d-lg-block
Chỉ ẩn trên lg .d-lg-none .d-xl-block
Chỉ ẩn trên xl .d-xl-none
Hiển thị trên tất cả .d-block
Chỉ hiển thị trên xs .d-block .d-sm-none
Chỉ hiển thị trên sm .d-none .d-sm-block .d-md-none
Chỉ hiển thị trên md .d-none .d-md-block .d-lg-none
Chỉ hiển thị trên lg .d-none .d-lg-block .d-xl-none
Chỉ hiển thị trên xl .d-none .d-xl-block
hide on screens wider than lg
ẩn trên màn hình nhỏ hơn lg 
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

Hiển thị trong bản in

Thay đổi displaygiá trị của các phần tử khi in bằng các lớp tiện ích hiển thị in của chúng tôi. Bao gồm hỗ trợ cho các displaygiá trị tương tự như các .d-*tiện ích đáp ứng của chúng tôi.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

Các lớp in và hiển thị có thể được kết hợp.

Chỉ màn hình (Chỉ ẩn khi in)
Print Only (Hide on screen only)
Ẩn tối đa trên màn hình, nhưng luôn hiển thị trên bản in 
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>