Ta članek bo prikazal metodo za uporabo »prekinitve po« s prekinitvenimi točkami in medijskimi poizvedbami v Tailwind CSS.
Kako uporabiti »break-after« s prelomnimi točkami in medijskimi poizvedbami v Tailwindu?
Če želite uporabiti »premor po« s prekinitvenimi točkami in medijskimi poizvedbami, definirajte različne vrednosti in slog za različne velikosti zaslona s pripomočkom »premor po« v programu HTML. Nato preverite izhod z ogledom spletne strani HTML.
Oglejmo si praktično izvedbo:
1. korak: Uporabite prekinitvene točke in medijske poizvedbe s pripomočkom »break-after«.
Ustvarite program HTML in določite različne vrednosti in sloge za različne velikosti zaslona s pripomočkom »break-after«. Na primer, uporabili smo ' md ' prelomna točka z ' prelom-po-stolpcu ' pripomoček in ' lg ' prelomna točka z ' zlom-po-izogniti ” pripomoček:
< telo >
< div razred = 'columns-2 bg-teal-400' >
< str razred = 'md:break-after-column lg:break-after-avoid' > Zdravo... < / str >
< str > Dobrodošli tukaj ... < / str >
< str > Več o Tailwind CSS ... < / str >
< str > Je okvir CSS... < / str >
< str > adijo... < / str >
< / div >
< / telo >
Tukaj:
- ' md:break-after-column ” označuje, da se mora za tem specifičnim elementom
pri “ md ” prelomna točka (srednja velikost zaslona).
- ' lg:prekinitev-za-izognitvijo ” predlaga, da se mora element izogibati break-after pri “ lg ” prelomna točka (velikost zaslona).
2. korak: Preverite izhod
Z ogledom spletne strani HTML preverite, ali so bile uporabljene prekinitvene točke in medijske poizvedbe:
Na zgornji spletni strani je do preloma stolpca prišlo na določenem elementu na srednjem zaslonu, prelomu zatem pa smo se izognili na velikem zaslonu.
Zaključek
Če želite uporabiti »prekinitev po« s prekinitvenimi točkami in medijskimi poizvedbami v Tailwindu, najprej ustvarite datoteko HTML. Nato uporabite prekinitvene točke in medijske poizvedbe s pripomočkom »prekinitev po«, tako da določite različne vrednosti in slog za različne velikosti zaslona. Za preverjanje zaženite program HTML in si oglejte spletno stran. Ta članek je pokazal metodo za uporabo »prekinitve po« s prekinitvenimi točkami in medijskimi poizvedbami v Tailwind CSS.