Source

Pagduol

Pagkat-on mahitungod sa giya nga mga prinsipyo, mga estratehiya, ug mga teknik nga gigamit sa pagtukod ug pagmentinar sa Bootstrap aron mas sayon ​​nimo nga i-customize ug i-extend kini sa imong kaugalingon.

Samtang ang mga panid sa pagsugod naghatag usa ka pasiuna nga paglibot sa proyekto ug kung unsa ang gitanyag niini, kini nga dokumento nagpunting kung ngano nga gibuhat namon ang mga butang nga among gibuhat sa Bootstrap. Gipatin-aw niini ang among pilosopiya sa pagtukod sa web aron ang uban makakat-on gikan kanamo, makatampo kanamo, ug makatabang kanamo nga molambo.

Tan-awa ang usa ka butang nga dili maayo, o tingali mahimo pa nga mas maayo? Ablihi ang usa ka isyu —gusto namong hisgotan kini kanimo.

Summary

Atong tun-an ang matag usa niini sa tibuok, apan sa taas nga lebel, ania ang naggiya sa atong pamaagi.

  • Ang mga component kinahanglan nga responsive ug mobile-first
  • Ang mga sangkap kinahanglan nga tukuron nga adunay base nga klase ug gipalapdan pinaagi sa mga klase sa modifier
  • Ang mga component state kinahanglang mosunod sa usa ka komon nga z-index scale
  • Kung mahimo, pilia ang pagpatuman sa HTML ug CSS kaysa JavaScript
  • Kung mahimo, gamita ang mga utilities labaw sa naandan nga mga istilo
  • Kung mahimo, likayi ang pagpatuman sa estrikto nga mga kinahanglanon sa HTML (mga tigpili sa mga bata)

Makatubag

Ang mga istilo sa pagtubag sa Bootstrap gihimo aron mahimong responsive, usa ka pamaagi nga sagad gitawag nga mobile-first . Gigamit namo kini nga termino sa among mga doc ug kadaghanan miuyon niini, apan usahay kini mahimong lapad kaayo. Bisan kung dili tanan nga sangkap kinahanglan nga hingpit nga mosanong sa Bootstrap, kini nga responsive nga pamaagi mao ang bahin sa pagkunhod sa mga override sa CSS pinaagi sa pagduso kanimo sa pagdugang mga istilo samtang ang viewport mahimong mas dako.

Sa tibuuk nga Bootstrap, makita nimo kini nga labing klaro sa among mga pangutana sa media. Sa kadaghanan nga mga kaso, gigamit namon ang mga min-widthpangutana nga nagsugod sa paggamit sa usa ka piho nga breakpoint ug nagpadayon sa mas taas nga mga breakpoint. Pananglitan, ang usa .d-nonemagamit gikan min-width: 0sa hangtod sa walay katapusan. Sa laing bahin, ang a .d-md-nonemagamit gikan sa medium breakpoint ug pataas.

Usahay atong gamiton max-widthkung gikinahanglan kini sa kinaiyanhon nga pagkakomplikado sa usa ka component. Usahay, kini nga mga override mas klaro sa pag-implementar ug pagsuporta kay sa pagsulat pag-usab sa core functionality gikan sa among mga component. Gipaningkamutan namon nga limitahan kini nga pamaagi, apan gamiton kini matag karon ug unya.

Mga klase

Gawas sa among Reboot, usa ka cross-browser normalization stylesheet, ang tanan namong mga estilo nagtumong sa paggamit sa mga klase isip mga tigpili. Nagpasabot kini nga likayan ang mga tigpili sa tipo (pananglitan, input[type="text"]) ug mga lahi nga klase sa ginikanan (eg, .parent .child) nga naghimo sa mga estilo nga espesipiko kaayo aron daling ma-override.

Ingon niana, ang mga sangkap kinahanglan nga matukod nga adunay usa ka base nga klase nga nagbutang sa kasagaran, dili ma-overridden nga mga pares nga kantidad sa kabtangan. Pananglitan, .btnug .btn-primary. Gigamit namo ang .btntanang komon nga mga estilo sama sa display, padding, ug border-width. Gigamit namon ang mga modifier sama .btn-primarysa pagdugang sa kolor, kolor sa background, kolor sa border, ug uban pa.

Ang mga klase sa modifier kinahanglan lang gamiton kung adunay daghang mga kabtangan o mga kantidad nga usbon sa daghang mga variant. Ang mga modifier dili kanunay gikinahanglan, busa siguruha nga nagtipig ka sa mga linya sa code ug gipugngan ang dili kinahanglan nga mga override sa paghimo niini. Ang maayong mga pananglitan sa mga modifier mao ang among mga klase sa kolor sa tema ug mga variant sa gidak-on.

z-index nga mga timbangan

Adunay duha ka z-indextimbangan sa Bootstrap—mga elemento sulod sa usa ka component ug overlay nga mga component.

