Nêzîkbûhatinî
Li ser prensîbên rêber, stratejî û teknîkên ku ji bo çêkirin û domandina Bootstrap têne bikar anîn fêr bibin da ku hûn bi hêsanî wê bi xwe xweş bikin û dirêj bikin.
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.
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)
Şê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-width
pirsnameyê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-none
ji bêdawîtiyê derbas dibe min-width: 0
. Ji hêla din ve, a .d-md-none
ji xala veqetandina navîn û jor derbas dibe.
Carinan em ê bikar bînin max-width
dema 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.
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 .btn
bo hemî şêwazên hevpar ên wekî display
, padding
, û bikar tînin border-width
. Dûv re em guhêrbaran bikar tînin wekî .btn-primary
reng, 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.
Di Bootstrap-ê de du z-index
pîvan hene - hêmanên di nav pêkhatek û pêkhateyên sergirtî de.
- 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
border
milkê bigirin. Mînakî, komên bişkok, komên têketinê, û pagasyon. - Van pêkhateyan pîvanek standard
z-index
a bi0
riya parve dikin3
. 0
xwerû ye (destpêkî),1
ye:hover
, /2
e , û , ye .:active
.active
3
: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.
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-index
Van pêkhateyan pîvana xwe ya ku ji dest pê dike 1000
hene. Ev jimareya destpêkê random e û 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-index
nirxa xwe hinekî zêde dike bi vî rengî ku prensîbên UI-ya hevpar rê dide 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-index
Di rûpela me ya sêwiranê de li ser vê yekê bêtir fêr bibin .
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 ya gelemperî ji we re fonksiyonek mezin peyda dike.
Ev prensîb taybetmendiyên me yên JavaScript-a-a-a-a-a-a ye data
. 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
/ :invalid
pseudo-hêmanên ku her gerok ji me re peyda dike bikar bînin.
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-block
temsî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.
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.