in English

Qala bocha

Qala hape, pokello ea liphetoho tsa CSS tse ikhethileng faeleng e le 'ngoe, kickstart Bootstrap ho fana ka motheo o motle, o tsitsitseng le o bonolo oa ho haha holima.

Leqepheng lena

Atamela

Reboot e haha holim'a Normalize, e fana ka likarolo tse ngata tsa HTML tse nang le mekhoa e itseng e nang le maikutlo a sebelisa likhetho tsa likarolo feela. Setaele se eketsehileng se etsoa feela ka lihlopha. Ka mohlala, re qalisa <table>mekhoa e meng bakeng sa motheo o bonolo 'me hamorao re fane ka .table, .table-bordered, le tse ling.

Mona ke litataiso tsa rona le mabaka a ho khetha seo u lokelang ho se ngola ho Reboot:

Ntlafatsa litekanyetso tse ling tsa kamehla tsa sebatli hore u li sebelise rems ho e-na le ems bakeng sa sebaka se ka fokotsoang sa likarolo.
Qoba margin-top. Meeli e otlolohileng e ka putlama, 'me ea hlahisa litholoana tse sa lebelloang. Habohlokoa le ho feta, tataiso e le 'ngoe marginke mohlala o bonolo oa kelello.
Bakeng sa ho eketsa boholo ba lisebelisoa habonolo, likarolo tsa block li lokela ho sebelisa rems bakeng sa margins.
Boloka liphatlalatso tsa fontthepa e amanang le tsona bonyane, u sebelise inheritneng kapa neng ha ho khoneha.

Mefuta e fapaneng ea CSS

E kentsoe ho v5.1.1

