Opnieuw opstarten

Reboot, een verzameling elementspecifieke CSS-wijzigingen in een enkel bestand, kickstart Bootstrap om een elegante, consistente en eenvoudige basislijn te bieden om op voort te bouwen.

Nadering

Reboot bouwt voort op Normalize en biedt veel HTML-elementen met enigszins eigenzinnige stijlen met alleen elementkiezers. Extra styling wordt alleen gedaan met lessen. We herstarten bijvoorbeeld sommige <table>stijlen voor een eenvoudigere basislijn en bieden later .table, .table-bordered, en meer.

Hier zijn onze richtlijnen en redenen om te kiezen wat u wilt overschrijven in Opnieuw opstarten:

Werk enkele standaardwaarden van de browser bij om rems te gebruiken in plaats van ems voor schaalbare afstand tussen componenten.
Vermijd margin-top. Verticale marges kunnen instorten, met onverwachte resultaten tot gevolg. Belangrijker is echter dat een enkele richting margineen eenvoudiger mentaal model is.
Voor eenvoudiger schalen tussen apparaatgroottes moeten blokelementen rems voor margins gebruiken.
Beperk declaraties van font-gerelateerde eigenschappen tot een minimum en gebruik inheritwaar mogelijk.

Standaardinstellingen voor pagina's

De elementen <html>en <body>zijn bijgewerkt om betere standaardinstellingen voor de hele pagina te bieden. Specifieker:

De box-sizingis globaal ingesteld op elk element, inclusief *::beforeen *::after, tot border-box. Dit zorgt ervoor dat de gedeclareerde breedte van het element nooit wordt overschreden vanwege opvulling of rand.
Er wordt geen basis font-sizegedeclareerd op de <html>, maar 16pxwordt aangenomen (de standaardinstelling van de browser). font-size: 1remwordt toegepast op de <body>voor eenvoudige responsieve type-schaling via mediaquery's met respect voor gebruikersvoorkeuren en een meer toegankelijke benadering.
Het <body>stelt ook een globale font-family, line-height, en text-align. Dit wordt later overgenomen door sommige formulierelementen om inconsistenties in het lettertype te voorkomen.
Voor de veiligheid <body>heeft het een gedeclareerd background-color, standaard ingesteld op #fff.

Native lettertypestapel

De standaard weblettertypen (Helvetica Neue, Helvetica en Arial) zijn in Bootstrap 4 weggelaten en vervangen door een "native font-stack" voor optimale tekstweergave op elk apparaat en besturingssysteem. Lees meer over native font-stacks in dit Smashing Magazine- artikel .

$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;

Houd er rekening mee dat, omdat de lettertypestapel emoji-lettertypen bevat, veel veelgebruikte Unicode-tekens voor symbolen/dingbats worden weergegeven als veelkleurige pictogrammen. Hun uiterlijk zal variëren, afhankelijk van de stijl die wordt gebruikt in het eigen emoji-lettertype van de browser/het platform, en ze worden niet beïnvloed door CSS- colorstijlen.

Dit font-familywordt toegepast op de <body>en wordt automatisch wereldwijd overgenomen door Bootstrap. Om de global te wisselen font-family, update $font-family-baseen compileer je Bootstrap.

Koppen en alinea's

Alle kopelementen—bijv.— <h1>en <p>worden opnieuw ingesteld om te worden margin-topverwijderd. Koppen zijn margin-bottom: .5remtoegevoegd en alinea 's margin-bottom: 1remvoor gemakkelijke spatiëring.

rubriek	Voorbeeld
`<h1></h1>`	h1. Bootstrap-kop
`<h2></h2>`	h2. Bootstrap-kop
`<h3></h3>`	h3. Bootstrap-kop
`<h4></h4>`	h4. Bootstrap-kop
`<h5></h5>`	h5. Bootstrap-kop
`<h6></h6>`	h6. Bootstrap-kop

Lijsten

Alle lijsten <ul>— , <ol>, en <dl>— zijn margin-topverwijderd en een margin-bottom: 1rem. Geneste lijsten hebben geen margin-bottom.

Van alle lijsten is de bovenste marge verwijderd
En hun ondermarge normaliseerde
Geneste lijsten hebben geen ondermarge
- Zo zien ze er egaler uit
- Vooral wanneer gevolgd door meer lijstitems
De linker padding is ook gereset

Hier is een geordende lijst
Met een paar lijstitems
Het heeft dezelfde algehele uitstraling
Zoals de vorige ongeordende lijst

Voor een eenvoudigere styling, duidelijke hiërarchie en betere spatiëring hebben beschrijvingslijsten bijgewerkte margins. <dd>s reset margin-leftnaar 0en voeg toe margin-bottom: .5rem. <dt>s zijn vetgedrukt .

