Kuidas kasutada murdepunkte ja meediapäringuid Tailwindis 'selge' korral?

Kuidas Kasutada Murdepunkte Ja Meediaparinguid Tailwindis Selge Korral



Tailwind CSS pakub ' selge ” utiliidid sisu mähkimise haldamiseks konkreetse elemendi ümber. Neid utiliite saab kasutada selleks, et panna määratud elemendid konteineris vasakule või paremale ujutatud elementide alla liikuma. Lisaks saavad kasutajad kasutada ka 'selge' utiliidi katkestuspunkte ja meediumipäringuid, et juhtida konkreetse elemendi käitumist, kui see on erineva suurusega ekraanil ujuva elemendi kõrval.

See artikkel illustreerib murdepunktide ja meediumipäringute rakendamise meetodit Tailwindi 'selgete' utiliitide puhul.

Kuidas kasutada murdepunkte ja meediapäringuid Tailwindis 'selge' puhul?

Konkreetsete katkestuspunktide ja meediumipäringute rakendamiseks Tailwindis 'selgetele' utiliitidele looge HTML-struktuur. Seejärel määrake soovitud väärtus ' selge- ” utiliit erinevate ekraanisuuruste jaoks, kasutades „ md ” või „ lg ” murdepunktid. Lõpuks muutke kinnitamiseks veebilehe ekraani suurust.





Näide
Selles näites kasutame ' md ' murdepunkt koos ' selge-mõlemad ' utiliit ja ' lg ' murdepunkt koos ' selge-pole ' utiliit jaotises '

” element oma positsiooni muutmiseks keskmise ja suure ekraani suurusel:



< keha >

< div klass = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' klass = 'float-left p-3 w-28 h-24' kõike = 'pilt' / >

< img src = 'tailwindcss_img.png' klass = 'float-right p-3' kõike = 'pilt' / >

< lk klass = 'text-justify clear-left md:clear-both lg:clear-none' > Tailwind CSS pakub 'ujuvaid' utiliite, mis kontrollivad sisu mähkimist elemendi ümber.
See näide näitab, kuidas kasutada Tailwindis katkestuspunkte ja meediumipäringuid 'selge' utiliidiga. < / lk >
< / div >

< / keha >

Siin:



  • 'hõljuge vasakule' klass ujutab elemendid konteineri vasakule küljele.
  • 'ujuvad paremale' klass ujutab elemendid konteineri paremale küljele.
  • 'selge-vasak' klass liigutab elemendi

    ​​konteineris vasakule ujuva elemendi alla.

  • 'md: selge - mõlemad' klass puhastab nii vasak- kui ka parempoolsed ujukid ning paigutab keskmise suurusega ekraanil elemendi

    ​​nende alla.

  • 'lg:clear-none' klass keelab kõik elemendile

    rakendatavad selged funktsioonid ja võimaldab elemendil suurel ekraanil konteineri mõlemal küljel hõljuda.

Väljund



Ülaltoodud väljundi kohaselt on määratud katkestuspunktid ja meediumipäringud edukalt rakendatud 'selge' utiliidile.

Järeldus

Katkestuspunktide ja meediumipäringute rakendamiseks Tailwindi 'puhastatud' utiliitidele määrake soovitud väärtus väärtusele ' selge- ” utiliit erinevate ekraanisuuruste jaoks, kasutades „ md ” või „ lg ” murdepunktid. Kontrollimiseks muutke veebilehe ekraani suurust ja tagage muudatused. See artikkel on näidanud näidet konkreetsete katkestuspunktide ja meediumipäringute rakendamiseks Tailwindi 'puhastatud' utiliitidel.



muud

Kategooria

Lemmik Postitused

Mis on Bigheadi ja Bigheadi sari Robloxis

Kuidas luua kausta GitHubi hoidlas?

Mis on Robloxi vanemlik PIN-kood?

Kuidas kasutada Chmod +X-i faili käivitamiseks Linuxis

Kuidas keelata Robloxi turvateatised?

Kuidas kasutada RPM-käsku Linuxis

Kuidas liituda Discordi teemalise aruteluga

Kuidas Javas ConcurrentHashMap elemente eemaldada ja neile juurde pääseda?

Mida [objektiobjekt] JavaScriptis tähendab

Java Catch mitu erandit

Kuidas leida faili suurust C-programmeerimises

Stringi interpoleerimine, kasutades C#-s $

Kuidas luua põhilist kalkulaatoriprogrammi Java abil?

Kuidas kasutada Tailwindis suvalisi väärtusi?

Arduino taimeriteek viivitamiseks

Kuidas määrata hõljumise, teravustamise ja muude taganttuule olekute minimaalset kõrgust

Numpy filter

Robuxi rahamuundur

Kuidas kasutada Javas meetodit Arrays.fill()?

Funktsiooni integreerimine MATLAB-i kasutades Int() funktsiooni