Rov pib dua

Reboot, ib qho kev sau ntawm cov ntsiab lus tshwj xeeb CSS hloov pauv hauv ib cov ntaub ntawv, kickstart Bootstrap los muab qhov zoo nkauj, zoo ib yam, thiab cov hauv paus ntsiab lus yooj yim los tsim.

Ntawm nplooj ntawv no

Mus kom ze

Reboot ua raws li Normalize, muab ntau lub ntsiab lus HTML nrog qee qhov kev xav zoo uas siv cov khoom xaiv nkaus xwb. Ntxiv styling tsuas yog ua nrog cov chav kawm. Piv txwv li, peb reboot ib co <table>qauv rau ib tug yooj yim lub hauv paus thiab tom qab ntawd muab .table, .table-bordered, thiab ntau dua.

Nov yog peb cov lus qhia thiab cov laj thawj ntawm kev xaiv dab tsi los hla hauv Reboot:

Hloov kho qee qhov browser default values siv rems es tsis txhob ems rau scalable tivthaiv sib nrug.
Zam margin-top. Vertical margins tuaj yeem tawg, ua rau cov txiaj ntsig tsis tau xav txog. Qhov tseem ceeb tshaj, txawm li cas los xij, ib qho kev taw qhia ntawm marginyog tus qauv kev puas siab ntsws yooj yim.
Txhawm rau kom yooj yim scaling hla qhov ntau thiab tsawg, thaiv cov ntsiab lus yuav tsum siv rems rau margins.
Khaws cov lus tshaj tawm ntawm fontcov khoom ntsig txog yam tsawg kawg nkaus, siv inheritthaum twg los tau.

CSS variables

Ntxiv hauv v5.1.1

Nrog v5.1.1, peb standardized peb xav tau @imports nyob rau hauv tag nrho peb CSS bundles (xws li bootstrap.css, bootstrap-reboot.css, thiab bootstrap-grid.csssuav nrog _root.scss. Qhov no ntxiv :rootqib CSS variables rau tag nrho cov bundles, tsis hais ntau npaum li cas ntawm lawv tau siv nyob rau hauv lub nras. Thaum kawg Bootstrap 5 yuav txuas ntxiv mus. saib ntau CSS variables ntxiv rau lub sij hawm.

Nplooj ntawv defaults

Cov <html>thiab <body>cov ntsiab lus tau hloov kho kom muab cov nplooj ntawv zoo dua qub. Tshwj xeeb tshaj yog:

Lub box-sizingntiaj teb no tau teeb tsa rau txhua lub ntsiab lus - suav nrog *::beforethiab *::after, rau border-box. Qhov no ua kom ntseeg tau tias qhov kev tshaj tawm dav ntawm lub ntsiab lus tsis tau tshaj vim padding lossis ciam teb.
- Tsis muaj lub hauv paus font-sizetau tshaj tawm rau ntawm <html>, tab sis 16pxyog assumed (qhov browser default). font-size: 1remyog siv rau ntawm qhov <body>yooj yim teb hom-scaling ntawm cov lus nug xov xwm thaum saib xyuas cov neeg siv nyiam thiab ua kom muaj kev nkag tau yooj yim dua. Qhov browser neej ntawd tuaj yeem hla dhau los ntawm kev hloov kho qhov $font-size-rootsib txawv.
Lub <body>kuj teev ib lub ntiaj teb no font-family, font-weight, line-height, thiab color. Qhov no tau txais txiaj ntsig tom qab los ntawm qee cov ntsiab lus los tiv thaiv font inconsistencies.
Rau kev nyab xeeb, tus <body>tau tshaj tawm background-color, defaulting rau #fff.

Native font pawg

Bootstrap siv ib qho "neeg haiv neeg font pawg" lossis "system font stack" rau cov ntawv nyeem zoo tshaj plaws ntawm txhua lub cuab yeej thiab OS. Cov kab ke fonts no tau tsim tshwj xeeb nrog cov khoom siv niaj hnub no hauv siab, nrog kev ua kom zoo dua ntawm cov ntxaij vab tshaus, kev txhawb nqa font sib txawv, thiab ntau dua. Nyeem ntxiv txog cov kab ntawv ib txwm nyob hauv kab lus 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;

Nco ntsoov tias vim tias pawg font suav nrog emoji fonts, ntau lub cim / dingbat unicode cim yuav raug muab ua ntau xim duab. Lawv cov tsos yuav txawv, nyob ntawm seb tus qauv siv nyob rau hauv browser / platform cov haiv neeg emoji font, thiab lawv yuav tsis cuam tshuam los ntawm CSS colorstyle.

Qhov no font-familyyog siv rau qhov <body>thiab tau txais txiaj ntsig thoob ntiaj teb thoob plaws hauv Bootstrap. Txhawm rau hloov lub ntiaj teb font-family, hloov kho $font-family-basethiab rov ua dua Bootstrap.

CSS variables

Raws li Bootstrap 5 tseem paub tab, ntau thiab ntau tus qauv yuav tsim nrog CSS variables raws li ib tug txhais tau tias los muab ntau real-time customization yam tsis tas yuav tsum tau ib txwm recompile Sass. Peb txoj hauv kev yog coj peb qhov kev hloov pauv Sass thiab hloov pauv mus rau CSS hloov pauv. Txoj kev ntawd, txawm tias koj tsis siv CSS hloov pauv, koj tseem muaj tag nrho lub zog ntawm Sass. Qhov no tseem tab tom ua tiav thiab yuav siv sijhawm los ua kom tiav.

Piv txwv li, xav txog cov :rootCSS variables rau cov <body>qauv:

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

Hauv kev xyaum, cov kev hloov pauv no tau siv rau hauv Reboot zoo li:

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
}

