Avvicinamentu

Amparate nantu à i principii guida, strategie è tecniche aduprate per custruisce è mantene Bootstrap in modu chì pudete più facilmente persunalizà è allargà ellu stessu.

Mentre chì e pagine di partenza furniscenu un tour introduttivu di u prugettu è ciò chì offre, stu documentu si focalizeghja nantu à perchè facemu e cose chì facemu in Bootstrap. Spiega a nostra filusufìa per custruisce nantu à u web per chì l'altri ponu amparà da noi, cuntribuiscenu cun noi è aiutanu à migliurà.

Vede qualcosa chì ùn sona micca bè, o forse puderia esse fattu megliu? Aprite un prublema - ci piacerebbe discutiri cun voi.

Riassuntu

Immergeremu in ognuna di queste più in tuttu, ma à un altu livellu, eccu ciò chì guida u nostru approcciu.

• I cumpunenti deve esse responsive è mobile-first
• I cumpunenti deve esse custruiti cù una classa di basa è allargati via classi modificatori
• I stati di cumpunenti duveranu ubbidisci à una scala di z-index cumuni
• Sempre chì hè pussibule, preferite una implementazione HTML è CSS nantu à JavaScript
• Sempre chì hè pussibule, utilizate utilità nantu à stili persunalizati
• Sempre chì hè pussibule, evitari di rinfurzà esigenze HTML strette (selettori di i zitelli)

Risposta

I stili responsive di Bootstrap sò custruiti per esse responsive, un approcciu chì hè spessu chjamatu mobile-first . Utilizemu stu termini in i nostri documenti è largamente d'accordu cun ellu, ma à volte pò esse troppu largu. Mentre micca tutti i cumpunenti deve esse cumpletamente rispunsevuli in Bootstrap, questu approcciu responsive hè di riduce l'overrides CSS spinghjendu à aghjunghje stili mentre a vista diventa più grande.

À traversu Bootstrap, vi vede questu più chjaramente in e nostre dumande di media. In a maiò parte di i casi, usemu e min-widthdumande chì cumincianu à applicà à un puntu di ruptura specificu è portanu à traversu i punti di rupture più alti. Per esempiu, a .d-nones'applica da min-width: 0à l'infinitu. Per d 'altra banda, a .d-md-nones'applica da u puntu di breakpoint mediu è up.

A volte useremu max-widthquandu a cumplessità inherente di un cumpunente ne richiede. A volte, questi overrides sò funziunali è mentalmente più chjari per implementà è sustene chì a riscrittura di e funziunalità core da i nostri cumpunenti. Avemu sforzu di limità stu approcciu, ma l'utilizaremu da u tempu à u tempu.

Classi

A parte di u nostru Reboot, un fogliu di stile di normalizazione cross-browser, tutti i nostri stili miranu à aduprà classi cum'è selettori. Questu significa svià i selettori di tipu (per esempiu, input[type="text"]) è classi parenti estranei (per esempiu, .parent .child) chì facenu stili troppu specifichi per esse facilmente rimpiazzati.

Comu tali, i cumpunenti deve esse custruiti cù una classa di basa chì accoglie coppie di valori di pruprietà cumuni, micca da esse annullate. Per esempiu, .btnè .btn-primary. Usemu .btnper tutti i stili cumuni cum'è display, padding, è border-width. Dopu usemu modificatori cum'è .btn-primaryaghjunghje u culore, u culore di fondu, u culore di cunfini, etc.

E classi di modificatori sò solu esse usate quandu ci sò parechje proprietà o valori per esse cambiatu in parechje varianti. I modificatori ùn sò micca sempre necessarii, dunque assicuratevi di salvà in realtà linee di codice è impediscenu l'annullamenti innecessarii quandu li creanu. Boni esempi di modificatori sò i nostri classi di culore di tema è varianti di taglia.

scale z-index

Ci sò duie z-indexscale in Bootstrap - elementi in un cumpunente è cumpunenti di sovrapposizione.

Elementi cumpunenti

• Certi cumpunenti in Bootstrap sò custruiti cù elementi sovrapposti per impediscenu doppi cunfini senza mudificà a borderpruprietà. Per esempiu, gruppi di buttone, gruppi di input, è paginazione.
• z-indexQuesti cumpunenti sparte una scala standard di 0attraversu 3.
• 0hè predeterminatu (iniziale), 1hè :hover, 2hè :active/ .active, è 3hè :focus.
• Stu approcciu currisponde à e nostre aspettative di a più alta priorità di l'utilizatori. Se un elementu hè focu, hè in vista è à l'attenzione di l'utilizatori. Elementi attivi sò u sicondu più altu perchè indicanu statu. Hover hè u terzu più altu perchè indica l'intenzione di l'utilizatori, ma quasi tuttu pò esse trascinatu.

