Source

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

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.

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

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

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

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 formulierelementen 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 aangepast zodat ze alleen verticaal 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.

Diverse elementen

Adres

Het <address>element wordt 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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat een ante.

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 .