in English

Reboot

Reboot, ġabra ta 'bidliet CSS speċifiċi għall-element f'fajl wieħed, kickstart Bootstrap biex tipprovdi linja bażi eleganti, konsistenti u sempliċi biex tibni fuqha.

Fuq din il-paġna

Approċċ

Reboot jibni fuq Normalize, u jipprovdi ħafna elementi HTML bi stili kemmxejn opinjonisti bl-użu biss ta 'seletturi ta' elementi. Grafika addizzjonali ssir biss bil-klassijiet. Pereżempju, aħna nibdew mill-ġdid xi <table>stili għal linja bażi aktar sempliċi u aktar tard nipprovdu .table, .table-bordered, u aktar.

Hawn huma l-linji gwida u r-raġunijiet tagħna biex nagħżlu x'għandu jinqabeż f'Reboot:

Aġġorna xi valuri default tal-brawżer biex tuża rems minflok ems għall-ispazjar tal-komponenti skalabbli.
Evita margin-top. Il-marġini vertikali jistgħu jikkrollaw, u jagħtu riżultati mhux mistennija. Aktar importanti minn hekk, direzzjoni waħda ta ' marginhuwa mudell mentali aktar sempliċi.
Għal skalar aktar faċli fuq id-daqsijiet tal-apparat, l-elementi tal-blokk għandhom jużaw rems għal margins.
Żomm dikjarazzjonijiet ta' fontproprjetajiet relatati għall-minimu, billi tuża inheritkull meta jkun possibbli.

Varjabbli CSS

Miżjud fi v5.1.1

