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.

Na dis pej

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. Dis brɔwza difɔlt kin ɔvalayz bay we yu chenj di $font-size-rootvɛriɔbul.
Di <body>sɛt bak wan global font-family, font-weight, line-height, ɛn color. 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

Bootstrap de yuz wan “nativ font stak” ɔ “sistim font stak” fɔ mek yu ebul fɔ rɛnd tɛks fayn fayn wan na ɛvri divays ɛn OS. Dɛn dɔn mek dɛn sistɛm fɔnt dɛn ya spɛshal wan wit di divays dɛn we de tide na dɛn maynd, wit impɔtant rɛnda we de na skrin, sɔpɔt fɔ chenj chenj, ɛn ɔda tin dɛn. Rid mɔ bɔt nativ font stak dɛn na dis Smashing Magazin atikul .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // 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. Wi dɔn riset di padding-lefton <ul>ɛn <ol>ɛlimɛnt dɛn bak.

Ɔ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.

Inlayn kɔd

Rap inlayn snipet dɛn fɔ kɔd wit <code>. Mek shɔ se yu rɔnawe pan HTML angle brakɛt dɛn.

Fɔ ɛgzampul, <section>dɛn fɔ rap am as inlayn.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Kɔd blɔk dɛn

Yuz <pre>s fɔ bɔku layn dɛn fɔ kɔd. Wans bak, mek shɔ se yu rɔnawe pan ɛni angul brakɛt na di kɔd fɔ mek yu rɛnd fayn fayn wan. Di <pre>elemɛnt de riset fɔ pul in margin-topɛn yuz remyunit dɛn fɔ in margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Di tin dɛn we kin chenj

Fɔ sho di vayriɔbul dɛn yuz di <var>tag.

y = m x + b ɛn b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Input fɔ yuz am

Yuz di <kbd>fɔ sho input we dɛn kin yuz kibɔd.

Fɔ chenj di dairektrɔ dɛn, rayt cddi nem fɔ di dairektrɔ afta dat.
Fɔ ɛdit di sɛtin dɛn, prɛs ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Sampul autput

Fɔ sho di sampul autput frɔm wan program yuz di <samp>tag.

Dis tɛks min fɔ trit am lɛk ɛgzampul autput frɔm kɔmpyuta program.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

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.

Ɛgzampul lay lay stori

Ɛgzampul fɔ put insay

Ɛgzampul fɔ imel

Ɛgzampul fɔ tɛlifon

Ɛgzampul fɔ di url

Ɛgzampul nɔmba

Ɛgzampul fɔ fɛn

Ɛgzampul rɛnj

Ɛgzampul fɔ put fayl insay

Ɛgzampul fɔ pik

Chek dis chɛkbɔks

Opshɔn wan na dis ɛn dat Opshɔn tu na sɔntin ɔda tin we tu supa lɔng fɔ sho di wrap fɔ dɛn fansi fɔm kɔntrol ya. Opshɔn tri nɔ de wok

Ɛgzampul tɛks eria

Ɛgzampul fɔ di de

Ɛgzampul tɛm

Ɛgzampul fɔ paswɔd

Ɛgzampul deti-lɔkal

Ɛgzampul wik

Ɛgzampul mɔnt

Ɛgzampul fɔ di kɔlɔ

Ɛgzampul we dɛn de pul 100 pipul dɛn

Date & kala input sɔpɔt

Kip in maynd se di de input dɛn nɔ fulɔp fɔ sɔpɔt ɔl di brawza dɛn, dat na Safari.

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.

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