Gbugbɔ dze egɔme

Reboot, si nye element-specific CSS tɔtrɔwo ƒe ƒuƒoƒo le faɛl ɖeka me, kickstart Bootstrap be wòana gɔmedzedze dzeani, si mewɔa tɔtrɔ o, kple bɔbɔe si dzi woatu ɖo.

Te ɖe

Reboot tu ɖe Normalize dzi, si naa HTML akpa geɖewo kple atsyã siwo me susu le vie to akpa tiatialawo ko zazã me. Wowɔa atsyã bubuwo kple klasswo ko. Le kpɔɖeŋu me, míegbugbɔ dzea <table>atsyã aɖewo gɔme hena gɔmedzedze bɔbɔe aɖe eye emegbe míenaa .table, .table-bordered, kple bubuwo.

Míaƒe mɔfiamewo kple susu siwo tae nètia nusi nàɖe asi le le Reboot me lae nye esi:

Trɔ asi le browser ƒe asixɔxɔ aɖewo siwo woɖo ɖi ŋu be nàzã rems ɖe s teƒe emna akpa ƒe dometsotso si woate ŋu adzi ɖe edzi.
Ƒo asa na margin-top. Axa siwo le tsitrenu ate ŋu adze anyi, si ana nusiwo womele mɔ kpɔm na o nado tso eme. Gake vevietɔ wu la, mɔfiame ɖeka si marginnye susu me kpɔɖeŋu si le bɔbɔe wu.
Be woateŋu adzidze nu bɔbɔe le mɔ̃ ƒe lolomewo me la, ele be block elements nazã rems na margins.
Na -nunɔamesi siwo do ƒome kplii ƒe gbeƒãɖeɖewo fontnanɔ suetɔ kekeake, zã inheritɣesiaɣi si wòanya wɔ.

Axa ƒe ɖoɖowɔɖiwo

Wotrɔa asi le <html>kple <body>ƒe akpaawo ŋu be woana axa bliboa ƒe gɔmedzedze nyuie wu. Ne míagblɔe tututu la:

Woɖo The box-sizingla ɖe nu ɖesiaɖe dzi le xexeame katã—siwo dometɔ aɖewoe nye *::beforekple *::after, be border-box. Esia kpɔa egbɔ be womegbɔa element ƒe kekeme si woɖe gbeƒãe ŋu gbeɖe o le padding alo border ta.
font-sizeWomeɖe gbeƒã gɔmeɖoanyi aɖeke le <html>, gake 16pxwotsɔe be (browser ƒe gɔmedzedze). font-size: 1remwozãnɛ le la dzi <body>hena ŋuɖoɖo bɔbɔe ƒe ƒomevi-dzidzenu to nyadzɔdzɔgblɔmɔnuwo ƒe nyabiasewo dzi esime wole bubu dem zãlawo ƒe didiwo ŋu eye wole ekpɔm be mɔnu si ŋu woate ŋu aɖo bɔbɔe wu le.
The <body>hã ɖo xexeame katã ƒe font-family, line-height, kple text-align. Esia nyia dome emegbe to nɔnɔmetata ƒe akpa aɖewo dzi be woatsɔ axe mɔ ɖe ŋɔŋlɔdzesiwo ƒe masɔmasɔ nu.
Le dedienɔnɔ ta la, the <body>has a declared background-color, defaulting to #fff.

Native ŋɔŋlɔdzesiwo ƒe ƒuƒoƒo

Woɖe asi le web fonts gbãtɔwo (Helvetica Neue, Helvetica, kple Arial) ŋu le Bootstrap 4 me eye wotsɔ “native font stack” ɖɔ li wo hena nuŋɔŋlɔ ƒe gɔmeɖeɖe nyuitɔ kekeake le mɔ̃ kple OS ɖesiaɖe dzi. Xlẽ nu geɖe tso native font stacks ŋu le Smashing Magazine ƒe nyati sia me .

$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;

De dzesii be esi wònye be emoji ŋɔŋlɔdzesiwo le ŋɔŋlɔdzesiwo ƒe ƒuƒoƒoa me ta la, woaɖe dzesi/dingbat Unicode ŋɔŋlɔdzesi geɖe siwo bɔ la gɔme abe nɔnɔmetata siwo le amadede vovovowo me ene. Woƒe dzedzeme ato vovo, le atsyã si wozã le browser/platform la ƒe emoji ŋɔŋlɔdzesi gbãtɔ me nu, eye CSS colorƒe atsyã aɖeke makpɔ ŋusẽ ɖe wo dzi o.

