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.

Niini nga panid

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.

CSS variables

Gidugang sa v5.1.1

Uban sa v5.1.1, among gi-standardize ang among gikinahanglan nga @importmga s sa tanan namong mga CSS bundle (lakip ang bootstrap.css, bootstrap-reboot.css, ug bootstrap-grid.cssilakip ang _root.scss. Kini nagdugang :rootsa lebel sa CSS variables sa tanang mga bundle, bisan unsa pa ka daghan niini ang gigamit sa maong bundle. Sa katapusan ang Bootstrap 5 magpadayon sa tan-awa ang dugang nga CSS variables nga gidugang sa paglabay sa panahon.

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. Kini nga default sa browser mahimong ma-override pinaagi sa pag-usab sa $font-size-rootvariable.
Nagtakda <body>usab ang usa ka global font-family, font-weight, line-height, ug color. 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

Gigamit sa Bootstrap ang usa ka "native font stack" o "system font stack" alang sa labing kaayo nga paghubad sa teksto sa matag aparato ug OS. Kini nga mga font sa sistema gidisenyo nga espesipiko nga nahunahunaan ang mga aparato karon, nga adunay gipaayo nga paghubad sa mga screen, suporta sa lainlain nga font, ug uban pa. Basaha ang dugang mahitungod sa lumad nga font stacks niini nga artikulo sa 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;

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.

CSS variables

Samtang ang Bootstrap 5 nagpadayon sa pagkahamtong, dugang ug dugang nga mga estilo ang matukod nga adunay mga variable sa CSS isip usa ka paagi sa paghatag og dugang nga real-time nga pag-customize nga dili kinahanglan nga kanunay nga mag-recompile sa Sass. Ang among pamaagi mao ang pagkuha sa among gigikanan nga mga variable nga Sass ug pagbag-o kini nga mga variable sa CSS. Nianang paagiha, bisan kung wala ka mogamit mga variable sa CSS, naa gihapon nimo ang tanan nga gahum sa Sass. Nagpadayon pa kini ug magkinahanglan og panahon aron hingpit nga mapatuman.

Pananglitan, hunahunaa kini :rootnga mga variable sa CSS alang sa kasagarang <body>mga istilo:

  @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};

Sa praktis, kana nga mga baryable gigamit dayon sa Reboot sama niini:

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
}

Nga nagtugot kanimo sa paghimo sa real-time nga mga pag-customize bisan unsa ang imong gusto:

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

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. Gi-reset usab namo ang padding-lefton <ul>ug <ol>mga elemento.

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 gi-order nga lista
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.

Inline nga code

I-wrap ang inline nga mga snippet sa code gamit ang <code>. Siguroha nga makalingkawas sa HTML angle bracket.

Pananglitan, <section>kinahanglan nga giputos ingon inline.

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

Mga bloke sa code

Gamita <pre>ang s para sa daghang linya sa code. Sa makausa pa, siguruha nga makalikay sa bisan unsang mga anggulo nga bracket sa code alang sa husto nga paghubad. Ang <pre>elemento gi-reset aron tangtangon kini margin-topug gamiton ang remmga yunit para sa 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>

Mga variable

Alang sa pagpakita sa mga variable gamita ang <var>tag.

y = m x + b

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

input sa user

Gamita ang <kbd>aron ipakita ang input nga kasagarang gisulod pinaagi sa keyboard.

Aron mabalhin ang mga direktoryo, i-type cdang gisundan sa ngalan sa direktoryo.
Aron ma-edit ang mga setting, pindota 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>

Sample nga output

Alang sa pagpakita sa sampol nga output gikan sa usa ka programa gamita ang <samp>tag.

Kini nga teksto gituyo nga isipon isip sample output gikan sa usa ka computer program.

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

Mga lamesa

Ang mga lamesa gamay nga gipasibo sa istilo <caption>, pagbagsak sa mga utlanan, ug pagsiguro nga makanunayon text-alignsa tibuuk. Dugang nga mga pagbag-o alang sa mga utlanan, padding, ug uban pa nga kauban 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 nga usa ka klase nga 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.

Pananglitan nga leyenda

Pananglitan nga input

Pananglitan sa email

Pananglitan sa telepono

Pananglitan nga url

Pananglitan nga numero

Pananglitan sa pagpangita

Ehemplo range

Pananglitan nga pag-input sa file

Pagpili sa panig-ingnan

Susiha kini nga checkbox

Ang kapilian usa mao kini ug kana Ang kapilian nga duha usa pa ka butang nga labi ka taas aron ipakita ang pagputos niining mga maanyag nga mga kontrol sa porma. Ang ikatulo nga kapilian gi-disable

Pananglitan sa textarea

Petsa sa pananglitan

Ehemplo nga panahon

Pananglitan nga password

Pananglitan datetime-lokal

Panig-ingnan nga semana

Pananglitan nga bulan

Pananglitan nga kolor

Pananglitan nga output 100

Suporta sa input sa petsa ug kolor

Hinumdomi nga ang mga input sa petsa dili hingpit nga gisuportahan sa tanan nga mga browser, nga mao ang Safari.

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

Ang HTML abbreviation nga elemento.

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. Ang paghulam ug ideya gikan sa PureCSS , among gipauswag kini nga default pinaagi sa paghimo [hidden] { display: none !important; }aron makatabang nga mapugngan ang displayaksidente nga ma-override.

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

Pag-reboot

Pagduol

CSS variables

Mga default sa panid

Lumad nga font stack

CSS variables

Mga ulohan ug mga parapo

Mga lista

Inline nga code

Mga bloke sa code

Mga variable

input sa user

Sample nga output

Mga lamesa

Mga porma

Suporta sa input sa petsa ug kolor

Mga punto sa mga butones

Lainlaing elemento

Address

Blockquote

Inline nga mga elemento

Summary

HTML5 [hidden]nga hiyas

jQuery incompatibility

HTML5 `[hidden]`nga hiyas