Çemeleşme
“Bootstrap” -y gurmak we goldamak üçin ulanylýan ýol görkeziji ýörelgeler, strategiýalar we usullar barada öwreniň, ony has aňsatlaşdyryp we giňeldip bilersiňiz.
Başlangyç sahypalar taslama we onuň hödürleýän zatlary bilen tanyşlyk gezelençini üpjün etse-de, bu resminama Bootstrap-da näme üçin edýändigimize ünsi jemleýär . Başgalaryň bizden öwrenmegi, biziň bilen goşant goşmagy we gowulaşmagyna kömek etmegi üçin webde gurmak pelsepämizi düşündirýär.
Dogry däl bir zady görüň, belki has gowy edip bolarmy? Bir meseläni açyň - biz siziň bilen ara alyp maslahatlaşmak isleýäris.
Bularyň hersine has çuňňur çümeris, ýöne ýokary derejede, çemeleşmämizi ugrukdyrýan zat.
- Komponentler ilki bilen sesli we ykjam bolmaly
- Komponentler esasy synp bilen gurulmaly we üýtgediji synplar arkaly giňeldilmeli
- Komponentler umumy z-indeks şkalasyna boýun bolmalydyrlar
- Mümkin boldugyça JavaScript-den HTML we CSS ýerine ýetirişini ileri tutuň
- Mümkin boldugyça, adaty stillerden peýdalanyň
- Mümkin boldugyça HTML-iň berk talaplaryny ýerine ýetirmekden gaça duruň (çagalary saýlaýanlar)
“Bootstrap” -yň duýgur stilleri täsirli bolmak üçin gurulýar, köplenç ykjam ilki diýilýär . Bu termini resminamalarymyzda ulanýarys we köplenç onuň bilen ylalaşýarys, ýöne käwagt gaty giň bolup biler. “Bootstrap” -da her bir komponent düýbünden jogap bermeli däl bolsa-da, bu duýgur çemeleşme, görnüşiň ulalmagy bilen stil goşmaga itergi bermek bilen CSS-iň artykmaçlygyny azaltmak barada.
“Bootstrap” -yň üsti bilen muny media talaplarymyzda has aýdyň görersiňiz. min-widthKöp halatlarda belli bir nokatda ulanylyp başlaýan we has ýokary nokatlardan geçýän talaplary ulanýarys . Mysal üçin, çäksizlige .d-nonedegişlidir . min-width: 0Beýleki tarapdan, .d-md-noneorta aralykdan we ýokarykdan ulanylýar.
max-widthKäwagt komponentiň çylşyrymlylygy talap edilende ulanarys . Käwagt bu goşmaçalar, komponentlerimizden esasy funksiýany täzeden ýazmakdan has köp ýerine ýetirmek we goldamak üçin funksional we akyl taýdan has düşnüklidir. Bu çemeleşmäni çäklendirmäge çalyşýarys, ýöne wagtal-wagtal ulanarys.
Brauzeriň kadalaşdyryş stil tablisasy bolan “Reboot” -dan başga ähli stillerimiz synplary saýlaýjy hökmünde ulanmagy maksat edinýär. Bu, görnüşleri saýlaýjylardan (meselem, input[type="text"]) we daşarky ene-atalar synplaryndan (meselem, .parent .child) aňsatlyk bilen ýok etmek üçin stilleri gaty kesgitli dolandyrmagy aňladýar.
Şeýle bolansoň, komponentler umumy, umumy bahasy däl jübütleriň umumy bahasy bolan esasy synp bilen gurulmalydyr. Mysal üçin, .btnwe .btn-primary. Commonhli .btnumumy stilleri ulanýarys displaywe . Soňra reňk, fon-reňk, araçäk-reňk we ş.m. goşmak ýaly üýtgedijileri ulanýarys .paddingborder-width.btn-primary
Üýtgediji synplar diňe birnäçe wariantda üýtgedilmeli birnäçe häsiýet ýa-da bahalar bolanda ulanylmaly. Üýtgeýjiler elmydama hökmany däl, şonuň üçin kod setirlerini hakykatdanam tygşytlaýandygyňyza we döredilende gereksiz artykmaçlyklaryň öňüni alýandygyňyza göz ýetiriň. Üýtgeýjileriň gowy mysallary mowzugymyzyň reňk synplary we ululyk görnüşleri.
“Bootstrap” -da iki z-indexterezisi bar - bir komponentiň içindäki elementler we üst-üstündäki bölekler.
border“Bootstrap” -daky käbir komponentler, emlägi üýtgetmän goşa serhetleriň öňüni almak üçin bir-birine gabat gelýän elementler bilen gurlupdyr . Mysal üçin, düwme toparlary, giriş toparlary we sahypa.- Bu komponentler adaty
z-indexmasştabda paýlaşýarlar0.3 0default (başlangyç),1is:hover,2is:active/.active, we,3is:focus.- Bu çemeleşme, iň ýokary ulanyjy ileri tutýan zatlarymyza laýyk gelýär. Eger bir element gönükdirilen bolsa, ulanyjynyň ünsüni özüne çekýär. Işjeň elementler ýagdaýy görkezýär, sebäbi ýagdaýy görkezýär. “Hover” üçünji orunda durýar, sebäbi ulanyjynyň niýetini görkezýär, ýöne islendik zat diýen ýaly saklanyp bilner.
“Bootstrap” haýsydyr bir görnüşiň örtügi hökmünde işleýän birnäçe komponenti öz içine alýar. Bu, iň ýokary tertipde z-index, aşak düşýänler, üýtgewsiz we ýelmeşýän gämi duralgalary, modallar, gurallar we açylýan ýerleri öz içine alýar. z-indexBu komponentleriň başlaýan öz masştaby bar 1000. Bu başlangyç san tötänleýin we biziň stillerimiz bilen taslamaňyzyň adaty stilleriniň arasynda kiçijik bufer bolup hyzmat edýär.
Her bir örtülen komponent, z-indexbahasyny birneme ýokarlandyrýar, umumy UI ýörelgeleri ulanyja gönükdirilen ýa-da örtülen elementleri hemişe ýatda saklamaga mümkinçilik berýär. Mysal üçin, modal resminamalary blokirlemekdir (mysal üçin, modalyň hereketinden başga hiç hili çäre görüp bilmersiňiz), şonuň üçin muny deňiz gämilerimiziň üstünde goýýarys.
Bu barada has giňişleýin öwreniň z-indexsahypamyzda .
Mümkin boldugyça JavaScript-den HTML we CSS ýazmagy makul bilýäris. Umuman aýdanyňda, HTML we CSS has öndümlidir we dürli tejribe derejelerinden has köp adam üçin elýeterlidir. HTML we CSS brauzeriňizde JavaScript-den has çalt we brauzeriňiziň generaly size köp funksiýa berýär.
Bu ýörelge, birinji derejeli JavaScript API datahäsiýetlerimizdir. JavaScript plaginlerimizi ulanmak üçin JavaScript diýen ýaly ýazmak hökman däl; ýerine, HTML ýazyň. Bu hakda has giňişleýin JavaScript syn sahypamyzda okaň .
Netijede, stillerimiz umumy web elementleriniň esasy özüni alyp barşyna esaslanýar. Mümkin boldugyça brauzeriň berýän zatlaryny ulanmagy makul bilýäris. Mysal üçin, .btnislendik elemente diýen ýaly synp goýup bilersiňiz, ýöne elementleriň köpüsi semantik bahany ýa-da brauzer funksiýasyny üpjün etmeýär. <button>Şeýlelik bilen, s we s ulanýarys <a>.
Has çylşyrymly komponentler üçin hem edil şonuň ýaly. Giriş ýagdaýyna esaslanyp, esasy elemente sapak goşmak üçin öz formamyzy barlamak plaginini ýazyp bilsek-de, tekstiň gyzyl diýilmegini düzmäge mümkinçilik bersek-de, her brauzeriň berýän / pseudo :valid- :invalidelementlerini ulanmagy makul bildik.
Kömekçi synplar - Bootstrap 3-iň öňki kömekçileri - CSS çişmegine we sahypanyň pes işlemegine garşy göreşmekde güýçli hyzmatdaş. Peýdaly synp, adatça, synp hökmünde aňladylýan ýeke-täk, üýtgewsiz emläk-baha jübütligi (mysal üçin, .d-blockaňladýar display: block;). Olaryň esasy özüne çekijisi, HTML ýazylanda ulanmagyň tizligi we ýazmaly CSS-iň mukdaryny çäklendirmekdir.
Hususan-da, adaty CSS hakda, kömekçi enjamlar, iň köp gaýtalanýan emläk bahasy jübütleriňizi bir klasa azaltmak arkaly faýl ululygynyň ýokarlanmagyna garşy kömek edip biler. Taslamalaryňyzda bu uly täsir edip biler.
Hemişe mümkin bolmasa-da, komponentler üçin HTML talaplarymyzda aşa dogmatik bolmakdan saklanmaga çalyşýarys. Şeýlelik bilen, CSS saýlaýjylarymyzdaky ýeke synplara ünsi jemleýäris we çagalary derrew saýlaýjylardan gaça durmaga synanyşýarys ( ~). Bu ýerine ýetirişiňizde has çeýeligi üpjün edýär we CSS-ni has ýönekeý we has anyk saklamaga kömek edýär.