Bootstrap CSS Class D-*-Ingen

Et bredt utvalg av forhåndsdesignede elementer og klasser leveres av Bootstrap. Utviklere bruker dem for å lage visuelt tiltalende og responsive nettsteder raskt. Responsive nettsteder lager oppsettet i henhold til enhetsskjermstørrelsen. En av dem er "D-*-Ingen”Klasse, som brukes til å skjule elementer basert på skjermstørrelse.

Denne oppskrivningen vil beskrive Bootstrap CSS-klassen “D-*-Ingen”.

• Hva er Bootstrap CSS-klasse: “D-*-Ingen”?
• Hvordan skjule elementer på en ekstra stor skjerm?
• Hvordan skjule elementer på en stor skjerm?
• Hvordan skjule elementer på mellomstor skjerm?
• Hvordan skjule elementer på en liten skjerm?

Hva er Bootstrap CSS-klasse: “D-*-Ingen”?

“D-*-Ingen”Klassen er en av bootstrap responsive verktøyklasser som brukes til å kontrollere elementets synlighet basert på skjermstørrelsen. CSS “vise”Eiendom for disse verktøyklassene er satt til“ingen.”. “d”Angir egenskapen“ Display ”, og“*”Symboliserer brytepunktene for skjermstørrelse, jeg.e., “xs”,“xl”,“MD”, Og“LG”. “ingen”På slutten betegner at elementet vil bli skjult når denne klassen blir brukt.

For å skjule elementet på alle skjermer, "D-ingen”Klasse vil bli brukt. La oss implementere klassene i seksjonene nedenfor for å se hvordan de fungerer.

Hvordan skjule elementer på en ekstra stor skjerm?

“d-xl-ingen”Klasse brukes til å skjule elementene på en ekstra stor skjerm. Denne klassen har en forhåndsdefinert CSS av mediespørring “@media (Min-bredde: 1200px)”, Som betyr at denne klassen gjelder skjermene som har en bredde større enn 1200px.

Eksempel

Sjekk ut eksemplet ved å implementere følgende instruksjoner:

• Først, legg til en "”Element som har“P-4”Og“BG-lys”Klasser.
• Inne i denne "" -koden, inkluderer "

  ”Og“ ”elementer for overskriften og litt tekst.

• Tilordne “” elementet ”kort”,“teksthvit”,“P-2”,“BG-Primary”, Og“d-xl-ingen”Klasser.

Html

Dette er Main Div

Vis meg på skjermbredden mindre enn 1200px

Produksjon

Hvordan skjule HTML -elementer på en stor skjerm?

“d-lg-ingen”Klasse skjuler komponenter på storskjermen. Denne klassen har en forhåndsdefinert CSS av mediespørring “@media (Min-bredde: 992px)”, Som betyr at denne klassen gjelder skjermer som har en bredde større enn 992px.

Eksempel

I det pågående eksemplet, legg til "d-lg-ingen”Klasse til“ "elementet.

Html

Vis meg på skjermbredden mindre enn 992px

Se, "Display: None" -egenskapen er blitt brukt til skjermen i 992px:

Hvordan skjule elementer på mellomstor skjerm?

“D-MD-ingen”Klasse kan brukes til å skjule elementets synlighet på skjermbildet mellomstørrelse. Denne klassen har en forhåndsdefinert CSS av mediespørring “@media (Min-bredde: 768px)”Som betyr at denne klassen gjelder skjermer som har en bredde større enn 768px.

Eksempel

Legg til "D-MD-ikke" -klassen i "" -elementet.

Html

Vis meg på skjermbredden mindre enn 768px

Produksjon

Hvordan skjule elementer på en liten skjerm?

“D-SM-ingen”Klassen skjuler elementets synlighet på en liten skjerm. Denne klassen har en forhåndsdefinert CSS av mediespørring “@media (Min-bredde: 576px)”Som betyr at denne klassen gjelder skjermene som har en bredde større enn 576px.

Eksempel

I det pågående eksemplet, legg til "D-SM-ikke" -klassen til "" -elementet.

Html

Vis meg på skjermbredden mindre enn 576px

Produksjon

Viktig notat

“D-*-Ingen”Klassen brukes bare til å skjule elementene. Andre elementer eller oppsett blir ikke påvirket. Elementet fjernes fullstendig fra oppsettet når CSS “vise" er satt til "ingen”.

Konklusjon

“D-*-Ingen”Klasse brukes til å skjule elementets synlighet på forskjellige skjermstørrelser. Stjernen “*”Betegner“LG”,“xl”,“sm”, Og“MD”Som indikerer de store, ekstra store, små og mellomstore skjermer. Mer spesifikt, CSS “vise”Eiendom med verdien”ingen”Brukes til å eliminere elementet fra oppsettet. Denne artikkelen har beskrevet Bootstrap “D-*-Ingen” -klasse med eksempler.