Uas tso cai rau koj los ua kev hloov kho lub sijhawm tiag tiag li koj nyiam:

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

Kab lus thiab kab lus

Tag nrho cov ntsiab lus - piv txwv li, <h1>- thiab <p>rov pib dua kom muaj lawv margin-toptshem tawm. Cov ncauj lus tau margin-bottom: .5remntxiv thiab kab lus margin-bottom: 1remkom yooj yim sib nrug.

Lub taub hau	Piv txwv
`<h1></h1>`	h 1. Bootstrap taub hau
`<h2></h2>`	h 2. Bootstrap taub hau
`<h3></h3>`	h 3. Bootstrap taub hau
`<h4></h4>`	h 4. Bootstrap taub hau
`<h5></h5>`	h 5. Bootstrap taub hau
`<h6></h6>`	h 6. Bootstrap taub hau

Cov npe

Tag nrho cov npe - <ul>, <ol>, thiab <dl>- muaj lawv margin-toptshem tawm thiab a margin-bottom: 1rem. Nested lists tsis muaj margin-bottom. Peb kuj tau rov pib dua padding-leftthiab <ul>cov <ol>ntsiab lus.

Tag nrho cov npe muaj lawv cov npoo saum toj kawg nkaus tshem tawm
Thiab lawv cov paj hauv qab normalized
Nested npe tsis muaj cov paj hauv qab
- Ua li no lawv muaj qhov zoo nkauj dua
- Tshwj xeeb yog thaum ua raws los ntawm ntau cov npe khoom
Cov padding sab laug kuj tau pib dua

Nov yog daim ntawv xaj
Nrog ob peb daim ntawv teev npe
Nws muaj qhov zoo ib yam
Raws li daim ntawv teev npe tsis tau xaj yav dhau los

Rau qhov yooj yim styling, meej hierarchy, thiab qhov sib nrug zoo dua, cov npe piav qhia tau hloov kho margins. <dd>s rov pib dua margin-leftthiab 0ntxiv margin-bottom: .5rem. <dt>s ua bold .

Cov npe piav qhia: Daim ntawv teev lus piav qhia zoo meej rau kev txhais cov ntsiab lus.
Lub sij hawm: Definition rau lub sij hawm.; Qhov thib ob txhais rau tib lub sij hawm.
Lwm lub sij hawm: Txhais rau lwm lo lus no.

Inline code

Qhwv inline snippet ntawm code nrog <code>. Nco ntsoov khiav HTML lub kaum sab xis.

Piv txwv li, <section>yuav tsum tau qhwv li inline.

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

Code blocks

Siv <pre>s rau ntau kab ntawm cov cai. Ib zaug ntxiv, nco ntsoov kom khiav tawm txhua lub kaum sab xis hauv cov cai rau kev ua kom raug. Lub <pre>caij yog rov pib dua kom tshem tawm nws margin-topthiab siv remunits rau nws 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>

Hloov pauv

Txhawm rau qhia qhov hloov pauv siv lub <var>cim.

y = m x + b

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

Cov neeg siv tswv yim

Siv qhov <kbd>taw qhia cov tswv yim uas feem ntau nkag los ntawm cov keyboard.

Txhawm rau hloov cov npe, ntaus cdua raws li lub npe ntawm cov npe.
Txhawm rau kho qhov chaw, nias 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>

Qauv tso zis

Txhawm rau qhia cov qauv tso tawm los ntawm qhov program siv lub <samp>cim npe.

Cov ntawv no yog tsim los kho raws li cov qauv tso tawm los ntawm lub khoos phis tawj program.

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

Rooj

Cov ntxhuav tau hloov kho me ntsis rau style <caption>s, tsoo ciam teb, thiab ua kom zoo ib yam text-alignthoob plaws. Ntxiv kev hloov pauv rau ciam teb, padding, thiab ntau ntxiv tuaj nrog rau .tablechav kawm .

Qhov no yog ib lub rooj piv txwv, thiab qhov no yog nws cov kab lus los piav txog cov ntsiab lus.
Cov kab lus	Cov kab lus	Cov kab lus	Cov kab lus
Rooj cell	Rooj cell	Rooj cell	Rooj cell
Rooj cell	Rooj cell	Rooj cell	Rooj cell
Rooj cell	Rooj cell	Rooj cell	Rooj cell

Cov ntawv

