in English

I-reboot nga i-reboot

Reboot, ti koleksion dagiti elemento-espesipiko a panagbalbaliw ti CSS iti maymaysa a papeles, kickstart ti Bootstrap tapno mangipaay ti elegante, agtultuloy, ken simple a batayan a linia a maibangon.

Sungaden

Ti Reboot ket mangbangon iti Normalize, a mangipaay kadagiti adu nga elemento ti HTML nga addaan kadagiti medyo opinionado nga estilo nga agus-usar laeng kadagiti agpili ti elemento. Ti kanayonan nga estilo ket maaramid laeng kadagiti klase. Kas pagarigan, i-rebootmi ti sumagmamano <table>nga estilo para iti nasimsimple a batayan a linia ken kalpasanna mangipaay .tableti , .table-bordered, ken dadduma pay.

Adtoy dagiti pagannurotan ken rasonmi iti panangpili no ania ti i-override iti Reboot:

Ipabaro ti sumagmamano a default a pateg ti browser tapno agusar remti s imbes a ti ems para iti maipadakkel a panagsisina ti paset.
Liklikan margin-topti . Mabalin a marpuog dagiti bertikal a margin, a mangpataud kadagiti di ninamnama a resulta. Ngem napatpateg pay, ti maymaysa a direksion ti marginket nasimsimple a mental a modelo.
Para iti nalaklaka a panagsukog iti ballasiw dagiti kadakkel ti alikamen, dagiti elemento ti bloke ket rumbeng nga agusar remti s para iti margins.
Pagtalinaeden dagiti deklarasion dagiti font-mainaig a tagikua iti kabassitan, nga agusar inheritno mabalin.

Dagiti default ti panid

Ti <html>ken <body>dagiti elemento ket na-update tapno mangipaay kadagiti nasaysayaat a panid-a-saknap a default. Ad-adda nga espesipiko:

Ti box-sizingket sangalubongan a naikeddeng iti tunggal maysa nga elemento—a mairaman ti *::beforeken *::after, iti border-box. Daytoy ket mangsigurado a ti naideklara a kalawa ti elemento ket saan a pulos a malabsan gapu ti padding wenno beddeng.
Awan ti batayan font-sizea naideklara iti <html>, ngem 16pxnaipagarup (ti default ti browser). font-size: 1remket naipakat iti <body>para iti nalaka a makasungbat a type-scaling babaen dagiti panagsaludsod ti media bayat a mangraem kadagiti kaykayat ti agar-aramat ken mangipasigurado ti ad-adu a makastrek a pamay-an.
Ti <body>met mangikeddeng ti sangalubongan a font-family, line-height, ken text-align. Daytoy ket tawiden inton agangay babaen dagiti sumagmamano nga elemento ti porma tapno malapdan dagiti saan a panagtutunos ti letra.
Para iti kinatalged, ti <body>addaan iti naideklara background-color, a default iti #fff.

Katutubo nga stack ti letra

Dagiti default a web fonts (Helvetica Neue, Helvetica, ken Arial) ket naibaba iti Bootstrap 4 ken nasukatan iti “native font stack” para iti kasayaatan a panagiparang ti teksto iti tunggal alikamen ken OS. Basaen ti ad-adu pay maipapan kadagiti katutubo a font stack iti daytoy nga artikulo ti 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;

Imutektekanyo a gapu ta ti font stack ket mangiraman kadagiti emoji a letra, adu a gagangay a simbolo/dingbat a karakter ti Unicode ket maiparangto a kas dagiti adu ti kolorna a piktograpo. Agduduma ti langada, depende iti estilo a nausar iti katutubo nga emoji font ti browser/platform, ken saanda a maapektaran iti aniaman nga colorestilo ti CSS.

Daytoy font-familyket maipakat iti <body>ken automatiko a natawid iti sangalubongan iti intero a Bootstrap. Tapno agsubli ti global font-family, i-update $font-family-baseken i-kompile manen ti Bootstrap.

