Reinicieu
Reboot, una col·lecció de canvis CSS específics d'elements en un sol fitxer, inicia Bootstrap per proporcionar una línia de base elegant, coherent i senzilla sobre la qual construir.
Aproximació
El reinici es basa en Normalize, proporcionant molts elements HTML amb estils una mica opiniosos utilitzant només selectors d'elements. L'estil addicional només es fa amb les classes. Per exemple, reiniciem alguns <table>
estils per a una línia de base més senzilla i més tard proporcionem .table
, .table-bordered
, i més.
A continuació, es mostren les nostres directrius i els motius per triar què anul·lar al reiniciar:
- Actualitzeu alguns valors predeterminats del navegador per utilitzar
rem
s en lloc deem
s per a l'espaiat de components escalable. - Evitar
margin-top
. Els marges verticals poden col·lapsar-se, donant resultats inesperats. El que és més important, però, una única direcciómargin
és un model mental més simple. - Per a una escala més fàcil entre les mides del dispositiu, els elements de bloc haurien d'utilitzar
rem
s permargin
s. - Manteniu les declaracions de
font
propietats relacionades amb el mínim, utilitzantinherit
sempre que sigui possible.
Valors predeterminats de la pàgina
Els elements <html>
i <body>
s'actualitzen per oferir millors valors predeterminats a tota la pàgina. Més específicament:
- El
box-sizing
s'estableix globalment en tots els elements, inclosos*::before
i*::after
, aborder-box
. Això garanteix que l'amplada declarada de l'element mai es superi a causa del farciment o la vora.- No
font-size
es declara cap base a<html>
, però16px
s'assumeix (el navegador predeterminat).font-size: 1rem
s'aplica a l'<body>
escalat de tipus de resposta fàcil mitjançant consultes multimèdia respectant les preferències de l'usuari i garantint un enfocament més accessible. Aquest navegador per defecte es pot substituir modificant la$font-size-root
variable.
- No
- També
<body>
estableix un globalfont-family
,font-weight
,line-height
, icolor
. Això s'hereta més tard per alguns elements del formulari per evitar incoherències de tipus de lletra. - Per seguretat,
<body>
té un declaratbackground-color
, per defecte#fff
.
Pila de tipus de lletra nativa
Bootstrap utilitza una "pila de tipus de lletra nativa" o una "pila de fonts del sistema" per a una representació de text òptima a tots els dispositius i SO. Aquests tipus de lletra del sistema s'han dissenyat específicament tenint en compte els dispositius actuals, amb una representació millorada a les pantalles, suport de fonts variables i molt més. Llegiu més sobre les piles de fonts natives en aquest article de Smashing Magazine .
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Windows
"Segoe UI",
// Android
Roboto,
// Basic web fallback
"Helvetica Neue", Arial,
// Linux
"Noto Sans",
"Liberation Sans",
// Sans serif fallback
sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
Tingueu en compte que, com que la pila de tipus de lletra inclou tipus de lletra emoji, molts caràcters comuns de símbols/dingbat Unicode es mostraran com a pictogrames de diversos colors. La seva aparença variarà, depenent de l'estil utilitzat al tipus de lletra emoji natiu del navegador/plataforma, i no es veuran afectats per cap color
estil CSS.
Això font-family
s'aplica a <body>
i s'hereta automàticament a tot Bootstrap. Per canviar el global font-family
, actualitzeu $font-family-base
i recompileu Bootstrap.
Encapçalaments i paràgrafs
Tots els elements d'encapçalament, per exemple, <h1>
i <p>
es reinicien per margin-top
eliminar-los. S'han afegit encapçalaments margin-bottom: .5rem
i paràgrafs margin-bottom: 1rem
per facilitar l'espaiat.
Encapçalament | Exemple |
---|---|
<h1></h1> |
h1. Encapçalament d'arrencada |
<h2></h2> |
h2. Encapçalament d'arrencada |
<h3></h3> |
h3. Encapçalament d'arrencada |
<h4></h4> |
h4. Encapçalament d'arrencada |
<h5></h5> |
h5. Encapçalament d'arrencada |
<h6></h6> |
h6. Encapçalament d'arrencada |
Llistes
Totes les llistes— <ul>
, <ol>
, i <dl>
—s'han margin-top
eliminat i un margin-bottom: 1rem
. Les llistes imbricades no tenen margin-bottom
. També hem restablert els elements padding-left
on <ul>
i <ol>
.
- Totes les llistes tenen el seu marge superior eliminat
- I el seu marge inferior es va normalitzar
- Les llistes imbricades no tenen marge inferior
- D'aquesta manera tenen un aspecte més uniforme
- Sobretot quan va seguit de més elements de la llista
- El farciment esquerre també s'ha restablert
- Aquí teniu una llista ordenada
- Amb uns quants elements de la llista
- Té el mateix aspecte general
- Com la llista no ordenada anterior
Per a un estil més senzill, una jerarquia clara i un millor espaiat, les llistes de descripcions han actualitzat margin
s. s'ha de <dd>
restablir i afegir . s estan en negreta .margin-left
0
margin-bottom: .5rem
<dt>
- Llistes de descripció
- Una llista de descripció és perfecta per definir termes.
- Terme
- Definició del terme.
- Una segona definició per al mateix terme.
- Un altre terme
- Definició per a aquest altre terme.
Codi en línia
Emboliqui fragments de codi en línia amb <code>
. Assegureu-vos d'escapar els claudàtors angulars HTML.
<section>
s'hauria d'embolicar en línia.
For example, <code><section></code> should be wrapped as inline.
Blocs de codi
Utilitzeu <pre>
s per a diverses línies de codi. Una vegada més, assegureu-vos d'escapar dels claudàtors angulars del codi per a una representació adequada. L' <pre>
element es reinicia per eliminar-ne margin-top
i utilitzar rem
unitats per al seu margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Les variables
Per indicar variables utilitzeu l' <var>
etiqueta.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Entrada de l'usuari
Utilitzeu <kbd>
per indicar l'entrada que normalment s'introdueix mitjançant el teclat.
Per editar la configuració, premeu ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
Sortida de mostra
Per indicar la sortida de mostra d'un programa, utilitzeu l' <samp>
etiqueta.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Taules
Les taules s'ajusten lleugerament a l'estil <caption>
s, col·lapsen les vores i garanteixen la coherència text-align
en tot moment. La .table
classe inclou canvis addicionals per a les vores, el farciment i molt més .
Encapçalament de la taula | Encapçalament de la taula | Encapçalament de la taula | Encapçalament de la taula |
---|---|---|---|
Cel·la de la taula | Cel·la de la taula | Cel·la de la taula | Cel·la de la taula |
Cel·la de la taula | Cel·la de la taula | Cel·la de la taula | Cel·la de la taula |
Cel·la de la taula | Cel·la de la taula | Cel·la de la taula | Cel·la de la taula |
Formes
S'han reiniciat diversos elements de formulari per a estils bàsics més senzills. Aquests són alguns dels canvis més destacats:
<fieldset>
s no tenen vores, farciment ni marge, de manera que es poden utilitzar fàcilment com a embolcall per a entrades individuals o grups d'entrades.<legend>
s, com els conjunts de camps, també s'han redissenyat per mostrar-se com una mena d'encapçalament.<label>
s s'estableixen perdisplay: inline-block
permetremargin
l'aplicació.<input>
s,<select>
s,<textarea>
s i<button>
s s'aborden principalment per Normalize, però Reboot també elimina els seusmargin
i setsline-height: inherit
.<textarea>
s es modifiquen perquè només es puguin canviar de mida verticalment, ja que el canvi de mida horitzontal sovint "interromp" el disseny de la pàgina.<button>
Els elements s i<input>
botó tenencursor: pointer
quan:not(:disabled)
.
Aquests canvis, i més, es mostren a continuació.
Suport d'entrada de data i color
Tingueu en compte que les entrades de dates no són totalment compatibles amb tots els navegadors, és a dir, Safari.
Punters als botons
Reiniciar inclou una millora per role="button"
canviar el cursor predeterminat a pointer
. Afegiu aquest atribut als elements per ajudar a indicar que els elements són interactius. Aquest paper no és necessari per als <button>
elements, que aconsegueixen el seu propi cursor
canvi.
<span role="button" tabindex="0">Non-button element button</span>
Elements diversos
adreça
L' <address>
element s'actualitza per restablir el valor predeterminat font-style
del navegador de italic
a normal
. line-height
ara també s'hereta i margin-bottom: 1rem
s'ha afegit. <address>
s són per presentar informació de contacte de l'avantpassat més proper (o d'un conjunt de treballs). Conserva el format acabant les línies amb <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Nom complet
[email protected]
Cita de bloc
El valor predeterminat margin
de les quotes de bloc és 1em 40px
, de manera que ho restablirem a 0 0 1rem
una cosa més coherent amb altres elements.
Una cita coneguda, continguda en un element blockquote.
Algú famós a Source Title
Elements en línia
L' <abbr>
element rep un estil bàsic per fer-lo destacar entre el text del paràgraf.
Resum
cursor
El resum per defecte és text
, de manera que ho restablirem a pointer
per transmetre que es pot interactuar amb l'element fent-hi clic.
Alguns detalls
Més informació sobre els detalls.
Encara més detalls
Aquí hi ha encara més detalls sobre els detalls.
[hidden]
Atribut HTML5
HTML5 afegeix un nou atribut global anomenat[hidden]
, que té l'estil display: none
predeterminat. Prenent en préstec una idea de PureCSS , millorem aquesta predeterminada fent [hidden] { display: none !important; }
per ajudar a evitar que s'anul·liqui display
accidentalment.
<input type="text" hidden>
Incompatibilitat de jQuery
[hidden]
no és compatible amb jQuery $(...).hide()
i $(...).show()
mètodes. Per tant, actualment no avalem especialment [hidden]
altres tècniques per gestionar els display
elements.
Per només canviar la visibilitat d'un element, és a dir, display
no es modifica i l'element encara pot afectar el flux del document, utilitzeu la .invisible
classe .