Pakalpojumā Tailwind CSS “ kaste-dekorācija-pārtraukums Īpašums nosaka elementa fona, apmales un polsterējuma atveidi, ja tas aptver vairākas līnijas vai kolonnas. Tam ir divas klases, t.i., ' šķēle ' un ' klons ”. Lietotāji var izmantot rekvizītu “box-decoration-break” ar pārtraukuma punktiem un multivides vaicājumiem, lai noteiktu, kā mainās elementu izkārtojums un izskats atkarībā no ierīces platuma, un izmantot dažādus stilus, pamatojoties uz pārtraukuma punktiem.
Šajā rakstā tiks parādīta kastes dekorēšanas pārtraukuma izmantošanas metode ar pārtraukuma punktiem un multivides vaicājumiem.
Kā izmantot kastes dekorēšanas pārtraukumu ar pārtraukuma punktiem un multivides vaicājumiem programmā Tailwind?
Lai izmantotu kastes dekorēšanas pārtraukumu ar pārtraukuma punktiem un multivides vaicājumiem, HTML programmā ir jādefinē dažādas vērtības un stils dažādiem ekrāna izmēriem. Pēc tam apskatiet tīmekļa lapu, palaižot HTML programmu verifikācijai.
Lai labāk izprastu, pārbaudiet tālāk minētās darbības.
1. darbība. Izmantojiet pārtraukuma punktus un multivides vaicājumus ar lodziņu noformējuma pārtraukumu
Izveidojiet HTML programmu un norādiet dažādas vērtības un stilu dažādiem ekrāna izmēriem. Piemēram, mēs esam definējuši ' md ' un ' lg ” pārtraukuma punkti ar to stiliem:
< ķermenis >< span klasē = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
Sveiki < br />
Linux < br />
Padoms
span >
ķermenis >
Šeit:
- ' bg-teal-600 ” iestata zilganzaļo krāsu uz fonu.
- ' kaste-dekorācija-klons ” ir pielāgota klase, ko izmanto kastes dekorēšanai.
- ' md:bg-dzeltens-500 ” lieto dzeltenu fona krāsu elementam md ” pārtraukuma punkts (vidēja izmēra ekrāni).
- ' lg:box-decoration-slice iestata sagriešanas efektu kastes dekorēšanai lg ” pārtraukuma punkts (lieli ekrāni).
- ' teksts-balts ” iestata teksta balto krāsu.
- ' teksts-3xl ” iestata fonta lielumu uz 3xl.
- ' px-2 ” pievieno elementam horizontālu polsterējumu ar 2 pikseļiem.
2. darbība: pārbaudiet izvadi
Lai pārliecinātos, ka pārtraukuma punkti un multivides vaicājumi ir veiksmīgi lietoti, palaidiet HTML programmu un skatiet tīmekļa lapu:
Var redzēt, ka mainās tīmekļa lapa, saskaņā ar kuru tika definēti pārtraukuma punkti un mediju vaicājumi.
Secinājums
Lai lietotnē Tailwind izmantotu kastes dekorēšanas pārtraukumu ar pārtraukumpunktiem un multivides vaicājumiem, vispirms izveidojiet HTML failu. Pēc tam izmantojiet pārtraukuma punktus un multivides vaicājumus HTML programmā, norādot dažādas vērtības un stilu dažādiem ekrāna izmēriem. Lai veiktu pārbaudi, palaidiet HTML programmu un skatiet tīmekļa lapu. Šajā rakstā ir parādīta kastes dekorēšanas pārtraukuma izmantošanas metode ar pārtraukuma punktiem un multivides vaicājumiem.