Segin ka baara kɛ
Reboot, n’o ye CSS fɛn kɛrɛnkɛrɛnnenw caman yeli dalajɛlen ye dosiye kelen kɔnɔ, kickstart Bootstrap walasa ka basigi cɛɲi, basigilen, ani nɔgɔman di walasa ka jɔ a kan.
Surunya
Reboot bɛ jɔ Normalize kan, ka HTML fɛn caman Di ni hakilinata-fɔcogo dɔw ye ni fɛnw sugandili dɔrɔn ye. Styling wɛrɛw bɛ kɛ ni kalanw dɔrɔn de ye. Misali la, an bɛ <table>
cogoya dɔw daminɛ kokura walasa ka basigi nɔgɔman sɔrɔ ani kɔfɛ ka .table
, .table-bordered
, ani dɔ wɛrɛw di.
An ka laadilikanw ni kun minnu b’a to an bɛ se ka min sugandi Reboot kɔnɔ, olu filɛ nin ye:
- Navigatɛri nafama dɔw labɛncogo kura walasa ka baara kɛ ni
rem
s ye s nɔ naem
walasa ka scalable component spacing kɛ. - Aw ye aw yɛrɛ tanga
margin-top
. Marge jɔlenw bɛ se ka bin, ka na ni nɔw ye minnu ma labɛn. Nka, min nafa ka bon kosɛbɛ, o ye ko sira kelenmargin
de ye hakili misali nɔgɔman ye. - Walasa ka sɛgɛsɛgɛli nɔgɔya minɛnw hakɛw bɛɛ la, bloki kɔnɔfɛnw ka kan ka baara kɛ ni
rem
s ye s kamamargin
. - Aw bɛ
font
-related properties (nafolo minnu bɛ tali kɛ ɲɔgɔn na) jirali kɛ ka caya, ka baara kɛ ni u yeinherit
ni a bɛ se ka kɛ tuma o tuma.
Page defaults (ɲɛ fɔlɔw).
The <html>
and <body>
elements bɛ ladamu walasa ka ɲɛ bɛɛ lajɛlen defaults ɲumanw di. Kɛrɛnkɛrɛnnenya la:
- The
box-sizing
is globally set on every element—o la*::before
ani*::after
, kaborder-box
. O b’a To fɛnɲɛnɛma bonya fɔlen tɛ Tɛmɛ abada k’a sababu Kɛ padding walima dancɛ ye.- Base si ma
font-size
fɔ<html>
, nka a16px
bɛ jate (navigatɛri ka default).font-size: 1rem
bɛ waleya kan kan<body>
walasa ka jaabi nɔgɔya suguya-sɛgɛsɛgɛli kɛ kunnafonidilan ɲininkaliw fɛ k’a sɔrɔ a bɛ baarakɛlaw ka fɛɛrɛw bonya ani ka fɛɛrɛ sɔrɔ min bɛ se ka sɔrɔ kosɛbɛ. Nin navigatɔrɔn ka default bɛ se ka wuli ka bɔ a nɔ na ni$font-size-root
fɛn caman sɛgɛsɛgɛli ye.
- Base si ma
- A
<body>
fana bɛ diɲɛfont-family
,font-weight
,line-height
, anicolor
. O bɛ ciyɛn sɔrɔ kɔfɛ foroko yɔrɔ dɔw fɛ walasa ka sɛbɛnnibolow ka bɛnbaliya bali. - Walasa ka lakana sɔrɔ, the
<body>
has a declaredbackground-color
, defaulting to#fff
.
Native sɛbɛnnibolow kulu
Bootstrap bɛ baara kɛ ni “native font stack” walima “system font stack” ye walasa ka sɛbɛnni kɛcogo ɲuman sɔrɔ minɛn bɛɛ kan ani OS bɛɛ kan. O sitɛmu sɛbɛnnibolow dabɔra kɛrɛnkɛrɛnnenya la ni bi minɛnw ye u hakili la, ni sɛbɛnni kɛcogo ɲɛnabɔlen ye ɛkranw kan, sɛbɛnnibolo caman dɛmɛni, ani fɛn wɛrɛw. aw ye kunnafoni wɛrɛw kalan sɛbɛnnikɛlanw kuluw kan nin Smashing Magazine barokun in kɔnɔ .
$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;
A kɔlɔsi ko bawo sɛbɛnnibolow kulu kɔnɔ, emoji sɛbɛnnibolow bɛ yen, taamasiyɛn/dingbat unicode sɛbɛnni caman minnu bɛ sɔrɔ tuma caman na, olu bɛna jira i n’a fɔ ja kulɛri caman. U cogoya bɛna ɲɔgɔn ta, ka kɛɲɛ ni cogoya ye min bɛ kɛ navigatɔrɔ/plateforme ka emoji sɛbɛncogo yɛrɛ la, wa CSS cogoya si tɛna nɔ bila color
u la.
O font-family
bɛ Kɛ <body>
ni ani otomatiki ciyɛn ye diɲɛ kɔnɔ Bootstrap bɛɛ kɔnɔ. Walasa ka global font-family
, sɛgɛsɛgɛli kura $font-family-base
kɛ ani ka Bootstrap labɛn kokura.
Kumakunw ni dakunw
Kumakunw bɛɛ—misali la, <h1>
—ani <p>
u bɛ segin u cogo kɔrɔ la walasa u ka margin-top
bɔ yen. Kumakunw margin-bottom: .5rem
farala ɲɔgɔn kan ani dakunw margin-bottom: 1rem
walisa ka u ni ɲɔgɔn cɛ ka nɔgɔ.
Kumakun | Misaliya |
---|---|
<h1></h1> |
h1. Bootstrap ka kumasen |
<h2></h2> |
h2. Bootstrap ka kumasen |
<h3></h3> |
h3. Bootstrap ka kumasen |
<h4></h4> |
h4. Bootstrap ka kumasen |
<h5></h5> |
h5. Bootstrap ka kumasen |
<h6></h6> |
h6. Bootstrap ka kumasen |
Lisitiw
Lisitiw bɛɛ— <ul>
, <ol>
, ani <dl>
—u margin-top
bɔra u la ani a margin-bottom: 1rem
. Lisiti minnu bɛ nested la , olu tɛ margin-bottom
. An ye padding-left
on <ul>
ni <ol>
elements fana Lasegin.
- Lisitiw bɛɛ bɛ u sanfɛla dankan bɔ
- Ani u ka duguma-marge normalisé
- Lisiti minnu bɛ sigi sen kan, olu tɛ ni duguma-dakun ye
- O cogo la u bɛ yecogo kelen sɔrɔ ka tɛmɛ
- Kɛrɛnkɛrɛnnenya la ni lisi kɔnɔfɛn wɛrɛw bɛ tugu o kɔ
- Padding kinin fɛ fana ye reset kɛ
- Nin ye lisi ye min labɛnna
- Ni lisi fɛn damadɔw ye
- A cogoya bɛɛ lajɛlen ye kelen ye
- I n’a fɔ lisi tɛmɛnen min ma labɛn
Walasa ka cogoya nɔgɔman sɔrɔ, ka ɲɔgɔndan jɛlen kɛ, ani ka yɔrɔ janya, ɲɛfɔli lisiw ye margin
s kuraya. <dd>
s segin margin-left
ka kɛ 0
ani ka fara a kan margin-bottom: .5rem
. <dt>
s bɛ sɛbɛn ɲɛ jɛmanw na .
- Ɲɛfɔli lisiw
- Ɲɛfɔli lisi dafalen don daɲɛw ɲɛfɔli kama.
- Dan
- Daɲɛ in ɲɛfɔli.
- O daɲɛ kelen in ɲɛfɔli filanan.
- Daɲɛ wɛrɛ
- Nin daɲɛ wɛrɛ in ɲɛfɔli.
Kode min bɛ kɛ inline kɔnɔ
Kode inline snippets siri ni <code>
. Aw ye aw jija ka bɔ HTML angle brackets la.
<section>
ka kan ka siri i n’a fɔ inline.
For example, <code><section></code> should be wrapped as inline.
Kode blokiw
Baara kɛ ni <pre>
s ye kodɔn zana caman kama. Nin sen in fana na, aw ye aw jija ka bɔ angle brackets (kɛrɛnkɛrɛnnenya la) fɛn o fɛn na kode kɔnɔ walasa ka ɲɛfɔli kɛ ka ɲɛ. Eleman <pre>
bɛ segin ka a bɔ a margin-top
la ani ka baara kɛ ni rem
unitw ye a kama 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>
Yɛlɛma-yɛlɛmaw
Walasa ka fɛn caman jira, baara kɛ ni <var>
taamasiyɛn ye.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Baarakɛla ka dontaw
Baara kɛ ni o ye <kbd>
walasa ka donta jira min bɛ don a ka c’a la klaviyeti fɛ.
Walasa ka sigida labɛncogo ladilan, i ka digi 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>
Sample bɔli
Walasa ka misali bɔli jira ka bɔ porogaramu dɔ la, baara kɛ ni <samp>
taamasiyɛn ye.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Tabali minnu bɛ yen
Tabali bɛ ladilan dɔɔnin ka kɛɲɛ ni cogoya <caption>
s ye, ka dancɛw da, ani ka a jira ko u bɛ bɛn ɲɔgɔn ma u text-align
bɛɛ kɔnɔ. Yɛlɛma wɛrɛw bɛ kɛ dankanw, padding ani fɛn wɛrɛw la ni kalan .table
ye .
Tabali kuncɛcogo | Tabali kuncɛcogo | Tabali kuncɛcogo | Tabali kuncɛcogo |
---|---|---|---|
Tabali selilɛri | Tabali selilɛri | Tabali selilɛri | Tabali selilɛri |
Tabali selilɛri | Tabali selilɛri | Tabali selilɛri | Tabali selilɛri |
Tabali selilɛri | Tabali selilɛri | Tabali selilɛri | Tabali selilɛri |
Sɛbɛnw
Foroko fɛn suguya caman daminɛna kokura walasa ka basigi cogoya nɔgɔmanw sɔrɔ. Yɛlɛma minnu kɛra, olu dɔw filɛ nin ye:
<fieldset>
s dan tɛ minnu na, padding, walima margin tɛ u la walasa u ka se ka baara kɛ nɔgɔya la i n’a fɔ wrappers donna kelen-kelen walima donna kuluw la.<legend>
s, i n’a fɔ forow, olu fana labɛnna kokura walasa u ka jira i n’a fɔ suguya dɔw tɔgɔ.<label>
s bɛ sigi kadisplay: inline-block
to ka siramargin
di ka waleya.<input>
s,<select>
s,<textarea>
s, ani<button>
s bɛ ɲɛnabɔ kosɛbɛ Normalize fɛ, nka Reboot bɛ umargin
ni setw Bɔline-height: inherit
, olu fana.<textarea>
s bɛ ladilan walasa u ka se ka bonya wulilen dɔrɔn de kɛ i n’a fɔ bonya jiginni tilennen bɛ “kari” tuma caman na ɲɛ labɛncogo la.<button>
s ni<input>
butɔni fɛnw bɛcursor: pointer
waati min na:not(:disabled)
.
O yɛlɛmaw, ani fɛn wɛrɛw, olu jiralen bɛ jukɔrɔ.
Date & color doncogo dɛmɛni
Aw k’a To aw hakili la don sɛbɛnniw tɛ Dɛmɛ bɛrɛbɛrɛ navigatɔrɔw bɛɛ fɛ, n’o ye Safari ye.
Points minnu bɛ butɔni kan
Reboot bɛ ni fɛn dɔ ye min bɛ se ka kɛ sababu ye role="button"
ka fɛn dɔ Changer de défaut cursor à pointer
. Aw bɛ nin fɛn in fara fɛnw kan walasa ka dɛmɛ don k’a jira ko fɛnw bɛ ɲɔgɔn sɔrɔ. O jɔyɔrɔ in tɛ wajibi ye <button>
fɛnw na, minnu b’u yɛrɛ ka cursor
fɛn caman Changer.
<span role="button" tabindex="0">Non-button element button</span>
Misc fɛnw
Dagayɔrɔ
Eleman <address>
in bɛ ladamu walasa ka navigatɔrɔn ka default lasegin ka font-style
bɔ italic
ka taa normal
. line-height
fana bɛ ciyɛn ta sisan, wa margin-bottom: 1rem
a farala a kan. <address>
s ye ka ɲɛsin mɔgɔw ka kunnafoniw jirali ma bɛnbakɛ min ka surun a la (walima baara bɛɛ lajɛlen). Aw bɛ sɛbɛnniw mara ni zana laban ye ni <br>
.
1355 Market St, Suite 900
San Fransisko, CA 94103
P: (123) 456-7890. Kalanjɛ ni sɛbɛnni : kalanjɛ ni sɛbɛnni gafew Tɔgɔ dafalen
fɔlɔ[email protected]
Bloki-kɔlɔsili
Default margin
kan blockquotes ye 1em 40px
, o la an b'o Lasegin ka 0 0 1rem
Kɛ fɛn dɔ ye min bɛ Bɛn ni fɛn wɛrɛw ye.
Kumasen dɔnnen dɔ, min bɛ sɔrɔ blockquote element dɔ kɔnɔ.
Mɔgɔ min tɔgɔ bɔra Source Title kɔnɔ
Inline fɛnw
Eleman <abbr>
bɛ cogoya jɔnjɔn sɔrɔ walasa a ka bɔ kɛnɛ kan dakun sɛbɛnniw cɛma.
Farankan
Default cursor
on summary ye text
, o la an bɛ o reset to to pointer
walasa k’a Jira ko element bɛ Se ka Jὲ ni a digilen ye.
Kunnafoni dɔw
Kunnafoni wɛrɛw sɔrɔ o kunnafoni kunbabaw kan.
Hali kunnafoni wɛrɛw
Nin ye kunnafoni wɛrɛw yɛrɛ ye o kunnafoni kunbabaw kan.
HTML5 [hidden]
ka fɛnsɛbɛnni
HTML5 bɛ diɲɛ fɛnɲɛnɛma kura dɔ Fàra a kan min tɔgɔ ye ko[hidden]
, o min bɛ Kɛ i n’a fɔ display: none
a bɛ Kɛ cogo min na. Borrowing an idea from PureCSS , an bɛ ɲɛtaa kɛ nin default in na ni kɛli [hidden] { display: none !important; }
ye walasa ka dɛmɛ don a bali display
ka kɛ balawu la.
<input type="text" hidden>
jQuery ka bɛnbaliya
[hidden]
tɛ bɛn jQuery's $(...).hide()
ni $(...).show()
fɛɛrɛw ma. O la, an tɛ sisan kɛrɛnkɛrɛnnenya la endorse [hidden]
ka tɛmɛ fɛɛrɛ wɛrɛw kan ka ɲɛsin display
of elements ɲɛnabɔli ma.
Walasa ka fɛn dɔ yecogo wuli dɔrɔn, o kɔrɔ ye ko a display
ma fɛn caman sɛmɛntiya ani fɛn in bɛ se ka nɔ bila sɛbɛn in bolicogo la hali bi, i bɛ baara kɛ ni .invisible
kalasi ye o nɔ na.