Source

Herlaai

Reboot, 'n versameling element-spesifieke CSS-veranderinge in 'n enkele lêer, begin Bootstrap om 'n elegante, konsekwente en eenvoudige basislyn te verskaf om op voort te bou.

Benadering

Herlaai bou voort op Normaliseer, en verskaf baie HTML-elemente met ietwat eiesinnige style deur slegs elementkiesers te gebruik. Bykomende stilering word slegs met klasse gedoen. Byvoorbeeld, ons herlaai sommige <table>style vir 'n eenvoudiger basislyn en verskaf later .table, .table-bordered, en meer.

Hier is ons riglyne en redes om te kies wat om te ignoreer in Reboot:

Dateer sommige blaaier verstekwaardes op om rems in plaas van ems te gebruik vir skaalbare komponentspasiëring.
Vermy margin-top. Vertikale marges kan ineenstort, wat onverwagte resultate oplewer. Nog belangriker, 'n enkele rigting van marginis 'n eenvoudiger geestelike model.
Vir makliker skaal oor toestelgroottes, moet blokelemente rems vir margins gebruik.
Hou verklarings van font-verwante eiendomme tot 'n minimum, gebruik inheritwaar moontlik.

Bladsy verstek

Die <html>en <body>elemente word opgedateer om beter bladsywye verstekke te verskaf. Meer spesifiek:

Die box-sizingis wêreldwyd ingestel op elke element—insluitend *::beforeen *::after, tot border-box. Dit verseker dat die verklaarde breedte van element nooit oorskry word as gevolg van opvulling of rand nie.
Geen basis font-sizeword op die verklaar <html>nie, maar 16pxword aanvaar (die blaaier verstek). font-size: 1remword toegepas op die <body>vir maklike responsiewe tipe-skaling via medianavrae, terwyl gebruikersvoorkeure gerespekteer word en 'n meer toeganklike benadering verseker.
Die <body>stel ook 'n globale font-family, line-height, en text-align. Dit word later deur sommige vormelemente geërf om lettertipe-inkonsekwenthede te voorkom.
Vir veiligheid het die <body>'n verklaarde background-color, verstek na #fff.

Inheemse fontstapel

Die verstek weblettertipes (Helvetica Neue, Helvetica en Arial) is in Bootstrap 4 weggelaat en vervang met 'n "inheemse fontstapel" vir optimale teksweergawe op elke toestel en bedryfstelsel. Lees meer oor inheemse lettertipestapels in hierdie 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-familyword toegepas op die <body>en word outomaties wêreldwyd deur Bootstrap geërf. Om die globale font-family, op te dateer $font-family-baseen weer saam te stel Bootstrap.

Opskrifte en paragrawe

Alle opskrifelemente—bv.— <h1>en <p>word teruggestel om hulle te margin-topverwyder. Opskrifte is margin-bottom: .5rembygevoeg en paragrawe margin-bottom: 1remvir maklike spasiëring.

Opskrif	Voorbeeld
`<h1></h1>`	h1. Bootstrap opskrif
`<h2></h2>`	h2. Bootstrap opskrif
`<h3></h3>`	h3. Bootstrap opskrif
`<h4></h4>`	h4. Bootstrap opskrif
`<h5></h5>`	h5. Bootstrap opskrif
`<h6></h6>`	h6. Bootstrap opskrif

Lyste

Alle lyste— <ul>, <ol>, en <dl>— margin-topword verwyder en 'n margin-bottom: 1rem. Geneste lyste het geen margin-bottom.

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

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

Vir eenvoudiger stilering, duidelike hiërargie en beter spasiëring, het beskrywingslyste bygewerk margin. <dd>s terugstel margin-leftna 0en voeg by margin-bottom: .5rem. <dt>s is vetgedruk .

Beskrywing lyste: 'n Beskrywingslys is perfek om terme te definieer.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida by eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Vooraf geformateerde teks