Ntau daim ntawv cov ntsiab lus tau rov pib dua rau cov qauv yooj yim. Nov yog qee qhov kev hloov pauv tseem ceeb tshaj plaws:

<fieldset>s tsis muaj ciam teb, padding, lossis margin yog li lawv tuaj yeem siv tau yooj yim los ua wrappers rau ib tus neeg nkag lossis pab pawg ntawm cov khoom nkag.
<legend>s, zoo li fieldsets, kuj tau hloov kho kom pom raws li cov npe ntawm hom.
<label>s tau teem kom display: inline-blocktso cai marginrau siv.
<input>s, <select>s, <textarea>s, thiab <button>s feem ntau hais los ntawm Normalize, tab sis Reboot tshem tawm lawv marginthiab teeb tsa line-height: inherit, ib yam nkaus.
<textarea>s yog hloov kho kom tsuas yog resizable vertically raws li kab rov tav resizing feem ntau "so" nplooj layout.
<button>s thiab <input>khawm ntsiab muaj cursor: pointerthaum :not(:disabled).

Cov kev hloov pauv no, thiab ntau ntxiv, tau pom hauv qab no.

Hnub & xim kev txhawb nqa

Nco ntsoov hnub inputs tsis txaus siab los ntawm tag nrho cov browsers, uas yog Safari.

Pointers ntawm cov nyees khawm

Reboot suav nrog kev txhim kho rau role="button"hloov tus cursor default rau pointer. Ntxiv cov cwj pwm no rau cov ntsiab lus los pab qhia cov ntsiab lus sib tham sib. Lub luag haujlwm no tsis tsim nyog rau <button>cov ntsiab lus, uas tau txais lawv tus kheej cursorhloov.

Tsis khawm khawm khawm

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

Lwm yam

Chaw nyob

Lub <address>caij yog hloov kho kom rov pib dua qhov browser default font-stylelos ntawm italicmus rau normal. line-heighttseem tam sim no tau txais txiaj ntsig, thiab margin-bottom: 1remtau ntxiv lawm. <address>s yog los nthuav qhia cov ntaub ntawv tiv tauj rau cov poj koob yawm txwv ze tshaj plaws (lossis tag nrho lub cev ua haujlwm). Khaws formatting los xaus kab nrog <br>.

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

Lub Npe Lub Npe
[email protected]

Blockquote

Lub neej ntawd marginntawm blockquotes yog 1em 40px, yog li peb rov pib dua qhov ntawd 0 0 1remrau ib yam dab tsi zoo sib xws nrog lwm cov ntsiab lus.

Ib qho zoo-paub quotes, muaj nyob rau hauv ib lub ntsiab lus blockquote.

Ib tug neeg nto moo nyob rau hauv Lub Npe Lub Npe

Cov ntsiab lus hauv kab

Lub <abbr>caij tau txais cov qauv yooj yim los ua kom nws sawv hauv cov kab lus.

HTML abbreviation element.

Cov ntsiab lus

Lub neej ntawd cursorntawm cov ntsiab lus yog text, yog li peb rov pib dua qhov ntawd pointerkom qhia tias lub caij tuaj yeem cuam tshuam nrog los ntawm txhaj rau nws.

Qee cov ntsiab lus

Xav paub ntau ntxiv txog cov ntsiab lus.

Txawm paub ntau ntxiv

Ntawm no yog cov ntsiab lus ntau ntxiv txog cov ntsiab lus.

HTML5 `[hidden]`attribute

HTML5 ntxiv tus cwj pwm tshiab thoob ntiaj teb muaj npe[hidden] , uas yog styled raws li display: nonelub neej ntawd. Qiv ib lub tswv yim los ntawm PureCSS , peb txhim kho raws li lub neej ntawd los ntawm kev ua [hidden] { display: none !important; }los pab tiv thaiv nws displaylos ntawm kev ua yuam kev overridden.

<input type="text" hidden>

jQuery incompatibility

[hidden]yog tsis sib xws nrog jQuery's $(...).hide()thiab $(...).show()txoj kev. Yog li ntawd, peb tsis tam sim no tshwj xeeb tshaj yog pom zoo [hidden]rau lwm cov tswv yim los tswj cov displayntsiab lus.

Txhawm rau tsuas yog toggle qhov pom ntawm lub ntsiab lus, lub ntsiab lus nws displaytsis hloov kho thiab lub ntsiab tseem tuaj yeem cuam tshuam rau qhov ntws ntawm cov ntaub ntawv, siv chav .invisiblekawm hloov.

Rov pib dua

Mus kom ze

CSS variables

Nplooj ntawv defaults

Native font pawg

CSS variables

Kab lus thiab kab lus

Cov npe

Inline code

Code blocks

Hloov pauv

Cov neeg siv tswv yim

Qauv tso zis

Rooj

Cov ntawv

Hnub & xim kev txhawb nqa

Pointers ntawm cov nyees khawm

Lwm yam

Chaw nyob

Blockquote

Cov ntsiab lus hauv kab

Cov ntsiab lus

HTML5 [hidden]attribute

jQuery incompatibility

HTML5 `[hidden]`attribute