Wowɔa font-familyesia ŋudɔ ɖe <body>kple domenyinyi le eɖokui si le xexeame katã le Bootstrap bliboa me. Be nàtrɔ xexeame katã font-familyla, trɔ asi $font-family-basele Bootstrap ŋu eye nàgbugbɔ aƒoe nu ƒu.

Tanyawo kple memamãwo

Tanya ƒe akpawo katã—le kpɔɖeŋu me, <h1>—eye <p>wogbugbɔ ɖoa wo be woaɖe wo margin-topɖa. Wotsɔ tanyawo margin-bottom: .5remkpe ɖe eŋu kple memamawo margin-bottom: 1rembe dometsotsowo nanɔ bɔbɔe.

Tanya ƒe tanya	Kpɔɖeŋu
`<h1></h1>`	h1. Bootstrap ƒe tanya
`<h2></h2>`	h2. Bootstrap ƒe tanya
`<h3></h3>`	h3. Bootstrap ƒe tanya
`<h4></h4>`	h4. Bootstrap ƒe tanya
`<h5></h5>`	h5. Bootstrap ƒe tanya
`<h6></h6>`	h6. Bootstrap ƒe tanya

Ŋlɔ ŋkɔwo

Woɖe xexlẽdzesiawo katã— <ul>, <ol>, kple <dl>—wo margin-topɖa eye a margin-bottom: 1rem. Nested lists mekpɔ naneke o margin-bottom.

Woɖe xexlẽdzesiawo katã ƒe akpa si le etame la ɖa
Eye woƒe akpa si le ete la va zu nusi sɔ
Nested lists mekpɔa eteƒe o
- To mɔ sia dzi la, woƒe dzedzeme nɔa sɔsɔm wu
- Vevietɔ ne nya siwo woŋlɔ ɖe xexlẽdzesiwo me geɖe wu kplɔe ɖo
Wogbugbɔ ɖo miame padding la hã

Ŋkɔ siwo woɖo ɖe ɖoɖo nu lae nye esi
Kple nu ʋɛ aɖewo siwo woŋlɔ ɖi
Eƒe dzedzeme bliboa sɔ kple etɔ
Abe alesi woŋlɔ ŋkɔ siwo womeɖo ɖe ɖoɖo nu o va yi ene

marginBe atsyã nanɔ bɔbɔe wu, ɖoɖo si me kɔ nyuie, kple dometsotso nyuie wu la, wowɔ s yeyee le nuŋlɔɖiwo me . <dd>s gbugbɔ ɖoe margin-leftɖe 0eye nàtsɔe akpe ɖe eŋu margin-bottom: .5rem. <dt>s nye nuŋɔŋlɔ si le fli me .

Numeɖeɖewo ƒe xexlẽdzesiwo: Numeɖeɖe ƒe xexlẽdzesi sɔ nyuie na nyawo gɔmeɖeɖe.
Nya: Gɔmeɖeɖe na nya la.; Gɔmesese evelia na nya ma ke.
Nya bubu aɖe hã: Gɔmeɖeɖe na nya bubu sia.

Nuŋɔŋlɔ siwo woɖo ɖi do ŋgɔ

Wogbugbɔa <pre>element la margin-topɖoa remeƒe margin-bottom.

.kpɔɖeŋu-nu vevi { .
  akpa si le ete: 1rem;
} .

Kplɔ̃wo

Wotrɔa asi le kplɔ̃wo ŋu vie ɖe atsyã <caption>s nu, wogbãa liƒowo, eye wokpɔa egbɔ be wowɔ ɖeka le wo text-alignkatã me. Tɔtrɔ bubuwo le liƒowo, padding, kple bubuwo ŋu va kpe ɖe .tableklass la ŋu .

Esia nye kpɔɖeŋu kplɔ̃, eye esia nye eƒe nuŋɔŋlɔ si wotsɔ ɖɔ emenyawo.
Tabla ƒe tanya	Tabla ƒe tanya	Tabla ƒe tanya	Tabla ƒe tanya
Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi
Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi
Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi	Tabla ƒe lãmenugbagbevi

Kpekpeɖeŋugbalẽviwo

Wogbugbɔ dze nɔnɔme ƒe akpa vovovowo gɔme hena gɔmeɖoanyi ƒe atsyã siwo le bɔbɔe wu. Tɔtrɔ siwo ɖe dzesi wu dometɔ aɖewoe nye esi:

