Pag-reboot

Pag-reboot, usa ka koleksyon sa mga pagbag-o sa CSS nga piho sa elemento sa usa ka file, i-kickstart ang Bootstrap aron maghatag usa ka elegante, makanunayon, ug yano nga baseline aron matukod.

Pagduol

Ang pag-reboot nagtukod sa Normalize, nga naghatag daghang mga elemento sa HTML nga adunay medyo opinyon nga mga istilo gamit lamang ang mga tigpili sa elemento. Ang dugang nga pag-istilo gihimo lamang sa mga klase. Pananglitan, gi-reboot namo ang pipila ka mga <table>estilo para sa mas simple nga baseline ug sa ulahi maghatag .table, .table-bordered, ug uban pa.

Ania ang among mga panudlo ug mga hinungdan sa pagpili kung unsa ang i-override sa Reboot:

I-update ang pipila ka mga default value sa browser aron gamiton remang s imbes nga ems para sa scalable component spacing.
Likayi margin-top. Ang mga bertikal nga margin mahimong mahugno, nga maghatag wala damha nga mga resulta. Mas importante bisan pa, ang usa ka direksyon sa marginusa ka mas simple nga modelo sa pangisip.
Alang sa dali nga pag-scale sa mga gidak-on sa aparato, ang mga elemento sa bloke kinahanglan mogamit rems para marginsa s.
Hupti ang mga deklarasyon sa fontmga kabtangan nga may kalabotan sa labing gamay, gamit inheritkung mahimo.

Mga default sa panid

Ang <html>ug <body>mga elemento gi-update aron makahatag og mas maayo nga mga default sa tibuok panid. Mas espesipiko:

Ang box-sizingglobal gibutang sa matag elemento—lakip ang *::beforeug *::after, ngadto sa border-box. Kini nagsiguro nga ang gipahayag nga gilapdon sa elemento dili gayud molapas tungod sa padding o utlanan.
Walay base font-sizenga gideklarar sa <html>, apan 16pxgituohan (ang default sa browser). font-size: 1remgipadapat sa <body>alang sa dali nga pagtubag sa tipo-scaling pinaagi sa mga pangutana sa media samtang nagtahod sa mga gusto sa tiggamit ug nagsiguro sa usa ka mas dali nga paagi.
Ang <body>nagtakda usab og global font-family, line-height, ug text-align. Gipanunod kini sa ulahi sa pipila ka mga elemento sa porma aron malikayan ang mga pagkasukwahi sa font.
Alang sa kaluwasan, ang <body>adunay gipahayag nga background-color, defaulting sa #fff.

Lumad nga font stack

Ang default nga mga web font (Helvetica Neue, Helvetica, ug Arial) gihulog sa Bootstrap 4 ug gipulihan sa usa ka "native font stack" alang sa labing maayo nga paghubad sa teksto sa matag device ug OS. Basaha ang dugang mahitungod sa lumad nga font stacks niini nga artikulo sa Smashing Magazine .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // 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;

Timan-i nga tungod kay ang stack sa font naglakip sa mga emoji font, daghang komon nga simbolo/dingbat nga Unicode nga mga karakter ang himoon isip multi-colored pictographs. Maglainlain ang ilang hitsura, depende sa istilo nga gigamit sa lumad nga emoji font sa browser/platform, ug dili sila maapektuhan sa bisan unsang coloristilo sa CSS.

Gipadapat font-familykini sa <body>ug awtomatiko nga napanunod sa tibuok kalibutan sa tibuok Bootstrap. Aron mabalhin ang global font-family, i-update $font-family-baseug i-compile ang Bootstrap.

Mga ulohan ug mga parapo

Ang tanan nga mga elemento sa ulohan—pananglitan, <h1>—ug <p>gi-reset aron margin-topmatangtang kini. Gidugang ang mga ulohan margin-bottom: .5remug mga parapo margin-bottom: 1rempara sa dali nga gilay-on.

Ulohan	Pananglitan
`<h1></h1>`	h1. Bootstrap nga ulohan
`<h2></h2>`	h2. Bootstrap nga ulohan
`<h3></h3>`	h3. Bootstrap nga ulohan
`<h4></h4>`	h4. Bootstrap nga ulohan
`<h5></h5>`	h5. Bootstrap nga ulohan
`<h6></h6>`	h6. Bootstrap nga ulohan

Mga lista

Tanan nga mga lista— <ul>, <ol>, ug <dl>—gitangtang margin-topug usa ka margin-bottom: 1rem. Ang mga nested list walay margin-bottom.

Ang tanan nga mga lista gitangtang ang ilang taas nga margin
Ug ang ilang ubos nga margin na-normalize
Ang mga nested list walay ubos nga margin
- Niining paagiha sila adunay mas parehas nga hitsura
- Ilabi na kung gisundan sa daghang mga butang sa lista
Ang wala nga padding gi-reset usab

Ania ang usa ka ordered list
Uban sa pipila ka mga butang sa listahan
Kini adunay parehas nga kinatibuk-ang hitsura
Sama sa nauna nga wala masunud nga lista

Para sa mas simple nga pag-istilo, tin-aw nga hierarchy, ug mas maayo nga gilay-on, ang mga lista sa paghulagway nag-update marginsa s. i - <dd>reset ug idugang . s kay naka- bold .margin-left0margin-bottom: .5rem<dt>

