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ã
rem
s ɖe s teƒeem
na 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 simargin
nye 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ã
rem
s namargin
s. - Na -nunɔamesi siwo do ƒome kplii ƒe gbeƒãɖeɖewo
font
nanɔ 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-sizing
la ɖe nu ɖesiaɖe dzi le xexeame katã—siwo dometɔ aɖewoe nye*::before
kple*::after
, beborder-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-size
Womeɖe gbeƒã gɔmeɖoanyi aɖeke le<html>
, gake16px
wotsɔe be (browser ƒe gɔmedzedze).font-size: 1rem
wozã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ã ƒefont-family
,line-height
, kpletext-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 declaredbackground-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 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;
De dzesii be esi wònye be emoji ŋɔŋlɔdzesiwo le ŋɔŋlɔdzesiwo ƒe ƒuƒoƒoa me ta la, woaɖe dzesi/dingbat Unicode ŋɔŋlɔdzesi geɖe siwo bɔ la gɔme abe nɔnɔmetata siwo le amadede vovovowo me ene. Woƒe dzedzeme ato vovo, le atsyã si wozã le browser/platform la ƒe emoji ŋɔŋlɔdzesi gbãtɔ me nu, eye CSS color
ƒe atsyã aɖeke makpɔ ŋusẽ ɖe wo dzi o.
Wowɔa font-family
esia ŋudɔ ɖe <body>
kple domenyinyi le eɖokui si le xexeame katã le Bootstrap bliboa me. Be nàtrɔ xexeame katã font-family
la, trɔ asi $font-family-base
le 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: .5rem
kpe ɖe eŋu kple memamawo margin-bottom: 1rem
be 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
.
- Woɖe xexlẽdzesiawo katã ƒe akpa si le etame la ɖa
- Eye woƒe akpa si le ete la va zu nusi sɔ
- Nested lists mekpɔa eteƒe o
- To mɔ sia dzi la, woƒe dzedzeme nɔa sɔsɔm wu
- Vevietɔ ne nya siwo woŋlɔ ɖe xexlẽdzesiwo me geɖe wu kplɔe ɖo
- Wogbugbɔ ɖo miame padding la hã
- Ŋkɔ siwo woɖo ɖe ɖoɖo nu lae nye esi
- Kple nu ʋɛ aɖewo siwo woŋlɔ ɖi
- Eƒe dzedzeme bliboa sɔ kple etɔ
- Abe alesi woŋlɔ ŋkɔ siwo womeɖo ɖe ɖoɖo nu o va yi ene
margin
Be 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 0
eye 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.
- Nya
- Gɔmeɖeɖe na nya la.
- Gɔmesese evelia na nya ma ke.
- Nya bubu aɖe hã
- Gɔmeɖeɖe na nya bubu sia.
Nuŋɔŋlɔ siwo woɖo ɖi do ŋgɔ
Wogbugbɔa <pre>
element la margin-top
ɖoa rem
eƒ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-align
katã me. Tɔtrɔ bubuwo le liƒowo, padding, kple bubuwo ŋu va kpe ɖe .table
klass la ŋu .
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 ɖedisplay: inline-block
be woaɖe mɔmargin
woazã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ƒemargin
kple ɖoaline-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.<button>
s kple<input>
button elements lecursor: pointer
ɣeyiɣi si me:not(:disabled)
.
Woɖe tɔtrɔ siawo, kple bubuwo fia le ete.
Nufiamɔ̃ siwo le abɔtawo dzi
Reboot la tsɔ ŋgɔyiyi aɖe kpe ɖe eŋu na role="button"
be nàtrɔ asi le fli si woɖo ɖi la ŋu wòazu pointer
. Tsɔ nɔnɔme sia kpe ɖe nusiwo le eme ŋu be wòakpe ɖe eŋu wòaɖee afia be nu veviwo wɔa dɔ aduadu. Akpa sia mehiã na <button>
nu veviwo, siwo xɔa woawo ŋutɔ ƒe cursor
tɔtrɔ o.
<span role="button" tabindex="0">Non-button element button</span>
Misc nu veviwo
Adrɛs
Wotrɔa <address>
asi le element la ŋu be wòagbugbɔ aɖo browser la ƒe gɔmedzedze font-style
tso 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 .normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Asimɔ, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Ŋkɔ Blibo
[email protected]
Blockquote ƒe nyawo
Default margin
le blockquotes nye 1em 40px
, eyata míegbugbɔ ɖo ema ɖe 0 0 1rem
na nane si sɔ kple nu bubuwo wu.
Nyayɔyɔ nyanyɛ aɖe, si le blockquote ƒe akpa aɖe me.
Nusiwo le fli me
Elemenu <abbr>
la xɔa atsyã veviwo be wòato vovo le memama me nuŋɔŋlɔwo dome.
Totoɖeme
Default cursor
le summary dzi enye text
, eyata míegbugbɔ ɖo ema ɖe pointer
be 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: none
le 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 display
wò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ɔ display
o.
Be nàtrɔ asi le nu aɖe ƒe dzedzeme ŋu ko, si fia display
be 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
.