Znova zaženite

Reboot, zbirka sprememb CSS, specifičnih za element v eni sami datoteki, zažene Bootstrap, da zagotovi elegantno, dosledno in preprosto osnovo, na kateri lahko nadgradite.

Na tej strani

Pristop

Reboot nadgrajuje Normalize in ponuja številne elemente HTML z nekoliko samozavestnimi slogi z uporabo samo izbirnikov elementov. Dodaten styling se izvaja samo z razredi. Na primer, znova zaženemo nekatere <table>sloge za enostavnejšo osnovo in pozneje zagotovimo .table, .table-borderedin še več.

Tu so naše smernice in razlogi za izbiro, kaj preglasiti pri ponovnem zagonu:

Posodobite nekatere privzete vrednosti brskalnika, da uporabite rems namesto ems za razširljiv razmik komponent.
Izogibajte se margin-top. Navpični robovi se lahko zrušijo, kar povzroči nepričakovane rezultate. Še pomembneje pa je, da je ena smer marginenostavnejši mentalni model.
Za lažje skaliranje po velikostih naprav morajo blokovni elementi uporabljati rems namesto margins.
Izjave o fontlastnostih, povezanih z -, naj bodo čim manjše in jih uporabite, inheritkadar koli je to mogoče.

spremenljivke CSS

Dodano v v5.2.0

Z različico 5.1.1 smo standardizirali naše zahtevane @imports v vseh naših svežnjih CSS (vključno z bootstrap.css, bootstrap-reboot.cssin bootstrap-grid.css), da vključimo _root.scss. To doda :rootspremenljivke ravni CSS v vse svežnje, ne glede na to, koliko jih je uporabljenih v tem svežnju. Navsezadnje bo Bootstrap 5 sčasoma še naprej dodajal več spremenljivk CSS , da bi zagotovil več prilagajanja v realnem času, ne da bi bilo treba vedno znova prevajati Sass. Naš pristop je, da vzamemo izvorne spremenljivke Sass in jih pretvorimo v spremenljivke CSS. Na ta način, tudi če ne uporabljate spremenljivk CSS, imate še vedno vso moč Sassa. To je še vedno v teku in bo potreben čas, da se v celoti izvede.

Na primer, upoštevajte te :rootspremenljivke CSS za pogoste <body>sloge:

  @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};

V praksi se te spremenljivke nato uporabijo pri ponovnem zagonu takole:

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
}

Kar vam omogoča prilagajanje v realnem času, kakor želite:

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

Privzete nastavitve strani

Elementi <html>in <body>so posodobljeni, da zagotovijo boljše privzete nastavitve za celotno stran. Natančneje:

Je box-sizingglobalno nastavljen za vsak element – vključno z *::beforein *::afterdo border-box. To zagotavlja, da deklarirana širina elementa ni nikoli presežena zaradi oblazinjenja ali obrobe.
- Nobena osnova font-sizeni deklarirana na <html>, ampak 16pxse predpostavlja (privzeta nastavitev brskalnika). font-size: 1remse uporablja na <body>za enostavno odzivno skaliranje tipov prek medijskih poizvedb ob spoštovanju uporabniških nastavitev in zagotavljanju bolj dostopnega pristopa. To privzeto vrednost brskalnika je mogoče preglasiti s spreminjanjem $font-size-rootspremenljivke.
Nastavi tudi <body>globalne font-family, font-weight, line-heightin color. To pozneje podedujejo nekateri elementi obrazca, da preprečijo nedoslednosti pisav.
Zaradi varnosti <body>ima deklarirano background-color, privzeto je #fff.

Izvorni sklad pisav

Bootstrap uporablja "nativni sklad pisav" ali "sistemski sklad pisav" za optimalno upodabljanje besedila v vsaki napravi in OS. Te sistemske pisave so bile zasnovane posebej za današnje naprave, z izboljšanim upodabljanjem na zaslonih, podporo za spremenljive pisave in več. Preberite več o izvornih skladih pisav v tem članku revije Smashing Magazine .

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

