Çemeleşme

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-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ň mahsus ç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 sahypasy 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) stilleri aňsatlyk bilen ýok etmek üçin gaty aýratynlaşdyrmagy 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. Thealy we, ýaly .btnumumy stilleriň hemmesini ulanýarys . Soňra reňk, fon-reňk, araçäk-reňk we ş.m. goşmak ýaly üýtgedijileri ulanýarys .displaypaddingborder-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-indexterezisi 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-indexmasştabda paýlaşýarlar 0.3
• 0default (başlangyç), 1is :hover, 2is :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. Bu komponentleriň öz z-indexölçegleri 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 maglumat z-indexsahypamyzda .

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.

dataBu ýö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, .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 plaginimizi ýazyp bilsek-de, tekstiň gyzyl reňkde ýazylmagyna ýol açsak-da, her brauzeriň berýän / pseudo :valid- :invalidelementlerini 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-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 synplara azaltmak arkaly faýl ululygynyň ýokarlanmagyna garşy kömek edip biler. Bu siziň taslamalaryňyzda 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 resminama edýä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, şeýle hem umumy ýalňyşlyklary ýüze çykarmak üçin vnu-jar ulanýarys .