Hướng dẫn what is d block bootstrap? - d block bootstrap là gì?

Chuyển đổi nhanh chóng và có trách nhiệm giá trị hiển thị của các thành phần và nhiều hơn 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 màn hình khi in.

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 xl, 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:

  • .d-{value} cho xs
  • <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>
    1 cho
    <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>
    2,
    <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>
    3,
    <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>
    4 và xl.

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

  • <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>
    6
  • <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>
    7
  • <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>
    8
  • <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>
    9
  • <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>
    0
  • <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>
    1
  • <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>
    2
  • <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>
    3
  • <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>
    4

Độ rộng màn hình Hiệu ứng Truy vấn phương tiện với điểm dừng đã cho hoặc lớn hơn. Ví dụ:

<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>
5 đặt
<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>
6 trên cả màn hình
<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>
4 và xl.

Ví dụ

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

d-blockd-block d-block

<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 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 phần 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-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
9 hoặc một trong các 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 print</div>
0 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 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 print</div>
1 với 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 print</div>
2, ví dụ
<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>
3 sẽ ẩ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ị trung bình và lớn.

Kích thước màn hìnhLớp
Ẩn trên tất cả
<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>
9
Chỉ ẩn trên xs
<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>
5
Chỉ ẩn trên SM
<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>
6
Chỉ ẩn trên MD
<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>
7
Chỉ ẩn trên LG
<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>
8
Chỉ ẩn trên XL
<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>
9
Có thể nhìn thấy trên tất cảdisplay0
Chỉ nhìn thấy trên xsdisplay1
Chỉ có thể nhìn thấy trên SMdisplay2
Chỉ có thể nhìn thấy trên MDdisplay3
Chỉ nhìn thấy trên LGdisplay4
Chỉ nhìn thấy trên XLdisplay5

Ẩn trên màn hình rộng hơn 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ị 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 display8 đáp ứng của chúng tôi.

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

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 print</div>

D

D-Block,.D-Rine, hoặc.D-inline-Block để chỉ cần đặt thuộc tính hiển thị của một phần tử thành khối, nội tuyến hoặc khối nội tuyến (tương ứng).Để tạo một màn hình phần tử: Không có, hãy sử dụng các tiện ích đáp ứng của chúng tôi thay thế.set an element's display property to block , inline , or inline-block (respectively). To make an element display: none , use our responsive utilities instead.

Lớp D là gì

Lớp D-Block trong Bootstrap để tạo phần tử khối.Lớp D-Block được đặt như thể hiện trong đoạn mã dưới đây-Khối bạn có thể thử chạy mã sau để triển khai lớp D-Block-to create block element. The d-block class is set as shown in the below code snippet − block You can try to run the following code to implement the d-block class −

D là gì

Sử dụng lớp D-Inline-Block để tạo khối nội tuyến hiển thị phần tử.Sử dụng bất kỳ lớp D-*-nội tuyến nào để kiểm soát khi phần tử phải là khối nội tuyến trên một chiều rộng màn hình cụ thể.Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng.. Use any of the d-*-inline-block classes to control WHEN the element should be inline block on a specific screen width. Resize the browser window to see the effect.

D Grid trong bootstrap là gì?

"D-" là loại tiện ích cho bootstrap có hiệu ứng trực tiếp khi hiển thị và giúp bạn có bố cục lưới.Trong CSS, chúng tôi gọi đó là "hiển thị".kind of utilities for Bootstrap that effect on Display directly and help you to have Grid Layout. In Css we call that "Display".