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

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.

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.
Den <body>anger också en global font-family, line-height, och text-align. 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

Standardwebbteckensnitten (Helvetica Neue, Helvetica och Arial) har tagits bort i Bootstrap 4 och ersatts med en "native font stack" för optimal textåtergivning på alla enheter och operativsystem. Läs mer om inbyggda teckensnittsstaplar i denna artikel i Smashing Magazine .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // 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;

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

Listor

Alla listor — <ul>, <ol>, och <dl>— har margin-toptagits bort och en margin-bottom: 1rem. Kapslade listor har ingen margin-bottom.

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.

Förformaterad text

Elementet <pre>återställs för att ta bort dess margin-topoch använda remenheter för dess margin-bottom.

.example-element {
  marginal-botten: 1rem;
}

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

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.

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

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

Nulla attr vitae elit libero, a pharetra augue.

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. Även [hidden]om det inte stöds av IE10, kommer den explicita deklarationen i vår CSS runt det problemet.

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