Bootstrap CSS Klasa D-*-Brak

Bootstrap zapewnia szeroką gamę wstępnie zaprojektowanych elementów i klas. Deweloperzy używają ich do szybkiego tworzenia wizualnie atrakcyjnych i responsywnych stron internetowych. Responsywne strony internetowe wykonują swój układ zgodnie z rozmiarem ekranu urządzenia. Jednym z nich jest „D-*-Brak”Klasa, która jest wykorzystywana do ukrywania elementów w oparciu o rozmiar ekranu.

Ten zapis opisuje klasę Bootstrap CSS „D-*-Brak".

• Co to jest klasa Bootstrap CSS: „D-*-Brak”?
• Jak ukryć elementy na wyjątkowo dużym ekranie?
• Jak ukryć elementy na dużym ekranie?
• Jak ukryć elementy na średnim ekranie?
• Jak ukryć elementy na małym ekranie?

Co to jest klasa Bootstrap CSS: „D-*-Brak”?

„„D-*-Brak”Klasa jest jedną z klas użytkowych reagujących na bootstrap do kontrolowania widoczności elementu w oparciu o rozmiar ekranu. CSS „wyświetlacz„Własność tych klas użyteczności publicznej jest ustawiona na„nic.". „„D”Wskazuje właściwość„ wyświetlania ”i„*”Symbolizuje punkty przerwania rozmiaru ekranu, i.mi., "xs”,„xl”,„MD", I "LG". „„nic”Na końcu oznacza, że ​​element zostanie ukryty po zastosowaniu tej klasy.

Aby ukryć element na wszystkich ekranach, „D-none”Klasa będzie używana. Wdrożenie klas w poniższych sekcjach, aby zobaczyć, jak działają.

Jak ukryć elementy na wyjątkowo dużym ekranie?

„„D-XL-None„Klasa jest wykorzystywana do ukrycia elementów na wyjątkowo dużym ekranie. Ta klasa ma predefiniowane CSS zapytania medialnego ”@Media (min min: 1200px)”, Co oznacza, że ​​ta klasa dotyczy ekranów o szerokości większej niż 1200px.

Przykład

Sprawdź przykład, wdrażając następujące instrukcje:

• Najpierw dodaj „„Element o„P-4" I "BG Light„Zajęcia.
• Wewnątrz tego „” uwzględnij „

  ”I„ ”elementy nagłówka i tekst.

• Przypisz element „”karta”,„tekst-biały”,„P-2”,„BG-Primary", I "D-XL-None„Zajęcia.

Html

To jest główny div

Pokaż mi na szerokości ekranu mniej niż 1200px

Wyjście

Jak ukryć elementy HTML na dużym ekranie?

„„D-LG-none”Klasa ukrywa komponenty na dużym ekranie. Ta klasa ma predefiniowane CSS zapytania medialnego ”@Media (min min: 992px)”, Co oznacza, że ​​ta klasa dotyczy ekranów o szerokości większej niż 992px.

Przykład

W bieżącym przykładzie dodaj „D-LG-none„Klasa do elementu„ ”.

Html

Pokaż mi szerokość ekranu mniej niż 992px

Zobacz, właściwość „Display: None” została pomyślnie zastosowana do ekranu w 992px:

Jak ukryć elementy na średnim ekranie?

„„D-MD-none„Klasa może być używana do ukrycia widoczności elementu na ekranie średniej wielkości. Ta klasa ma predefiniowane CSS zapytania medialnego ”@Media (min min: 768px)”Co oznacza, że ​​ta klasa dotyczy ekranów o szerokości większej niż 768px.

Przykład

Dodaj klasę „D-MD-None” do elementu „”.

Html

Pokaż mi na szerokości ekranu mniej niż 768px

Wyjście

Jak ukryć elementy na małym ekranie?

„„D-SM-none”Klasa ukrywa widoczność elementu na małym ekranie. Ta klasa ma predefiniowane CSS zapytania medialnego ”@Media (min min: 576px)”Co oznacza, że ​​ta klasa dotyczy ekranów o szerokości większej niż 576px.

Przykład

W bieżącym przykładzie dodaj klasę „D-SM-None” do elementu „”.

Html

Pokaż mi szerokość ekranu mniej niż 576px

Wyjście

Ważna uwaga

„„D-*-Brak„Klasa jest wykorzystywana tylko do ukrycia elementów. Inne elementy lub układy nie mają wpływu. Element jest całkowicie usunięty z układu, gdy CSS "wyświetlacz" jest ustawione na "nic".

Wniosek

„„D-*-Brak„Klasa jest wykorzystywana do ukrycia widoczności elementu na różnych rozmiarach ekranu. Gwiazdka „*„Oznacza„ ”LG”,„xl”,„SM", I "MD”, Który wskazuje na duże, bardzo duże, małe i średnie ekrany. Mówiąc dokładniej, CSS „wyświetlacz„Własność o wartości”nic”Jest wykorzystywany do wyeliminowania elementu z układu. W tym artykule opisano klasę Bootstrap „D-*-Brak” z przykładami.