Dagiti paulo ken parapo

Amin nga elemento ti paulo—kas pagarigan, <h1>—ken <p>mai-reset tapno margin-topmaikkat dagitoy. Nainayon dagiti paulo margin-bottom: .5remken parapo margin-bottom: 1rempara iti nalaka a panagsisina.

Paulo	Pagwadan
`<h1></h1>`	h1. Bootstrap nga paulo
`<h2></h2>`	h2. Bootstrap nga paulo
`<h3></h3>`	h3. Bootstrap nga paulo
`<h4></h4>`	h4. Bootstrap nga paulo
`<h5></h5>`	h5. Bootstrap nga paulo
`<h6></h6>`	h6. Bootstrap nga paulo

Dagiti Listaan

Amin a listaan— <ul>, <ol>, ken <dl>—ket addaan iti margin-topnaikkat ken a margin-bottom: 1rem. Dagiti naisanglad a listaan ket awan ti margin-bottom.

Amin a listaan ket naikkat ti kangatuan a margin-da
Ket nagnormal ti bottom margin-da
Dagiti naisanglad a listaan ket awan ti baba a margin
- Iti kasta ad-adda a naurnos ti langada
- Nangnangruna no sarunuen ti ad-adu pay a banag iti listaan
Na-reset metten ti kannigid a padding

Ania ti naurnos a listaan
Buyogen ti sumagmamano a banag iti listaan
Kasta met laeng ti pakabuklan a langana
Kas iti napalabas a di naurnos a listaan

Para iti nasimsimple nga estilo, nalawag a hirarkia, ken nasaysayaat nga espasyo, dagiti listaan ti panangiladawan ket addaan kadagiti napabaro nga margins. s i - <dd>reset ken inayon ti . s ti nalukmeg .margin-left0margin-bottom: .5rem<dt>

Dagiti listaan ti panangiladawan: Ti listaan ti panangiladawan ket perpekto para iti panangdepinar kadagiti termino.
Termino: Depinasion para iti termino.; Maikadua a depinasion para iti isu met laeng a termino.
Sabali pay a termino: Depinasion para iti daytoy sabali a termino.

Nasaksakbay a napormat a teksto

Ti <pre>elemento ket mai-reset tapno maikkat ti daytoy margin-topken agusar kadagiti remyunit para iti margin-bottom.

.pagarigan-nga-elemento { .
  pingir-baba: 1rem;
} nga

Dagiti Lamisaan

Dagiti lamisaan ket nabaliwan bassit kadagiti estilo <caption>s, dagiti beddeng a mangrakrak, ken mangsigurado a maitunos text-aligniti intero. Dagiti kanayonan a panagbalbaliw para kadagiti beddeng, padding, ken dadduma pay ket umay a kadua ti .tableklase .

Daytoy ket maysa a pagarigan a lamisaan, ken daytoy ti kapsionna a mangiladawan kadagiti linaonna.
Paulo ti lamisaan	Paulo ti lamisaan	Paulo ti lamisaan	Paulo ti lamisaan
Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan
Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan
Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan

Dagiti Pormas

Dagiti nadumaduma nga elemento ti porma ket nairugi manen para kadagiti nasimsimple nga estilo ti batayan. Adtoy ti sumagmamano kadagiti nakadkadlaw unay a panagbalbaliw:

<fieldset>s ket awan dagiti beddeng, padding, wenno margin isu a nalaka nga usaren dagitoy a kas dagiti balkot para kadagiti indibidual nga input wenno dagiti grupo dagiti input.
<legend>s, a kas dagiti fieldset, ket naestilo manen tapno maiparang a kas ti paulo dagiti kita.
<label>s ket naikabil iti display: inline-blocktapno mangipalubos margina mayaplikar.
<input>s, <select>s, <textarea>s, ken <button>s ket kaaduan a naaddress babaen ti Normalize, ngem ti Reboot ket ikkatenna ti marginken mangikeddengda line-height: inherit, met.
<textarea>s ket mabaliwan tapno laeng mabaliwan ti kadakkel a bertikal a kas ti horisontal a panagbalbaliw ti kadakkel ket masansan a “mangburak” ti layout ti panid.
<button>s ken dagiti <input>elemento ti buton ket addaan cursor: pointerno :not(:disabled).