Upoštevajte, da ker sklad pisav vključuje pisave emodžijev, bo veliko običajnih znakov Unicode simbol/dingbat upodobljenih kot večbarvni piktogrami. Njihov videz se bo razlikoval glede na slog, uporabljen v izvorni pisavi emojijev brskalnika/platforme, in nanje ne bodo vplivali nobeni colorslogi CSS.

To font-familyvelja za <body>in samodejno podedovano globalno v celotnem Bootstrapu. Če želite preklopiti globalno font-family, posodobite $font-family-basein znova prevedite Bootstrap.

Naslovi in odstavki

Vsi elementi naslova – npr. <h1>– in <p>so ponastavljeni, da jih margin-topodstranimo. Dodani so margin-bottom: .5remnaslovi in odstavki margin-bottom: 1remza lažji razmik.

Naslov	Primer
`<h1></h1>`	h1. Naslov Bootstrap
`<h2></h2>`	h2. Naslov Bootstrap
`<h3></h3>`	h3. Naslov Bootstrap
`<h4></h4>`	h4. Naslov Bootstrap
`<h5></h5>`	h5. Naslov Bootstrap
`<h6></h6>`	h6. Naslov Bootstrap

Horizontalna pravila

Element <hr>je bil poenostavljen. Podobno kot privzete nastavitve brskalnika <hr>so s oblikovani prek border-top, imajo privzeto opacity: .25in samodejno podedujejo svoj border-colorvia color, vključno s tem, ko colorje nastavljen prek nadrejenega. Lahko jih spremenite s pripomočki za besedilo, obrobo in motnost.

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

Seznami

Vsi seznami – <ul>, <ol>in <dl>– so margin-topodstranjeni in margin-bottom: 1rem. Ugnezdeni seznami nimajo margin-bottom. Prav tako smo ponastavili elemente padding-lefton <ul>in .<ol>

Vsem seznamom je odstranjen zgornji rob
In njihova spodnja meja se je normalizirala
Ugnezdeni seznami nimajo spodnjega roba
- Tako imajo bolj enakomeren videz
- Še posebej, če mu sledi več elementov seznama
Ponastavljeno je bilo tudi levo oblazinjenje

Tukaj je urejen seznam
Z nekaj točkami seznama
Ima enak splošni videz
Kot prejšnji neurejen seznam

Za preprostejši slog, jasno hierarhijo in boljši razmik so seznami opisov posodobljeni margins. <dd>ponastavite margin-leftin 0dodajte margin-bottom: .5rem. <dt>s so krepko .

Seznami opisov: Opisni seznam je kot nalašč za definiranje izrazov.
Izraz: Opredelitev pojma.; Druga definicija za isti izraz.
Še en izraz: Opredelitev tega drugega izraza.

Inline koda

Zavijte vstavljene delčke kode z <code>. Prepričajte se, da ste izstopili iz oglatih oklepajev HTML.

Na primer, <section>mora biti zavit kot vstavljeni.

html

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

Kodni bloki

Uporabite <pre>s za več vrstic kode. Ponovno se prepričajte, da ste za pravilno upodabljanje izstopili iz vseh oglatih oklepajev v kodi. Element <pre>se ponastavi, da se odstrani margin-topin uporabi remenote za svoj 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>

Spremenljivke

Za označevanje spremenljivk uporabite <var>oznako.

y = m x + b

html

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

Uporabniški vnos

Uporabite <kbd>za označevanje vnosa, ki se običajno vnese s tipkovnico.

Če želite zamenjati imenike, vnesite cdin nato ime imenika.
Za urejanje nastavitev pritisnite 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>

Vzorčni izhod

Za označevanje vzorčnega izhoda iz programa uporabite <samp>oznako.

To besedilo naj bi se obravnavalo kot vzorčni rezultat iz računalniškega programa.

html

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

Mize

Tabele so nekoliko prilagojene slogu <caption>s, strnjene meje in zagotavljajo doslednost text-alignv celotnem besedilu. Dodatne spremembe za obrobe, oblazinjenje in drugo prihajajo z .tablerazredom .

To je primer tabele in to je njen naslov za opis vsebine.
Naslov tabele	Naslov tabele	Naslov tabele	Naslov tabele
Celica tabele	Celica tabele	Celica tabele	Celica tabele
Celica tabele	Celica tabele	Celica tabele	Celica tabele
Celica tabele	Celica tabele	Celica tabele	Celica tabele

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>

