Source

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 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 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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 de 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. List dɛn we dɛn dɔn nɛst nɔ gɛt margin-bottom.

Lorem ipsum dolor sidon amet
Konsectetur adipiscing elit we de na di bɔdi
Integer molestie lorem na massa
Fasilisis in prɛtiɔm nisl alikɛt
Nulla volutpat alikɔm velit
- Fasɛl iakulis nɛk
- Purus sodales di wan dɛn we de bɔn
- Vestibulum laoreet pɔtitɔr sem
- A tristik libero volutpat na
Faucibus porta lakus fringila vel
Aenean sidon amet erat nunc
Eget porttitor lorem we yu de du

Lorem ipsum dolor sidon amet
Konsectetur adipiscing elit we de na di bɔdi
Integer molestie lorem na massa
Fasilisis in prɛtiɔm nisl alikɛt
Nulla volutpat alikɔm velit
Faucibus porta lakus fringila vel
Aenean sidon amet erat nunc
Eget porttitor lorem we yu de du

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.
Yuismod bin de: Vestibulum id ligula porta felis yuismod semper eget lasinia odio sem.; Donec id elit non mi porta gravida na eget metus.
Malesuada we de na di wɔl: Etiam porta sem malesuada magna mollis yusmod.

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 modify fɔ jɔs bi risayz vertikal as ɔrizɔntal risayzin bɔku tɛm “brɛk” pej layout.

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

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.

Lorem ipsum dolor sidon amet, konsektetur adipissing elit. Intaj posuere erat wan ante.

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 dɛn de ivin tɔk mɔ 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.