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.

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

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

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.

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

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

Nulla attr vitae elit libero, a pharetra augue.

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.