Bil-v5.1.1, aħna standardizzajna l- @importi meħtieġa tagħna fil-pakketti CSS kollha tagħna (inkluż bootstrap.css, bootstrap-reboot.css, u bootstrap-grid.cssbiex jinkludu _root.scss. Dan iżid :rootvarjabbli CSS tal-livell għall-pakketti kollha, irrispettivament minn kemm minnhom jintużaw f'dak il-pakkett. Fl-aħħar mill-aħħar Bootstrap 5 se jkompli ara aktar varjabbli CSS miżjuda maż-żmien.

Paġni defaults

L -elementi <html>u <body>huma aġġornati biex jipprovdu defaults aħjar għall-paġna kollha. B'mod aktar speċifiku:

Il box-sizinghuwa globalment stabbilit fuq kull element—inklużi *::beforeu *::after, sa border-box. Dan jiżgura li l-wisa 'ddikjarata tal-element qatt ma tinqabeż minħabba padding jew bordura.
- L-ebda bażi font-sizema hija ddikjarata fuq il- <html>, iżda 16pxhija preżunta (il-browser default). font-size: 1remhija applikata fuq <body>it-tip ta' skalar faċli li jirrispondu permezz ta' mistoqsijiet tal-midja filwaqt li tirrispetta l-preferenzi tal-utent u tiżgura approċċ aktar aċċessibbli. Din il-inadempjenza tal-brawżer tista' tiġi sostitwita billi timmodifika l- $font-size-rootvarjabbli.
Il <body>jistabbilixxi wkoll globali font-family, font-weight, line-height, u color. Dan jintiret aktar tard minn xi elementi tal-forma biex jipprevjenu inkonsistenzi tat-tipa.
Għas-sigurtà, il- <body>għandu ddikjarat background-color, inadempjenti għal #fff.

Munzell tat-tipa indiġena

Bootstrap jutilizza "munzell ta 'font indiġeni" jew "munzell ta' font tas-sistema" għall-aħjar rendering tat-test fuq kull apparat u OS. Dawn il-fonts tas-sistema ġew iddisinjati speċifikament bil-mezzi tal-lum f'moħħhom, b'rendiment imtejjeb fuq l-iskrins, appoġġ ta' font varjabbli, u aktar. Aqra aktar dwar munzelli ta 'font indiġeni f'dan l- artikolu 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,
  // 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;

Innota li minħabba li l-munzell tat-tipa jinkludi fonts emoji, ħafna karattri komuni ta' simbolu/dingbat unicode se jingħataw bħala pittografi b'ħafna kuluri. Id-dehra tagħhom se tvarja, skont l-istil użat fil-font nattiv tal-emoji tal-browser/pjattaforma, u mhux se jiġu affettwati minn xi colorstili CSS.

Dan font-familyhuwa applikat għall- <body>u awtomatikament wiret globalment matul Bootstrap. Biex taqleb il-globali font-family, aġġorna $font-family-baseu rikompila Bootstrap.

Varjabbli CSS

Hekk kif il-Bootstrap 5 ikompli jimmatura, aktar u aktar stili se jinbnew b'varjabbli CSS bħala mezz biex jipprovdu aktar customization f'ħin reali mingħajr il-ħtieġa li Sass dejjem jiġi kkompilat mill-ġdid. L-approċċ tagħna huwa li nieħdu l-varjabbli Sass tas-sors tagħna u nibdluhom f'varjabbli CSS. B'dan il-mod, anki jekk ma tużax varjabbli CSS, xorta jkollok is-saħħa kollha ta 'Sass. Dan għadu għaddej u se jieħu ż-żmien biex jiġi implimentat bis-sħiħ.

Pereżempju, ikkunsidra dawn il :root-varjabbli CSS għal <body>stili komuni:

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

Fil-prattika, dawk il-varjabbli mbagħad jiġu applikati f'Reboot hekk:

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

Li jippermettilek tagħmel customizations f'ħin reali kif tixtieq:

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

Intestaturi u paragrafi

L-elementi kollha tal-intestatura—eż, <h1>—u <p>huma reset biex margin-topjitneħħew. Żdiedu l-intestaturi margin-bottom: .5remu l-paragrafi margin-bottom: 1remgħal spazjar faċli.

Intestatura	Eżempju
`<h1></h1>`	h1. Intestatura Bootstrap
`<h2></h2>`	h2. Intestatura Bootstrap
`<h3></h3>`	h3. Intestatura Bootstrap
`<h4></h4>`	h4. Intestatura Bootstrap
`<h5></h5>`	h5. Intestatura Bootstrap
`<h6></h6>`	h6. Intestatura Bootstrap

Listi

Il-listi kollha— <ul>, <ol>, u <dl>—tneħħew margin-topu a margin-bottom: 1rem. Listi nested m'għandhom l-ebda margin-bottom. Imxejna wkoll reset il- padding-lefton <ul>u l- <ol>elementi.

Il-listi kollha jitneħħew il-marġni ta' fuq
U l-marġni tal-qiegħ tagħhom normalizzat
Il-listi mdaħħla m'għandhom l-ebda marġni tal-qiegħ
- Dan il-mod ikollhom dehra aktar uniformi
- Partikolarment meta segwit minn aktar oġġetti tal-lista
L-ikkuttunar tax-xellug ġie reset ukoll

Hawnhekk hawn lista ordnata
Bi ftit oġġetti tal-lista
Għandu l-istess dehra ġenerali
Bħala l-lista mhux ordnata preċedenti

Għal stil aktar sempliċi, ġerarkija ċara, u spazjar aħjar, il-listi tad-deskrizzjoni aġġornaw margins. <dd>s reset margin-leftgħal 0u żid margin-bottom: .5rem. <dt>s huma b'tipa grassa .

Listi ta' deskrizzjoni: Lista ta 'deskrizzjoni hija perfetta għad-definizzjoni tat-termini.
Terminu: Definizzjoni għat-terminu.; It-tieni definizzjoni għall-istess terminu.
Terminu ieħor: Definizzjoni għal dan it-terminu l-ieħor.

Kodiċi inline

Kebbeb snippets inline tal-kodiċi b' <code>. Kun żgur li taħrab parentesi angolari HTML.

Per eżempju, <section>għandhom ikunu mgeżwra bħala inline.

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

Blokki tal-kodiċi

Uża <pre>s għal linji multipli ta 'kodiċi. Għal darb'oħra, kun żgur li taħrab kwalunkwe parentesi angolari fil-kodiċi għal rendering xieraq. L- <pre>element jiġi reset biex jitneħħa margin-topu juża l- remunitajiet tiegħu margin-bottom.

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

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

Varjabbli

Biex tindika varjabbli uża t- <var>tikketta.

y = m x + b

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

Input tal-utent

Uża l- <kbd>biex tindika input li tipikament jiddaħħal permezz tat-tastiera.

Biex taqleb direttorji, ittajpja cdsegwit bl-isem tad-direttorju.
Biex teditja s-settings, agħfas ctrl + ,

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>

Output tal-kampjun

Biex tindika l-output tal-kampjun minn programm uża t- <samp>tikketta.

Dan it-test huwa maħsub biex jiġi ttrattat bħala output ta' kampjun minn programm tal-kompjuter.

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

Tabelli

Tabelli huma kemmxejn aġġustati għall-istil <caption>s, kollass fruntieri, u jiżguraw konsistenti text-alignmadwar. Bidliet addizzjonali għall-fruntieri, ikkuttunar, u aktar jiġu mal - .tableklassi .

Din hija tabella eżempju, u din hija l-caption tagħha biex tiddeskrivi l-kontenut.
Intestatura tal-mejda	Intestatura tal-mejda	Intestatura tal-mejda	Intestatura tal-mejda
Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda
Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda
Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda	Ċellula tal-mejda

Formoli

Diversi elementi tal-forma ġew rebooted għal stili bażi aktar sempliċi. Hawn huma xi wħud mill-aktar bidliet notevoli:

<fieldset>s m'għandhom l-ebda fruntieri, padding, jew marġini sabiex ikunu jistgħu jintużaw faċilment bħala tgeżwir għal inputs individwali jew gruppi ta 'inputs.
<legend>s, bħal fieldsets, ġew ukoll restyled biex jintwerew bħala intestatura ta 'tip.
<label>s huma stabbiliti biex display: inline-blockjippermettu marginli jiġu applikati.
<input>s, <select>s, <textarea>s, u <button>s huma l-aktar indirizzati minn Normalize, iżda Reboot tneħħi tagħhom marginu settijiet line-height: inherit, ukoll.
<textarea>s huma modifikati biex ikunu jistgħu jinbidlu biss b'mod vertikali peress li d-daqs orizzontali ta 'spiss "tkisser" it-tqassim tal-paġna.
<button>s u l- <input>elementi tal-buttuna għandhom cursor: pointermeta :not(:disabled).

Dawn il-bidliet, u aktar, huma murija hawn taħt.

Eżempju leġġenda

Input ta' eżempju

Eżempju ta' email

Eżempju tat-telefon

Eżempju url

Numru ta' eżempju

Eżempju ta' tfittxija

Eżempju firxa

Input ta' fajl ta' eżempju

Eżempju agħżel

Iċċekkja din il-kaxxa

L-ewwel għażla hija dan u dak It-tieni għażla hija xi ħaġa oħra li hija wkoll super twila biex turi t-tgeżwir ta 'dawn il-kontrolli tal-forma fancy. It-tielet għażla hija diżattivata

Eżempju textarea

Eżempju tad-data

Ħin ta’ eżempju

Eżempju ta' password

Eżempju datetime-local

Eżempju ġimgħa

Eżempju xahar

Eżempju tal-kulur

Eżempju ta' produzzjoni 100

Data u appoġġ għall-input tal-kulur

Żomm f'moħħok li l-inputs tad-data mhumiex appoġġjati bis -sħiħ mill-browsers kollha, jiġifieri Safari.

Pointers fuq buttuni

Reboot jinkludi titjib role="button"biex jibdel il-cursor default għal pointer. Żid dan l-attribut ma' elementi biex tgħin tindika li l-elementi huma interattivi. Dan ir-rwol mhuwiex meħtieġ għall- <button>elementi, li jiksbu l- cursorbidla tagħhom stess.

Buttuna ta 'element mhux buttuna

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

Elementi varji

Indirizz

L- <address>element jiġi aġġornat biex jerġa' jissettja l-default tal-browser font-styleminn italicgħal normal. line-heighthuwa wkoll issa wiret, u margin-bottom: 1remġie miżjud. <address>s huma għall-preżentazzjoni ta 'informazzjoni ta' kuntatt għall-eqreb antenat (jew korp sħiħ ta 'xogħol). Ippreserva l-ifformattjar billi tispiċċa l-linji b' <br>.

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