Obrazci

Različni elementi obrazca so bili znova zagnani za enostavnejše osnovne sloge. Tukaj je nekaj najbolj opaznih sprememb:

<fieldset>nimajo robov, oblazinjenja ali robov, zato jih je mogoče enostavno uporabiti kot ovoje za posamezne vnose ali skupine vnosov.
<legend>s, tako kot nabori polj, so bili prav tako spremenjeni, da so prikazani kot nekakšen naslov.
<label>s so nastavljeni tako, display: inline-blockda omogočajo marginuporabo.
<input>s, <select>s, <textarea>s in <button>s večinoma obravnava Normalize, vendar Reboot odstrani tudi njihove marginin nastavi line-height: inherit.
<textarea>so spremenjeni tako, da jih je mogoče spreminjati samo navpično, saj horizontalno spreminjanje velikosti pogosto "pokvari" postavitev strani.
<button>s in <input>elementi gumbov imajo cursor: pointerko :not(:disabled).

Te in druge spremembe so prikazane spodaj.

Podpora za vnos datuma in barve

Upoštevajte, da vsi brskalniki, zlasti Safari , ne podpirajo v celoti datumskih vnosov.

Kazalci na gumbih

Ponovni zagon vključuje izboljšavo za role="button"spremembo privzetega kazalca v pointer. Dodajte ta atribut elementom, da boste lažje označili, da so elementi interaktivni. Ta vloga ni potrebna za <button>elemente, ki dobijo lastno cursorspremembo.

Gumb elementa brez gumba

html

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

Razni elementi

Naslov

Element <address>je posodobljen za ponastavitev privzete nastavitve brskalnika font-stylez italicna normal. line-heightje tudi zdaj podedovan in margin-bottom: 1remje bil dodan. <address>so za predstavitev kontaktnih informacij za najbližjega prednika (ali celotnega dela). Ohranite oblikovanje tako, da končate vrstice z <br>.

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

Polno ime
[email protected]

Blockquote

Privzeto marginza narekovaje je 1em 40px, zato smo to ponastavili na 0 0 1remnekaj, kar je bolj skladno z drugimi elementi.

Dobro znani citat, vsebovan v elementu blockquote.

Nekdo znan v naslovu vira

Inline elementi

Element <abbr>prejme osnovni slog, da izstopa med besedilom odstavka.

Element okrajšave HTML .

Povzetek

Privzeta vrednost cursorza povzetek je text, zato smo to ponastavili na, pointerda sporočimo, da je z elementom mogoče komunicirati s klikom nanj.

Nekaj podrobnosti

Več informacij o podrobnostih.

Še več podrobnosti

Tukaj je še več podrobnosti o podrobnostih.

`[hidden]`atribut HTML5

HTML5 doda nov globalni atribut z imenom[hidden]display: none , ki je privzeto oblikovan kot . Z izposojo ideje od PureCSS izboljšamo to privzeto vrednost tako, [hidden] { display: none !important; }da pomagamo preprečiti njeno displaynenamerno preglasitev.

<input type="text" hidden>

Nezdružljivost jQuery

[hidden]ni združljiv z jQuery $(...).hide()in $(...).show()metodami. Zato trenutno ne podpiramo posebej [hidden]drugih tehnik za upravljanje displayelementov.

Če želite samo preklopiti vidnost elementa, kar pomeni, da displayni spremenjen in lahko element še vedno vpliva na potek dokumenta, namesto tega uporabite .invisiblerazred .

Znova zaženite

Pristop

spremenljivke CSS

Privzete nastavitve strani

Izvorni sklad pisav

Naslovi in ​​odstavki

Horizontalna pravila

Seznami

Inline koda

Kodni bloki

Spremenljivke

Uporabniški vnos

Vzorčni izhod

Mize

Obrazci

Podpora za vnos datuma in barve

Kazalci na gumbih

Razni elementi

Naslov

Blockquote

Inline elementi

Povzetek

[hidden]atribut HTML5

Nezdružljivost jQuery

Naslovi in odstavki

`[hidden]`atribut HTML5