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.
Dagup
I-dive-mi ti tunggal maysa kadagitoy nga ad-adda iti intero, 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, kaykayat 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-width
saludsod a mangrugi nga agaplikar iti espesipiko a breakpoint ken mangawit nga agpangato babaen dagiti nangatngato a breakpoint. Kas pagarigan, .d-none
agaplikar ti a manipud min-width: 0
agingga iti awan patinggana. Iti sabali a bangir, .d-md-none
agaplikar ti a manipud iti kalalainganna a breakpoint ken agpangato.
No dadduma usarentayo max-width
no 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, .btn
ken .btn-primary
. Usarenmi .btn
para kadagiti amin a gagangay nga estilo a kas display
ti , padding
, ken border-width
. Kalpasanna agusartayo kadagiti modifiers a kas .btn-primary
iti 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. Saan a kanayon a kasapulan dagiti mangbalbaliw, isu a siguraduem nga aktual nga iduldulinmo dagiti 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-index
timbangan 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
border
tagikua. Kas pagarigan, dagiti grupo ti buton, dagiti grupo ti input, ken pagination. - Dagitoy a paset ket makibingbingayda ti pagalagadan
z-index
a sukog ti0
babaen ti3
. 0
ket default (umuna),1
ket:hover
,2
ket:active
/.active
, ken3
isu: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-index
a 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-index
bassit 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-index
layout .
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 data
attribute. Saanmo a kasapulan ti agsurat iti dandani aniaman 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 estilomi 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 .btn
klase 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
/ :invalid
pseudo-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-block
mangibagi 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.