in English

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.

Op hierdie bladsy

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.

CSS veranderlikes

Bygevoeg in v5.2.0

Met v5.1.1 het ons ons vereiste @imports oor al ons CSS-bundels (insluitend bootstrap.css, bootstrap-reboot.css, en bootstrap-grid.css) gestandaardiseer om in te sluit _root.scss. Dit voeg :rootvlak CSS-veranderlikes by alle bondels, ongeag hoeveel daarvan in daardie bondel gebruik word. Uiteindelik sal Bootstrap 5 voortgaan om meer CSS-veranderlikes oor tyd bygevoeg te sien, om meer intydse aanpassing te verskaf sonder dat dit altyd nodig is om Sass te hersaamstel. Ons benadering is om ons bron Sass veranderlikes te neem en dit in CSS veranderlikes te transformeer. Op hierdie manier, selfs as jy nie CSS-veranderlikes gebruik nie, het jy steeds al die krag van Sass. Dit is nog aan die gang en sal tyd neem om ten volle te implementeer.

Oorweeg byvoorbeeld hierdie :rootCSS-veranderlikes vir algemene <body>style:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

In die praktyk word daardie veranderlikes dan in Reboot soos volg toegepas:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Wat jou toelaat om intydse aanpassings te maak soos jy wil:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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. Hierdie blaaier verstek kan oorheers word deur die $font-size-rootveranderlike te wysig.
Die <body>stel ook 'n globale font-family, font-weight, line-height, en color. 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

Bootstrap gebruik 'n "inheemse fontstapel" of "stelselfontstapel" vir optimale teksweergawe op elke toestel en bedryfstelsel. Hierdie stelsellettertipes is spesifiek ontwerp met vandag se toestelle in gedagte, met verbeterde weergawe op skerms, veranderlike lettertipe-ondersteuning, en meer. Lees meer oor inheemse lettertipestapels in hierdie Smashing Magazine - artikel .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Let daarop dat omdat die fontstapel emoji-lettertipes insluit, baie algemene simbool/dingbat Unicode-karakters as veelkleurige piktogramme weergegee sal word. Hul voorkoms sal verskil, afhangende van die styl wat in die blaaier/platform se inheemse emoji-lettertipe gebruik word, en hulle sal nie deur enige CSS- colorstyle geraak word nie.

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

Horisontale reëls

Die <hr>element is vereenvoudig. Soortgelyk aan blaaierverstekstellings, <hr>word s gestileer via border-top, het 'n verstek opacity: .25, en erf outomaties hul border-colorvia color, insluitend wanneer colorvia die ouer gestel word. Hulle kan gewysig word met teks-, rand- en ondeursigtigheidshulpmiddels.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Lyste

Alle lyste— <ul>, <ol>, en <dl>— margin-topword verwyder en 'n margin-bottom: 1rem. Geneste lyste het geen margin-bottom. Ons het ook die padding-leftaan <ul>en <ol>elemente teruggestel.

Alle lyste se boonste kantlyn is verwyder
En hul onderste marge het genormaliseer
Geneste lyste het geen onderkant kantlyn nie
- Op hierdie manier het hulle 'n meer egalige voorkoms
- Veral as gevolg deur meer lysitems
Die linker vulling is ook teruggestel

Hier is 'n geordende lys
Met 'n paar lysitems
Dit het dieselfde algehele voorkoms
Soos die vorige ongeordende lys

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.
Termyn: Definisie vir die term.; 'n Tweede definisie vir dieselfde term.
Nog 'n term: Definisie vir hierdie ander term.

Inlyn kode

Wikkel inlyn-brokkies kode met <code>. Maak seker dat jy HTML-hoekhakies ontsnap.

Moet byvoorbeeld <section>as inlyn toegedraai word.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Kode blokke

Gebruik <pre>s vir veelvuldige reëls kode. Weereens, maak seker dat jy enige hoekhakies in die kode ontsnap vir behoorlike weergawe. Die <pre>element word teruggestel om sy eenhede te verwyder margin-topen te gebruik remvir sy margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Veranderlikes

Gebruik die <var>merker om veranderlikes aan te dui.

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Gebruikersinvoer

Gebruik die <kbd>om invoer aan te dui wat tipies via sleutelbord ingevoer word.

Om van gidse te wissel, tik cdgevolg deur die naam van die gids.
Om instellings te wysig, druk ctrl + ,

html

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Voorbeeld uitset

<samp>Gebruik die merker om voorbeelduitvoer van 'n program aan te dui .

Hierdie teks is bedoel om as voorbeelduitvoer vanaf 'n rekenaarprogram hanteer te word.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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.

Voorbeeld legende

Voorbeeldinvoer

Voorbeeld e-pos

Voorbeeld telefoon

Voorbeeld url

Voorbeeld nommer

Voorbeeld soektog

Voorbeeldreeks

Voorbeeld lêer invoer

Voorbeeld kies

Merk hierdie merkblokkie

Opsie een is dit en dat Opsie twee is iets anders wat ook baie lank is om die omvou van hierdie spoggerige vormkontroles te demonstreer. Opsie drie is gedeaktiveer

Voorbeeld teksarea

Voorbeeld datum

Voorbeeld tyd

Voorbeeld wagwoord

Voorbeeld datumtyd-plaaslik

Voorbeeld week

Voorbeeld maand

Voorbeeld kleur

Voorbeeld uitset 100

Ondersteuning vir datum- en kleurinvoer

Hou in gedagte dat datuminvoere nie ten volle deur alle blaaiers ondersteun word nie, naamlik Safari.

Aanwysers op knoppies

Herlaai sluit 'n verbetering in role="button"om die verstekwyser na te verander pointer. Voeg hierdie kenmerk by elemente om te help om aan te dui dat elemente interaktief is. Hierdie rol is nie nodig vir <button>elemente wat hul eie cursorverandering kry nie.

Nie-knoppie element knoppie

html

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

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.

'n Bekende aanhaling, vervat in 'n blokaanhalingselement.

Iemand bekend in Brontitel

Inlyn elemente

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

Die HTML- afkortingselement.

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.

<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 .

Herlaai

Benadering

CSS veranderlikes

Bladsy verstek

Inheemse fontstapel

Opskrifte en paragrawe

Horisontale reëls

Lyste

Inlyn kode

Kode blokke

Veranderlikes

Gebruikersinvoer

Voorbeeld uitset

Tabelle

Vorms

Ondersteuning vir datum- en kleurinvoer

Aanwysers op knoppies

Diverse elemente

Adres

Blokaanhaling

Inlyn elemente

Opsomming

HTML5 [hidden]kenmerk

jQuery onversoenbaarheid

HTML5 `[hidden]`kenmerk