Ç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.
Gysgaça mazmun
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)
Jogapkärçilikli
“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-width
Köp halatlarda belli bir nokatda ulanylyp başlaýan we has ýokary nokatlardan geçýän talaplary ulanýarys . Mysal üçin, çäksizlige .d-none
degişlidir . min-width: 0
Beýleki tarapdan, .d-md-none
orta aralykdan we ýokarykdan ulanylýar.
max-width
Kä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.
Sapaklar
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, .btn
we .btn-primary
. Commonhli .btn
umumy stilleri ulanýarys display
we . Soňra reňk, fon-reňk, araçäk-reňk we ş.m. goşmak ýaly üýtgedijileri ulanýarys .padding
border-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.
z-indeks terezisi
“Bootstrap” -da iki z-index
terezisi bar - bir komponentiň içindäki elementler we üst-üstündäki bölekler.
Komponent elementleri
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-index
masştabda paýlaşýarlar0
.3
0
default (başlangyç),1
is:hover
,2
is:active
/ is.active
, we .3
: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.
Örtük komponentleri
“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-index
Bu komponentleriň başlaýan öz masştaby bar 1000
. Bu başlangyç belgisi esassyz saýlandy we biziň stillerimiz bilen taslamaňyzyň adaty stilleriniň arasynda kiçijik bufer bolup hyzmat edýär.
Her bir örtülen komponent z-index
, umumy UI ýörelgeleri ulanyja gönükdirilen ýa-da örtülen elementleriň hemişe göz astynda saklanmagyna mümkinçilik berýän görnüşde birneme ýokarlanýar. 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-index
sahypamyzda .
JS-den HTML we CSS
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 hem brauzeriňizde JavaScript-den has çalt we brauzeriňiz, adatça, size köp funksiýa berýär.
data
Bu ýörelge, atributlary ulanyp, birinji derejeli JavaScript API . 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, .btn
islendik 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
- :invalid
elementlerini ulanmagy makul bildik.
Kärhanalar
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-block
aň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.
Çeýe HTML
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.
Kod şertleri
Kod gollanmasy (“Bootstrap” -yň bilelikde döredijisinden, @mdo) HTML we CSS-ni “Bootstrap” -da nädip ýazýandygymyzy görkezýär. Umumy formatlaşdyrma, umumy düşünjäniň defoltlary, emläk we atribut sargytlary we başgalar üçin görkezmeleri kesgitleýär.
Bu ülňüleri we has köp Sass / CSS-de ýerine ýetirmek üçin Stylelint ulanýarys . Adaty Stylelint konfigurasiýamyz açyk çeşme bolup, beýlekileriň ulanmagy we giňeldilmegi üçin elýeterlidir.
Adaty we semantik HTML-i ýerine ýetirmek, umumy ýalňyşlyklary ýüze çykarmak üçin vnu-jar ulanýarys .