Approach
Dzidza nezvemisimboti inotungamira, marongero, uye matekiniki anoshandiswa kuvaka nekuchengetedza Bootstrap kuitira kuti iwe ugone kugadzirisa nekuiwedzera zviri nyore iwe pachako.
Nepo mapeji ekutanga achipa rwendo rwekutanga chirongwa uye zvarinopa, gwaro iri rinotarisa kuti nei tichiita zvinhu zvatinoita muBootstrap. Inotsanangura huzivi hwedu pakuvaka pawebhu kuitira kuti vamwe vadzidze kubva kwatiri, vapewo nesu, uye vatibatsire kuvandudza.
Unoona chimwe chinhu chisinganzwisisike, kana kuti pamwe chingaitwe zvirinani? Vhura imwe nyaya —tinoda kuikurukura newe.
Tichanyura mune imwe neimwe yeizvi zvakanyanya mukati, asi pamwero wepamusoro, hezvino izvo zvinotungamira maitiro edu.
- Zvikamu zvinofanirwa kuve zvinopindura uye mobile-kutanga
- Zvikamu zvinofanirwa kuvakwa nekirasi yepasi uye kuwedzerwa kuburikidza nemakirasi ekugadzirisa
- Component states dzinofanira kuteerera chiyero chez-index
- Pese pazvinogoneka, sarudza kushandisa HTML neCSS pamusoro peJavaScript
- Pese pazvinogoneka, shandisa zvishandiso pamusoro pezvitaera zvetsika
- Pese pazvinogoneka, dzivirira kumanikidza HTML zvinodiwa (vana vanosarudza)
Maitiro ekupindura eBootstrap anovakwa kuti apindure, nzira inowanzonzi mobile-yekutanga . Isu tinoshandisa izwi iri muzvinyorwa zvedu uye tinobvumirana zvakanyanya naro, asi dzimwe nguva rinogona kunge rakapamhama. Kunyange zvisiri zvese zvinofanirwa kunge zvichinyatso kuterera muBootstrap, iyi inopindura nzira ndeye kudzikisa CSS inodarika nekukusundidzira iwe kuti uwedzere masitaera sezvo iyo yekutarisa inokura.
Mhiri kweBootstrap, iwe uchaona izvi zvakanyanya kujeka mune yedu midhiya mibvunzo. Kazhinji, isu tinoshandisa min-widthmibvunzo inotanga kushanda pane imwe nzvimbo yekuzorora uye kukwira kuburikidza nepamusoro pemabreakpoint. Semuenzaniso, a .d-noneinoshanda kubva min-width: 0kune infinity. Kune rimwe divi, a .d-md-noneinoshanda kubva papakati breakpoint uye kumusoro.
Dzimwe nguva tichashandisa max-widthkana chikamu chemukati chakaoma chinochida. Dzimwe nguva, izvi zvakapfuura zvinoshanda uye mupfungwa zvakajeka kushandisa uye kutsigira pane kunyora patsva mashandiro kubva kuzvikamu zvedu. Isu tinoedza kudzikisira nzira iyi, asi tichaishandisa nguva nenguva.
Kunze kweReboot yedu, muchinjika-browser normalization stylesheet, ese masitayera anovavarira kushandisa makirasi sevanosarudza. Izvi zvinoreva kutungamira pachena kwevanosarudza mhando (semuenzaniso, input[type="text"]) uye makirasi evabereki ekunze (semuenzaniso, .parent .child) anoita masitayera akanyanya kujeka kuti apfuure nyore.
Saka nekudaro, zvikamu zvinofanirwa kuvakwa ne base kirasi inogara yakajairwa, kwete-ku-ku-kupfupikisa pfuma-value pairs. Somuenzaniso, .btnuye .btn-primary. Isu tinoshandisa .btnkune ese akajairwa masitaera se display,, paddinguye border-width. Isu tinobva tashandisa ma modifiers .btn-primarysekuwedzera iwo ruvara, kumashure-ruvara, muganhu-ruvara, nezvimwe.
Makirasi ekugadziridza anofanirwa kushandiswa chete kana paine akawanda zvivakwa kana hunhu hunofanirwa kuchinjwa pane akawanda akasiyana. Ma modifiers haagare achidikanwa, saka ive shuwa kuti uri kunyatso chengetedza mitsara yekodhi uye kudzivirira zvisingakodzeri kudarika paunenge uchigadzira. Mienzaniso yakanaka yemodhifita ndiyo yedu dingindira mavara makirasi uye saizi akasiyana.
Kune z-indexzviyero zviviri muBootstrap-zvinhu zviri mukati mechikamu uye pamusoro pezvikamu.
- Zvimwe zvinhu muBootstrap zvakavakwa nezvinhu zvinopindirana kudzivirira miganhu yakapetwa pasina kugadzirisa chivakwa
border. Semuenzaniso, mapoka emabhatani, mapoka ekuisa, uye pagination. - Zvikamu izvi zvinogovanisa chiyero
z-indexchechiyero che0kuburikidza ne3. 0iri default (yekutanga),1iri:hover,2iri:active/.active, uye ,3iri:focus.- Iyi nzira inoenderana nezvatinotarisira zvemushandisi wepamusoro pekutanga. Kana chinhu chakatariswa, chiri mukuona uye pakutariswa nemushandisi. Active elements ndezvechipiri pakukwirira nekuti zvinoratidza nyika. Hover ndeyechitatu pakakwirira nekuti inoratidza chinangwa chemushandisi, asi chingangoita chero chinhu chinogona kusimudzwa.
Bootstrap inosanganisira akati wandei anoshanda seyakavharika yeimwe mhando. Izvi zvinosanganisira, mukurongeka kwepamusoro-soro z-index, kudonhedza, yakagadziriswa uye inonamira navbars, modals, tooltips, uye popovers. Zvikamu izvi zvine z-indexchiyero chazvo chinotangira pa 1000. Iyi nhamba yekutanga haina kurongeka uye inoshanda sediki bafa pakati pezvitaera zvedu uye masitaera epurojekiti yako.
Chimwe nechimwe chakavharika chikamu chinowedzera z-indexkukosha kwayo zvishoma nenzira yekuti misimboti yeUI inobvumira mushandisi anotariswa kana zvinhu zvakatenderedzwa kuti zvirambe zvichionekwa nguva dzese. Semuyenzaniso, modal kuvharisa gwaro (semuenzaniso, haugone kutora chero chimwe chiito kunze kwechiito chemodal), saka tinoisa iyo pamusoro pemabhara edu.
Dzidza zvakawanda pamusoro peizvi mune yedu z-indexpeji peji .
Pese pazvinogoneka, tinosarudza kunyora HTML neCSS pamusoro peJavaScript. Muzhinji, HTML neCSS zvakanyanya kuwanda uye zvinowanikwa kune vanhu vazhinji veese akasiyana siyana mazinga. HTML neCSS zvakare inokurumidza mubrowser yako kupfuura JavaScript, uye browser yako general inokupa hukuru hwekushanda kwako.
Iyi nheyo ndiyo yedu yekutanga-kirasi JavaScript API datahunhu. Iwe haufanire kunyora chero JavaScript kuti ushandise yedu JavaScript plugins; pachinzvimbo, nyora HTML. Verenga zvakawanda pamusoro peizvi mune yedu JavaScript overview peji .
Chekupedzisira, masitaera edu anovaka pahunhu hwakakosha hwezvinhu zvakajairika zvewebhu. Pese pazvinogoneka, tinosarudza kushandisa zvinopihwa nebrowser. Semuenzaniso, unogona kuisa .btnkirasi pane chero chinhu, asi zvinhu zvakawanda hazvipi chero semantic kukosha kana browser kushanda. Saka pachinzvimbo, tinoshandisa <button>s uye <a>s.
Izvo zvakafanana zvinoenda kune zvimwe zvakaoma zvikamu. Nepo isu taigona kunyora yedu yedu fomu yekusimbisa plugin kuti tiwedzere makirasi kuchinhu chemubereki zvichienderana nemamiriro ekuisa, nekudaro zvichititendera kuti tinyore zvinyorwa zvichiti tsvuku, isu tinoda kushandisa :valid/ :invalidpseudo-elements chero browser inotipa.
Makirasi ekushandisa-aimbove vabatsiri muBootstrap 3-ishamwari ine simba mukurwisa CSS bloat uye kusaita zvakanaka peji. Kirasi yezvishandiso inowanzova imwechete, isingachinjike pfuma-value pairing inoratidzwa sekirasi (semuenzaniso, .d-blockinomiririra display: block;). Chikumbiro chavo chikuru ndechekumhanya kwekushandisa paunenge uchinyora HTML uye kudzikisira huwandu hwetsika CSS yaunofanirwa kunyora.
Kunyanya maererano netsika CSS, zvishandiso zvinogona kubatsira kurwisa kuwedzera saizi yefaira nekudzikisa ako anowanzo kudzokororwa pfuma-value peya kuita makirasi mamwe. Izvi zvinogona kuita zvinoshamisa pachiyero mumapurojekiti ako.
Kunyange zvisingagoneke nguva dzese, tinoyedza kuti tisanyanya kuomerera pane zvatinoda zveHTML zvezvikamu. Nokudaro, tinotarisa pamakirasi ega ega muCSS selectors uye tinoedza kudzivisa vana vanosarudza pakarepo ( ~). Izvi zvinokupa iwe kuchinjika mukuita kwako uye zvinobatsira kuchengetedza CSS yedu iri nyore uye isina kujeka.