Đó là tất cả các lớp có thể nhìn thấy trong bootstrap?

Gần đây, các lớp khả năng hiển thị phản hồi của Bootstrap 4 Beta đã thay đổi và bạn sẽ không còn tìm thấy các lớp hidden-* và visible-* từ các phiên bản Bootstrap cũ hơn

Khả năng hiển thị đáp ứng là gì?

Có nhiều trường hợp sử dụng để hiển thị đáp ứng các yếu tố. Bạn có thể muốn chỉ hiển thị một phần tử trên màn hình máy tính để bàn hoặc chỉ ẩn một phần tử trên điện thoại và máy tính bảng hoặc hiển thị một phần tử trong phạm vi cổng xem chẳng hạn như máy tính bảng

Hiểu về Bootstrap 4 tầng

Để hiểu cách thức hoạt động của tính năng này, trước tiên bạn cần hiểu 5 tầng hiển thị của Bootstrap 4 hoặc “điểm dừng”…

// Extra small devices (portrait phones, less than 576px)
default (max-width: 575px)

// Small devices (landscape phones, 576px and up)
(sm) small (min-width: 576px) and (max-width: 767px)
 
// Medium devices (tablets, 768px and up)
(md) medium (min-width: 768px) and (max-width: 991px) 

// Large devices (desktops, 992px and up)
(lg) large (min-width: 992px) and (max-width: 1199px) 

// Extra large devices (large desktops, 1200px and up)
(xl)

Bootstrap 4 Hiển thị đáp ứng

Nếu bạn muốn ẩn một phần tử trên các bậc cụ thể (điểm ngắt) trong Bootstrap 4, hãy sử dụng các lớp hiển thị `d-*` tương ứng

Hãy nhớ điểm cực nhỏ (trước đây được chỉ định là `xs`) là điểm dừng mặc định, luôn được ngụ ý trừ khi bị điểm ngắt lớn hơn ghi đè. Vì xs là mặc định nên không cần sử dụng tiền tố `-xs-`. Ví dụ, nó không phải là d-xs-none, nó chỉ đơn giản là d-none

Đây là ma trận đầy đủ về khả năng hiển thị phản hồi của Bootstrap 4 cho biết cách ẩn hoặc hiển thị trên một bậc điểm ngắt duy nhất hoặc trên một loạt các điểm ngắt…

chuyển đổi từ 3. x hoặc 4 Alpha đến Bootstrap 4 Beta

Đây là danh sách đầy đủ các thay đổi mà bạn có thể thực hiện để hoán đổi các lớp hidden-* và visible-* không dùng nữa…

