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

Bil-v5.1.1, aħna standardizzajna l- @importi meħtieġa tagħna fil-pakketti CSS kollha tagħna (inklużi bootstrap.css, bootstrap-reboot.css, u bootstrap-grid.css) biex jinkludu _root.scss. Dan iżid :rootvarjabbli ta' livell CSS mal-qatet kollha, irrispettivament minn kemm minnhom jintużaw f'dak il-pakkett. Fl-aħħar mill-aħħar Bootstrap 5 se jkompli jara aktar varjabbli CSS miżjuda maż-żmien, sabiex jipprovdi aktar customization f'ħin reali mingħajr il-ħtieġa li dejjem jerġa 'jikkompila Sass. 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 {
    --#{$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};

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

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
}

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

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

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 juża "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,
  // 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;

Innota li minħabba li l-munzell tat-tipa jinkludi fonts emoji, ħafna karattri Unicode tas-simboli/dingbat komuni 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.

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

Regoli orizzontali

L- <hr>element ġie ssimplifikat. Simili għall-inadempjenzi tal-browser, <hr>s huma stilati permezz border-top, għandhom default opacity: .25, u awtomatikament jirtu border-colorpermezz tagħhom color, inkluż meta colorhuwa ssettjat permezz tal-ġenitur. Jistgħu jiġu modifikati b'utilitajiet ta 'test, fruntiera u opaċità.

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

Listi

Il-listi kollha— <ul>, <ol>, u <dl>—tneħħew margin-topu a margin-bottom: 1rem. Listi mdaħħla 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

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.

html

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>

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>

Varjabbli

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

y = m x + b

html

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

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>

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.

html

<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

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>

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

html

<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

L- <abbr>element jirċievi stil bażiku biex jagħmilha jispikka fost it-test tal-paragrafu.

L- element ta' abbrevjazzjoni HTML .

Sommarju

Id-default cursorfuq is-sommarju huwa text, għalhekk aħna reset li pointerbiex inwasslu li l-element jista 'jiġi interazzjoni miegħu billi tikklikkja fuqu.

Xi dettalji

Aktar informazzjoni dwar id-dettalji.

Saħansitra aktar dettalji

Hawn huma saħansitra aktar dettalji dwar id-dettalji.

`[hidden]`attribut HTML5

HTML5 iżid attribut globali ġdid bl-isem[hidden] , li huwa mfassal bħala display: noneawtomatikament. Billi nissellef idea minn PureCSS , intejbu dan in-nuqqas billi nagħmlu [hidden] { display: none !important; }biex ngħinu biex jiġi evitat li jiġi displayaċċidentalment overridut.

<input type="text" hidden>

Inkompatibbiltà jQuery

[hidden]mhix kompatibbli ma 'jQuery $(...).hide()u $(...).show()metodi. Għalhekk, bħalissa ma napprovawx b'mod speċjali [hidden]tekniki oħra għall-ġestjoni displaytal-elementi.

Biex sempliċement taqleb il-viżibilità ta' element, jiġifieri displaymhux immodifikat u l-element xorta jista' jaffettwa l-fluss tad-dokument, uża l- .invisibleklassi minflok.

Reboot

Approċċ

Varjabbli CSS

Paġni defaults

Munzell tat-tipa indiġena

Intestaturi u paragrafi

Regoli orizzontali

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

Sommarju

[hidden]attribut HTML5

Inkompatibbiltà jQuery

`[hidden]`attribut HTML5