Cumpunenti overlay

Bootstrap include parechji cumpunenti chì funzionanu cum'è una superposizione di qualchì tipu. Questu include, in ordine di più altu z-index, dropdowns, navbars fissi è appiccicose, modali, tooltips è popovers. Questi cumpunenti anu a so propria z-indexscala chì principia à 1000. Stu numeru di partenza hè statu sceltu arbitrariamente è serve cum'è un picculu buffer trà i nostri stili è i stili persunalizati di u vostru prughjettu.

Ogni cumpunente di sovrapposizione aumenta z-indexligeramente u so valore in tale manera chì i principii cumuni di l'UI permettenu à l'elementi cuncentrati in l'utilizatori o sposti per esse sempre in vista. Per esempiu, un modale hè u bloccu di documentu (per esempiu, ùn pudete micca piglià alcuna altra azione salvu per l'azzione di u modale), cusì mettemu quì sopra i nostri navbars.

Sapete più nantu à questu in a nostra z-indexpagina di layout .

HTML è CSS sopra JS

Sempre chì hè pussibule, preferimu scrive HTML è CSS nantu à JavaScript. In generale, HTML è CSS sò più prolifici è accessibili à più persone di tutti i livelli di sperienza. HTML è CSS sò ancu più veloci in u vostru navigatore chì JavaScript, è u vostru navigatore generalmente furnisce una grande funziunalità per voi.

Stu principiu hè a nostra API JavaScript di prima classe chì utilizeghja dataattributi. Ùn avete bisognu di scrive quasi JavaScript per utilizà i nostri plugins JavaScript; invece, scrive HTML. Leghjite più nantu à questu in a nostra pagina di panoramica di JavaScript .

Infine, i nostri stili si basanu nantu à i cumpurtamenti fundamentali di elementi web cumuni. Sempre chì hè pussibule, preferimu aduprà ciò chì u navigatore furnisce. Per esempiu, pudete mette una .btnclassa nantu à quasi ogni elementu, ma a maiò parte di l'elementi ùn furnisce micca valore semanticu o funziunalità di u navigatore. Dunque, invece, usemu <button>s è <a>s.

U stessu passa per i cumpunenti più cumplessi. Mentre pudemu scrive u nostru propiu plugin di validazione di forma per aghjunghje classi à un elementu parent basatu annantu à u statu di l'input, permettendu cusì di stilà u testu dicenu rossu, preferimu aduprà :valid/ :invalidpseudo-elementi chì ogni navigatore ci furnisce.

Utilità

E classi di utilità - prima aiutanti in Bootstrap 3 - sò un putente alleatu in a lotta contru CSS bloat è scarsa prestazione di pagina. Una classa di utilità hè tipicamente un accoppiamentu unicu, immutable di pruprietà-valore espresso cum'è una classe (per esempiu, .d-blockrapprisenta display: block;). U so appellu primariu hè a rapidità d'utilizazione mentre scrive HTML è limità a quantità di CSS persunalizati chì avete da scrive.

In particulare in quantu à CSS persunalizati, l'utilità ponu aiutà à cumbatte l'aumentu di a dimensione di u schedariu riducendu i vostri coppie di valori di pruprietà più cumunimenti ripetuti in classi singole. Questu pò avè un effettu drammaticu à scala in i vostri prughjetti.

HTML flessibile

Mentre ùn hè micca sempre pussibule, strivemu per evità di esse troppu dogmatici in i nostri bisogni HTML per i cumpunenti. Cusì, focalizemu nantu à e classi singuli in i nostri selettori CSS è pruvate d'evità i selettori di i zitelli immediati ( >). Questu vi dà più flessibilità in a vostra implementazione è aiuta à mantene u nostru CSS più simplice è menu specificu.

Cunvenzioni di codice

Code Guide (da Bootstrap co-creator, @mdo) documenta cumu scrivemu u nostru HTML è CSS in Bootstrap. Specifica linee guida per u furmatu generale, i valori predeterminati di u sensu cumunu, l'ordine di pruprietà è attributi, è più.

Usemu Stylelint per rinfurzà questi standard è più in u nostru Sass / CSS. A nostra cunfigurazione Stylelint persunalizata hè open source è dispunibule per l'altri à aduprà è estenderà.

Utilizemu vnu-jar per rinfurzà l'HTML standard è semanticu, è ancu per detectà errori cumuni.