Aquest article mostrarà el mètode per utilitzar el 'break-after' amb punts d'interrupció i consultes multimèdia a Tailwind CSS.
Com utilitzar el 'break-after' amb punts d'interrupció i consultes de mitjans a Tailwind?
Per utilitzar un 'break-after' amb punts d'interrupció i consultes multimèdia, definiu diferents valors i estils per a diferents mides de pantalla amb la utilitat 'break-after' del programa HTML. A continuació, verifiqueu la sortida visualitzant la pàgina web HTML.
Explorem la implementació pràctica:
Pas 1: utilitzeu els punts d'interrupció i les consultes de mitjans amb la utilitat 'break-after'.
Creeu un programa HTML i especifiqueu diferents valors i estils per a diferents mides de pantalla amb la utilitat 'break-after'. Per exemple, hem utilitzat el ' md 'punt de ruptura amb el' trencament després de la columna ' utilitat i ' lg 'punt de ruptura amb el' trencar després d'evitar ” utilitat:
< cos >
< div classe = 'columnes-2 bg-teal-400' >
< pàg classe = 'md:break-after-column lg:break-after-avoid' > Hola... < / pàg >
< pàg > Benvingut aquí... < / pàg >
< pàg > Més informació sobre Tailwind CSS... < / pàg >
< pàg > És un framework CSS... < / pàg >
< pàg > Adéu... < / pàg >
< / div >
< / cos >
Aquí:
- El ' md:break-after-column ” indica que s'hauria de produir un trencament de columna després d'aquest element
específic a la part “ md ” punt d'interrupció (mida de pantalla mitjana).
- El ' lg:break-after-evitar ” la classe suggereix que l'element ha d'evitar la ruptura després a la “ lg ” punt d'interrupció (mida de pantalla gran).
Pas 2: verifiqueu la sortida
Comproveu si els punts d'interrupció i les consultes multimèdia s'han aplicat visualitzant la pàgina web HTML:
A la pàgina web anterior, el trencament de columna s'ha produït a l'element especificat a la pantalla mitjana i s'ha evitat el trencament posterior a la pantalla gran.
Conclusió
Per utilitzar el 'break-after' amb punts d'interrupció i consultes multimèdia a Tailwind, primer, creeu un fitxer HTML. A continuació, utilitzeu els punts d'interrupció i les consultes multimèdia amb la utilitat 'break-after' especificant diferents valors i estils per a diferents mides de pantalla. Per a la verificació, executeu el programa HTML i visualitzeu la pàgina web. Aquest article ha demostrat el mètode per utilitzar el 'break-after' amb punts d'interrupció i consultes multimèdia a Tailwind CSS.