* `hidden-xs-down` = `d-none d-sm-block`
* `hidden-sm-down` = `d-none d-md-
* `hidden-md-down` = `d-none d-lg-block`
* `hidden-lg-down` = `d-none d-xl-block`
* `hidden-xl-down` = `d-none` (always hidden)
* `hidden-xs-up` = `d-none` (always hidden)
* `hidden-sm-up` = `d-sm-none`
* `hidden-md-up` = `d-md-none`
* `hidden-lg-up` = `d-lg-none`
* `hidden-xl-up` = `d-xl-none`
* `hidden-xs` (only) = `d-none d-sm-block` (same as `hidden-xs-down`)
* `hidden-sm` (only) = `d-block d-sm-none d-md-block`
* `hidden-md` (only) = `d-block d-md-none d-lg-block`
* `hidden-lg` (only) = `d-block d-lg-none d-xl-block`
* `hidden-xl` (only) = `d-block d-xl-none`
* `visible-xs` (only) = `d-block d-sm-none`
* `visible-sm` (only) = `d-none d-sm-block d-md-none`
* `visible-md` (only) = `d-none d-md-block d-lg-none`
* `visible-lg` (only) = `d-none d-lg-block d-xl-none`
* `visible-xl` (only) = `d-none d-xl-block`

Hãy nhớ rằng, d-*-block thêm display:block cho chế độ xem đó, nhưng điều này có thể được thay thế bằng bất kỳ thuộc tính hiển thị CSS nào, chẳng hạn như d-table-cell, hidden-*0,_______11, v.v. tùy thuộc vào kiểu hiển thị của phần tử

Khả năng hiển thị của các phần tử trong bootstrap với các ví dụ

Cải thiện bài viết

Lưu bài viết

Thích bài viết

• Độ khó. Trung bình
• Cập nhật lần cuối. 22 tháng 9 năm 2021

Cải thiện bài viết

Lưu bài viết

Có một số trường hợp cần ẩn một số nội dung trên trang web mà không ảnh hưởng đến bố cục của trang. Bootstrap sử dụng thuộc tính khả năng hiển thị của CSS và cung cấp hai lớp có thể nhìn thấy và không nhìn thấy được để kiểm soát khả năng hiển thị của một phần tử trên trang web.
Các lớp này không ảnh hưởng đến bố cục. e. các phần tử vô hình sẽ vẫn chiếm không gian trong bố cục. Nội dung sẽ bị ẩn cả về mặt trực quan và đối với trình đọc màn hình.
lớp vô hình 
Lớp bootstrap này dùng để ẩn phần tử khỏi trang. Trong chương trình dưới đây, tiêu đề h2 “Hướng dẫn Bootstrap” được ẩn bằng cách sử dụng lớp này. Về cơ bản, lớp này sử dụng thuộc tính khả năng hiển thị của CSS và đặt giá trị của nó thành ẩn. Mặc dù tiêu đề Hướng dẫn Bootstrap ẩn đi nhưng nó vẫn chiếm dung lượng trong bố cục.
 

HTML

hidden-*2

hidden-*3____14hidden-*5

hidden-*3____17hidden-*5

hidden-*9hidden-*3visible-*1______130visible-*1hidden-*5

hidden-*9

hidden-*9hidden-*35

hidden-*9hidden-*3hidden-*38 hidden-*39hidden-*40

hidden-*9hidden-*42hidden-*5

hidden-*9hidden-*45____138hidden-*5

hidden-*9

hidden-*9hidden-*50

hidden-*9hidden-*3hidden-*53 hidden-*54hidden-*40hidden-*56

hidden-*57hidden-*58hidden-*40hidden-*30 hidden-*31

hidden-*9hidden-*3hidden-*38 hidden-*39hidden-*40

hidden-*9hidden-*38____15

hidden-*9hidden-*45____138hidden-*5

hidden-*45____17____15

hidden-*3____178____15

hidden-*50hidden-*3____152 hidden-*53hidden-*40hidden-*55hidden-*5

hidden-*57hidden-*3____152 hidden-*53hidden-*40hidden-*92hidden-*5

hidden-*94

________ 195 ________ 196

hidden-*95hidden-*3_______199 hidden-*53hidden-*40hidden-*32hidden-*33hidden-*99hidden-*35

hidden-*95

hidden-*95

hidden-*3____139hidden-*5

visible-*11visible-*12

visible-*11visible-*14

visible-*11visible-*16

hidden-*95hidden-*45hidden-*39hidden-*5

hidden-*57hidden-*45____152hidden-*5

hidden-*57

hidden-*57

hidden-*3____139hidden-*309hidden-*39hidden-*5

hidden-*57

hidden-*57

hidden-*3____139hidden-*316hidden-*39hidden-*5

hidden-*57

hidden-*50hidden-*45hidden-*52hidden-*5

hidden-*45hidden-*78hidden-*5

hidden-*45hidden-*4hidden-*5

Đầu ra.
 

lớp hiển thị 
Lớp bootstrap này được sử dụng để hiện phần tử ẩn khỏi trang. Trong chương trình bên dưới, tiêu đề h2 “Hướng dẫn Bootstrap” được hiển thị bằng cách sử dụng lớp này. Về cơ bản, lớp này sử dụng thuộc tính khả năng hiển thị của CSS và đặt giá trị của nó thành hiển thị.
Lớp có thể nhìn thấy không có tác dụng trong ví dụ bên dưới vì các phần tử được hiển thị theo mặc định, nhưng lớp này có thể hữu ích khi một phần tử không nhìn thấy trước đó được hiển thị. lập trình.
 

HTML

hidden-*2

hidden-*3____14hidden-*5

hidden-*3____17hidden-*5

hidden-*9hidden-*3visible-*1______130visible-*1hidden-*5

hidden-*9

hidden-*9hidden-*35

hidden-*9hidden-*3hidden-*38 hidden-*39hidden-*40

hidden-*9hidden-*42hidden-*5

hidden-*9hidden-*45____138hidden-*5

hidden-*9

hidden-*9____1360

hidden-*9hidden-*3hidden-*53 hidden-*54hidden-*40hidden-*56

hidden-*50hidden-*58hidden-*40hidden-*30hidden-*5

hidden-*9hidden-*3hidden-*38 hidden-*39hidden-*40

hidden-*9hidden-*38____15

hidden-*9hidden-*45____138hidden-*5

hidden-*45____17____15

hidden-*3____178____15

hidden-*50hidden-*3____152 hidden-*53hidden-*40hidden-*55hidden-*5

hidden-*57hidden-*3____152 hidden-*53hidden-*40hidden-*92hidden-*5

hidden-*94

hidden-*95hidden-*406

hidden-*95hidden-*3_______199 hidden-*53hidden-*40hidden-*412hidden-*30hidden-*99hidden-*415

hidden-*94

hidden-*95

hidden-*3____139hidden-*5

visible-*11____1422

visible-*11____1424

visible-*11visible-*16

hidden-*95hidden-*45hidden-*39hidden-*5

hidden-*95

hidden-*57hidden-*45____152hidden-*5

hidden-*57

hidden-*57

hidden-*3____139hidden-*309hidden-*39hidden-*5

hidden-*57

hidden-*57

hidden-*3____139hidden-*316hidden-*39hidden-*5

hidden-*50

hidden-*57

hidden-*50hidden-*45hidden-*52hidden-*5

hidden-*45hidden-*78hidden-*5

hidden-*45hidden-*4hidden-*5

Đầu ra.
 

Điểm quan trọng.
 

• Các lớp Bootstrap có thể nhìn thấy và không nhìn thấy được sử dụng thuộc tính khả năng hiển thị của CSS để ẩn và bỏ ẩn các phần tử
• Các phần tử bị ẩn sẽ vẫn chiếm dung lượng trên bố cục. Lớp này chỉ ẩn và phần tử và không xóa nó
• Các lớp này không ảnh hưởng hoặc sử dụng thuộc tính hiển thị của CSS theo bất kỳ cách nào để ẩn hoặc bỏ ẩn các phần tử

Tham khảo. https. //getbootstrap. com/docs/4. 1/utilities/visibility/
 

Ghi chú cá nhân của tôi arrow_drop_up

Tiết kiệm

Vui lòng Đăng nhập để nhận xét.

Điều gì được ẩn trực quan trong Bootstrap?

Các lớp của Bootstrap là gì?

Làm cách nào để thay đổi khả năng hiển thị trong Bootstrap?

Các lớp tiện ích đáp ứng trong Bootstrap là gì?