Aproximació

Obteniu informació sobre els principis rectors, les estratègies i les tècniques que s'utilitzen per crear i mantenir Bootstrap perquè pugueu personalitzar-lo i ampliar-lo més fàcilment.

Tot i que les pàgines d'inici ofereixen un recorregut introductori del projecte i del que ofereix, aquest document se centra en per què fem les coses que fem a Bootstrap. Explica la nostra filosofia de construir a la xarxa perquè altres puguin aprendre de nosaltres, contribuir amb nosaltres i ajudar-nos a millorar.

Veus alguna cosa que no sona bé, o potser es podria fer millor? Obre un problema ; ens agradaria parlar-ne amb tu.

Resum

Ens endinsarem més en cadascun d'aquests, però a un alt nivell, aquí teniu el que guia el nostre enfocament.

• Els components han de ser responsius i han de ser mòbils primer
• Els components s'han de construir amb una classe base i ampliar-los mitjançant classes modificadores
• Els estats dels components haurien d'obeir una escala d'índex z comuna
• Sempre que sigui possible, preferiu una implementació HTML i CSS sobre JavaScript
• Sempre que sigui possible, utilitzeu utilitats sobre estils personalitzats
• Sempre que sigui possible, eviteu fer complir requisits HTML estrictes (selectors de nens)

Responent

Els estils de resposta de Bootstrap estan dissenyats per ser sensibles, un enfocament que sovint s'anomena primer mòbil . Utilitzem aquest terme als nostres documents i estem d'acord amb ell, però de vegades pot ser massa ampli. Tot i que no tots els components han de ser totalment sensibles a Bootstrap, aquest enfocament sensible consisteix a reduir les substitucions de CSS empenyent-vos a afegir estils a mesura que la finestra gràfica es fa més gran.

A Bootstrap, ho veureu més clarament a les nostres consultes de mitjans. En la majoria dels casos, utilitzem min-widthconsultes que comencen a aplicar-se en un punt d'interrupció específic i que continuen a través dels punts d'interrupció més alts. Per exemple, a .d-nones'aplica de min-width: 0a infinit. D'altra banda, a .d-md-nones'aplica des del punt d'interrupció mitjà i cap amunt.

De vegades farem servir max-widthquan la complexitat inherent d'un component ho requereixi. De vegades, aquestes substitucions són funcionalment i mentalment més clares d'implementar i donar suport que de reescriure la funcionalitat bàsica dels nostres components. Ens esforcem per limitar aquest enfocament, però l'utilitzarem de tant en tant.

Classes

A part del nostre Reinici, un full d'estils de normalització entre navegadors, tots els nostres estils tenen com a objectiu utilitzar classes com a selectors. Això significa allunyar-se dels selectors de tipus (p. ex., input[type="text"]) i de les classes pares estranyes (p. ex., .parent .child) que fan que els estils siguin massa específics per substituir-los fàcilment.

Com a tal, els components s'han de construir amb una classe base que allotja parells de propietat-valor comuns que no s'han de substituir. Per exemple, .btni .btn-primary. Utilitzem .btnper a tots els estils comuns com display, padding, i border-width. A continuació, utilitzem modificadors com .btn-primaryafegir el color, el color de fons, el color de la vora, etc.

Les classes modificadores només s'han d'utilitzar quan hi ha diverses propietats o valors per canviar entre diverses variants. Els modificadors no sempre són necessaris, així que assegureu-vos que realment esteu desant línies de codi i evitant substitucions innecessàries en crear-les. Uns bons exemples de modificadors són les nostres classes de color del tema i les variants de mida.

escales d'índex z

Hi ha dues z-indexescales a Bootstrap: elements dins d'un component i components de superposició.

Elements components

• Alguns components de Bootstrap es construeixen amb elements superposats per evitar vores dobles sense modificar la borderpropietat. Per exemple, grups de botons, grups d'entrada i paginació.
• Aquests components comparteixen una z-indexescala estàndard de 0fins a 3.
• 0és per defecte (inicial), 1és :hover, 2és :active/ .activei 3és :focus.
• Aquest enfocament coincideix amb les nostres expectatives de màxima prioritat dels usuaris. Si un element està enfocat, està a la vista i a l'atenció de l'usuari. Els elements actius són els segons més alts perquè indiquen un estat. Passar el cursor és el tercer més alt perquè indica la intenció de l'usuari, però es pot moure gairebé qualsevol cosa .

