in English

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 es basa.

En aquesta pàgina

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 rems en lloc de ems 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 rems per margins.
Manteniu les declaracions de fontpropietats relacionades amb el mínim, utilitzant inheritsempre que sigui possible.

Variables CSS

Afegit a la v5.2.0

Amb la v5.1.1, hem estandarditzat els nostres @imports necessaris en tots els nostres paquets de CSS (inclosos bootstrap.css, bootstrap-reboot.cssi bootstrap-grid.css) per incloure _root.scss. Això afegeix :rootvariables CSS de nivell a tots els paquets, independentment de quants d'ells s'utilitzin en aquest paquet. En última instància, Bootstrap 5 continuarà veient més variables CSS afegides al llarg del temps, per tal de proporcionar més personalització en temps real sense la necessitat de recompilar sempre Sass. El nostre enfocament és prendre les nostres variables Sass d'origen i transformar-les en variables CSS. D'aquesta manera, encara que no utilitzeu variables CSS, encara teniu tot el poder de Sass. Això encara està en curs i necessitarà temps per implementar-se completament.

Per exemple, considereu aquestes :rootvariables CSS per a <body>estils comuns:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

A la pràctica, aquestes variables s'apliquen a Reinici de la manera següent:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

El que us permet fer personalitzacions en temps real com vulgueu:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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-sizings'estableix globalment en tots els elements, inclosos *::beforei *::after, a border-box. Això garanteix que l'amplada declarada de l'element mai es superi a causa del farciment o la vora.
- No font-sizees declara cap base a <html>, però 16pxs'assumeix (el navegador predeterminat). font-size: 1rems'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-rootvariable.
També <body>estableix un global font-family, font-weight, line-height, i color. Això s'hereta més tard per alguns elements del formulari per evitar incoherències de tipus de lletra.
Per seguretat, <body>té una declarada background-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 tipus de lletra variable 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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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 Unicode de símbols/dingbat habituals es representaran com a pictogrames multicolors. 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 colorestil CSS.

Això font-familys'aplica a <body>i s'hereta automàticament a tot Bootstrap. Per canviar el global font-family, actualitzeu $font-family-basei recompileu Bootstrap.

Encapçalaments i paràgrafs

Tots els elements d'encapçalament, per exemple, <h1>i <p>es reinicien per margin-topeliminar-los. S'han afegit encapçalaments margin-bottom: .5remi paràgrafs margin-bottom: 1remper 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

Regles horitzontals

L' <hr>element s'ha simplificat. De manera similar als valors predeterminats del navegador, <hr>les s tenen un estil mitjançant border-top, tenen un valor predeterminat opacity: .25i hereten automàticament la seva border-colorvia color, inclòs quan colors'estableix mitjançant el pare. Es poden modificar amb text, vores i utilitats d'opacitat.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Llistes

Totes les llistes— <ul>, <ol>, i <dl>—s'han margin-topeliminat i un margin-bottom: 1rem. Les llistes imbricades no tenen margin-bottom. També hem restablert els elements padding-lefton <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 margins. s'ha de <dd>restablir i afegir . s estan en negreta .margin-left0margin-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 HTML.

Per exemple, <section>s'hauria d'embolicar en línia.

html

For example, <code>&lt;section&gt;</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-topi utilitzar remunitats per al seu margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Les variables

Per indicar variables utilitzeu l' <var>etiqueta.

y = m x + b

html

<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 canviar de directori, escriviu cdseguit del nom del directori.
Per editar la configuració, premeu ctrl + ,

html

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.

Aquest text està pensat per ser tractat com a mostra de sortida d'un programa informàtic.

html

<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, redueixen les vores i garanteixen la coherència text-aligna tot arreu. La .tableclasse inclou canvis addicionals per a les vores, el farciment i molt més .

Aquesta és una taula d'exemple i aquest és el seu títol per descriure el contingut.
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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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>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 a display: inline-blockper permetre marginl'aplicació.
<input>s, <select>s, <textarea>s i <button>s s'aborden principalment per Normalize, però Reboot també elimina els seus margini sets line-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ó tenen cursor: pointerquan :not(:disabled).

Aquests canvis, i més, es mostren a continuació.

Exemple de llegenda

Exemple d'entrada

Exemple de correu electrònic

Exemple de telèfon

URL d'exemple

Número d'exemple

Exemple de cerca

Interval d'exemple

Exemple d'entrada de fitxer

Selecció d'exemple

Marqueu aquesta casella de selecció

La primera opció és això i allò La segona opció és una altra cosa que també és molt llarga per demostrar l'embolcall d'aquests controls de formulari fantàstics. La tercera opció està desactivada

Exemple d'àrea de text

Data d'exemple

Temps d'exemple

Exemple de contrasenya

Exemple datetime-local

Setmana d'exemple

Exemple de mes

Color d'exemple

Sortida d'exemple 100

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 cursorcanvi.

Botó d'element sense botó

html

<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-styledel navegador de italica normal. line-heightara també s'hereta i margin-bottom: 1rems'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>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Nom complet
[email protected]

Cita de bloc

El valor predeterminat marginde les quotes de bloc és 1em 40px, de manera que ho restablirem a 0 0 1remuna 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.

L' element d'abreviatura HTML .

Resum

cursorEl resum per defecte és text, de manera que ho restablirem a pointerper 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: nonepredeterminat. Prenent en préstec una idea de PureCSS , millorem aquesta predeterminada per [hidden] { display: none !important; }ajudar a evitar que s'anul·liqui displayaccidentalment.

<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 displayelements.

Per només canviar la visibilitat d'un element, és a dir, displayno es modifica i l'element encara pot afectar el flux del document, utilitzeu la .invisibleclasse .

Reinicieu

Aproximació

Variables CSS

Valors predeterminats de la pàgina

Pila de tipus de lletra nativa

Encapçalaments i paràgrafs

Regles horitzontals

Llistes

Codi en línia

Blocs de codi

Les variables

Entrada de l'usuari

Sortida de mostra

Taules

Formes

Suport d'entrada de data i color

Punters als botons

Elements diversos

adreça

Cita de bloc

Elements en línia

Resum

[hidden]Atribut HTML5

Incompatibilitat de jQuery

`[hidden]`Atribut HTML5