Die <pre>element word teruggestel om sy eenhede te verwyder margin-topen te gebruik remvir sy margin-bottom.

.example-element {
  kantlyn-onder: 1rem;
}

Tabelle

Tabelle is effens aangepas by styl <caption>s, vou grense in, en verseker deurgaans konsekwent text-align. Bykomende veranderinge vir grense, opvulling en meer kom saam met die .tableklas .

Dit is 'n voorbeeldtabel, en dit is die byskrif daarvan om die inhoud te beskryf.
Tabel opskrif	Tabel opskrif	Tabel opskrif	Tabel opskrif
Tafelsel	Tafelsel	Tafelsel	Tafelsel
Tafelsel	Tafelsel	Tafelsel	Tafelsel
Tafelsel	Tafelsel	Tafelsel	Tafelsel

Vorms

Verskeie vormelemente is herlaai vir eenvoudiger basisstyle. Hier is 'n paar van die mees noemenswaardige veranderinge:

<fieldset>s het geen grense, opvulling of marge nie, sodat hulle maklik as omhulsels vir individuele insette of groepe insette gebruik kan word.
<legend>s, soos veldstelle, is ook herstileer om as 'n soort opskrif vertoon te word.
<label>s is ingestel op om toe te display: inline-blocklaat marginom toegepas te word.
<input>s, <select>s, <textarea>s en <button>s word meestal aangespreek deur Normalize, maar Reboot verwyder ook hulle marginen stelle line-height: inherit.
<textarea>s word gewysig om slegs vertikaal aanpasbaar te wees, aangesien horisontale grootteverandering dikwels bladsyuitleg "breek".
<button>s en <input>knoppie elemente het cursor: pointerwanneer :not(:disabled).

Hierdie veranderinge, en meer, word hieronder gedemonstreer.

Diverse elemente

Adres

Die <address>element word opgedateer om die blaaier se verstek font-stylevan italicna terug te stel normal. line-heightis ook nou geërf, en margin-bottom: 1remis bygevoeg. <address>s is vir die aanbieding van kontakinligting vir die naaste voorouer (of 'n hele liggaam van werk). Behou formatering deur reëls met <br>.

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

Volle naam
[email protected]

Blokaanhaling

Die verstek marginop blokaanhalingstekens is 1em 40px, so ons stel dit terug na 0 0 1remvir iets wat meer ooreenstem met ander elemente.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante.

Iemand bekend in Brontitel

Inlyn elemente

Die <abbr>element ontvang basiese stilering om dit tussen paragraafteks te laat uitstaan.

Nulla attr vitae elit libero, 'n pharetra augue.

Opsomming

Die verstek cursorop opsomming is text, so ons stel dit terug na om aan pointerte dui dat daar met die element interaksie kan word deur daarop te klik.

Sommige besonderhede

Meer inligting oor die besonderhede.

Selfs meer besonderhede

Hier is selfs meer besonderhede oor die besonderhede.

HTML5 `[hidden]`kenmerk

HTML5 voeg ' n nuwe globale kenmerk by genaamd[hidden] , wat as display: noneby verstek gestileer is. Deur 'n idee van PureCSS te leen , verbeter ons hierdie verstek deur te maak [hidden] { display: none !important; }om te help voorkom dat dit displayper ongeluk oorskryf word. Alhoewel [hidden]dit nie inheems deur IE10 ondersteun word nie, kom die eksplisiete verklaring in ons CSS om daardie probleem.

<input type="text" hidden>

jQuery onversoenbaarheid

[hidden]is nie versoenbaar met jQuery's $(...).hide()en $(...).show()metodes nie. Daarom onderskryf ons tans nie veral [hidden]ander tegnieke vir die bestuur displayvan die elemente nie.

Om bloot die sigbaarheid van 'n element te wissel, wat beteken dat displaydit nie gewysig is nie en die element steeds die vloei van die dokument kan beïnvloed, gebruik eerder die .invisibleklas .