Starta om

Reboot, en samling elementspecifika CSS-ändringar i en enda fil, kickstartar Bootstrap för att ge en elegant, konsekvent och enkel baslinje att bygga vidare på.

På den här sidan

Närma sig

Reboot bygger på Normalize, vilket ger många HTML-element med något egensinniga stilar med endast elementväljare. Ytterligare styling görs endast med klasser. Till exempel startar vi om vissa <table>stilar för en enklare baslinje och tillhandahåller senare .table, .table-bordered, och mer.

Här är våra riktlinjer och skäl för att välja vad som ska åsidosättas i Reboot:

Uppdatera vissa webbläsarstandardvärden för att använda rems istället för ems för skalbart komponentavstånd.
Undvik margin-top. Vertikala marginaler kan kollapsa, vilket ger oväntade resultat. Ännu viktigare är att en enda riktning marginär en enklare mental modell.
För enklare skalning över enhetsstorlekar bör blockelement använda rems för margins.
Håll deklarationer av font-relaterade egenskaper till ett minimum, använd inheritnär det är möjligt.

CSS-variabler

Lades till i v5.2.0

Med v5.1.1 standardiserade vi våra obligatoriska @imports för alla våra CSS-paket (inklusive bootstrap.css, bootstrap-reboot.css, och bootstrap-grid.css) för att inkludera _root.scss. Detta lägger till :rootnivå CSS-variabler till alla paket, oavsett hur många av dem som används i det paketet. I slutändan kommer Bootstrap 5 att fortsätta att se fler CSS-variabler läggs till över tiden, för att ge mer anpassning i realtid utan att alltid behöva kompilera Sass. Vårt tillvägagångssätt är att ta våra källvariabler från Sass och omvandla dem till CSS-variabler. På så sätt, även om du inte använder CSS-variabler, har du fortfarande Sass kraft. Detta pågår fortfarande och kommer att ta tid att implementera fullt ut.

Tänk till exempel på dessa :rootCSS-variabler för vanliga <body>stilar:

  @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};

I praktiken tillämpas dessa variabler sedan i Reboot så här:

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
}

Vilket låter dig göra anpassningar i realtid hur du vill:

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

Sidans standardinställningar

Elementen <html>och <body>uppdateras för att ge bättre standardinställningar för hela sidan. Mer specifikt:

Den box-sizingär globalt inställd på alla element – inklusive *::beforeoch *::after, till border-box. Detta säkerställer att den deklarerade bredden på elementet aldrig överskrids på grund av stoppning eller kant.
- Ingen bas font-sizedeklareras på <html>, men 16pxantas (webbläsarens standard). font-size: 1remtillämpas på <body>för enkel responsiv typskalning via mediafrågor samtidigt som användarnas preferenser respekteras och en mer tillgänglig metod säkerställs. Denna webbläsarstandard kan åsidosättas genom att ändra $font-size-rootvariabeln.
Den <body>ställer också in en global font-family, font-weight, line-height, och color. Detta ärvs senare av vissa formulärelement för att förhindra teckensnittsinkonsekvenser.
För säkerhets skull har den <body>en deklarerad background-color, som standard till #fff.

Inbyggd teckensnittsstapel

Bootstrap använder en "native font stack" eller "system font stack" för optimal textåtergivning på alla enheter och operativsystem. Dessa systemteckensnitt har designats specifikt med dagens enheter i åtanke, med förbättrad rendering på skärmar, stöd för variabelt teckensnitt och mer. Läs mer om inbyggda teckensnittsstaplar i denna artikel i 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;

Observera att eftersom teckensnittsstacken innehåller emoji-teckensnitt, kommer många vanliga symbol/dingbat Unicode-tecken att renderas som flerfärgade piktogram. Deras utseende kommer att variera, beroende på vilken stil som används i webbläsarens/plattformens inbyggda emoji-teckensnitt, och de kommer inte att påverkas av några CSS- colorstilar.

Detta font-familytillämpas på <body>och ärvs automatiskt globalt i Bootstrap. För att byta global font-family, uppdatera $font-family-baseoch kompilera om Bootstrap.

Rubriker och stycken

Alla rubrikelement – t.ex. <h1>– och <p>återställs för att få dem margin-topborttagna. Rubriker har margin-bottom: .5remlagts till och stycken margin-bottom: 1remför lätt avstånd.

Rubrik	Exempel
`<h1></h1>`	h1. Bootstrap rubrik
`<h2></h2>`	h2. Bootstrap rubrik
`<h3></h3>`	h3. Bootstrap rubrik
`<h4></h4>`	h4. Bootstrap rubrik
`<h5></h5>`	h5. Bootstrap rubrik
`<h6></h6>`	h6. Bootstrap rubrik

Horisontella regler

Elementet <hr>har förenklats. I likhet med webbläsarens standardinställningar, <hr>är s formaterade via border-top, har en standard opacity: .25och ärver automatiskt deras border-colorvia color, inklusive när colorställs in via föräldern. De kan modifieras med text-, kant- och opacitetsverktyg.

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">

Listor

Alla listor — <ul>, <ol>, och <dl>— har margin-toptagits bort och en margin-bottom: 1rem. Kapslade listor har ingen margin-bottom. Vi har också återställt padding-lefton <ul>och <ol>elementen.

Alla listor har sin övre marginal borttagen
Och deras bottenmarginal normaliserades
Kapslade listor har ingen bottenmarginal
- På så sätt får de ett jämnare utseende
- Särskilt när de följs av fler listobjekt
Den vänstra stoppningen har också återställts

