Šajā rakstā tiks parādīta metode, kā izmantot “break-after” ar pārtraukuma punktiem un multivides vaicājumiem programmā Tailwind CSS.
Kā izmantot pārtraukuma punktus un multivides vaicājumus programmā Tailwind?
Lai izmantotu pārtraukumu ar pārtraukuma punktiem un multivides vaicājumiem, definējiet dažādas vērtības un stilu dažādiem ekrāna izmēriem, izmantojot utilītu 'break-after' HTML programmā. Pēc tam pārbaudiet izvadi, apskatot HTML tīmekļa lapu.
Izpētīsim praktisko ieviešanu:
1. darbība. Izmantojiet pārtraukuma punktus un multivides vaicājumus ar “break-after” utilītu
Izveidojiet HTML programmu un norādiet dažādas vērtības un stilu dažādiem ekrāna izmēriem, izmantojot utilītu “break-after”. Piemēram, mēs esam izmantojuši ' md ' pārtraukuma punkts ar ' pārtraukums pēc kolonnas lietderība un lg ' pārtraukuma punkts ar ' pārtraukums pēc izvairīšanās ” lietderība:
< ķermenis >
< div klasē = 'columns-2 bg-teal-400' >
< lpp klasē = 'md:break-after-column lg:break-after-avoid' > Sveiki... < / lpp >
< lpp > Laipni lūgti šeit... < / lpp >
< lpp > Uzziniet par Tailwind CSS... < / lpp >
< lpp > Tas ir CSS ietvars... < / lpp >
< lpp > Čau... < / lpp >
< / div >
< / ķermenis >
Šeit:
- ' md:break-after-colum ” klase norāda, ka pēc šī konkrētā
elementa ir jānotiek kolonnas pārtraukumam. md ” pārtraukuma punkts (vidēja ekrāna izmērs).
- ' lg:break-after-aid ” klase iesaka elementam izvairīties no pārtraukuma pēc “ lg ” pārtraukuma punkts (liels ekrāna izmērs).
2. darbība: pārbaudiet izvadi
Pārbaudiet, vai pārtraukuma punkti un multivides vaicājumi ir piemēroti, apskatot HTML tīmekļa lapu:
Iepriekš minētajā tīmekļa lapā vidējā ekrānā norādītajā elementā ir noticis kolonnas pārtraukums, un lielajā ekrānā no pārtraukuma ir izdevies izvairīties.
Secinājums
Lai izmantotu pārtraukuma punktu ar pārtraukuma punktiem un multivides vaicājumiem programmā Tailwind, vispirms izveidojiet HTML failu. Pēc tam izmantojiet pārtraukuma punktus un multivides vaicājumus ar utilītu “break-after”, norādot dažādas vērtības un stilu dažādiem ekrāna izmēriem. Lai veiktu pārbaudi, palaidiet HTML programmu un apskatiet tīmekļa lapu. Šajā rakstā ir parādīta metode, kā izmantot “break-after” ar pārtraukuma punktiem un multivides vaicājumiem programmā Tailwind CSS.