Nêzîkbûhatinî

Dema ku rûpelên destpêkê serdanek danasînê ya projeyê û tiştê ku ew pêşkêşî dike peyda dike, ev belge balê dikişîne ser ka çima em tiştên ku em li Bootstrap dikin dikin. Ew felsefeya me rave dike ku em li ser tevneyê ava bikin da ku yên din ji me fêr bibin, bi me re bibin alîkar, û ji me re bibin alîkar ku em pêşve bibin.

Tiştek ku ne rast xuya dike, an jî dibe ku çêtir were kirin? Pirsgirêkek vekin - em dixwazin bi we re nîqaş bikin.

Berhevkirinî

Em ê li her yek ji van bêtir bişopînin, lê di astek bilind de, li vir tiştê ku nêzîkatiya me rêber dike.

• Pêdivî ye ku pêkhate bersivdar û yekem-mobîl bin
• Pêdivî ye ku pêkhate bi çînek bingehîn were çêkirin û bi navgîniya çînên guhêrbar were dirêj kirin
• Dewletên pêkhatî divê li gorî pîvanek z-indexek hevpar tevbigerin
• Dema ku gengaz be, pêkanîna HTML û CSS-ê li ser JavaScript-ê tercîh bikin
• Kengê ku gengaz be, li ser şêwazên xwerû karûbaran bikar bînin
• Kengê ku gengaz be, ji pêkanîna daxwazên hişk ên HTML-ê dûr bixin (hilbijêrên zarokan)

Pêrakirin

Şêweyên bersivdar ên Bootstrap ji bo bersivdar têne çêkirin, nêzîkatiyek ku bi gelemperî wekî yekem-mobîl tê binav kirin . Em vê têgînê di belgeyên xwe de bikar tînin û bi piranî pê razî ne, lê carinan ew dikare pir berfireh be. Digel ku ne pêdivî ye ku her pêkhateyek di Bootstrap-ê de bi tevahî bersivdar be, ev nêzîkatiya bersivdar li ser kêmkirina serpêhatiyên CSS-ê ye ku bi zorê dide we ku hûn şêwazan lê zêde bikin ji ber ku dîmen mezin dibe.

Li seranserê Bootstrap, hûn ê di pirsên me yên medyayê de herî zelal vê yekê bibînin. Di pir rewşan de, em min-widthpirsnameyên ku di xalek veqetandinê ya taybetî de dest bi sepandinê dikin û di nav xalên veqetandinê yên bilind de derbas dibin bikar tînin. Mînakî, a .d-noneji bêdawîtiyê derbas dibe min-width: 0. Ji hêla din ve, a .d-md-noneji xala veqetandina navîn û jor derbas dibe.

Carinan em ê bikar bînin max-widthdema ku tevliheviya xwerû ya pêkhateyek wê hewce bike. Carinan, ev serpêhatî ji nûvenivîsandina fonksiyonên bingehîn ên ji pêkhateyên me ve ji hêla fonksiyonel û derûnî ve zelaltir in ku werin bicîh kirin û piştgirî bikin. Em hewl didin ku vê nêzîkatiyê sînordar bikin, lê dê dem bi dem wê bikar bînin.

Classes

Ji xeynî Reboot-a me, şêwazek normalkirina gerokê ya cross-gerokê, hemî şêwazên me armanc dikin ku dersan wekî hilbijêr bikar bînin. Ev tê vê wateyê ku ji hilbijêrên tîpan (mînak, input[type="text"]) û çînên dêûbav ên derveyî (mînak, .parent .child) dûr bisekinin ku şêwazên pir taybetî dikin ku bi hêsanî werin paşguh kirin.

Bi vî rengî, pêdivî ye ku pêkhate bi çînek bingehîn ku cotên milk-nirxê yên hevpar, yên ku neyên paşve xistin, werin çêkirin. Ji bo nimûne, .btnû .btn-primary. Em ji .btnbo hemî şêwazên hevpar ên wekî display, padding, û bikar tînin border-width. Dûv re em guhêrbaran bikar tînin wekî .btn-primaryreng, paş-reng, sînor-reng, hwd zêde bikin.

Divê çînên guhêrbar tenê dema ku gelek taybetmendî an nirx hene ku di nav gelek guhertoyan de werin guheztin werin bikar anîn. Guherker her gav ne hewce ne, ji ber vê yekê pê ewle bin ku hûn bi rastî xetên kodê tomar dikin û dema ku wan diafirînin pêşî li serweriyên nehewce digirin. Nimûneyên baş ên guhêrbar dersên me yên rengê mijarê û guhertoyên mezinahiyê ne.

pîvanên z-index

Di Bootstrap-ê de du z-indexpîvan hene - hêmanên di nav pêkhatek û pêkhateyên sergirtî de.

Hêmanên pêkhatî

• Hin hêmanên di Bootstrap de bi hêmanên hevgirtî têne çêkirin da ku pêşî li sînorên ducar bêyî guheztina bordermilkê bigirin. Mînakî, komên bişkok, komên têketinê, û pagasyon.
• Van pêkhateyan pîvanek standard z-indexa bi 0riya parve dikin 3.
• 0xwerû ye (destpêkî), 1ye :hover, / 2e û ye .:active.active3:focus
• Ev nêzîkatî bi hêviyên me yên pêşîniya bikarhêner a herî bilind re têkildar e. Ger hêmanek baldar be, ew li ber çavan û li bal bikarhêner e. Hêmanên çalak duyemîn herî bilind in ji ber ku ew dewletê destnîşan dikin. Hover sêyemîn herî bilind e ji ber ku ew niyeta bikarhêner destnîşan dike, lê hema hema her tişt dikare were hilanîn.

