Sof CSS yordamida vertikal yorliqlar.
Golovna Salom, aziz o'quvchilar. Ayozli kun, biz siz bilan birga ishlaymiz go'zal tabib Men sizga CSS bilan yordam beraman
bu JQuery
.
Ma'lum bo'lishicha, bu, deb ataladigan narsa, umuman sayt uchun yanada foydaliroq, ular sahifadagi joyni qat'iy himoya qilishlari mumkin.Ular to'g'ridan-to'g'ri yon panelda yoki o'rtada, tarkibning o'zida, statistikada joylashtirilishi mumkin. Xuddi shunga o'xshab, biz uchun ishlash yaxshi, saytingizni bezash yaxshi fikr. Eksa :-) chiroyli va rang-barang, bu kamdan-kam qochish kabi ko'rinadi.
Ular uchun yordam olish uchun har qachongidan ham ko'proq ikkilanish muhimroqdir: ular juda o'ziga jalb qilinadi va serverga hech qanday e'tibor bermaydi.
JQuery
$(document).ready(function() ( $("#content div").hide(); // $("#tabs li:first").attr("id","joriy") o'rniga joylashtirish ; // Birinchi varaqni ko'rsatish $("#content div:first").fadeIn(); // Birinchi varaq tarkibini ko'rsatish $("#tabs a").click(funksiya(e)) ( e.preventDefault() ; $ ("#content div").hid(); attr ("id","joriy"); // Identifikatorlarni faollashtirish $("#" + $(this).attr("title")). // Joriy yorliq o'rniga ko'rsatish ))(); ;
Eksa - bu printsip va barchasi shu, siz tajriba qilishingiz mumkin, bu erda yorliqlarni qo'shishingiz mumkin
fon rasmlari
Birinchi variantga qanday o'zgarishlar kiritildi?
Ayni damda, tab bloki moslashtirildi. qaraganida mobil qurilmalar
, yorliqlarning o'lchami shaxsiy kompyuter qurilmalari ekranlarining o'lchamiga qarab o'zgaradi, sarlavhalar matni o'chiriladi va faqat almashtirishni ko'rsatadigan shrift-piktogrammalar olib tashlanadi va hokazo. To'plamga shrift-piktogrammalarni kiritgan holda, to'plam yanada boy va mutlaqo bepul. Siz shrift parametrlaridan foydalangan holda piktogrammalarni istalgan loyihaga birlashtirishingiz yoki ularni faylga ulashingiz mumkin
| css uslublari to'g'ridan-to'g'ri, chakana sotuvchining veb-saytidan @import, vikorist va quyidagi qator orqali:) ; |
@import url(
"http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
ichki CSS
| < div class = "tabs" > < input id= "tab1" type= "radio" name= "tabs" checked> < label for = "tab1" title= "." >. < input id= "tab2" type= "radio" name= "tabs" > < label for = "tab2" title= "Albatta, yangi CSS3 standartlarini qabul qilish barcha brauzerlarda xatosiz barqaror ishlashni kafolatlamaydi, ammo joriy versiyalarda yorliqlar muammosiz ishlaydi." >Albatta, yangi CSS3 standartlarini qabul qilish barcha brauzerlarda xatosiz barqaror ishlashni kafolatlamaydi, ammo joriy versiyalarda yorliqlar muammosiz ishlaydi. < input id= "tab3" type= "radio" name= "tabs" > < label for = "tab3" title= "IE 9-versiyadan boshlab yorliqlarni to'g'ri ko'rsatadi." >IE 9-versiyadan boshlab yorliqlarni to'g'ri ko'rsatadi. < input id= "tab4" type= "radio" name= "tabs" > < label for = "tab4" title= "Shunday qilib, sizda psixika yo'q va o'zingizni ushbu "brauzer" ning eski versiyalarida qolib ketgandek his qilasiz," >Shunday qilib, sizda psixika yo'q va o'zingizni ushbu "brauzer" ning eski versiyalarida qolib ketgandek his qilasiz, < section id= "content-tab1" > < p> < section id= "content-tab2" > < p> < section id= "content-tab3" > < p>Daniya usuli < section id= "content-tab4" > < p>Daniya usuli |
Yorliqlarni yaratmaslik, balki jQuery-dan foydalanish yaxshiroqdir. .
1-tab 2-tab Tab 3 4-tab
Biz CSS sehridan foydalanib, yorliqlarimiz uslublarini shakllantirishimiz mumkin bo'lgan darajaga yetib keldik.
Bu erda oddiyroq, ayniqsa, terining kuchi va his-tuyg'ularining parametrlarini tasvirlash, dam olish kunlarida ba'zi tushuntirishlarni yozib qo'ygan, shuning uchun men qaerga va qaerga boraman, deb o'ylayman, bu ombor emas, balki oziq-ovqatga e'tibor bering, yoki siz' rahm-shafqat topaman, mentariyga yozing, obov'yazkovo vydpovym, men sizga yordam beraman.
| CSS3/* Asosiy yorliq konteyneri */ . yorliqlar (minimum kenglik: 320px; maksimal kenglik: 800px; toʻldirish: 0px; chekka: 0 avtomatik; ) /* Joylashuvi ko'rsatilgan bo'lim uslublari */. tablar> bo'limi (displey: yo'q; to'ldirish: 15px; fon: #fff; chegara: 1px qattiq #ddd; ). tablar> bo'lim> p (chekka: 0 0 5px; chiziq balandligi: 1,5; rang: #383838; /* animatsiyani biriktirish */- webkit-animatsiya-davomiyligi: 1s; animatsiya - davomiyligi: 1s;- webkit-animation-to'ldirish rejimi: ikkalasi ham; animatsiyani to'ldirish rejimi: ikkalasi ham;- webkit-animation-name: fadeIn; animatsiya nomi: fadeIn;) /* Quvvat shaffofligi animatsiyasini tavsiflaydi */@- webkit- keyframes fadeIn ( dan ( shaffoflik : 0 ; ) gacha ( shaffoflik : 1 ; ) ) @ kalit kadrlar fadeIn ( dan ( shaffoflik : 0 ; ) dan ( shaffoflik : 1 ; ) ) /* katakchani qanday belgilash kerak */. tablar> kiritish (displey: yo'q; pozitsiya: mutlaq; ); } /* Yorliqlarni qayta aralashtirish uchun uslublar */. yorliqlar> yorliq (displey: inline-blok; hoshiya: 0 0 - 1px; toʻldirish: 15px 25px; shrift ogʻirligi: 600; matnni tekislash: markaz; rang: #aaa; chegara: 0px qattiq #ddd; chegara kengligi: 1px 1px 1px 1px;fon: #f1f1f1 chegara-radius: 3px 3px 0 0 ;/* Unicode formatidagi Font Awesome-dagi shrift belgilari */ . yorliqlar> yorliq: oldin ( font-family: fontawesome; shrift-og'irligi: normal; chekka-o'ng: 10px; ). tablar> label[ for *= "1" ] : oldin (kontent: " \f 19a"@media ekrani va (maksimal kenglik: 680px) ( .tablar> yorliq (shrift oʻlchami: 0 ; ) . tablar> yorliq: oldin (chekka: 0 ; shrift oʻlchami: 18px; ) ) /* Kichik ekranlar uchun * jumperlarning ichki kirishlarini o'zgartiring */@media ekrani va (maksimal kenglik: 400px) ( .tablar> yorliq ( toʻldirish: 15px; ) ) |
/* Asosiy yorliq konteyneri */ .tablar (min. kengligi: 320px; maksimal kenglik: 800px; toʻldirish: 0px; chekka: 0 avtomatik; ) /* ofsetli boʻlim uslublari */ .tabs>boʻlim ( displey: hech biri; : 15px; fon: #fff; chegara: 1px qattiq #ddd; webkit-animation-fill-rejimi: ikkalasi ham animatsiya-to'ldirish rejimi: ikkalasi ham quvvat shaffofligi */ @-webkit-keyframes fadeIn ( dan ( opacity: 0; ) dan ( opacity: 1; ) ) @keyframes fadeIn ( from (); opacity: 0; ) to ( opacity: 1; ) ) /* Belgilash katagidan qanday foydalanish kerak * / .tabs>kiritish ( displey: none; position: mutlaq; ) /* Yorliqlarni o'zgartirish uchun uslublar */ .tabs>label ( displey : inline-block: 0 0 -1px font-weight: 0px solid #ddd : #f1f1f1 ) /* Font Awesome formatida; format */ .tabs>label:befor ( font-family: fontawesome; font-weight: normal; chekka o'ng: 10px; ) .tabs>label:befor (kontent: "\f19a"; ) .tabs>label:befor (kontent: "\f17a"; ) .tabs>label:befor (kontent: "\f13b"; ) .tabs>label :befor (kontent: "\f13c"; ) /* sichqonchani olib o‘tilganda yorliqlar uslubini o‘zgartirish */ .tabs>label:hover (rang: #888; kursor: ko‘rsatgich; ) /* Faol yorliq uchun uslublar */ .tabs >kiritish :checked+yorliq (rang: #555; hoshiya -tepasi: 1px qattiq #009933; hoshiya-pastki: 1px qattiq #fff; fon: #fff; kontent-tab2, #tab3:checked~#content-tab3, # tab4: checked~#content-tab4 (displey: blok; ) /* Remikslardan matn oladi * va kichik ekranlardagi piktogrammalarni olib tashlaydi */ @media ekrani va (maksimal kenglik: 680px) ( .tabs>label ( shrift hajmi: 0; ) .tabs>label:befor (margin: 0; font-size: 18px; ) ) /* Oʻzgaruvchan media vositalari * kichik ekranlar uchun */ @media ekrani va (maksimal kenglik: 400px) (.tabs>label ( to'ldirish: 15px);
Yorliqlarni () xohlaganingizcha tartibga solishingiz mumkin, dumbadagi hamma narsa, faqat dumba, mening qo'lqop mahsulotim, boshqa hech narsa yo'q.
E'tibor bering, brauzer oynasining o'lchamini o'zgartirganda, yorliqlar avtomatik ravishda maksimal qiymatgacha (ilovada 680px) aniq o'lchamga moslashtiriladi, shundan so'ng yorliqlarning matn sarlavhalari yo'qoladi va piktogrammalar o'chiriladi.
Timning o'zi butun yorliqlar blokining maksimal ixchamligiga erishadi va yorliqlar o'rtasida taqdim etilgan tarkibni almashtirish uchun piktogrammalarni to'g'ri tanlay olmaydi.
Ishchi yorliqlarning jonli harakatini tomosha qiling, chiqish qurilmalaridan foydalaning, parametrlar bilan tajriba o'tkazing va yaratish, yaratish, yaratish... Agar siz ingliz tilidagi shablonlar bilan ishlashdan charchagan bo'lsangiz va ruslashtirilgan shablonlardan foydalanish imkoniyatini intiqlik bilan kutayotgan bo'lsangiz, unda siz ajoyib yangi narsadan bahramand bo'lishingiz aniq. TemplateMonster bozorida sizga kerak bo'lgan tayyor echimlar mavjud.
Xo'sh, saytda siz endi eng qiziqarlilari bilan tanishishingiz mumkin.
Agar siz o'zingizning onlayn loyihangizni minimal vaqt ichida ishga tushirmoqchi bo'lsangiz, mahalliylashtirilgan andozalar sizga kerak bo'ladi. Shablonlar uchun matnlar qo'lda yozilganiga qo'shimcha ravishda, hid bor zarur vositalar
professional veb-sayt yaratish uchun
Hurmat bilan Andrey
- Tanlangan elementlarning stilizatsiyasi haqida oldingi post bilan davom eting, garchi biz buni qanday qilishni batafsil bilishni xohlaymiz.
- javascript wiki bo'lmagan adaptiv yorliqlar , mutlaq joylashishni aniqlash va ko'rsatmalar bilan buzish. Boshlash uchun shuni aytmoqchimanki, men JavaScript-ga CSS-dan boshqa narsa uchun ishonishni tavsiya etmayman, chunki yorliqlarni amalga oshirishning boshqa usuli bo'lmaydi.
- Vaziyat juda ko'p, agar bunday yondashuv sizga mos kelmasa va siz JSsiz qilolmaysiz, lekin ayni paytda bu haqda emas.
- Keling, ish natijasida nimani ko'rishni xohlayotganimizni va hozirgacha nimani ko'rishimiz mumkinligini tushunaylik:
- JavaScriptsiz robot,
- Bir nechta yorliqlarni bog'lash yo'q (har biriga bitta vidjet tanlashimiz mumkin
turli sahifalarda
o'rtada turli xil tarkib bilan), Moslashuvchanlik, Maksimal o'zaro faoliyat brauzer va platformalararo muvofiqlik,
Eng qulay va aqlli foydalanuvchi interfeysi,
Yorliqlarning ichki tartibida cheklov yo'q, u matn, media kontenti yoki yorliqning o'rtasida joylashgan tartib bo'ladimi.
Vizual ravishda u shunday ko'rinishi mumkin:
Yorliqlarning sarlavhalari (tugmalarning o'zlari) asosiy yorliqning identifikatorini - div yoki boshqa elementni o'z ichiga olgan href atributida yozilganligi sababli.
Faol yorliqning ko'rinishi qo'shimcha psevdo-sinfga tayinlangan: maqsad.
Bu shunday ishlaydi:
- Siz sezganingizdek, bizda ushbu usul bilan bog'liq muammolar mavjud:
- Yorliqni bosganimizda, sahifa o'tishni boshlaydi, shuning uchun brauzer bizni yuborilgan joyga yuboradi.
- Albatta, noyob bo'lish mumkin, ammo JSsiz hech qanday yo'l yo'q.
- Faol yorliq sarlavhasi ko'rinmaydi, shuning uchun siz u bilan ishlashingiz mumkin, aks holda bu yanada muammoli bo'ladi.
Hech qanday faol yorliq yo'q (ularning bir nechtasi xabarga hali bosilmagan) va biz hackga o'tishimiz va uchinchi yorliqni faol qilishimiz kerak, chunki birinchisini bu tarzda ko'rish mumkin emas.
Moslashuvchanlik yanada qiyinroq: masalan, ekran ovozi eshitilganda yorliqlar yangi qatorga ko'chiriladi va yorliqning mazmuni bir vaqtning o'zida eshitiladi, lekin u juda chiroyli ko'rinmaydi.
Bu muammo ommaviy axborot vositalarining xabarlari tufayli yuzaga kelishi mumkin va juda ko'p yorliqlarga aralashishni istamaydigan shifokorlar va har qanday displey o'lchamlarida muammo yo'qoladi. O'zgarishlarni asoslashda ehtiyot bo'laylik: bu usul biz uchun mos emas, chunki biz ko'pchilikni qoniqtira olmadik. Amalga oshirish juda achinarli va men g'alaba qozonish kayfiyatida emasman.
Boshqa variant
Bu usul |
JavaScriptsiz yorliqlarni yaratish
Allaqachon amaliy, garchi turg'unlik bilan bog'liq ba'zi muammolar hali ham mavjud.
- Usulning mohiyati tushunarli: yorliqlar sarlavhalari uchun tasdiqlash qutisi va yorliq elementlari qo'llaniladi va qo'shimcha psevdo-sinf orqasida: tekshirilgan va boshqa div elementi, biz faqat faol yorliqning mazmunini ko'rsatishimiz va quyidagilarni qo'shishimiz mumkin. :
- Yorliq oʻramiga kiritish:belgilangan + yorliq + .tab-element(ekran: blok;) Tab - o'rash kiritish: belgilangan + yorliq +. yorliq - element (ko'rsatish: blok;)
Albatta, ba'zi hollarda bu usuldan foydalanish mumkin, masalan, agar siz ulardagi yorliqlar va tarkibning sonini bilsangiz.
Agar biz universal echim izlayotgan bo'lsak, bu yondashuv bizning holatimizga kiritilmaydi.
Qaror
Uchinchi variant va yagona yechim - boshqa usulni o'zgartirish. Bu shunchaki, lekin biz sarlavhalar uchun floatning mutlaq joylashuvi va kuchi haqida bahslashmaymiz. U
bu usul
Yorliqlar va ularning mazmunini tartibga solish uchun biz yangi moda flexbox-dan foydalanmoqdamiz. Bu erda flexboxning go'zalligi shundaki, biz birinchi navbatda qaysi elementlar ko'rsatilishini aniqlashimiz mumkin. Siz qo'shimcha xarajatlar buyurtmasi uchun to'lashingiz mumkin: 1; , Qadimgi nolning aqli orqasida Yake. Yorliqlarning moslashuviga, shuningdek, moslashuvchan quvvat strukturasi flex-grow orqali erishiladi: 1;
, bu yorliqlarni tarkibning butun kengligi bo'ylab cho'zish imkonini beradi, buning uchun biz turli xil sonli yorliqlarni ko'rsatishdan tashvishlanmasligimiz mumkin.
Biz, shuningdek, teri yorlig'i o'rtasiga har qanday o'lchamdagi kontentni joylashtirishimiz mumkin, ulardan keyin kontentni ko'rsatishga xalaqit bermasdan. Bu yondashuv hamma uchun ishlaydi joriy brauzerlar, shu jumladan mobil telefonlar.
Faqat boylar va hokimiyatdagilar uchun ahamiyatsiz bo'lgan Flexbox rasmiylar tomonidan qo'llaniladi va u uzoq vaqt davomida keng qo'llab-quvvatlanadi. U FireFox brauzerlari , Chrome, Safari va Opera, men yorliqlar ishida hech qanday muammo aniqlamadim. Ushbu yondashuvni jsfiddle yoki o'z loyihalaringizda tekshirishingiz mumkin. Izohlarda ushbu muammoga boshqa takliflarni qo'shishdan mamnunmiz. Tabi
Bugun biz faqat HTML va CSS3-dan foydalanib Javascript-dan foydalanmasdan bunday funktsional narsani qanday yaratishni aniqlaymiz. , Chrome, Safari va Opera, men yorliqlar ishida hech qanday muammo aniqlamadim. Eshik uchun tabiv biz vikorystuvati teg bo'ladi kiritish va CSS selektori :tekshirildi.
Kelajakda biz HTML-da sahifa tartibini yaratish imkoniyatiga ega bo'lamiz
Yorliqlar (joylashuv: nisbiy; chekka: 0 avtomatik; kenglik: 800px; ) .tablar yorligʻi (rang: #555; kursor: koʻrsatgich; displey: blok; float: chap; kenglik: 150px; balandlik: 45px; chiziq balandligi: 45px joy: nisbiy tepa: 2px; text-align: center ) .tabs kiritish (pozitsiya: mutlaq; chap: -9999px; ) #tab_1:checked~ ~ #tab_l3 (fon: #fff; chegara rangi: #fff; tepa: 0; z-indeks: 3; .tabs_cont (fon: #fff; pozitsiya: nisbiy; z-indeks: 2; balandlik: 230px; )
Bu yerda biz robimo yorlig'i uslublari bo'yicha yordam so'raymiz kiritish blok elementini o'rnatadi va uning o'lchamini, joylashishini va ko'rinishini o'rnatadi (fon va kordonlar uchun o'z uslublaringizni o'rnatishingiz mumkin) bizga kerak bo'lganda va biz xohlagancha , Chrome, Safari va Opera, men yorliqlar ishida hech qanday muammo aniqlamadim.'va mutlaq joylashishni aniqlash yordami uchun.
Quyida xuddi shu selektor mavjud Izohlarda ushbu muammoga boshqa takliflarni qo'shishdan mamnunmiz. Ular biz nima haqida gaplashayotganimizni taxmin qilishdi. So'zlarni kechiring, radio qutisi kabi id #tab_1 tanlovlar/qiymatlar, keyin uslublar bilan blokda tiqilib qoladi id #tab_l1 Xo'sh, o'xshashlik bilan.
Bizning versiyamizda biz tanlangan yorliq nomiga uslublarni o'rnatdik.
Xo'sh, oxirida biz yorliqlarning mazmuni bilan blok uchun uslublarni o'rnatamiz.
Bizning vazifamizni bizning tabiblarimiz almashinadigan tarzda yaratish vaqti keldi. Ushbu vazifani amalga oshirish uchun quyidagi uslublar: Tabs_cont > div (pozitsiya: mutlaq; chap: -9999px; tepa: 0; shaffoflik: 0; -moz-transition: shaffoflik: shaffoflik .5s osonlik bilan chiqish; ) #tab_1:checked ~ .tabs_cont #tab_c1, #tab_2 :checked ~ .tabs_cont #tab_c2, #tab_3:checked ~. : 1; Avval barcha yorliqlarimizni yig'amiz. Eng oddiy yechim vikoristdir ko'rsatish: yo'q; , Agar bizga silliqlik kerak bo'lsa, oson marshrutlar biz uchun emas, shuning uchun bizga yordam kerak pozitsiyasi: mutlaq; Izohlarda ushbu muammoga boshqa takliflarni qo'shishdan mamnunmiz. Biz bloklarimizni ko'rish chegarasidan tashqariga o'tkazmoqdamiz va biz bu blokni kuch chegarasidan tashqarida ko'rish ehtimoli ko'proq.
shaffoflik: 0;
va muammosiz qiymatni bittaga oshiradi.
Quvvat bizga silliqlikka erishishga yordam beradi
o'tish
, keyin tasvirlanganidek.
Keyin yana selektorni tezlashtiraman
Yordam uchun faol radio qutilariga mos keladigan aniq ko'rinadigan bloklar mavjud.
Quvvat bizga silliqlikka erishishga yordam beradi
Ana xolos! Ushbu uslublarni o'zingiz sinab ko'rish orqali siz hozirgi ko'rinishingizni didingizga qarab o'zgartirishingiz mumkin.
Quyida siz chiqish yozuvlaringizni ko'rishingiz mumkin.
Kod haqida
Nav tab
Quvvat bizga silliqlikka erishishga yordam beradi
Ikki shakl uchun navigatsiya yorliqlari.
+ selektori keyingi qo'shni elementni tanlaydi.
Tarixan bu yorliqlarni bezash uchun ajoyib bo'lgan.
Kod haqida
Nav tab
Quvvat bizga silliqlikka erishishga yordam beradi
CSS tarmog'i yordamida elementni belgilashda boshqasi yonida joylashtirish mumkin, lekin displeyda osongina paydo bo'lishi mumkin.
Ushbu qalqon oddiy kirishga ega: selektor neytral + "xayoliy mikrosite bilan turli tomonlarning uslubi bilan bog'lanadi.
Tarixan bu yorliqlarni bezash uchun ajoyib bo'lgan.
Kod haqida
Nav tab
Quvvat bizga silliqlikka erishishga yordam beradi
Mos brauzerlar: Chrome, Edge, Firefox, Opera, Safari
Sof CSS yorliqlari
Tarixan bu yorliqlarni bezash uchun ajoyib bo'lgan.
Keyin yana selektorni tezlashtiraman
Nav tab
Quvvat bizga silliqlikka erishishga yordam beradi
Yorliqlar radio versiyasi.
Tarixan bu yorliqlarni bezash uchun ajoyib bo'lgan.
Kod haqida
Nav tab
Quvvat bizga silliqlikka erishishga yordam beradi
Talablar: CSS uchun maxsus identifikatorlar yo'q (aniq identifikatorlar uchun CSS talab qilinadi), istalgan miqdordagi noma'lum yorliqlar uchun moslashuvchan, kirish mumkin.
.
Tarixan bu yorliqlarni bezash uchun ajoyib bo'lgan.
Kod haqida
Nav tab
Quvvat bizga silliqlikka erishishga yordam beradi
CSS yorliqlari
Sof CSS vertikal yorliqlari.
Tarixan bu yorliqlarni bezash uchun ajoyib bo'lgan.
Kod haqida
Nav tab
Quvvat bizga silliqlikka erishishga yordam beradi
Ko'rsatkichli sof CSS yorliqlari
Animatsiyalangan o'tish yorliqlari
Tarixan bu yorliqlarni bezash uchun ajoyib bo'lgan.
Kod haqida
Nav tab
Quvvat bizga silliqlikka erishishga yordam beradi
Tasdiqlash qutilari bilan jonlantirilgan o'tish yorliqlari.
Sof CSS rangli yorliqlari
Tarixan bu yorliqlarni bezash uchun ajoyib bo'lgan.
Kod haqida
Nav tab
Quvvat bizga silliqlikka erishishga yordam beradi
Yorliq sof CSS rangli yorliqlari yo'q.
Faqat CSS yorliqlari
Tarixan bu yorliqlarni bezash uchun ajoyib bo'lgan.
Kod haqida
Nav tab
Quvvat bizga silliqlikka erishishga yordam beradi
CSS tarmog'i yordamida elementni belgilashda boshqasi yonida joylashtirish mumkin, lekin displeyda osongina paydo bo'lishi mumkin.
Faqat Material Design CSS yorliqlari.
Tarixan bu yorliqlarni bezash uchun ajoyib bo'lgan.