<fieldset>s me liƒowo, padding, alo margin aɖeke mele o eyata woateŋu azã wo bɔbɔe abe wrappers na ɖekaɖeka inputs alo ƒuƒoƒowo ƒe inputs.
<legend>s, abe agbledeƒewo ene, hã trɔ asi le eŋu be woaɖee afia abe tanya ƒomeviwo ene.
<label>s woɖo ɖe display: inline-blockbe woaɖe mɔ marginwoazãe.
<input>s, <select>s, <textarea>s, kple <button>s ƒe akpa gãtɔ nye esiwo Normalize kpɔa wo gbɔ, gake Reboot ɖea woƒe marginkple ɖoa line-height: inherit, hã ɖa.
<textarea>s la trɔna be woate ŋu atrɔ asi le eƒe lolome ŋu le tsitrenu ko abe alesi tɔtrɔ le tsia dzi zi geɖe “gbãa” axa ƒe ɖoɖo ene.
<button>s kple <input>button elements le cursor: pointerɣeyiɣi si me :not(:disabled).

Woɖe tɔtrɔ siawo, kple bubuwo fia le ete.

Nufiamɔ̃ siwo le abɔtawo dzi

Reboot la tsɔ ŋgɔyiyi aɖe kpe ɖe eŋu na role="button"be nàtrɔ asi le fli si woɖo ɖi la ŋu wòazu pointer. Tsɔ nɔnɔme sia kpe ɖe nusiwo le eme ŋu be wòakpe ɖe eŋu wòaɖee afia be nu veviwo wɔa dɔ aduadu. Akpa sia mehiã na <button>nu veviwo, siwo xɔa woawo ŋutɔ ƒe cursortɔtrɔ o.

Nusiwo menye abɔta o ƒe element ƒe abɔta

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

Misc nu veviwo

Adrɛs

Wotrɔa <address>asi le element la ŋu be wòagbugbɔ aɖo browser la ƒe gɔmedzedze font-styletso italic. hã nye domenyinu fifia, eye wotsɔe kpe ɖe eŋu. s nye tɔgbui si te ɖe ŋuwò wu (alo dɔ blibo aɖe) ƒe kadodo ŋuti nyatakakawo ɖeɖefia. Dzra ɖoɖowɔwɔ ɖo to fliwo nuwuwu kple .normalline-heightmargin-bottom: 1rem<address><br>

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

Ŋkɔ Blibo
[email protected]

Blockquote ƒe nyawo

Default marginle blockquotes nye 1em 40px, eyata míegbugbɔ ɖo ema ɖe 0 0 1remna nane si sɔ kple nu bubuwo wu.

Nyayɔyɔ nyanyɛ aɖe, si le blockquote ƒe akpa aɖe me.

Ame aɖe si xɔ ŋkɔ le Source Title me

Nusiwo le fli me

Elemenu <abbr>la xɔa atsyã veviwo be wòato vovo le memama me nuŋɔŋlɔwo dome.

Nulla attr vitae elit libero, si nye lãgbalẽ si nye augue.

Totoɖeme

Default cursorle summary dzi enye text, eyata míegbugbɔ ɖo ema ɖe pointerbe wòaɖee afia be woateŋu awɔ nu kple element la to edzi teti me.

Nyatakaka aɖewo tsitotsito

Nyatakaka bubuwo tso nyatakakaawo ŋu tsitotsito.

Nyatakaka bubuwo gɔ̃ hã

Nyatakaka bubuwo gɔ̃ hã ku ɖe nyatakakaawo ŋu tsitotsitoe nye esi.

HTML5 ƒe `[hidden]`nɔnɔme

HTML5 tsɔ xexeame katã ƒe nɔnɔme yeye aɖe kpe ɖe eŋu si ŋkɔe nye[hidden] , si wowɔ abe alesi wowɔe display: nonele gɔmedzedzea me ene. Borrowing an idea from PureCSS , míewɔa ŋgɔyiyi le default sia ŋu to ewɔwɔ [hidden] { display: none !important; }be wòakpe ɖe eŋu be displaywòagaxɔ asi le vo me o. Togbɔ [hidden]be menye natively do alɔ IE10 o hã la, gbeƒãɖeɖe tẽ le míaƒe CSS me ƒo xlã kuxi ma.

<input type="text" hidden>

jQuery ƒe masɔmasɔ

[hidden]mewɔ ɖeka kple jQuery ƒe $(...).hide()kple $(...).show()mɔnuwo o. Eyata, míeda asi [hidden]ɖe edzi etɔxɛe fifia ɖe aɖaŋu bubuwo dzi hena nusiwo le eme la dzi kpɔkpɔ displayo.

Be nàtrɔ asi le nu aɖe ƒe dzedzeme ŋu ko, si fia displaybe wometrɔ asi le eŋu o eye nu la ateŋu akpɔ ŋusẽ ɖe nuŋlɔɖia ƒe sisi dzi kokoko la, zã klass la boŋ.invisible .