Inzira
Wige ibijyanye n'amahame ngenderwaho, ingamba, hamwe nubuhanga bukoreshwa mukubaka no kubungabunga Bootstrap kugirango ubashe guhitamo neza no kuyagura wenyine.
Mugihe gutangira page bitanga uruzinduko rwumushinga nicyo rutanga, iyi nyandiko yibanze kumpamvu dukora ibintu dukora muri Bootstrap. Irasobanura filozofiya yacu kubaka kurubuga kugirango abandi batwigireho, batange umusanzu, kandi badufashe gutera imbere.
Reba ikintu kitumvikana neza, cyangwa wenda gishobora gukorwa neza? Fungura ikibazo - twifuza kubiganiraho nawe.
Tuzibira muri buri kimwe muribi byinshi, ariko kurwego rwo hejuru, dore icyayobora inzira yacu.
- Ibigize bigomba kwitabira kandi bigendanwa-mbere
- Ibigize bigomba kubakwa hamwe nicyiciro fatizo kandi bikagurwa binyuze mumashuri ahindura
- Ibihugu bigize ibice bigomba kumvira igipimo rusange cya z-indangagaciro
- Igihe cyose bishoboka, hitamo gushyira mubikorwa HTML na CSS kuruta JavaScript
- Igihe cyose bishoboka, koresha ibikorwa byuburyo bwihariye
- Igihe cyose bishoboka, irinde gushyira mubikorwa HTML isabwa (abatoranya abana)
Imiterere ya Bootstrap yuburyo bwubatswe bwubatswe kugirango busubizwe, inzira ikunze kwitwa mobile-mbere . Dukoresha iri jambo muri doc zacu kandi ahanini turabyemera, ariko rimwe na rimwe birashobora kuba binini cyane. Mugihe atari buri kintu cyose kigomba kuba cyitabiriwe rwose muri Bootstrap, ubu buryo bwo gusubiza nibijyanye no kugabanya CSS irenga mugusunika kongeramo imisusire nkuko kureba ari binini.
Hafi ya Bootstrap, uzabibona neza mubibazo byitangazamakuru. Mubihe byinshi, dukoresha min-widthibibazo bitangira gukoreshwa kumurongo wihariye kandi bigatwara inzira ndende. Kurugero, .d-noneikoreshwa kuva min-width: 0iherezo. Kurundi ruhande, .d-md-noneikoreshwa kuva murwego rwo hagati no hejuru.
Rimwe na rimwe, tuzakoresha max-widthmugihe ibice bigize ibintu bigoye bisaba. Rimwe na rimwe, ibi birenga birasobanutse mubikorwa no mubwenge birasobanutse kubishyira mubikorwa no gushyigikirwa kuruta kwandika imikorere yibanze kuva mubice byacu. Duharanira kugabanya ubu buryo, ariko tuzabukoresha buri gihe.
Usibye Reboot yacu, urupapuro rwambukiranya-rusanzwe rusanzwe, uburyo bwacu bwose bugamije gukoresha amasomo nkabatoranya. Ibi bivuze kuyobora neza abatoranya ubwoko (urugero, input[type="text"]) hamwe nababyeyi badasanzwe (urugero, .parent .child) bakora uburyo bwihariye kuburyo bworoshye kurenga.
Nkibyo, ibice bigomba kubakwa hamwe nicyiciro fatizo kibamo amazu asanzwe, ntabwo-arengerwa imitungo-agaciro kamwe. Kurugero, .btnna .btn-primary. Dukoresha .btnkubintu byose bisanzwe bisanzwe nka display, paddingna border-width. Hanyuma dukoresha abahindura nka .btn-primarykongeramo ibara, ibara-ibara, imipaka-ibara, nibindi.
Guhindura ibyiciro bigomba gukoreshwa gusa mugihe hari imitungo myinshi cyangwa indangagaciro zigomba guhinduka muburyo butandukanye. Abahindura ntabwo buri gihe ari ngombwa, menya neza ko mubyukuri uzigama imirongo ya code kandi ukirinda kurenga bitari ngombwa mugihe ubirema. Ingero nziza zabahindura ninsanganyamatsiko yibara ryamasomo hamwe nubunini butandukanye.
Hano hari z-indexumunzani ibiri muri Bootstrap - ibintu mubice bigize ibice.
- Ibice bimwe muri Bootstrap byubatswe hamwe nibintu byuzuzanya kugirango birinde imipaka ibiri idahinduye
borderumutungo. Kurugero, buto yitsinda, amatsinda yinjiza, hamwe na pagination. - Ibi bice bisangiye igipimo gisanzwe
z-indexcya .03 0ni Mburabuzi (Intangiriro),1ni:hover,2ni:active/.active, na,3ni:focus.- Ubu buryo buhuye nibyo dutegereje kubakoresha cyane. Niba ikintu cyibanze, kirareba kandi kubakoresha. Ibintu bifatika nibyakabiri hejuru kuko byerekana leta. Hover ni iya gatatu hejuru kuko yerekana ubushake bwabakoresha, ariko hafi ya byose birashobora guhishwa.
Bootstrap ikubiyemo ibice byinshi bikora nkigicucu cyubwoko runaka. Ibi birimo, ukurikije urwego rwo hejuru z-index, ibitonyanga, ibyerekezo bihamye kandi bifatanye, modal, ibikoresho, hamwe na popovers. Ibi bice bifite z-indexigipimo cyacyo gitangirira kuri 1000. Iyi ntangiriro yo gutondekanya kandi ikora nka buffer ntoya hagati yuburyo bwacu hamwe numushinga wawe wihariye.
Buri kintu cyose cyuzuzanya cyongera z-indexagaciro gake muburyo amahame rusange ya UI yemerera abakoresha kwibanda cyangwa kuzenguruka kugirango bagumane kureba igihe cyose. Kurugero, modal ni inyandiko ihagarika (urugero, ntushobora gufata ikindi gikorwa usibye kubikorwa bya modal), nuko dushyira ibyo hejuru ya navbars.
Wige byinshi kuriyi z-indexpage yacu .
Igihe cyose bishoboka, duhitamo kwandika HTML na CSS hejuru ya JavaScript. Muri rusange, HTML na CSS birororoka cyane kandi bigera kubantu benshi mubyiciro bitandukanye byuburambe. HTML na CSS nabyo byihuta muri mushakisha yawe kurusha JavaScript, kandi mushakisha yawe muri rusange itanga ibikorwa byinshi kuri wewe.
Iri hame nicyiciro cyambere cya JavaScript API ni dataibiranga. Ntugomba kwandika hafi JavaScript yose kugirango ukoreshe amacomeka ya JavaScript; ahubwo, andika HTML. Soma byinshi kuriyi page yacu ya JavaScript .
Ubwanyuma, uburyo bwacu bwubaka kumyitwarire yibanze yibintu bisanzwe. Igihe cyose bishoboka, duhitamo gukoresha ibyo mushakisha itanga. Kurugero, urashobora gushira urwego .btnhafi yikintu icyo aricyo cyose, ariko ibintu byinshi ntibitanga agaciro gasobanutse cyangwa imikorere ya mushakisha. Ahubwo, dukoresha <button>s na <a>s.
Kimwe kijya kubintu byinshi bigoye. Mugihe dushobora kwandika fomu yacu yo kwemeza plugin kugirango twongere amasomo kubintu byababyeyi dushingiye kumiterere yinjiza, bityo bikatwemerera gutunganya inyandiko ivuga umutuku, duhitamo gukoresha :valid/ :invalidpseudo-element buri mushakisha iduha.
Ibyiciro byingirakamaro-byahoze bifasha muri Bootstrap 3-ninshuti ikomeye mukurwanya CSS bloat no gukora nabi page. Icyiciro cyingirakamaro mubisanzwe ni kimwe, kidahinduka umutungo-agaciro guhuza byerekanwe nkurwego (urugero, .d-blockbyerekana display: block;). Ubujurire bwabo bwibanze ni umuvuduko wo gukoresha mugihe wandika HTML no kugabanya umubare wa CSS yihariye ugomba kwandika.
By'umwihariko kubyerekeranye na CSS yihariye, ibikorwa birashobora gufasha kurwanya ingano ya dosiye mugabanya ibintu bikunze kugarukwaho imitungo-agaciro byombi mubyiciro bimwe. Ibi birashobora kugira ingaruka zidasanzwe mubipimo byimishinga yawe.
Nubwo bidashoboka buri gihe, duharanira kwirinda kuba inyangamugayo birenze ibyo HTML isabwa kubigize. Rero, twibanze kumasomo amwe mubatoranya CSS kandi tugerageza kwirinda abana bahita bahitamo ( >). Ibi biguha guhinduka mubikorwa byawe kandi bigafasha gukomeza CSS yacu yoroshye kandi idasanzwe.