Tomēr šajā rakstā tiks aplūkotas divas konkrētas klases, kas ir proporcionāli skaitļi un tabulas skaitļi. Tie tiek izmantoti, lai veidotu skaitliskās vērtības programmā Tailwind un sakārtotu un attēlotu skaitliskos datus tādā veidā, kas ir pievilcīgs dokumenta noformējumam.
Šajā rakstā tiks detalizēti aprakstīti proporcionālie un tabulas skaitļi programmā Tailwind CSS, izmantojot šādu izklāstu:
- Kā izmantot proporcionālos skaitļus Tailwind CSS?
- Kā Tailwind CSS izmantot tabulas figūras?
- Atšķirība starp proporcionālajiem un tabulas attēliem
Kā izmantot proporcionālos skaitļus Tailwind CSS?
Proporcionālo skaitļu klase elementam piešķirs vienošanos, kurā katram skaitlim nav vienāds platums.
Sintakse
Proporcionālo skaitļu izmantošanas sintakse programmā Tailwind ir šāda:
< div klasē = 'proporcionālie skaitļi' >
< div / >
Iepriekš sniegtajā sintaksē ' proporcionālie skaitļi Lai izmantotu proporcionālus skaitļus, elementam ir jānorāda klase.
Apskatīsim praktisku proporcionālo skaitļu piemēru.
Tālāk sniegtajā kodā divi “ lpp ' elementi ir ietverti ' div ” elements, kas izmanto proporcionālo skaitļu klasi:
< div klasē = 'proporcionālie skaitļi teksta centrs bg-slate-200 text-xl' >< lpp > 121212 < / lpp >
< lpp > 838383 < / lpp >
< / div >
Iepriekš sniegtā koda skaidrojums ir šāds:
- ' div ' elements izmanto ' proporcionālie skaitļi ” klase, kas skaitļiem piemēros proporcionālās figūras īpašību.
- ' teksta centrs ” klase novieto tekstu elementa centrā.
- ' bg-{color}-{number} ” klase ir atbildīga par elementa fona krāsu.
- ' teksts-xl ” klase nodrošina tekstam īpaši lielu fonta izmēru.
- Tālāk divi ' lpp ” tiek izveidoti elementi, kas satur dažādus skaitļus.
Izvade
Izvadā var redzēt, ka skaitļi otrajā ' lpp ” elementam ir nedaudz lielāks platums nekā pirmajam. Tas ir saistīts ar proporcionālo skaitļu klasi:
Kā Tailwind CSS izmantot tabulas figūras?
Tabulas skaitļi programmā Tailwind piešķir vienošanos elementam, kurā katram skaitlim ir vienāds platuma izmērs. Tādējādi tiek izveidots simetrisks tabulai līdzīgs skaitļu attēlojums.
Sintakse
Tabulas skaitļu izmantošanas sintakse ir šāda:
< div klasē = 'tabulu numuri' >< div / >
Iepriekš sniegtajā sintaksē ' tabulu numuri ” klase ir nodrošināta elementam, lai izmantotu tabulas attēlus.
Apskatīsim, kā “ tabulu numuri ” ietekmē skaitliskās vērtības HTML dokumentā. Šai demonstrācijai divi ' lpp ' ar skaitliskām vērtībām tiek izveidoti un ietverti ' div ” elements, kas izmanto tabulas skaitļu klasi:
< div klasē = ' tabular-nums text-center bg-slate-200 text-xl' >< lpp > 121212 < / lpp >
< lpp > 838383 < / lpp >
< / div >
Iepriekš minētajā kodā ' tabulu numuri ” klase tiek nodrošināta div 'elements, kas bērnam piešķirs tabulas figūru stilu' lpp ” elementi.
Izvade:
Iepriekš minētajā izvadā var redzēt, ka skaitliskās vērtības abos elementos ir ideāli izlīdzinātas, jo ciparu platums ir vienāds.
Informācija par bonusu: atšķirība starp proporcionālajiem un tabulas skaitļiem Tailwind CSS
Apskatīsim demonstrāciju, kas atšķir tabulas un proporcionālo skaitļu klašu ietekmi uz skaitliskām vērtībām. Šajā demonstrācijā elementiem pēc noklusējuma tiks piešķirta proporcionālo skaitļu klase. Pēc tam, izmantojot kursora novietošanas stāvokli, elementiem tiks piešķirta tabulas skaitļu klase:
< div klasē = 'proporcionālais-nums text-center bg-slate-200 text-xl hover:tabular-nums' >< lpp > 121212 < / lpp >
< lpp > 838383 < / lpp >
< / div >
Iepriekš minētajā kodā var redzēt, ka “ div ' elements ir nodrošināts ar ' proporcionālie skaitļi ”, kas būs noklusējuma vienošanās, pēc kuras tiks ievērotas skaitliskās vērtības.
Tāpat sakarā ar ' kursors: tabular-nums ” klasē, skaitliskās vērtības ievēros tabulas skaitļu konvenciju ikreiz, kad lietotājs novieto peles kursoru virs elementa “div”.
Izvade
Dotajā izvadē skaitlisko vērtību platums mainās, kad lietotājs virza peles kursoru virs elementa. Tas nodrošina vizuālo atšķirību starp proporcionālajiem un tabulas skaitļiem programmā Tailwind:
Tas viss attiecas uz proporcionāliem un tabulas skaitļiem programmā Tailwind.
Secinājums
Lai izmantotu proporcionālos skaitļus programmā Tailwind, “ proporcionālie skaitļi ” tiek izmantota klase. Proporcionālajiem skaitļiem tiek izmantota vienošanās, kur katrai skaitliskajai vērtībai ir atšķirīgs platuma izmērs. Lai izmantotu tabulas skaitļus programmā Tailwind, “ tabulu numuri ” tiek izmantota klase. Tabulas skaitļos tiek izmantota vienošanās, kurā katrai skaitliskajai vērtībai ir vienāds platuma izmērs. Šajā rakstā ir sniegta procedūra proporcionālo un tabulas skaitļu izmantošanai programmā Tailwind.