Sungaden

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.

Dagup

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) .

Nasungbatan

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.

Dagiti Klase

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.

dagiti timbangan ti z-index

Adda dua a z-indextimbangan iti Bootstrap—dagiti elemento iti uneg ti maysa a paset ken dagiti paset ti overlay.

Dagiti elemento ti paset

• 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 ti 0babaen ti 3.
• 0ket default (umuna), 1ket :hover, 2ket :active/ .active, ken 3isu :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.

Overlay dagiti paset

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 napili nga arbitrariamente 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 agar-aramat a naipangpangruna wenno na-hover nga elemento 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 .

HTML ken CSS iti rabaw ti JS

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 browsermo ket sapasap a mangipaay iti dakkel a panagandar para kenka.

Daytoy a prinsipio ket isu ti umuna a klase ti JavaScript APImi nga agus-usar kadagiti dataattribute. 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 Utilities

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.

Nalaka a maibagay nga HTML

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.

Dagiti kombension ti kodigo

Ti Giya ti Kodigo (manipud iti Bootstrap co-creator, @mdo) ket mangidokumento no kasano nga isurattayo ti HTML ken CSStayo iti ballasiw ti Bootstrap. Daytoy ket mangikeddeng kadagiti pagalagadan para iti sapasap a panagpormat, dagiti default ti gagangay a sentido, dagiti urnos ti sanikua ken attribute, ken dadduma pay.

Usarenmi ti Stylelint tapno maipatungpal dagitoy a pagalagadan ken ad-adu pay iti Sass/CSS-mi. Ti custom Stylelint config mi ket open source ken magun-od para kadagiti dadduma nga usaren ken palawaen.

Usarenmi ti vnu-jar tapno mangipatungpal ti pagalagadan ken semantiko nga HTML, ken kasta met ti panangduktal kadagiti gagangay a biddut.