Dit artikel demonstreert de methode om de 'break-after' te gebruiken met breekpunten en mediaquery's in Tailwind CSS.
Hoe 'break-after' te gebruiken met breekpunten en mediaquery's in Tailwind?
Om een 'break-after' te gebruiken met breekpunten en mediaquery's, definieert u verschillende waarden en stijlen voor verschillende schermformaten met het 'break-after'-hulpprogramma in het HTML-programma. Controleer vervolgens de uitvoer door de HTML-webpagina te bekijken.
Laten we de praktische implementatie verkennen:
Stap 1: gebruik breekpunten en mediaquery's met het hulpprogramma 'break-after'.
Maak een HTML-programma en specificeer verschillende waarden en stijlen voor verschillende schermformaten met het 'break-after'-hulpprogramma. We hebben bijvoorbeeld de ' md ” breekpunt met de “ pauze-na-kolom 'hulpprogramma en de' lg ” breekpunt met de “ pauze-na-vermijden ' nutsvoorziening:
< lichaam >
< div klas = 'kolommen-2 bg-groenblauw-400' >
< P klas = 'md:pauze-na-kolom lg:pauze-na-vermijden' > Hallo... < / P >
< P > Welkom hier... < / P >
< P > Meer informatie over Tailwind CSS... < / P >
< P > Het is een CSS-framework... < / P >
< P > Doei... < / P >
< / div >
< / lichaam >
Hier:
- De ' md:break-na-kolom ” klasse geeft aan dat er een kolomeinde moet komen na dit specifieke
element aan het “ md ” breekpunt (middelgrote schermgrootte).
- De ' lg:break-na-vermijden ” class suggereert dat het element break-after moet vermijden bij de “ lg ” breekpunt (grote schermgrootte).
Stap 2: uitvoer controleren
Controleer of de breekpunten en mediaquery's zijn toegepast door de HTML-webpagina te bekijken:
Op de bovenstaande webpagina is de kolomonderbreking opgetreden op het gespecificeerde element op het middelgrote scherm en is de onderbreking daarna vermeden op het grote scherm.
Conclusie
Om de 'break-after' met breekpunten en mediaquery's in Tailwind te gebruiken, maakt u eerst een HTML-bestand. Gebruik vervolgens de breekpunten en mediaquery's met het hulpprogramma 'break-after' door verschillende waarden en stijlen op te geven voor verschillende schermformaten. Voer ter verificatie het HTML-programma uit en bekijk de webpagina. Dit artikel heeft de methode gedemonstreerd om de 'break-after' te gebruiken met breekpunten en mediaquery's in Tailwind CSS.