Malitegharịa ekwentị
Malitegharịa, nchịkọta mgbanwe CSS akọwapụtara nke ọma na otu faịlụ, kickstart Bootstrap iji nye ntọala mara mma, na-agbanwe agbanwe na dị mfe iji wuo ya.
Ụzọ
Reboot na-ewuli n'elu Normalize, na-enye ọtụtụ ihe HTML nwere ụdị echiche dịtụ iche site na iji naanị ndị na-ahọpụta ihe. A na-eme styling agbakwunyere naanị na klas. Dịka ọmụmaatụ, anyị na-amalitegharị <table>
ụdị ụfọdụ maka usoro ntọala dị mfe wee nye .table
, .table-bordered
, na ndị ọzọ.
Nke a bụ ntuziaka anyị na ihe kpatara ịhọrọ ihe ị ga-emeri na Reboot:
- Melite ụfọdụ ụkpụrụ ndabara ihe nchọgharị iji jiri
rem
s kamaem
s maka oghere akụrụngwa nwere ike ịbelata. - Zere
margin-top
. Oke kwụ ọtọ nwere ike daa, na-arụpụta nsonaazụ a na-atụghị anya ya. Nke kachasị mkpa n'agbanyeghị, otu ntụziaka nkemargin
bụ ihe atụ uche dị mfe. - Maka ntule dị mfe n'ofe nha ngwaọrụ, ihe mgbochi kwesịrị iji
rem
s makamargin
s. - Debe nkwupụta nke
font
ihe ndị metụtara ya na opekempe, na-eji ogeinherit
ọ bụla enwere ike.
Ndabara ibe
A <html>
na <body>
-emelite ihe ndị ahụ na ihe ndị ahụ iji nye ndabara n'ofe ibe dị mma. Kpọmkwem karịa:
- Edebere
box-sizing
ihe niile n'ụwa niile - gụnyere*::before
na*::after
, naborder-box
. Nke a na-achọpụta na obosara ekwuputara nke mmewere agaghị agafe n'ihi padding ma ọ bụ oke.- Ọ nweghị ntọala
font-size
ekwuputala na<html>
, mana16px
a na-eche ya (ndabara ihe nchọgharị ahụ).font-size: 1rem
A na-etinye ya na<body>
ụdị nzaghachi dị mfe site na ajụjụ mgbasa ozi mgbe ị na-asọpụrụ mmasị onye ọrụ na ịhụ na ọ ga-enwetakwu ohere. Enwere ike ịkagbu ndabara ihe nchọgharị a site n'ịgbanwe$font-size-root
mgbanwe.
- Ọ nweghị ntọala
- Nke
<body>
ahụ na-esetịpụkwa ihe zuru ụwa ọnụfont-family
,font-weight
,line-height
, nacolor
. A na-eketa nke a ma emechaa site n'ụdị ụfọdụ iji gbochie ndakọrịta font. - Maka nchekwa, onye
<body>
ahụ ekwupụtalabackground-color
, na-emebi#fff
.
Nchịkọta mkpụrụedemede ala nna
Bootstrap na-eji “nchịkọta font ala” ma ọ bụ “nchịkọta font sistemụ” maka nsụgharị kacha mma na ngwaọrụ na OS ọ bụla. Emebere mkpụrụedemede sistemu ndị a nke ọma site na n'uche nke ngwaọrụ nke oge a, yana ngbanwe ka mma na enyo, nkwado font agbanwe agbanwe na ndị ọzọ. Gụkwuo maka nchịkọta mkpụrụedemede nke ala n'ime akụkọ Smashing Magazine a .
$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;
Rịba ama na n'ihi na nchịkọta mkpụrụedemede gụnyere mkpụrụedemede emoji, a ga-atụgharị ọtụtụ mkpụrụedemede unicode akara/dingbat dị ka eserese nwere agba ọtụtụ. Ọdịdị ha ga-adịgasị iche, dabere n'ụdị ejiri n'ụdị emoji nke ihe nchọgharị / ikpo okwu, na ụdị CSS ọ bụla agaghị emetụta ha color
.
A font-family
na-etinye nke a na nke a <body>
na-eketa na-akpaghị aka n'ụwa niile na Bootstrap. Ka ịgbanwee ihe zuru ụwa ọnụ font-family
, melite $font-family-base
ma chịkọta Bootstrap.
Isi na paragraf
Isi ihe niile—dịka ọmụmaatụ, <h1>
—ma <p>
tọgharịa ka margin-top
ewepụrụ ha. Isi okwu margin-bottom: .5rem
agbakwunyela na paragraf margin-bottom: 1rem
maka oghere dị mfe.
Isi | Ọmụmaatụ |
---|---|
<h1></h1> |
h1. Isiokwu bootstrap |
<h2></h2> |
h2. Isiokwu bootstrap |
<h3></h3> |
h3. Isiokwu bootstrap |
<h4></h4> |
h4. Isiokwu bootstrap |
<h5></h5> |
h5. Isiokwu bootstrap |
<h6></h6> |
h6. Isiokwu bootstrap |
Ndepụta
Ndepụta niile — <ul>
, <ol>
, na — ewepụrụ <dl>
ha yana a . Ndepụta akwụghị ụgwọ enweghị . Anyị ewepụtakwala on na ọcha.margin-top
margin-bottom: 1rem
margin-bottom
padding-left
<ul>
<ol>
- Ndepụta niile ewepụrụ oke oke ha
- Na oke ala ha na-ahazi
- Ndepụta akwụghị ụgwọ enweghị oke ala
- N'ụzọ dị otú a, ha na-enwe ọdịdị ọbụna karị
- Karịsịa mgbe ihe ndepụta ndị ọzọ sochiri ya
- Edokwala ihe mgbochi aka ekpe
- Nke a bụ ndepụta ahaziri
- Na ihe ndepụta ole na ole
- O nwere otu anya n'ozuzu ya
- Dị ka ndepụta na-akwadoghị nke gara aga
Maka ịke dị mfe, ndị isi doro anya, yana ohere ka mma, ndepụta nkọwa emelitere margin
s. <dd>
s tọgharịa margin-left
na 0
tinye margin-bottom: .5rem
. <dt>
s nwere obi ike .
- Ndepụta nkọwa
- Ndepụta nkọwa zuru oke maka ịkọwa okwu.
- Oge
- Nkọwa maka okwu ahụ.
- Nkọwa nke abụọ maka otu okwu ahụ.
- Okwu ọzọ
- Nkọwa maka okwu ọzọ a.
Koodu ntanetị
Jiri snippet kechie koodu inline <code>
. Jide n'aka na ị ga-agbanarị brackets akụkụ HTML.
<section>
ekwesịrị ịfụkọta ya dị ka inline.
For example, <code><section></code> should be wrapped as inline.
Koodu ngọngọ
Jiri <pre>
s maka ọtụtụ ahịrị koodu. Ọzọkwa, jide n'aka na ị ga-agbanarị brackets akụkụ ọ bụla dị na koodu maka nsụgharị kwesịrị ekwesị. Emegharịrị <pre>
mmewere iji wepu ya margin-top
wee jiri rem
nkeji maka ya 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>
Mgbanwe
Maka igosi mgbanwe jiri <var>
mkpado.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Ntinye onye ọrụ
Jiri <kbd>
gosi ntinye a na-ejikarị ahụigodo abanye.
Ka idezi ntọala, pịa 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>
Mmepụta sample
Maka igosi ihe nlele sitere na mmemme jiri <samp>
mkpado.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Tebụl
A na-edozi obere tebụl ka ọ bụrụ ụdị <caption>
s, oke ala daa, wee hụ na ọ na-agbanwe agbanwe text-align
. Mgbanwe ndị ọzọ maka oke, padding na ndị ọzọ na-abịa na klas .table
ahụ .
Isiokwu okpokoro | Isiokwu okpokoro | Isiokwu okpokoro | Isiokwu okpokoro |
---|---|---|---|
Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell |
Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell |
Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell |
Ụdị
Emegharịrị ihe ụdị dị iche iche maka ụdị ntọala dị mfe. Nke a bụ ụfọdụ mgbanwe ndị ama ama:
<fieldset>
s enweghị oke, padding, ma ọ bụ oke ka enwere ike iji ha ngwa ngwa dị ka ihe mkpuchi maka ntinye onye ọ bụla ma ọ bụ otu ntinye.<legend>
s, dị ka ntọala ubi, ka edegharịrị ka egosipụtakwa dị ka isiokwu ụdị.<label>
s atọrọ kadisplay: inline-block
ekwemargin
ka etinye ya.<input>
s,<select>
s,<textarea>
s, na<button>
s bụ Normalize na-ekwukarị okwu, mana Reboot na-ewepụ hamargin
na ịtọọkwaline-height: inherit
.<textarea>
A na-agbanwe s ka ọ bụrụ naanị resizable kwụ ọtọ dị ka ngbanwe kwụ ọtọ na-emekarị nhazi ibe “na-agbaji”.<button>
s na<input>
ihe bọtịnụ nwerecursor: pointer
mgbe:not(:disabled)
.
E gosipụtara mgbanwe ndị a na ndị ọzọ n'okpuru.
Nkwado ntinye ụbọchị & agba
Buru n'uche na ihe nchọgharị niile anaghị akwado ntinye ụbọchị , ya bụ Safari.
Ntuziaka na bọtịnụ
Nbugharị gụnyere nkwalite maka role="button"
ịgbanwe cursor ndabara ka ọ bụrụ pointer
. Tinye njirimara a na ihe iji nyere aka gosi na ihe na-emekọrịta ihe. Ọrụ a adịghị mkpa maka <button>
ihe ndị na-enweta cursor
mgbanwe nke ha.
<span role="button" tabindex="0">Non-button element button</span>
Ihe dị iche iche
Adreesị
Emelitere <address>
mmewere ka ịtọgharịa ndabara ihe nchọgharị site font-style
na italic
gaa na normal
. line-height
bụkwa ugbu a ketara, ma margin-bottom: 1rem
tinyekwuo ya. <address>
s bụ maka igosipụta ozi kọntaktị maka nna nna kacha nso (ma ọ bụ otu ọrụ dum). Chekwaa nhazi site na iji ahịrị mechie <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Aha zuru oke
[email protected]
Ihe mgbochi
Ihe ndabara margin
dị na blockquotes bụ 1em 40px
, yabụ anyị na-emegharị nke ahụ ka 0 0 1rem
ọ bụrụ ihe dabara na ihe ndị ọzọ.
Ngụ ama ama nke ọma, dị n'ime ihe mgbochi okwute.
Onye ama ama na Isi mmalite
Ihe ntanetị
Ihe <abbr>
mmewere na-enweta nhazi nke nkiti iji mee ka ọ pụta ìhè n'etiti ederede paragraf.
Nchịkọta
Ihe ndabara cursor
na nchịkọta bụ text
, yabụ anyị na-emegharị nke ahụ pointer
iji gosi na enwere ike ịmekọrịta mmewere site na ịpị ya.
Nkọwa ụfọdụ
Ozi ndị ọzọ gbasara nkọwa.
Ọbụna nkọwa ndị ọzọ
Nke a bụ nkọwa ndị ọzọ gbasara nkọwa.
HTML5 [hidden]
àgwà
HTML5 na-agbakwụnye àgwà ọhụrụ zuru ụwa ọnụ aha ya bụ[hidden]
, nke a na-eme ka ọ bụrụ display: none
na ndabara. Na-agbaziri echiche site na PureCSS , anyị na-emeziwanye na ndabara a site n'ime ka [hidden] { display: none !important; }
ọ nyere aka gbochie ya ka ọ ghara imebi ya display
na mberede.
<input type="text" hidden>
ndakọrịta jQuery
[hidden]
adabaghị na jQuery $(...).hide()
na $(...).show()
usoro. Ya mere, anyị anaghị akwado ugbu a [hidden]
maka usoro ndị ọzọ maka ijikwa ihe display
ndị ahụ.
Iji gbanwee visibiliti nke ihe mmewere, nke pụtara na display
anaghị agbanwe ya na mmewere ka nwere ike imetụta ọbịbịa nke akwụkwọ ahụ, jiri klaasị .invisible
kama .