Ovaj članak će demonstrirati metodu za korištenje 'break-after' s prijelomnim točkama i medijskim upitima u Tailwind CSS-u.
Kako iskoristiti 'break-after' s prijelomnim točkama i medijskim upitima u Tailwindu?
Da biste koristili 'pauzu nakon' s prijelomnim točkama i medijskim upitima, definirajte različite vrijednosti i stilove za različite veličine zaslona pomoću uslužnog programa 'pauza nakon' u HTML programu. Zatim provjerite izlaz gledajući HTML web stranicu.
Istražimo praktičnu primjenu:
Korak 1: Koristite prijelomne točke i medijske upite s uslužnim programom 'break-after'.
Stvorite HTML program i odredite različite vrijednosti i stilove za različite veličine zaslona pomoću uslužnog programa “break-after”. Na primjer, koristili smo ' doktor medicine ' prijelomna točka s ' prekid-nakon-stupca ' uslužni program i ' lg ' prijelomna točka s ' prekid-poslije-izbjeći ' korisnost:
< tijelo >
< div razreda = 'columns-2 bg-teal-400' >
< str razreda = 'md:break-after-column lg:break-after-avoid' > Zdravo... < / str >
< str > Dobrodošli ovdje... < / str >
< str > Saznajte više o Tailwind CSS-u... < / str >
< str > To je CSS framework... < / str >
< str > Pozdrav... < / str >
< / div >
< / tijelo >
Ovdje:
- ' md:prijelom-nakon-stupca ” označava da bi se trebao dogoditi prijelom stupca nakon ovog određenog
elementa na “ doktor medicine ” Prijelomna točka (srednja veličina zaslona).
- ' lg:prekid-nakon-izbjegavanja ' klasa sugerira da bi element trebao izbjegavati break-after na ' lg ” Prijelomna točka (veličina velikog zaslona).
Korak 2: Provjerite izlaz
Provjerite jesu li prijelomne točke i medijski upiti primijenjeni pregledom HTML web stranice:
Na gornjoj web-stranici došlo je do prijeloma stupca na navedenom elementu na srednjem zaslonu, a prijelom nakon je izbjegnut na velikom zaslonu.
Zaključak
Da biste upotrijebili 'prekid nakon' s točkama prekida i medijskim upitima u Tailwindu, prvo izradite HTML datoteku. Zatim upotrijebite prijelomne točke i medijske upite s uslužnim programom 'break-after' navodeći različite vrijednosti i stilove za različite veličine zaslona. Za provjeru pokrenite HTML program i pogledajte web stranicu. Ovaj članak demonstrira metodu za korištenje 'pauze nakon' s prijelomnim točkama i medijskim upitima u Tailwind CSS-u.