Source

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 OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (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;

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.

Lorem ipsum dolor agtugaw amet
Consectetur nga adipiscing nga elit
Integer nga molestie lorem iti masa
Facilisis iti pretium nisl nga aliquet
Nulla volutpat nga aliquam nga velit
- Phasellus nga iaculis nga neque
- Purus dagiti sodales nga ultricies
- Vestibulum nga laoreet nga porttitor sem
- Ac tristique nga libero nga volutpat ni
Faucibus porta nga lakos nga fringilla vel
Aenean agtugaw amet erat nunc
Eget nga porttitor nga lorem

Lorem ipsum dolor agtugaw amet
Consectetur nga adipiscing nga elit
Integer nga molestie lorem iti masa
Facilisis iti pretium nisl nga aliquet
Nulla volutpat nga aliquam nga velit
Faucibus porta nga lakos nga fringilla vel
Aenean agtugaw amet erat nunc
Eget nga porttitor nga lorem

Para iti nasimsimple nga estilo, nalawag a hirarkia, ken nasaysayaat nga espasyo, dagiti listaan ti deskripsion 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.
Euismod nga: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit nga saan nga mi porta gravida iti eget metus.
Malesuada nga porta: Etiam porta sem malesuada nga agtagibalay nga euismod.

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

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

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.

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

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] , nga estilo 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 .