in English

Ribɔt bak

Ribɔt, wan kɔleshiɔn fɔ ɛlimɛnt-spɛsifi k CSS chenj dɛn na wan fayl, kikstart Bootstrap fɔ gi wan elegant, kɔnsistɛns, ɛn simpul beslayn fɔ bil pan.

Mit

Ribɔt bil pan Nɔmaliz, we de gi bɔku HTML ɛlimɛnt dɛn wit sɔm kayn opinion stayl dɛn we de yuz ɔl di ɛlimɛnt sɛlɛktɔ dɛn. Atikul stayl na onli wit klas. Fɔ ɛgzampul, wi kin ribɔt sɔm <table>stayl dɛn fɔ wan simpul beslayn ɛn leta wi kin gi .table, .table-bordered, ɛn mɔ.

Na wi gaydlayn ɛn rizin dɛn fɔ pik wetin fɔ ɔvalayz na Ribɔt:

Ɔpdet sɔm brawza difɔlt valyu dɛn fɔ yuz rems instead ɔf ems fɔ skel kɔmpɔnɛnt spɛshal.
Avɔyd margin-topfɔ . Vɛtikal margin dɛn kin fɔdɔm, ɛn dis kin mek dɛn gɛt tin dɛn we dɛn nɔ bin de ɛkspɛkt. Bɔt di tin we impɔtant pas ɔl na dat, wan dayrɛkshɔn fɔ marginna wan simpul maynd mɔdel.
Fɔ mek i izi fɔ skel akɔdin to divays saiz dɛn, blɔk ɛlimɛnt dɛn fɔ yuz rems fɔ margins.
Kip diklareshɔn dɛn fɔ font-rilayt prɔpati dɛn to di minimum, yuz inheritɛnitɛm we i pɔsibul.

Difɔlt dɛn fɔ di pej dɛn

Di <html>ɛn <body>ɛlimɛnt dɛn de ɔpdet fɔ gi bɛtɛ difɔlt dɛn we de ɔlsay na di pej. Fɔ tɔk mɔ bɔt dis:

Di box-sizingna glob ɔl sɛt pan ɛvri ɛlimɛnt—inklud *::beforeɛn *::after, to border-box. Dis de mek shɔ se di wit we dɛn deklare fɔ di ɛlimɛnt nɔ ɛva pas bikɔs ɔf di pad ɔ bɔda.
No bays font-sizenɔ de diklar pan di <html>, bɔt 16pxdɛn tek am (di brɔwza difɔlt). font-size: 1remna aplay pan di <body>fɔ izi rispɔnsiv tayp-skel via midia kwɛstyɔn dɛn we dɛn de rɛspɛkt di yuz prɛferɛns ɛn mek shɔ se dɛn gɛt mɔ aksesbul we.
Di <body>sɛt bak wan global font-family, line-height, ɛn text-align. Dis kin gɛt leta bay sɔm fɔm ɛlimɛnt dɛn fɔ mek di font nɔ kɔnsistɛns.
Fɔ sef, di <body>gɛt wan deklare background-color, difɔlt to #fff.

Nativ font stak

Dɛn dɔn drɔp di difɔlt wɛb font dɛn (Helvetica Neue, Helvetica, ɛn Arial) na Bootstrap 4 ɛn dɛn dɔn chenj dɛn wit wan “nativ font stak” fɔ mek dɛn ebul fɔ rɛnd di tɛks fayn fayn wan na ɛvri divays ɛn OS. Rid mɔ bɔt nativ font stak dɛn na dis Smashing Magazin atikul .

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

Notis se bikɔs di font stak gɛt imɔji font dɛn, bɔku kɔmɔn simbul/dingbat Yunikɔd aks dɛn go rɛnd as pikchɔ dɛn we gɛt bɔku kɔlɔ. Di we aw dɛn go luk go difrɛn, i go difrɛn bay di stayl we dɛn yuz na di brawza/pletfɔm in yon imɔji font, ɛn dɛn nɔ go afɛkt ɛni CSS colorstayl.

Dis font-familyde aplay to di <body>ɛn ɔtomɛtik inhɛrit glob ɔl ɔlsay na Bootstrap. Fɔ chenj di global font-family, ɔpdet $font-family-baseɛn rikompayl Bootstrap.