Beschrijvingslijsten: Een beschrijvingslijst is perfect voor het definiëren van termen.
Termijn: Definitie voor de term.; Een tweede definitie voor dezelfde term.
een andere term: Definitie voor deze andere term.

Vooraf opgemaakte tekst

Het <pre>element wordt gereset om zijn te verwijderen margin-topen remeenheden te gebruiken voor zijn margin-bottom.

.voorbeeldelement {
  marge-onder: 1rem;
}

Tafels

Tabellen zijn enigszins aangepast aan stijlen <caption>, randen samenvouwen en zorgen voor consistentie text-align. Extra wijzigingen voor randen, opvulling en meer komen met de .tableklasse .

Dit is een voorbeeldtabel en dit is het bijschrift om de inhoud te beschrijven.
Tabelkop	Tabelkop	Tabelkop	Tabelkop
Tabel cel	Tabel cel	Tabel cel	Tabel cel
Tabel cel	Tabel cel	Tabel cel	Tabel cel
Tabel cel	Tabel cel	Tabel cel	Tabel cel

Formulieren

Verschillende vormelementen zijn opnieuw opgestart voor eenvoudigere basisstijlen. Hier zijn enkele van de meest opvallende wijzigingen:

<fieldset>s hebben geen randen, opvulling of marge, zodat ze gemakkelijk kunnen worden gebruikt als wrappers voor individuele invoer of groepen invoer.
<legend>s, net als veldensets, zijn ook opnieuw gestyled om als een soort kop te worden weergegeven.
<label>s zijn ingesteld om display: inline-blockte kunnen marginworden toegepast.
<input>s, <select>s, <textarea>s en <button>s worden meestal geadresseerd door Normalize, maar Reboot verwijdert ook hun marginen sets line-height: inherit.
<textarea>s zijn gewijzigd om alleen verticaal te kunnen worden vergroot of verkleind, aangezien horizontale grootte vaak de paginalay-out "onderbreekt".
<button>s en <input>knopelementen hebben cursor: pointerwanneer :not(:disabled).

Deze veranderingen, en meer, worden hieronder gedemonstreerd.

Aanwijzers op knoppen

Opnieuw opstarten bevat een verbetering role="button"om de standaardcursor te wijzigen in pointer. Voeg dit attribuut toe aan elementen om aan te geven dat elementen interactief zijn. Deze rol is niet nodig voor <button>elementen, die hun eigen cursorverandering krijgen.

Knop zonder knopelement

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

Diverse elementen

Adres

Het <address>element is bijgewerkt om de browserstandaard te resetten font-stylevan italicnaar normal. line-heightis nu ook geërfd en margin-bottom: 1remis toegevoegd. <address>s zijn voor het presenteren van contactgegevens voor de dichtstbijzijnde voorouder (of een heel oeuvre). Behoud de opmaak door regels te beëindigen met <br>.

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

Volledige naam
[email protected]

Blokcitaat

De standaardwaarde marginvoor blockquotes is 1em 40px, dus we stellen dat opnieuw in 0 0 1remvoor iets dat consistenter is met andere elementen.

Een bekende quote, vervat in een blockquote-element.

Iemand die beroemd is in Brontitel

Inline-elementen

Het <abbr>element krijgt een basisstijl om het op te laten vallen tussen alineatekst.

Nulla attr vitae elit libero, a pharetra augue.

Overzicht

De standaard cursorop samenvatting is text, dus we resetten dat naar om aan pointerte geven dat het element kan worden gebruikt door erop te klikken.

Enkele details

Meer info over de details.

Nog meer details

Hier zijn nog meer details over de details.

HTML5- `[hidden]`kenmerk

HTML5 voegt een nieuw globaal attribuut toe met de naam[hidden] , dat display: nonestandaard is gestileerd. Door een idee van PureCSS te lenen , verbeteren we deze standaard door [hidden] { display: none !important; }ervoor te zorgen dat deze displayniet per ongeluk wordt overschreven. Hoewel [hidden]het niet standaard wordt ondersteund door IE10, lost de expliciete verklaring in onze CSS dat probleem op.

<input type="text" hidden>

jQuery-incompatibiliteit

[hidden]is niet compatibel met jQuery's $(...).hide()en $(...).show()methoden. Daarom onderschrijven we momenteel niet specifiek [hidden]andere technieken voor het beheren displayvan de elementen.

Als u alleen de zichtbaarheid van een element wilt wijzigen, wat betekent dat het displayniet wordt gewijzigd en het element nog steeds de stroom van het document kan beïnvloeden, gebruikt u in plaats daarvan de .invisibleklasse .