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
rem
s instead ɔfem
s fɔ skel kɔmpɔnɛnt spɛshal. - Avɔyd
margin-top
fɔ . 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ɔmargin
na 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
rem
s fɔmargin
s. - Kip diklareshɔn dɛn fɔ
font
-rilayt prɔpati dɛn to di minimum, yuzinherit
ɛ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-sizing
na glob ɔl sɛt pan ɛvri ɛlimɛnt—inklud*::before
ɛn*::after
, toborder-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-size
nɔ de diklar pan di<html>
, bɔt16px
dɛn tek am (di brɔwza difɔlt).font-size: 1rem
na 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-root
vɛriɔbul.
- No bays
- Di
<body>
sɛt bak wan globalfont-family
,font-weight
,line-height
, ɛncolor
. 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 deklarebackground-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 color
stayl.
Dis font-family
de 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-top
pul dɛn. Dɛn dɔn margin-bottom: .5rem
ad ɛd dɛn ɛn paregraf margin-bottom: 1rem
dɛ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-top
pul 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-left
on <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 margin
s. <dd>
s riset margin-left
to 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.
<section>
dɛn fɔ rap am as inlayn.
For example, <code><section></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 rem
yunit dɛn fɔ in margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Di tin dɛn we kin chenj
Fɔ sho di vayriɔbul dɛn yuz di <var>
tag.
<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ɔ ɛ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.
<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 .table
klas .
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 todisplay: inline-block
fɔ alawmargin
fɔ 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ɛnmargin
ɛn sɛtline-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ɛtcursor: pointer
we:not(:disabled)
.
Dɛn chenj ya, ɛn ɔda tin dɛn, de dɔŋ ya.
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 cursor
chenj.
<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-style
frɔm italic
to normal
. line-height
na in bak naw, ɛn margin-bottom: 1rem
dɛ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>
.
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 margin
pan blockquotes na 1em 40px
, so wi riset dat to 0 0 1rem
fɔ 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.
Ɛksplen
Di difɔlt cursor
pan sɔma na text
, so wi de riset dat to pointer
fɔ 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: none
difɔ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 display
nɔ 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 display
nɔ chenj ɛn di ɛlimɛnt kin stil afɛkt di flɔ fɔ di dɔkyumɛnt, yuz di .invisible
klas insted.