Di edlayn dɛn ɛn paregraf dɛn

Ɔl di edlayn ɛlimɛnt dɛn—ɛgz., <h1>—ɛn <p>dɛn kin riset fɔ mek dɛn margin-toppul dɛn. Dɛn dɔn margin-bottom: .5remad ɛd dɛn ɛn paregraf margin-bottom: 1remdɛn fɔ mek i izi fɔ mek dɛn put difrɛn difrɛn say dɛn.

Di edlayn	Ɛgzampul
`<h1></h1>`	h1. Bootstrap we de na di ed
`<h2></h2>`	h2. Bootstrap we de na di ed
`<h3></h3>`	h3. Bootstrap we de na di ed
`<h4></h4>`	h4. Bootstrap we de na di ed
`<h5></h5>`	h5. Bootstrap we de na di ed
`<h6></h6>`	h6. Bootstrap we de na di ed

List dɛn

Ɔl di list dɛn— <ul>, <ol>, ɛn <dl>—dɛn dɔn margin-toppul dɛn ɛn wan margin-bottom: 1rem. Di list dɛn we dɛn dɔn nɛst nɔ gɛt margin-bottom.

Ɔl di list dɛn gɛt dɛn tɔp margin we dɛn dɔn pul
Ɛn dɛn bottom margin bin nɔmal
Di list dɛn we dɛn dɔn nɛst nɔ gɛt di margin we de dɔŋ
- Dis we ya dɛn kin gɛt mɔ ivin lukin-grɔn
- Mɔ we dɛn fala wit mɔ tin dɛn we de na di list
Dɛn dɔn riset di lɛft pad bak

Na wan list we dɛn dɔn ɔda
Wit sɔm tin dɛn we de na di list
I gɛt di sem ɔvalayn luk
As di list we nɔ bin dɔn ɔda bifo

Fɔ simpul stayl, klia hayarki, ɛn bɛtɛ spays, diskripshɔn list dɛn dɔn ɔpdet margins. <dd>s riset margin-leftto 0ɛn ad margin-bottom: .5rem. <dt>s dɛn gɛt bold .

Diskripshɔn list dɛn: Wan diskripshɔn list fayn fɔ difayn wɔd dɛn.
Wɔd: Difinishɔn fɔ di wɔd.; Wan sɛkɔn difinishɔn fɔ di sem wɔd.
Wan ɔda wɔd: Difinishɔn fɔ dis ɔda wɔd.

Tɛks we dɛn dɔn fɔmat bifo tɛm

Di <pre>elemɛnt de riset fɔ pul in margin-topɛn yuz remyunit dɛn fɔ in margin-bottom.

.ɛgzampul-ɛlimɛnt { .
  margin-bɔt: 1rem;
} .

Tebul dɛn

Dɛn kin ajɔst di tebul dɛn smɔl to di stayl <caption>s, dɛn kin kɔlap di bɔda dɛn, ɛn dɛn kin mek shɔ se dɛn kɔntinyu fɔ de text-alignɔlsay. Ɔda chenj dɛn fɔ bɔda, pad, ɛn ɔda tin dɛn kin kam wit di .tableklas .

Dis na ɛgzampul tebul, ɛn dis na in kapshɔn fɔ tɔk bɔt wetin de insay.
Di edlayn fɔ di tebul	Di edlayn fɔ di tebul	Di edlayn fɔ di tebul	Di edlayn fɔ di tebul
Tebul sɛl	Tebul sɛl	Tebul sɛl	Tebul sɛl
Tebul sɛl	Tebul sɛl	Tebul sɛl	Tebul sɛl
Tebul sɛl	Tebul sɛl	Tebul sɛl	Tebul sɛl

Fɔm dɛn

Difrɛn fɔm ɛlimɛnt dɛn dɔn ribɔt fɔ simpul bays stayl dɛn. Na sɔm pan di chenj dɛn we rili impɔtant:

