Approach

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.

Summary

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)

Anoteerera

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 nenzvimbo dzepamusoro. 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.

Makirasi

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 masitayera senge 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.

z-index zviyero

Kune z-indexzviyero zviviri muBootstrap-zvinhu zviri mukati mechikamu uye pamusoro pezvikamu.

Component elements

• 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 che 0kuburikidza ne 3.
• 0ndeye default (yekutanga), 1ndeye :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.

Overlay zvikamu

Bootstrap inosanganisira akati wandei anoshanda seakafukidzwa eimwe 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 yakasarudzwa zvisina tsarukano uye inoshanda sediki bafa pakati pezvitaera zvedu nemasikirwo eprojekiti yako.

Chikamu chega chega chepamusoro 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 izvo pamusoro pemabhara edu.

Dzidza zvakawanda pamusoro peizvi mune yedu z-indexpeji peji .

HTML uye CSS pamusoro peJS

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 zvinokurumidza mubrowser yako kupfuura JavaScript, uye bhurawuza rako rinowanzo kupa zvakawanda zvekushanda kwako.

Iyi nheyo ndiyo yedu yekutanga-kirasi JavaScript API tichishandisa 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 titarise zvinyorwa zvichiti tsvuku, isu tinosarudza kushandisa :valid/ :invalidpseudo-elements chero browser inotipa.

Utilities

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 ndechekumhanyisa kwekushandisa paunenge uchinyora HTML uye kudzikisira huwandu hwetsika CSS yaunofanira kunyora.

Kunyanya maererano netsika CSS, zvishandiso zvinogona kubatsira kurwisa kuwedzera saizi yefaira nekudzikisa ako anowanzo kudzokororwa pfuma-value peya kuita makirasi mamwe. Izvi zvinogona kuve nemhedzisiro inoshamisa pachiyero mumapurojekiti ako.

Flexible HTML

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.

Zvibvumirano zvekodhi

Code Guide (kubva kuBootstrap co-creator, @mdo) inonyora manyorero atinoita HTML neCSS yedu paBootstrap. Iyo inotsanangura nhungamiro yezvakajairwa fomati, zvakajairika pfungwa defaults, zvivakwa uye hunhu mirairo, nezvimwe.

Isu tinoshandisa Stylelint kusimbisa aya mazinga uye nezvimwe muSass / CSS yedu. Yedu tsika Stylelint config yakavhurika sosi uye inowanikwa kune vamwe kuti vashandise uye kuwedzera.

Isu tinoshandisa vnu-jar kumisikidza yakajairwa uye semantic HTML, pamwe nekuona zvikanganiso zvakajairika.