Source

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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem vid massa
Facilisis i pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat kl
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem vid massa
Facilisis i pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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.

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

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.

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 .