Source

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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem na massa
Facilisis na pretium nisl aliquet
Ngwa ngwa ngwa ngwa
- Phasellus iaculis bụ ihe atụ
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat na
Faucibus Porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem na massa
Facilisis na pretium nisl aliquet
Ngwa ngwa ngwa ngwa
Faucibus Porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Achọpụtaghị m porta gravida na eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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.

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ọ.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe.

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 .