in English

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.

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.

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.
Lub <body>kuj teev ib lub ntiaj teb no font-family, line-height, thiab text-align. 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

Lub web fonts lub neej ntawd (Helvetica Neue, Helvetica, thiab Arial) tau poob rau hauv Bootstrap 4 thiab hloov nrog "neeg haiv neeg font pawg" rau cov ntawv nyeem zoo tshaj plaws ntawm txhua lub cuab yeej thiab OS. Nyeem ntxiv txog cov kab ntawv ib txwm nyob hauv kab lus 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;

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.

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.

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.

Cov ntawv nyeem ua ntej

Lub <pre>caij yog rov pib dua kom tshem tawm nws margin-topthiab siv remunits rau nws margin-bottom.

.example-element {
  margin-hauv qab: 1rem;
}

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.

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.

Nulla attr vitae elit libero, pharetra auggue.

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. Thaum [hidden]tsis yog ib txwm txhawb nqa los ntawm IE10, cov lus tshaj tawm meej hauv peb CSS tau nyob ib puag ncig qhov teeb meem.

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