Source

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 mahatagan ang 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 pagkasumpaki 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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. Ang mga ulohan margin-bottom: .5remgidugang ug 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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem ug masa
Facilisis sa pretium nisl aliquet
Nulla volutpat aliquam velit
- Espesye sa tanom nga bulak ang Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat ug
Faucibus porta lacus fringilla vel
Aenean naglingkod amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem ug masa
Facilisis sa pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean naglingkod amet erat nunc
Eget porttitor lorem

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.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida ug eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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.

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

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 sa 0 0 1remusa ka butang nga mas nahiuyon sa ubang mga elemento.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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 .