Mga sangkap nga elemento

  • Ang ubang mga sangkap sa Bootstrap gitukod nga adunay nagsapaw-sapaw nga mga elemento aron mapugngan ang doble nga mga utlanan nga dili usbon ang borderkabtangan. Pananglitan, mga grupo sa butones, mga grupo sa input, ug pagination.
  • Kini nga mga sangkap nag-ambit sa usa ka sukaranan z-indexnga sukdanan sa 0pinaagi sa 3.
  • 0mao ang default (inisyal), 1is :hover, 2is :active/ .active, ug 3is :focus.
  • Kini nga pamaagi mohaum sa among gipaabot sa pinakataas nga prayoridad sa user. Kung ang usa ka elemento gipunting, kini makita ug naa sa atensyon sa tiggamit. Ang mga aktibo nga elemento mao ang ikaduha sa labing taas tungod kay kini nagpakita sa estado. Ang hover mao ang ikatulo nga kinatas-an tungod kay kini nagpakita sa katuyoan sa tiggamit, apan halos bisan unsa mahimong i-hover.

Overlay nga mga sangkap

Ang Bootstrap naglakip sa daghang mga sangkap nga naglihok isip usa ka overlay sa usa ka matang. Naglakip kini, sa han-ay sa pinakataas nga z-index, dropdowns, fixed ug sticky navbars, modals, tooltips, ug popovers. Kini nga mga sangkap adunay kaugalingon z-indexnga sukdanan nga nagsugod sa 1000. Kini nga numero sa pagsugod gipili nga arbitraryo ug nagsilbi nga gamay nga buffer tali sa among mga istilo ug mga naandan nga istilo sa imong proyekto.

Ang matag overlay component nagpataas sa z-indexbili niini og gamay sa paagi nga ang komon nga mga prinsipyo sa UI nagtugot sa user nga naka-focus o nag-hover nga mga elemento nga magpabilin nga makita sa tanang panahon. Pananglitan, ang usa ka modal mao ang pag-block sa dokumento (pananglitan, dili ka makahimo og bisan unsa nga aksyon gawas sa aksyon sa modal), busa among gibutang kana sa ibabaw sa among mga navbar.

Pagkat-on og dugang mahitungod niini sa among z-indexpahina sa layout .

HTML ug CSS sa JS

Kung mahimo, gusto namon nga isulat ang HTML ug CSS kaysa JavaScript. Sa kinatibuk-an, ang HTML ug CSS mas daghan ug ma-access sa daghang mga tawo sa tanan nga lainlaing lebel sa kasinatian. Ang HTML ug CSS mas paspas usab sa imong browser kaysa JavaScript, ug ang imong browser sa kasagaran naghatag og daghang gamit para kanimo.

Kini nga prinsipyo mao ang among unang klase nga JavaScript API gamit ang datamga hiyas. Dili nimo kinahanglan nga magsulat bisan unsang JavaScript aron magamit ang among mga plugin sa JavaScript; sa baylo, pagsulat HTML. Basaha ang dugang bahin niini sa among panid sa kinatibuk-ang JavaScript .

Katapusan, ang among mga istilo nagtukod sa sukaranang pamatasan sa kasagarang mga elemento sa web. Kung mahimo, gusto namon nga gamiton kung unsa ang gihatag sa browser. Pananglitan, mahimo nimong ibutang ang usa ka .btnklase sa halos bisan unsang elemento, apan kadaghanan sa mga elemento wala maghatag bisan unsang semantiko nga kantidad o gamit sa browser. Busa sa baylo, gigamit nato ang <button>s ug <a>s.

Ang sama nga moadto alang sa mas komplikado nga mga sangkap. Samtang mahimo namon isulat ang among kaugalingon nga porma sa pag-validate nga plugin aron idugang ang mga klase sa usa ka elemento sa ginikanan base sa estado sa usa ka input, sa ingon gitugotan kami sa pag-istilo sa teksto ingon pula, gusto namon nga gamiton ang :valid/ :invalidpseudo-elemento nga gihatag sa matag browser kanamo.

Mga gamit

Ang mga klase sa utility—kanhi katabang sa Bootstrap 3—usa ka kusgan nga kaalyado sa pagsukol sa CSS bloat ug dili maayo nga pasundayag sa panid. Ang usa ka klase sa utility kasagaran usa, dili mausab nga pagpares sa kantidad sa kabtangan nga gipahayag ingon usa ka klase (pananglitan, .d-blocknagrepresentar display: block;). Ang ilang panguna nga pag-apelar mao ang katulin sa paggamit samtang nagsulat sa HTML ug gilimitahan ang kantidad sa naandan nga CSS nga kinahanglan nimong isulat.

Partikular bahin sa naandan nga CSS, ang mga utilities makatabang sa pagbatok sa pagdugang sa gidak-on sa file pinaagi sa pagkunhod sa imong kasagarang gibalikbalik nga mga pares nga kantidad sa kabtangan ngadto sa usa ka klase. Mahimo kini nga adunay usa ka dramatikong epekto sa gidak-on sa imong mga proyekto.

Flexible nga HTML

Samtang dili kanunay posible, naningkamot kami nga malikayan ang sobrang dogmatiko sa among mga kinahanglanon sa HTML alang sa mga sangkap. Sa ingon, nagpunting kami sa usa ka klase sa among mga tigpili sa CSS ug gisulayan nga likayan ang mga nagpili dayon nga mga bata ( >). Naghatag kini kanimo og dugang nga pagka-flexible sa imong pagpatuman ug makatabang sa paghimo sa among CSS nga mas simple ug dili kaayo espesipiko.