Hướng dẫn bootstrap 5.1 display - màn hình bootstrap 5.1

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

Thay đổi giá trị của thuộc tính display với các lớp tiện ích hiển thị đáp ứng của chúng tôi. Chúng tôi cố tình hỗ trợ một tập hợp con của tất cả các giá trị có thể cho display. Các lớp học có thể được kết hợp cho 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 dừng, từ xs đến xxl, không có chữ viết tắt điểm dừng 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 truyền thông. Tuy nhiên, các điểm dừng còn lại bao gồm viết tắt điểm dừng.

Như vậy, các lớp được đặt tên bằng định dạng:

• <span class="d-block p-2 bg-primary text-white">d-blockspan>
  <span class="d-block p-2 bg-dark text-white">d-blockspan>

  0 cho xs

• <span class="d-block p-2 bg-primary text-white">d-blockspan>
  <span class="d-block p-2 bg-dark text-white">d-blockspan>

  2 cho

  <span class="d-block p-2 bg-primary text-white">d-blockspan>
  <span class="d-block p-2 bg-dark text-white">d-blockspan>

  3,

  <span class="d-block p-2 bg-primary text-white">d-blockspan>
  <span class="d-block p-2 bg-dark text-white">d-blockspan>

  4,

  <span class="d-block p-2 bg-primary text-white">d-blockspan>
  <span class="d-block p-2 bg-dark text-white">d-blockspan>

  5,

  <span class="d-block p-2 bg-primary text-white">d-blockspan>
  <span class="d-block p-2 bg-dark text-white">d-blockspan>

  6 và xxl.

Giá trị là một trong những:

• <span class="d-block p-2 bg-primary text-white">d-blockspan>
  <span class="d-block p-2 bg-dark text-white">d-blockspan>

  8

• <span class="d-block p-2 bg-primary text-white">d-blockspan>
  <span class="d-block p-2 bg-dark text-white">d-blockspan>

  9

• <div class="d-lg-none">hide on lg and wider screensdiv>
  <div class="d-none d-lg-block">hide on screens smaller than lgdiv>

  0

• <div class="d-lg-none">hide on lg and wider screensdiv>
  <div class="d-none d-lg-block">hide on screens smaller than lgdiv>

  1

• <div class="d-lg-none">hide on lg and wider screensdiv>
  <div class="d-none d-lg-block">hide on screens smaller than lgdiv>

  2

• <div class="d-lg-none">hide on lg and wider screensdiv>
  <div class="d-none d-lg-block">hide on screens smaller than lgdiv>

  3

• <div class="d-lg-none">hide on lg and wider screensdiv>
  <div class="d-none d-lg-block">hide on screens smaller than lgdiv>

  4

• <div class="d-lg-none">hide on lg and wider screensdiv>
  <div class="d-none d-lg-block">hide on screens smaller than lgdiv>

  5

• <div class="d-lg-none">hide on lg and wider screensdiv>
  <div class="d-none d-lg-block">hide on screens smaller than lgdiv>

  6

• <div class="d-lg-none">hide on lg and wider screensdiv>
  <div class="d-none d-lg-block">hide on screens smaller than lgdiv>

  7

Các giá trị hiển thị có thể được thay đổi bằng cách thay đổi biến

<div class="d-lg-none">hide on lg and wider screensdiv>
<div class="d-none d-lg-block">hide on screens smaller than lgdiv>

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 dừng đã cho hoặc lớn hơn. Ví dụ:

<div class="d-lg-none">hide on lg and wider screensdiv>
<div class="d-none d-lg-block">hide on screens smaller than lgdiv>

<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 printdiv>

<span class="d-block p-2 bg-primary text-white">d-blockspan>
<span class="d-block p-2 bg-dark text-white">d-blockspan>

<span class="d-block p-2 bg-primary text-white">d-blockspan>
<span class="d-block p-2 bg-dark text-white">d-blockspan>

Ví dụ

<div class="d-inline p-2 bg-primary text-white">d-inlinediv>
<div class="d-inline p-2 bg-dark text-white">d-inlinediv>

d-blockd-block d-block

<span class="d-block p-2 bg-primary text-white">d-blockspan>
<span class="d-block p-2 bg-dark text-white">d-blockspan>

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 yếu 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 đó ẩn các yếu tố có trách nhiệm cho từng kích thước màn hình.

Để ẩn các yếu tố chỉ cần sử dụng lớp

<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 printdiv>

<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 printdiv>

Để chỉ hiển thị một phần tử trên một khoảng thời gian nhất định có kích thước màn hình, bạn có thể kết hợp một lớp

<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 printdiv>

<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 printdiv>

<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 printdiv>

<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 printdiv>

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),
    

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),
    

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),
    

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),
    

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),
    

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),
    

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),
    

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),
    

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),
    

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),
    

Ẩn trên LG và màn hình rộng hơn

Ẩn trên màn hình nhỏ hơn LG

<div class="d-lg-none">hide on lg and wider screensdiv>
<div class="d-none d-lg-block">hide on screens smaller than lgdiv>

Hiển thị in

Thay đổi giá trị display của các phần tử khi in với các lớp tiện ích hiển thị in của chúng tôi. Bao gồm hỗ trợ cho cùng các giá trị display như các tiện ích display5 đáp ứng của chúng tôi.

• display6
• display7
• display8
• display9
• display0
• display1
• display2
• display3
• display4
• display5

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

Chỉ có màn hình (chỉ ẩn trên in)

Chỉ in (chỉ ẩn trên màn hình)

Ẩn lớn 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 printdiv>

Sass

API tiện ích

Các tiện ích hiển thị được khai báo trong API tiện ích của chúng tôi trong display6. Tìm hiểu cách sử dụng API Tiện ích.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),