Source

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

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.

Lorem ipsum dolor nɔ anyi amet
Consectetur ami ƒe ʋeʋẽ lilili
Xexlẽdzesi blibo molestie lorem le massa
Facilisis le pretium nisl ƒe lãgbalẽ me
Nulla volutpat ƒe lãgbalẽgolo
- Ƒumelã si woyɔna be iaculis neque
- Purus sodales ƒe ʋeʋẽ lililiwo
- Vestibulum laoreet ƒe agbatsɔla sem
- Ac tristique libero ƒe ʋuʋu le
Faucibus porta lacus ƒe lãgbalẽgolo si woyɔna be fringilla vel
Aenean bɔbɔ nɔ anyi amet erat nunc
Eget porttitor ƒe nyagbɔgblɔ

Lorem ipsum dolor nɔ anyi amet
Consectetur ami ƒe ʋeʋẽ lilili
Xexlẽdzesi blibo molestie lorem le massa
Facilisis le pretium nisl ƒe lãgbalẽ me
Nulla volutpat ƒe lãgbalẽgolo
Faucibus porta lacus ƒe lãgbalẽgolo si woyɔna be fringilla vel
Aenean bɔbɔ nɔ anyi amet erat nunc
Eget porttitor ƒe nyagbɔgblɔ

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.
Euismod ƒe nyawo: Vestibulum id ligula porta felis euismod ƒe tsinyenye ƒe ƒunukpeƒe ƒe ƒunukpeƒe ƒe ƒuƒoƒo.; Donec id elit non mi porta gravida le eget metus me.
Malesuada ƒe lãgbalẽ: Etiam porta sem malesuada gã aɖe si woyɔna be euismod.

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.

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

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.

Lorem ipsum dolor bɔbɔ nɔ amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat a ante.

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 .