Här är en beställd lista
Med några listobjekt
Den har samma övergripande utseende
Som den tidigare oordnade listan

För enklare styling, tydlig hierarki och bättre avstånd har beskrivningslistorna uppdaterats margin. <dd>s återställ margin-lefttill 0och lägg till margin-bottom: .5rem. <dt>s är fetstilade .

Beskrivningslistor: En beskrivningslista är perfekt för att definiera termer.
Termin: Definition för termen.; En andra definition för samma term.
En annan term: Definition för denna andra term.

Inline-kod

Slå in inline kodavsnitt med <code>. Se till att undvika HTML-vinkelparenteser.

Till exempel <section>bör lindas som inline.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Kodblock

Använd <pre>s för flera rader kod. Återigen, se till att undvika alla vinkelparenteser i koden för korrekt rendering. Elementet <pre>återställs för att ta bort dess margin-topoch använda remenheter för dess 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>

Variabler

<var>Använd taggen för att indikera variabler .

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Användarinmatning

Använd för <kbd>att indikera indata som vanligtvis matas in via tangentbordet.

För att byta katalog, skriv cdföljt av namnet på katalogen.
För att redigera inställningar, tryck 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>

Provutgång

<samp>Använd taggen för att indikera provutdata från ett program .

Denna text är avsedd att behandlas som exempelutdata från ett datorprogram.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Tabeller

Tabeller är något anpassade till <caption>stilar, kollapsar kanter och säkerställer konsekventa text-aligngenomgående. Ytterligare ändringar för kanter , stoppning och mer kommer med klassen.table .

Detta är en exempeltabell, och det här är dess bildtext för att beskriva innehållet.
Tabellrubrik	Tabellrubrik	Tabellrubrik	Tabellrubrik
Tabellcell	Tabellcell	Tabellcell	Tabellcell
Tabellcell	Tabellcell	Tabellcell	Tabellcell
Tabellcell	Tabellcell	Tabellcell	Tabellcell

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>

Blanketter

Olika formelement har startat om för enklare basstilar. Här är några av de mest anmärkningsvärda förändringarna:

<fieldset>s har inga kanter, stoppning eller marginal så de kan enkelt användas som omslag för individuella ingångar eller grupper av ingångar.
<legend>s, liksom fieldset, har också formaterats om för att visas som en sorts rubrik.
<label>s är inställda på för display: inline-blockatt tillåta marginatt tillämpas.
<input>s, <select>s, <textarea>s och <button>s adresseras oftast av Normalize, men Reboot tar också bort deras marginoch sets line-height: inherit.
<textarea>s är modifierade för att endast kunna ändra storlek vertikalt eftersom horisontell storleksändring ofta "bryter" sidlayouten.
<button>s och <input>knappelement har cursor: pointernär :not(:disabled).

Dessa förändringar, och fler, visas nedan.

Stöd för inmatning av datum och färg

Tänk på att datuminmatning inte stöds fullt ut av alla webbläsare, nämligen Safari.

Pekare på knappar

Omstart inkluderar en förbättring för role="button"att ändra standardmarkören till pointer. Lägg till detta attribut till element för att visa att element är interaktiva. Denna roll är inte nödvändig för <button>element som får sin egen cursorförändring.

Knapp med icke-knappelement

html

<span role="button" tabindex="0">Non-button element button</span>

Diverse element

Adress

Elementet <address>uppdateras för att återställa webbläsarens standard font-stylefrån italictill normal. line-heightär också nu ärvt och margin-bottom: 1remhar lagts till. <address>s är för att presentera kontaktinformation för närmaste förfader (eller ett helt arbete). Bevara formateringen genom att avsluta rader med <br>.

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

Fullständigt namn
[email protected]

Block citat

Standardinställningen marginpå blockquotes är 1em 40px, så vi återställer det till 0 0 1remför något mer överensstämmande med andra element.

Ett välkänt citat, inkluderat i ett blockquote-element.

Någon känd i källtiteln

Inline-element

Elementet <abbr>får grundläggande stil för att det ska sticka ut bland stycketexten.

HTML - förkortningselementet.

Sammanfattning

Standardinställningen cursorför sammanfattning är text, så vi återställer den till pointerför att förmedla att elementet kan interageras med genom att klicka på det.

Några detaljer

Mer info om detaljerna.

Ännu fler detaljer

Här finns ännu mer information om detaljerna.

HTML5- `[hidden]`attribut

HTML5 lägger till ett nytt globalt attribut som heter[hidden] , som är formaterat som display: nonestandard. Genom att låna en idé från PureCSS förbättrar vi denna standard genom [hidden] { display: none !important; }att hjälpa till att förhindra displayatt den åsidosätts av misstag.

<input type="text" hidden>

jQuery-inkompatibilitet

[hidden]är inte kompatibel med jQuerys $(...).hide()och $(...).show()metoder. Därför stöder vi för närvarande inte särskilt [hidden]andra tekniker för att hantera displayelement.

För att bara växla synligheten för ett element, vilket innebär att det displayinte är modifierat och elementet fortfarande kan påverka dokumentflödet, använd klassen istället.invisible .

Starta om

Närma sig

CSS-variabler

Sidans standardinställningar

Inbyggd teckensnittsstapel

Rubriker och stycken

Horisontella regler

Listor

Inline-kod

Kodblock

Variabler

Användarinmatning

Provutgång

Tabeller

Blanketter

Stöd för inmatning av datum och färg

Pekare på knappar

Diverse element

Adress

Block citat

Inline-element

Sammanfattning

HTML5- [hidden]attribut

jQuery-inkompatibilitet

HTML5- `[hidden]`attribut