Isem sħiħ
[email protected]

Blockquote

Id-default marginfuq blockquotes huwa 1em 40px, għalhekk aħna reset dak 0 0 1remgħal xi ħaġa aktar konsistenti ma 'elementi oħra.

Kwotazzjoni magħrufa sew, li tinsab f'element blockquote.

Xi ħadd famuż fit- Titolu Sors

Elementi inline

The <abbr> element receives basic styling to make it stand out amongst paragraph text.

The HTML abbreviation element.

Summary

The default cursor on summary is text, so we reset that to pointer to convey that the element can be interacted with by clicking on it.

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 `[hidden]` attribute

HTML5 adds a new global attribute named [hidden], which is styled as display: none by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; } to help prevent its display from getting accidentally overridden.

<input type="text" hidden>

jQuery incompatibility

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.

Reboot

Approċċ

Varjabbli CSS

Paġni defaults

Munzell tat-tipa indiġena

Varjabbli CSS

Intestaturi u paragrafi

Listi

Kodiċi inline

Blokki tal-kodiċi

Varjabbli

Input tal-utent

Output tal-kampjun

Tabelli

Formoli

Data u appoġġ għall-input tal-kulur

Pointers fuq buttuni

Elementi varji

Indirizz

Blockquote

Elementi inline

Summary

HTML5 [hidden] attribute

jQuery incompatibility

HTML5 `[hidden]` attribute