<fieldset>s nɔ gɛt bɔda, pad, ɔ margin so dɛn kin yuz dɛn izi wan as wrap fɔ wan wan input ɔ grup dɛn fɔ input.
<legend>s, lɛk fil sɛt dɛn, dɛn dɔn chenj di stayl bak fɔ mek dɛn sho dɛn as edlayn fɔ sɔt dɛn.
<label>s de set to display: inline-blockfɔ alaw marginfɔ aplay.
<input>s, <select>s, <textarea>s, ɛn <button>s na Normalize de adrɛs dɛn mɔ, bɔt Ribɔt de pul dɛn marginɛn sɛt line-height: inherit, bak.
<textarea>s dɛn de chenj fɔ jɔs bi risayzabl vertikal as ɔrizɔntal risayzin bɔku tɛm “brɛk” pej layout.
<button>s ɛn <input>bɔtin ɛlimɛnt dɛn gɛt cursor: pointerwe :not(:disabled).

Dɛn chenj ya, ɛn ɔda tin dɛn, de dɔŋ ya.

Poynta dɛn we de na di bɔtin dɛn

Ribɔt inklud wan ɛnhansmɛnt fɔ role="button"fɔ chenj di difɔlt kɔsa to pointer. Ad dis atribyut to ɛlimɛnt dɛn fɔ ɛp fɔ sho se ɛlimɛnt dɛn de intaraktiv. Dis rol nכ nid fכ <button>εlimεnt dεm, we de gεt dεn כwn cursorchenj.

Bɔtin we nɔ gɛt bɔtin ɛlimɛnt

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

Misc ɛlimɛnt dɛn

Adrɛs

Di <address>ɛlimɛnt de ɔpdet fɔ riset di brɔwza difɔlt font-stylefrɔm italicto normal. line-heightna in bak naw, ɛn margin-bottom: 1remdɛn dɔn ad am. <address>s na fɔ prizent kɔntakt infɔmeshɔn fɔ di gret gret granpa we de nia yu (ɔ wan ɔl bɔdi fɔ wok). Priziv fɔmat bay we yu dɔn ɛnd layn dɛn wit <br>.

Twitter, Inc.
1355 Maket Sɛnt, Suit 900
San Fransisko, CA 94103
P: (123) 456-7890

Ful Nem
fɔs.last@ɛgzampul.com

Blɔkkɔt fɔ di Baybul

Di difɔlt marginpan blockquotes na 1em 40px, so wi riset dat to 0 0 1remfɔ sɔntin we mɔ kɔnsistɛns wit ɔda ɛlimɛnt dɛn.

Wan kot we bɔku pipul dɛn sabi, we de insay wan blɔkkɔt ɛlimɛnt.

Sɔmbɔdi we gɛt nem na Sos Taytul

Inlayn ɛlimɛnt dɛn

Di <abbr>elemɛnt de gɛt besik stayl fɔ mek i tinap aut bitwin paregraf tɛks.

Nulla attr vitae elit libero, we na wan faretra augu.

Ɛksplen

Di difɔlt cursorpan sɔma na text, so wi de riset dat to pointerfɔ sho se di ɛlimɛnt kin intarakt wit bay we yu klik pan am.

Sɔm ditil dɛn

Mɔ info bɔt di ditel dɛn.

Ivin mɔ ditil dɛn

Na ya wi go si mɔ tin dɛn bɔt di ditil dɛn.

HTML5 `[hidden]`atribyut fɔ di wan dɛn we de

HTML5 ad wan nyu glob ɔl atribyut we nem[hidden] , we dɛn stayl lɛk display: nonedifɔlt. Borrowing an idea from PureCSS , wi impɔtant pan dis difɔlt bay we wi de mek [hidden] { display: none !important; }fɔ ɛp fɔ mek i displaynɔ gɛt aksidɛntli ɔvarayd. Wail [hidden]i nɔ nativli sɔpɔt bay IE10, di ɛksplisit diklareshɔn na wi CSS de gɛt rawnd da prɔblɛm de.

<input type="text" hidden>

jQuery nɔ kɔmpitibliti

[hidden]nɔ kɔmpitabl wit jQuery's $(...).hide()ɛn $(...).show()mɛtɔd dɛn. So, wi nɔ de naw spɛshal ɛndɔs [hidden]oba ɔda tɛknik fɔ manej di displayɔf ɛlimɛnt dɛn.

Fɔ jɔs tɔgl di visibiliti fɔ wan ɛlimɛnt, we min se in displaynɔ chenj ɛn di ɛlimɛnt kin stil afɛkt di flɔ fɔ di dɔkyumɛnt, yuz di .invisibleklas insted.