in English

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 rems kama ems 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 nke marginbụ ihe atụ uche dị mfe.
Maka ntule dị mfe n'ofe nha ngwaọrụ, ihe mgbochi kwesịrị iji rems maka margins.
Debe nkwupụta nke fontihe ndị metụtara ya na opekempe, na-eji oge inheritọ 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-sizingihe niile n'ụwa niile - gụnyere *::beforena *::after, na border-box. Nke a na-achọpụta na obosara ekwuputara nke mmewere agaghị agafe n'ihi padding ma ọ bụ oke.
Ọ nweghị ntọala font-sizeekwuputala na <html>, mana 16pxa na-eche ya (ndabara ihe nchọgharị ahụ). font-size: 1remA 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.
Nke <body>ahụ na-esetịpụkwa ihe zuru ụwa ọnụ font-family, line-height, na text-align. A na-eketa nke a ma emechaa site n'ụdị ụfọdụ iji gbochie ndakọrịta font.
Maka nchekwa, onye <body>ahụ ekwupụtala background-color, na-emebi #fff.

Nchịkọta mkpụrụedemede ala nna

Etunyela mkpụrụedemede webụ ndabara (Helvetica Neue, Helvetica, na Arial) na Bootstrap 4 wee jiri “nchịkọta font ala” dochie ya maka ntụgharị ederede kacha mma na ngwaọrụ na OS ọ bụla. Gụkwuo maka nchịkọta mkpụrụedemede nke ala n'ime akụkọ Smashing Magazine a .

$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;

Rịba ama na n'ihi na nchịkọta mkpụrụedemede gụnyere mkpụrụedemede emoji, ọtụtụ akara ngosi/dingbat Unicode ga-eme ka ọ bụrụ 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-familyna-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-basema chịkọta Bootstrap.

Isi na paragraf

Isi ihe niile—dịka ọmụmaatụ, <h1>—ma <p>tọgharịa ka margin-topewepụrụ ha. Isi okwu margin-bottom: .5remagbakwunyela na paragraf margin-bottom: 1remmaka 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ị .margin-topmargin-bottom: 1remmargin-bottom

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 margins. <dd>s tọgharịa margin-leftna 0tinye 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.

Ederede edoziziri

Emegharịrị <pre>mmewere iji wepu ya margin-topwee jiri remnkeji maka ya margin-bottom.

.ihe atụ-mmemme {
  oke-ala: 1rem;
}

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

Nke a bụ tebụl ihe atụ, nke a bụkwa isiokwu ya iji kọwaa ihe dị n'ime ya.
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ọ ka display: inline-blockekwe marginka etinye ya.
<input>s, <select>s, <textarea>s, na <button>s bụ Normalize na-ekwukarị okwu, mana Reboot na-ewepụ ha marginna ịtọọkwa line-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ụ nwere cursor: pointermgbe :not(:disabled).

E gosipụtara mgbanwe ndị a na ndị ọzọ n'okpuru.

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 cursormgbanwe nke ha.

Bọtịnụ mmewere enweghị bọtịnụ

<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-stylena italicgaa na normal. line-heightbụkwa ugbu a ketara, ma margin-bottom: 1remtinyekwuo 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>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Aha zuru oke
[email protected]

Ihe mgbochi

Ihe ndabara margindị 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.

Nulla attr vitae elit libero, a pharetra augue.

Nchịkọta

Ihe ndabara cursorna nchịkọta bụ text, yabụ anyị na-emegharị nke ahụ pointeriji 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: nonena 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 displayna mberede. Ọ [hidden]bụ ezie na IE10 anaghị akwado ya, nkwupụta doro anya na CSS anyị na-enweta nsogbu ahụ.

<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 displayndị ahụ.

Iji gbanwee visibiliti nke ihe mmewere, nke pụtara na displayanaghị agbanwe ya na mmewere ka nwere ike imetụta ọbịbịa nke akwụkwọ ahụ, jiri klaasị .invisiblekama .