Dagitoy a panagbalbaliw, ken dadduma pay, ket naipakita iti baba.

Dagiti puntos kadagiti buton

Ti Reboot ket mangiraman ti panagpasayaat para iti role="button"tapno baliwan ti default a kursor iti pointer. Inayon daytoy a kababalin kadagiti elemento tapno makatulong a mangipakita a dagiti elemento ket interaktibo. Daytoy nga akem ket saan a kasapulan para kadagiti <button>elemento, a makagun-od ti bukodda a cursorpanagbalbaliw.

Buton ti elemento a saan a buton

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

Misc nga elemento

Pagtataengan

Ti <address>elemento ket na-update tapno mai-reset ti default ti browser font-stylemanipud italiciti aginggana iti normal. line-heightket natawid met itan, ken margin-bottom: 1remnainayon. <address>s ket para iti panangidatag ti impormasion ti pannakiuman para iti kaasitgan nga inapo (wenno ti intero a bagi ti trabaho). Ipreserba ti panagpormat babaen ti panagpatingga kadagiti linia babaen ti <br>.

Twitter, Inc.
1355 Merkado St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890. Ti panagadal ti panagbiag ti tao

Buo a Nagan
[email protected]

I-block ti sitas

Ti default marginkadagiti blockquotes ket 1em 40px, isu nga i-resetmi dayta iti 0 0 1rempara iti maysa a banag nga ad-adda a maitunos kadagiti dadduma nga elemento.

Maysa a nalatak a sitas, a linaon ti elemento ti blockquote.

Maysa a nalatak iti Source Title

Inline nga elemento

Ti <abbr>elemento ket umawat ti batayan nga estilo tapno agbalin a naisangsangayan kadagiti teksto ti parapo.

Nulla attr vitae elit libero, maysa a pharetra nga augue.

Dagup

Ti default cursoriti pakagupgopan ket text, isu nga i-resetmi dayta iti pointertapno maipakaammo a ti elemento ket mabalin a makilangen babaen ti panangi-klik iti daytoy.

Sumagmamano a detalye

Ad-adu pay nga info maipapan kadagiti detalye.

Ad-adu pay a detalye

Adtoy ti ad-adu pay a detalye maipapan kadagiti detalye.

HTML5 `[hidden]`nga attribute

Ti HTML5 ket manginayon ti baro a sangalubongan a kababalin a napanaganan iti[hidden] , a naistilo a kas display: nonebabaen ti kasisigud. Ti panagbulod ti maysa nga ideya manipud iti PureCSS , pasayaatenmi daytoy a default babaen ti panagaramid [hidden] { display: none !important; }tapno makatulong a manglapped ti daytoy displaymanipud iti aksidente a pannakabalbaliw. Bayat [hidden]a saan a natibo a suportado babaen ti IE10, ti nalawag a deklarasion iti CSStayo ket makaliklik iti dayta a parikut.

<input type="text" hidden>

jQuery nga di panagtunos

[hidden]saan a maibagay kadagiti jQuery's $(...).hide()ken dagiti $(...).show()pamay-an. Gapuna, saanmi nga agdama a nangruna nga i-endorso [hidden]ngem dagiti dadduma a teknik para iti panangtarawidwid ti displaydagiti elemento.

Tapno laeng mai-toggle ti pannakakita ti maysa nga elemento, a ti kayatna a sawen displayket saan a nabaliwan ti elementona ken ti elemento ket mabalin pay laeng nga apektaranna ti panagayus ti dokumento, usarem ketdi ti .invisibleklase .