Ka v5.1.1, re ile ra etsa hore @imports ea rona e hlokehe ho pholletsa le mekotla eohle ea rona ea CSS (ho kenyeletsoa bootstrap.css, bootstrap-reboot.css, le bootstrap-grid.cssho kenyelletsa _root.scss. Sena se eketsa :rootmaemo a CSS ho liphutheloana tsohle, ho sa tsotellehe hore na ke tse kae tsa tsona tse sebelisoang ka bongata. Qetellong Bootstrap 5 e tla tsoelapele ho bona mefuta e meng ea CSS e ekelitsoeng ha nako e ntse e feta.

Maqephe a kamehla

The <html>and <body>elements li nchafalitsoe ho fana ka likhetho tse betere tsa leqephe lohle. Ka ho khetheha:

E box-sizingbehiloe lefatšeng ka bophara holim'a elemente e 'ngoe le e 'ngoe-ho kenyeletsoa *::beforele *::after, ho border-box. Sena se tiisa hore bophara bo phatlalalitsoeng ba element ha ho mohla bo fetisoang ka lebaka la padding kapa moeli.
- Ha ho na motheo font-sizeo phatlalalitsoeng ho <html>, empa 16pxho nahanoa (sebapali sa kamehla). font-size: 1reme sebelisoa molemong oa <body>ho fana ka mokhoa o bonolo oa ho araba ka lipotso tsa media ha ho ntse ho hlompha likhetho tsa basebelisi le ho netefatsa mokhoa o fumanehang habonolo. Boemo bona ba sebatli bo ka hlakoloa ka ho fetola phetoho $font-size-root.
The <body>e boetse e beha lefatše lohle font-family, font-weight, line-height, le color. Sena se futsitsoe hamorao ke likarolo tse ling ho thibela ho se lumellane ha fonte.
Bakeng sa polokeho, e <body>na le taelo e phatlalalitsoeng background-color, e sa fetoheng ho #fff.

Sekhahla sa mongolo oa tlhaho

Bootstrap e sebelisa "stack fonte ea matsoalloa" kapa "mokhoa oa fonte ea sistimi" bakeng sa ho fana ka mongolo o nepahetseng ho sesebelisoa se seng le se seng le OS. Lifonti tsa sistimi li entsoe ka ho khetheha ho nahanoa ka lisebelisoa tsa kajeno, ka ntlafatso e ntlafalitsoeng ea li-skrini, tšehetso ea fonte e fapaneng, le tse ling. Bala haholoanyane ka mekotla ea litlhaku tsa tlhaho sehloohong sena sa Smashing Magazine .

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

Hlokomela hore hobane pokello ea litlhaku e kenyelletsa litlhaku tsa emoji, litlhaku tse ngata tse tloaelehileng tsa unicode/dingbat li tla etsoa e le litšoantšo tse mebala-bala. Ponahalo ea bona e tla fapana, ho ipapisitse le setaele se sebelisitsoeng ho sebatli/sethala sa mongolo oa emoji, 'me li ke ke tsa angoa ke colormekhoa efe kapa efe ea CSS.

Sena font-familyse sebelisoa ho ' <body>me se jeoa lefa lefats'eng ka bophara ho Bootstrap. Ho chencha lefatše font-family, ntjhafatsa $font-family-basele ho bopa Bootstrap.

Mefuta e fapaneng ea CSS

Ha Bootstrap 5 e ntse e tsoela pele ho hōla, mekhoa e mengata e tla hahoa ka mefuta-futa ea CSS e le mokhoa oa ho fana ka mokhoa oa sebele oa nako ea sebele ntle le tlhoko ea ho khutlisa Sass kamehla. Mokhoa oa rona ke ho nka mefuta ea rona ea mohloli oa Sass le ho e fetola mefuta ea CSS. Ka tsela eo, leha o sa sebelise mefuta e fapaneng ea CSS, o ntse o na le matla ohle a Sass. Sena se ntse se tsoelapele 'me se tla nka nako ho se phethahatsa ka botlalo.

Ka mohlala, nahana ka mefuta ena :rootea CSS bakeng sa <body>mekhoa e tloaelehileng:

  @if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

Ha e le hantle, mefuta eo e sebelisoa ho Reboot joalo ka:

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

E u lumellang ho etsa litlhophiso tsa nako ea 'nete kamoo u ratang kateng:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

Lihlooho le lirapa

Lintlha tsohle tsa sehlooho-mohlala, <h1>-'me <p>li hlophisoa bocha hore li margin-toptlosoe. Lihlooho li margin-bottom: .5remkentse le lirapa margin-bottom: 1rembakeng sa sebaka se bonolo.

Sehlooho	Mohlala
`<h1></h1>`	h1. Sehlooho sa Bootstrap
`<h2></h2>`	h2. Sehlooho sa Bootstrap
`<h3></h3>`	h3. Sehlooho sa Bootstrap
`<h4></h4>`	h4. Sehlooho sa Bootstrap
`<h5></h5>`	h5. Sehlooho sa Bootstrap
`<h6></h6>`	h6. Sehlooho sa Bootstrap

Manane

Mathathamo ohle— <ul>, <ol>, le <dl>— a margin-toptlositsoe le a margin-bottom: 1rem. Mathathamo a senyehileng ha a na margin-bottom. Re boetse re seta padding-leftlisebelisoa <ul>le li- <ol>element.

Manane ohle a tlositsoe moeli oa ona o kaholimo
'Me moeli oa bona o tlase o tloaelehile
Manane a Nested ha a na moeli o ka tlase
- Ka tsela ena ba na le ponahalo e eketsehileng
- Haholo-holo ha e lateloa ke lintlha tse ling tsa lenane
Leqele le letšehali le lona le setiloe bocha

Lenane le laetsoeng ke lena
Ka lethathamo la lintho tse seng kae
E na le ponahalo e tšoanang ka kakaretso
Joalo ka lethathamo le sa reroang le fetileng

Bakeng sa setaele se bonolo, maemo a hlakileng a maemo, le sebaka se betere, manane a litlhaloso a ntlafalitsoe margins. <dd>s reset margin-leftho 0le ho eketsa margin-bottom: .5rem. <dt>s ba sebete .

Manane a tlhaloso: Lethathamo la litlhaloso le nepahetse bakeng sa ho hlalosa mantsoe.
Nako: Tlhaloso ea lentsoe.; Tlhaloso ea bobeli ea lentsoe le tšoanang.
Lereho le leng: Tlhaloso ea lentsoe lena le leng.

Inline khoutu

Qetella likotoana tse nyane tsa khoutu ka <code>. Etsa bonnete ba hore u baleha li-angles tsa HTML.

Ka mohlala, <section>e lokela ho phutheloa joalo ka inline.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Diboloko tsa khoutu

Sebelisa <pre>s bakeng sa mela e mengata ea khoutu. Hape, etsa bonnete ba hore u baleha masakaneng afe kapa afe a khoutu bakeng sa phetolelo e nepahetseng. The <pre>element e setiloe bocha ho tlosa margin-tople ho sebelisa remli-unit bakeng sa eona margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Lintho tse fapaneng

Bakeng sa ho bonts'a lintho tse fapaneng sebelisa <var>tag.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Kenyelletso ea mosebelisi

Sebelisa lets'oao <kbd>ho bonts'a keno eo hangata e kengoang ka keyboard.

Ho fetola li-directory, thaepa cde lateloe ke lebitso la directory.
Ho edita di-setting, tobetsa 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>

Sephetho sa mohlala

Bakeng sa ho bonts'a tlhahiso ea mohlala ho tsoa lenaneong sebelisa <samp>tag.

Sengoloa sena se reretsoe ho nkuoa e le mohlala o tsoang ho lenaneo la komporo.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Litafole

Litafole li fetotsoe hanyenyane ho ea ho setaele <caption>s, ho putlama meeli, 'me li etsa bonnete ba hore li lumellana text-alignhohle. Liphetoho tse ling bakeng sa maliboho, padding, le tse ling li tla le .tablesehlopha .

Ena ke tafole ea mohlala, 'me ena ke tlhaloso ea eona ho hlalosa likahare.
Sehlooho sa tafole	Sehlooho sa tafole	Sehlooho sa tafole	Sehlooho sa tafole
Tafole sele	Tafole sele	Tafole sele	Tafole sele
Tafole sele	Tafole sele	Tafole sele	Tafole sele
Tafole sele	Tafole sele	Tafole sele	Tafole sele

Mefuta

Likarolo tse fapaneng tsa liforomo li qaliloe bocha bakeng sa litaele tse bonolo. Tse ling tsa liphetoho tse hlokomelehang ke tsena:

<fieldset>s ha e na meeli, padding, kapa margin kahoo e ka sebelisoa habonolo e le li-wrappers bakeng sa lintho tse kenang ka bomong kapa lihlopha tsa lintho tse kenang.
<legend>s, joalo ka li-fieldsets, le tsona li entsoe bocha hore li bontšoe joalo ka lihlooho tsa mefuta.
<label>s li behiloe ho display: inline-blocklumella marginho sebelisoa.
<input>s, <select>s, <textarea>s, le <button>s hangata li rarolloa ke Normalize, empa Reboot e tlosa tsona marginle ho beha line-height: inherit, hape.
<textarea>s li fetotsoe hore e be boholo ba sebaka se otlolohileng feela kaha boholo bo tšekaletseng hangata bo "roala" sebopeho sa maqephe.
<button>s le <input>likarolo tsa konopo li na le cursor: pointerha :not(:disabled).

Liphetoho tsena, le tse ling, li bontšoa ka tlase.

Mohlala oa tšōmo

Kenyelletso ea mohlala

Mohlala oa lengolo-tsoibila

Mohlala oa mohala

Mohlala oa url

Nomoro ea mohlala

Patlo ea mohlala

Mohlala oa mefuta

Mohlala oa ho kenya faele

Khetha mohlala

Sheba lebokose lena la ho hlahloba

Khetho ea pele ke ena le eane Khetho ea bobeli ke ntho e 'ngoe hape e telele haholo ho bonts'a ho phutheloa ha litsamaiso tsena tse majabajaba. Khetho ea boraro e koetsoe

Mohlala textarea

Letsatsi la mohlala

Nako ea mohlala

Mohlala oa password

Mohlala oa nako-ea lehae

Mohlala beke

Mohlala khoeli

Mohlala oa mmala

Sephetho sa mohlala 100

Tšehetso ea letsatsi le mebala

Hopola hore lintlha tsa letsatsi ha li tšehetsoe ka botlalo ke libatli tsohle, e leng Safari.

Litsupa holim'a likonopo

Reboot e kenyelletsa ntlafatso ea role="button"ho fetola cursor ea kamehla ho pointer. Kenya tšobotsi ena ho likarolo ho thusa ho bontša hore likarolo lia sebelisana. Karolo ena ha e hlokahale bakeng sa <button>likarolo, tse fumanang cursorphetoho ea tsona.

Non-konopo element

<span role="button" tabindex="0">Non-button element button</span>

Lintho tse fapaneng

Aterese

The <address>element e nchafalitsoe ho seta sebopeho sa sebatli ho font-styletloha italicho normal. line-heightle hona joale le futsitsoe, ’me margin-bottom: 1remle ekelitsoe. <address>s ke tsa ho hlahisa lintlha tsa ho ikopanya le baholo-holo ba haufi (kapa sehlopha sohle sa mosebetsi). Boloka fomete ka mela e qetellang ka <br>.

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

Lebitso le
felletseng [email protected]

Blockquote

Ntho e sa lekanyetsoang marginho li-blockquotes ke 1em 40px, kahoo re e khutlisetsa ho 0 0 1remntho e 'ngoe e lumellanang le likarolo tse ling.

Qotsulo e tsebahalang, e fuperoeng ke karolo ea blockquote.

Motho ea tummeng ho Mohloli Title

Lintlha tse ka har'a mela

The <abbr>element e fumana setaele sa mantlha ho etsa hore e hlahelle har'a litemana tsa serapa.

Karolo ea khutsufatso ea HTML .

Kakaretso

Kakaretso cursorea kakaretso ke text, kahoo re seta hape pointerho fetisa hore element e ka sebelisana le eona ka ho tobetsa ho eona.

Lintlha tse ling

Lintlha tse ling mabapi le lintlha.

Lintlha tse ling hape

Lintlha tse ling mabapi le lintlha ke tsena.

HTML5 `[hidden]`tšobotsi

HTML5 e eketsa tšobotsi e ncha ea lefats'e e bitsoang[hidden] , e ngotsoeng joalo display: noneka kamehla. Ho alima mohopolo ho tsoa ho PureCSS , re ntlafatsa holim'a taba ena ka [hidden] { display: none !important; }ho thusa ho e thibela hore e displayse ke ea hlakoloa ka phoso.

<input type="text" hidden>

jQuery ho se lumellane

[hidden]ha e tsamaisane le jQuery's $(...).hide()le $(...).show()mekhoa. Ka hona, hajoale ha re khothaletse haholo [hidden]mekhoa e meng ea ho laola displaylikarolo.

Ho fetola ponahalo ea ntho e itseng feela, ho bolelang hore displayha e ea fetoloa, 'me ntho e ntse e ka ama ho phalla ha tokomane, sebelisa sehlopha ho e-na le.invisible hoo.

Qala bocha

Atamela

Mefuta e fapaneng ea CSS

Maqephe a kamehla

Sekhahla sa mongolo oa tlhaho

Mefuta e fapaneng ea CSS

Lihlooho le lirapa

Manane

Inline khoutu

Diboloko tsa khoutu

Lintho tse fapaneng

Kenyelletso ea mosebelisi

Sephetho sa mohlala

Litafole

Mefuta

Tšehetso ea letsatsi le mebala

Litsupa holim'a likonopo

Lintho tse fapaneng

Aterese

Blockquote

Lintlha tse ka har'a mela

Kakaretso

HTML5 [hidden]tšobotsi

jQuery ho se lumellane

HTML5 `[hidden]`tšobotsi