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
rem
s istället förem
s för skalbart komponentavstånd. - Undvik
margin-top
. Vertikala marginaler kan kollapsa, vilket ger oväntade resultat. Ännu viktigare är att en enda riktningmargin
är en enklare mental modell. - För enklare skalning över enhetsstorlekar bör blockelement använda
rem
s förmargin
s. - Håll deklarationer av
font
-relaterade egenskaper till ett minimum, användinherit
nä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*::before
och*::after
, tillborder-box
. Detta säkerställer att den deklarerade bredden på elementet aldrig överskrids på grund av stoppning eller kant. - Ingen bas
font-size
deklareras på<html>
, men16px
antas (webbläsarens standard).font-size: 1rem
tillä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 globalfont-family
,line-height
, ochtext-align
. Detta ärvs senare av vissa formulärelement för att förhindra teckensnittsinkonsekvenser. - För säkerhets skull har den
<body>
en deklareradbackground-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- color
stilar.
Detta font-family
tillämpas på <body>
och ärvs automatiskt globalt i Bootstrap. För att byta global font-family
, uppdatera $font-family-base
och kompilera om Bootstrap.
Rubriker och stycken
Alla rubrikelement – t.ex. <h1>
– och <p>
återställs för att få dem margin-top
borttagna. Rubriker har margin-bottom: .5rem
lagts till och stycken margin-bottom: 1rem
fö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-top
tagits 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-left
till 0
och 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-top
och använda rem
enheter 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-align
genomgående. Ytterligare ändringar för kanter , stoppning och mer kommer med klassen.table
.
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ördisplay: inline-block
att tillåtamargin
att tillämpas.<input>
s,<select>
s,<textarea>
s och<button>
s adresseras oftast av Normalize, men Reboot tar också bort derasmargin
och setsline-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 harcursor: pointer
nä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 cursor
förändring.
<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-style
från italic
till normal
. line-height
är också nu ärvt och margin-bottom: 1rem
har 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>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Fullständigt namn
[email protected]
Block citat
Standardinställningen margin
på blockquotes är 1em 40px
, så vi återställer det till 0 0 1rem
för något mer överensstämmande med andra element.
Ett välkänt citat, inkluderat i ett blockquote-element.
Inline-element
Elementet <abbr>
får grundläggande stil för att det ska sticka ut bland stycketexten.
Sammanfattning
Standardinställningen cursor
för sammanfattning är text
, så vi återställer den till pointer
fö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: none
standard. 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 display
att 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 display
element.
För att bara växla synligheten för ett element, vilket innebär att det display
inte är modifierat och elementet fortfarande kan påverka dokumentflödet, använd klassen istället.invisible
.