Sungaden
Ammuem dagiti mangiwanwan a prinsipio, estratehia, ken teknik a nausar a mangbangon ken mangmantener iti Bootstrap tapno nalaklaka a maibagay ken mapalawa a mismo daytoy.
Bayat a dagiti panid ti panangrugi ket mangipaay ti pangrugian a panagpasiar ti proyekto ken no ania ti ituktukonna, daytoy a dokumento ket mangipamaysa no apay nga aramidenmi dagiti banag nga aramidenmi iti Bootstrap. Ilawlawagna ti pilosopiatayo iti panagbangon iti web tapno makasursuro dagiti dadduma kadatayo, makikontribusion a kaduatayo, ken matulongandatayo a mangpasayaat.
Makitam ti banag a saan nga umiso ti uni, wenno nalabit nasaysayaat ti pannakaaramidna? Luktam ti maysa nga isyu —kayatmi a pagsaritaan dayta kenka.
We’ll dive into each of these more throughout, ngem iti nangato a lebel, ditoy ti mangiturong iti pamay-anmi.
- Rumbeng a makasungbat ken mobile-first dagiti paset
- Dagiti paset ket rumbeng a maibangon nga addaan iti batayan a klase ken mapalawa babaen dagiti klase ti mangbalbaliw
- Dagiti estado ti paset ket rumbeng nga agtulnog ti gagangay a z-index a sukog
- No mabalin, kaykayatmo ti HTML ken CSS nga implementasion ngem ti JavaScript
- No mabalin, agusar kadagiti utilidad imbes a dagiti kostumbre nga estilo
- No mabalin, liklikan ti panangipatungpal kadagiti nainget a kasapulan ti HTML (dagiti agpili kadagiti ubbing) .
Dagiti estilo ti panagsungbat ti Bootstrap ket naibangon tapno makasungbat, ti maysa nga asidegan a masansan a maawagan a kas mobile-first . Usarenmi daytoy a termino kadagiti dok-mi ken kaaduanna nga umanamongkami iti daytoy, ngem no dadduma mabalin a nalawa unay. Bayat a saan a tunggal maysa a paset ket masapul nga interamente a makasungbat iti Bootstrap, daytoy a makasungbat a pamay-an ket maipapan ti panangkissay kadagiti panaglabsing ti CSS babaen ti panangiduron kenka a manginayon kadagiti estilo bayat a ti viewport ket agbalin a dakdakkel.
Iti ballasiw ti Bootstrap, makitam daytoy a nalawag unay kadagiti saludsodmi iti media. Iti kaaduan a kaso, agus-usarkami kadagiti min-widthsaludsod a mangrugi nga agaplikar iti espesipiko a breakpoint ken mangawit nga agpangato babaen dagiti nangatngato a breakpoint. Kas pagarigan, .d-noneagaplikar ti a manipud min-width: 0agingga iti awan patinggana. Iti sabali a bangir, .d-md-noneagaplikar ti a manipud iti kalalainganna a breakpoint ken agpangato.
No dadduma usarentayo max-widthno ti nainkasigudan a kinarikut ti maysa a paset ket kasapulanna dayta. No dadduma, dagitoy a panangibabawi ket nalawag iti panagandar ken mental a maipatungpal ken suporta ngem ti panangisurat manen kadagiti kangrunaan a panagandar manipud kadagiti pasettayo. Ikagkagumaanmi a limitaran daytoy a pamay-an, ngem usarenmi dayta sagpaminsan.
Malaksid iti Reboot-tayo, maysa a cross-browser normalization stylesheet, amin nga estilotayo ket panggepda nga usaren dagiti klase a kas dagiti agpili. Daytoy ket kayatna a sawen ti panag-steering clear kadagiti agpili ti tipo (kas pagarigan, input[type="text"]) ken dagiti ekstraneo a klase ti nagannak (kas pagarigan, .parent .child) a mangaramid kadagiti estilo nga espesipiko unay tapno nalaka a mailaksid.
Kas kasta, dagiti paset ket rumbeng a maibangon nga addaan ti batayan a klase a mangbalay kadagiti gagangay, saan a mailaksid a paris ti pateg ti sanikua. Kas pagarigan, .btnken .btn-primary. Usarenmi .btnpara kadagiti amin a gagangay nga estilo a kas displayti , padding, ken border-width. Kalpasanna agusartayo kadagiti modifiers a kas .btn-primaryiti pananginayon iti kolor, background-color, border-color, kdpy.
Dagiti klase ti mangbalbaliw ket rumbeng laeng a mausar no adda dagiti adu a tagikua wenno dagiti pateg a mabaliwan iti ballasiw dagiti adu a variante. Dagiti mangbalbaliw ket saan a kanayon a kasapulan, isu a siguraduem nga aktual nga agsalsalbarka kadagiti linia ti kodigo ken manglapped kadagiti saan a kasapulan a panangibabawi no mangpartuat kadagitoy. Dagiti nasayaat a pagarigan dagiti mangbalbaliw ket dagiti klase ti kolor ti tematayo ken dagiti variante ti kadakkel.
Adda dua a z-indextimbangan iti Bootstrap—dagiti elemento iti uneg ti maysa a paset ken dagiti paset ti overlay.
- Sumagmamano a paset iti Bootstrap ket naibangon nga addaan kadagiti agsasabtan nga elemento tapno malapdan dagiti doble a beddeng a saan a mangbalbaliw ti
bordertagikua. Kas pagarigan, dagiti grupo ti buton, dagiti grupo ti input, ken pagination. - Dagitoy a paset ket makibingbingayda ti pagalagadan
z-indexa sukog ti0babaen ti3. 0ket default (umuna),1ket:hover,2ket:active/.active, ken ,3ket:focus.- Daytoy a pamay-an ket maitunos kadagiti namnamaenmi iti kangatuan a prioridad ti agar-aramat. No ti maysa nga elemento ket naipamaysa, daytoy ket adda iti panagkita ken iti atension ti agar-aramat. Dagiti aktibo nga elemento ket maikadua a kangatuan gapu ta dagitoy ket mangipakita ti estado. Ti hover ket maikatlo a kangatuan gapu ta daytoy ket mangipakita ti panggep ti agar-aramat, ngem dandani ania man ket mabalin a mai-hover.
Ti bootstrap ket mangiraman kadagiti sumagmamano a paset nga agtigtignay a kas maysa nga overlay ti sumagmamano a kita. Daytoy ket mairaman, iti panagsasaruno ti kangatuan z-index, dagiti dropdown, dagiti naikeddeng ken napigket a navbar, dagiti modal, dagiti tooltip, ken dagiti popover. Dagitoy a paset ket addaan iti bukodda z-indexa timbangan a mangrugi iti 1000. Daytoy a pangrugian a numero ket naiparparna ken agserbi a kas bassit a buffer iti nagbaetan dagiti estilomi ken dagiti kostumbre nga estilo ti proyektom.
Tunggal paset ti panagkapet ket mangpaadu z-indexbassit ti pategna iti wagas a dagiti gagangay a prinsipio ti UI ket mangipalubos kadagiti elemento a naipangpangruna wenno nai-hover ti agar-aramat nga agtalinaed iti panagkita iti amin a panawen. Kas pagarigan, ti maysa a modal ket ti panaglapped ti dokumento (kas pagarigan, dika makaaramid ti ania man a sabali nga aramid malaksid ti panagtignay ti modal), isu nga ikabilmi dayta iti ngato dagiti navbarmi.
Ammuem ti ad-adu pay maipapan iti daytoy iti panidmi iti z-indexlayout .
No mabalin, kaykayatmi ti agsurat iti HTML ken CSS ngem ti JavaScript. Iti sapasap, ti HTML ken CSS ket ad-adu a nabunga ken makastrek kadagiti ad-adu a tattao kadagiti amin a nadumaduma a lebel ti padas. Naparpartak met ti HTML ken CSS iti browsermo ngem ti JavaScript, ken ti sapasap a browsermo ket mangipaay iti dakkel a panagandar para kenka.
Daytoy a prinsipio ket dagiti umuna a klasetayo a JavaScript API ket datadagiti attribute. Saanmo a kasapulan ti agsurat iti dandani ania man a JavaScript tapno mausarmo dagiti pluginmi iti JavaScript; imbes ketdi, agsuratka iti HTML. Basaen ti ad-adu pay maipapan iti daytoy iti panidmi a pakabuklan ti JavaScript .
Maudi, dagiti estilotayo ket mangbangon kadagiti batayan a kababalin dagiti gagangay nga elemento ti web. No mabalin, kaykayatmi nga usaren ti ipaay ti browser. Kas pagarigan, mabalinmo nga ikabil ti maysa a .btnklase iti gangani nga ania man nga elemento, ngem kaaduan nga elemento ket saan a mangipaay ti ania man a semantiko a pateg wenno panagusar ti browser. Isu nga imbes ketdi, usarentayo ti <button>s ken <a>s.
Kasta met laeng ti mapasamak kadagiti mas komplikado a paset. Bayat a mabalinmi ti agsurat ti bukodmi a plugin ti panangipaneknek ti porma tapno manginayon kadagiti klase iti maysa a nagannak nga elemento a naibatay iti kasasaad ti maysa nga input, iti kasta ket mangipalubos kadakami nga estilo ti teksto a kunaen ti nalabaga, kaykayatmi nga usaren dagiti :valid/ :invalidpseudo-elemento nga ipaay kadakami ti tunggal browser.
Dagiti klase ti utilidad—dati a katulongan iti Bootstrap 3—ket nabileg nga alyado iti pananglaban iti CSS bloat ken nakapuy a panagaramid ti panid. Ti maysa a klase ti utilidad ket kadawyan a maymaysa, saan a mabaliwan a panagparis ti sanikua-pateg a naiyebkas a kas maysa a klase (kas pagarigan, .d-blockmangibagi display: block;). Ti kangrunaan a makaawisda ket ti kapartak ti panagusar bayat ti panagsurat iti HTML ken pananglimitar iti kaadu ti kostumbre a CSS a masapul nga isuratmo.
Espesipiko maipapan iti kostumbre a CSS, dagiti utilidad ket makatulongda a manglaban ti umad-adu a kadakkel ti papeles babaen ti panangkissay kadagiti kaaduan a maulit-ulit a parismo ti pateg ti sanikua kadagiti agmaymaysa a klase. Mabalin nga addaan daytoy iti dramatiko nga epekto iti rukod kadagiti proyektom.
Nupay saan a kanayon a posible, ikagkagumaanmi a liklikan ti nalabes a dogmatiko kadagiti kasapulanmi iti HTML para kadagiti paset. Gapuna, ipamaysami dagiti agsolsolo a klase kadagiti CSS selector-mi ken ikagumaanmi a liklikan dagiti dagus nga ubbing a selector ( ~). Daytoy ket mangted kenka ti ad-adu a fleksibilidad iti pannakaipatungpalmo ken makatulong a mangtaginayon ti CSSmi a nasimsimple ken saan unay nga espesipiko.