Components de superposició

Bootstrap inclou diversos components que funcionen com a superposició d'algun tipus. Això inclou, per ordre més alt z-index, menús desplegables, barres de navegació fixes i adhesives, modals, informació sobre eines i finestres emergents. Aquests components tenen la seva pròpia z-indexescala que comença a 1000. Aquest número de partida s'ha escollit arbitràriament i serveix com a petit buffer entre els nostres estils i els estils personalitzats del vostre projecte.

Cada component de superposició augmenta z-indexlleugerament el seu valor de manera que els principis comuns de la interfície d'usuari permeten que els elements enfocats a l'usuari o que es mantenen al ratolí es mantinguin a la vista en tot moment. Per exemple, un modal és el bloqueig de documents (per exemple, no podeu fer cap altra acció excepte l'acció del modal), així que ho posem a sobre de les nostres barres de navegació.

Obteniu més informació sobre això a la nostra z-indexpàgina de disseny .

HTML i CSS sobre JS

Sempre que sigui possible, preferim escriure HTML i CSS sobre JavaScript. En general, HTML i CSS són més prolífics i accessibles per a més persones de tots els nivells d'experiència. HTML i CSS també són més ràpids al vostre navegador que JavaScript i, en general, us ofereix una gran quantitat de funcionalitats.

Aquest principi és la nostra API de JavaScript de primera classe que utilitza dataatributs. No cal que escriviu gairebé cap JavaScript per utilitzar els nostres connectors de JavaScript; en lloc d'això, escriviu HTML. Llegiu més sobre això a la nostra pàgina de visió general de JavaScript .

Finalment, els nostres estils es basen en els comportaments fonamentals dels elements web comuns. Sempre que sigui possible, preferim utilitzar el que proporciona el navegador. Per exemple, podeu posar una .btnclasse en gairebé qualsevol element, però la majoria dels elements no proporcionen cap valor semàntic ni funcionalitat del navegador. Per tant, en canvi, fem servir <button>s i <a>s.

El mateix passa amb els components més complexos. Tot i que podríem escriure el nostre propi connector de validació de formularis per afegir classes a un element pare basant-nos en l'estat d'una entrada, de manera que ens permetrà posar un estil de text en vermell, preferim utilitzar els pseudoelements :valid/ que cada navegador ens proporciona.:invalid

Utilitats

Les classes d'utilitat, abans ajudants a Bootstrap 3, són un poderós aliat per combatre la inflació de CSS i el mal rendiment de la pàgina. Una classe d'utilitat és normalment un aparellament únic i immutable propietat-valor expressat com a classe (per exemple, .d-blockrepresenta display: block;). El seu atractiu principal és la velocitat d'ús mentre escriu HTML i limitar la quantitat de CSS personalitzat que has d'escriure.

Específicament pel que fa al CSS personalitzat, les utilitats poden ajudar a combatre l'augment de la mida del fitxer reduint els parells de propietat-valor que es repeteixen més habitualment en classes individuals. Això pot tenir un efecte espectacular a escala en els vostres projectes.

HTML flexible

Tot i que no sempre és possible, ens esforcem per evitar ser massa dogmàtics en els nostres requisits HTML per als components. Així, ens centrem en les classes individuals als nostres selectors CSS i intentem evitar els selectors fills immediats ( >). Això us ofereix més flexibilitat en la vostra implementació i ajuda a mantenir el nostre CSS més senzill i menys específic.

Convencions del codi

Code Guide (del co-creador de Bootstrap, @mdo) documenta com escrivim el nostre HTML i CSS a Bootstrap. Especifica directrius per al format general, els valors predeterminats del sentit comú, les ordres de propietats i atributs i molt més.

Utilitzem Stylelint per fer complir aquests estàndards i més al nostre Sass/CSS. La nostra configuració personalitzada de Stylelint és de codi obert i està disponible per a que altres la facin servir i ampliar.

Utilitzem vnu-jar per fer complir l'HTML estàndard i semàntic, així com per detectar errors comuns.