pêkhateyên Overlay

Bootstrap gelek hêmanan vedihewîne ku wekî pêvekek cûreyek kar dikin. Ev bi rêza herî bilind z-index, dakêşan, navbarên sabît û asê, modal, şîretên amûran, û popoveran vedihewîne. z-indexVan pêkhateyan pîvana xwe ya ku ji dest pê dike 1000hene. Ev hejmara destpêkê bi kêfî hate hilbijartin û di navbera şêwazên me û şêwazên xwerû yên projeya we de wekî tamponek piçûk kar dike.

Her hêmanek pêvekirî z-indexnirxa xwe hinekî zêde dike bi vî rengî ku prensîbên UI-ya hevpar dihêle ku hêmanên baldar an pêvekirî yên bikarhêner her dem li ber çavan bimînin. Mînakî, modalek belgeyê asteng dike (mînak, hûn nekarin ji bo çalakiya modalê ji xeynî çalakiya modal çalakiyek din bikin), ji ber vê yekê em wê li jorê navbarên xwe didin.

z-indexDi rûpela me ya sêwiranê de li ser vê yekê bêtir fêr bibin .

HTML û CSS li ser JS

Dema ku gengaz be, em tercîh dikin ku HTML û CSS li ser JavaScript binivîsin. Bi gelemperî, HTML û CSS ji bo bêtir mirovên ji hemî astên ezmûnên cihêreng jêhatîtir û gihîştî ne. HTML û CSS jî di geroka we de ji JavaScript-ê zûtir in, û geroka we bi gelemperî ji we re fonksiyonek mezin peyda dike.

Ev prensîb API-ya meya JavaScript-a yekem e ku datataybetmendiyan bikar tîne. Ji bo ku hûn pêvekên JavaScript-ê bikar bînin ne hewce ne ku hûn hema hema JavaScript binivîsin; li şûna wê, HTML-ê binivîsin. Li ser vê yekê di rûpela meya serpêhatiya JavaScriptê de bêtir bixwînin .

Di dawiyê de, şêwazên me li ser tevgerên bingehîn ên hêmanên tevna hevpar ava dibin. Dema ku gengaz be, em tercîh dikin ku tiştê ku gerok peyda dike bikar bînin. Mînakî, hûn dikarin .btnçînek li ser her hêmanek bixin, lê pir hêman nirxek semantîk an fonksiyonek gerokê peyda nakin. Ji ber vê yekê, em <button>s û <a>s bikar tînin.

Heman tişt ji bo pêkhateyên tevlihevtir jî derbas dibe. Dema ku me dikaribû pêveka erêkirina forma xwe binivîsîne da ku li ser bingeha rewşa têketinê dersan li hêmanek dêûbav zêde bike, bi vî rengî rê dide me ku em nivîsê bi rengê sor bikin, em tercîh dikin ku :valid/ :invalidpseudo-hêmanên ku her gerok ji me re peyda dike bikar bînin.

Utilities

Dersên bikêrhatî - berê arîkarên Bootstrap 3 - hevalbendek hêzdar e ku di şerkirina bloka CSS û performansa belengaz a rûpelê de. Çînek bikêr bi gelemperî cotek taybetmendî-nirxa yekane, neguhêrbar e ku wekî çînek tête diyar kirin (mînak, .d-blocktemsîl dike display: block;). Banga wan a bingehîn leza karanîna dema nivîsandina HTML-ê û sînorkirina mîqdara CSS-ya xwerû ya ku hûn divê binivîsin e.

Bi taybetî di derbarê CSS-ya xwerû de, karûbar dikarin bi kêmkirina cotên weya milk-nirxê yên ku herî gelemperî têne dubare kirin di polên yekane de, li dijî zêdebûna mezinahiya pelê şer bikin. Ev dikare di projeyên we de di pîvanê de bandorek dramatîk hebe.

HTML-ya nerm

Her çend ne her gav ne gengaz be jî, em hewl didin ku di hewcedariyên xwe yên HTML-ê yên ji bo pêkhateyan de zêde dogmatîk nebin. Bi vî rengî, em di hilbijêrên xwe yên CSS de balê dikişînin ser dersên yekane û hewl didin ku xwe ji hilbijêrên zarokan ên yekser dûr bixin ( >). Ev di pêkanîna we de bêtir nermbûnek dide we û dibe alîkar ku CSS-ya me sadetir û kêmtir taybetî bimîne.

Peymanên Code

Rêbernameya kodê (ji hev-afirînerê Bootstrap, @mdo) belge dike ka em çawa HTML û CSS-ya xwe li seranserê Bootstrap dinivîsin. Ew rêbernameyên ji bo formatkirina gelemperî, pêşnumayên hişmendiya hevpar, fermanên taybetmendî û taybetmendiyê, û hêj bêtir diyar dike.

Em Stylelint bikar tînin da ku van standardan û bêtir di Sass/CSS-ya xwe de bicîh bikin. Veavakirina meya xwerû ya Stylelint çavkaniyek vekirî ye û ji bo kesên din jî heye ku bikar bînin û dirêj bikin.

Em vnu-jar bikar tînin da ku HTML- ya standard û semantîk bicîh bikin, û hem jî xeletiyên hevpar tespît bikin.