Mga lista sa paghulagway: Ang usa ka lista sa paghulagway perpekto alang sa pagtino sa mga termino.
Termino: Kahubitan alang sa termino.; Ang ikaduha nga kahulugan alang sa parehas nga termino.
Laing termino: Kahubitan alang niining laing termino.

Preformatted nga teksto

Ang <pre>elemento gi-reset aron tangtangon kini margin-topug gamiton ang remmga yunit para sa margin-bottom.

.example-elemento {
  margin-ubos: 1rem;
}

Mga lamesa

Ang mga lamesa gamay nga gipasibo sa istilo <caption>, pagbagsak sa mga utlanan, ug pagsiguro nga makanunayon text-alignsa tibuuk. Ang dugang nga mga pagbag-o alang sa mga utlanan, padding, ug uban pa moabut sa .tableklase .

Kini usa ka pananglitan nga lamesa, ug kini ang kapsyon niini aron ihulagway ang mga sulud.
Ulohan sa lamesa	Ulohan sa lamesa	Ulohan sa lamesa	Ulohan sa lamesa
Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa
Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa
Selula sa lamesa	Selula sa lamesa	Selula sa lamesa	Selula sa lamesa

Mga porma

Ang lainlaing mga elemento sa porma gi-reboot alang sa mas simple nga mga istilo sa base. Ania ang pipila sa labing inila nga mga pagbag-o:

<fieldset>s walay mga utlanan, padding, o margin aron dali silang magamit isip mga wrapper alang sa indibidwal nga mga input o grupo sa mga input.
<legend>s, sama sa mga fieldset, gi-restyle usab aron ipakita isip usa ka klase sa ulohan.
<label>s gitakda sa display: inline-blocksa pagtugot marginnga magamit.
<input>Ang s, <select>s, <textarea>s, ug <button>s kasagaran gitubag sa Normalize, apan ang Reboot nagtangtang usab sa ilang marginug sets line-height: inherit.
<textarea>Ang s giusab aron mahimo ra nga mabag-o nga patindog sama sa pinahigda nga pagbag-o kanunay nga "makaguba" nga layout sa panid.
<button>s ug <input>butones nga mga elemento adunay cursor: pointerkung :not(:disabled).

Kini nga mga pagbag-o, ug daghan pa, gipakita sa ubos.

Mga punto sa mga butones

Ang pag-reboot naglakip sa usa ka pagpaayo role="button"sa pagbag-o sa default nga cursor sa pointer. Idugang kini nga hiyas sa mga elemento aron makatabang sa pagpakita nga ang mga elemento interactive. Kini nga tahas dili kinahanglan alang sa <button>mga elemento, nga adunay kaugalingon nga cursorpagbag-o.

Butang nga elemento nga walay buton

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

Lainlaing elemento

Address

Ang <address>elemento gi-update aron i-reset ang default sa browser font-stylegikan italicsa normal. line-heightkaron usab napanunod, ug margin-bottom: 1remgidugang. <address>s alang sa pagpresentar sa impormasyon sa pagkontak alang sa labing duol nga katigulangan (o tibuok nga pundok sa trabaho). Ipreserbar ang pag-format pinaagi sa pagtapos sa mga linya sa <br>.

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

Tibuok Ngalan
[email protected]

Blockquote

Ang default marginsa blockquotes mao ang 1em 40px, mao nga among i-reset kana para 0 0 1remsa usa ka butang nga mas uyon sa ubang mga elemento.

Usa ka ilado nga kinutlo, nga anaa sa elemento sa blockquote.

Usa ka tawo nga bantog sa Source Title

Inline nga mga elemento

Nakadawat ang <abbr>elemento sa sukaranan nga istilo aron mahimo kini nga talagsaon taliwala sa teksto sa parapo.

Nulla attr vitae elit libero, usa ka pharetra augue.

Summary

Ang default cursorsa summary mao ang text, mao nga among gi-reset kana pointeraron ipaabot nga ang elemento mahimong ma-interact pinaagi sa pag-klik niini.

Pipila ka mga detalye

Dugang impormasyon bahin sa mga detalye.

Dugang nga mga detalye

Ania ang dugang nga mga detalye bahin sa mga detalye.

HTML5 `[hidden]`nga hiyas

Ang HTML5 midugang og bag-ong global attribute nga gihinganlan og[hidden] , nga gi-istilo display: nonesa default. Paghulam ug ideya gikan sa PureCSS , among gipauswag ang kini nga default pinaagi sa paghimo [hidden] { display: none !important; }aron matabangan nga mapugngan ang displayaksidente nga ma-override. Samtang [hidden]dili lumad nga suportado sa IE10, ang klaro nga deklarasyon sa among CSS nakasulbad sa problema.

<input type="text" hidden>

jQuery incompatibility

[hidden]dili compatible sa jQuery's $(...).hide()ug $(...).show()mga pamaagi. Busa, dili kami karon labi nga nag-endorso [hidden]sa ubang mga teknik sa pagdumala sa displaymga elemento.

Aron i-toggle lang ang visibility sa usa ka elemento, nagpasabot displaynga wala kini giusab ug ang elemento makaapektar gihapon sa dagan sa dokumento, gamita hinuon ang .invisibleklase .