Source

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.

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.

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 arabela ka lipotso tsa media ha ho ntse ho hlompha likhetho tsa basebelisi le ho netefatsa mokhoa o fumanehang habonolo.
The <body>e boetse e beha lefatše lohle font-family, line-height, le text-align. 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

Lifonti tsa kamehla tsa webo (Helvetica Neue, Helvetica, le Arial) li theotsoe ho Bootstrap 4 'me tsa nkeloa sebaka ke "mokhoa oa mongolo oa tlhaho" bakeng sa ho fana ka mongolo o nepahetseng sesebelisoa le OS. Bala haholoanyane ka mekotla ea litlhaku tsa tlhaho sehloohong sena sa Makasine ea Smashing .

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

Sena font-familyse sebelisoa ho ' <body>me e futsitsoe ka bo eona lefatšeng ka bophara ho pholletsa le Bootstrap. Ho chencha lefatše font-family, ntjhafatsa $font-family-basele ho bopa Bootstrap.

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem le massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Likokoana-hloko tsa Purus sodales
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem le massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Mongolo o hlophisitsoeng esale pele

The <pre>element e setiloe bocha ho tlosa margin-tople ho sebelisa remli-unit bakeng sa eona margin-bottom.

.mohlala-element {
  moeli-tlase: 1rem;
}

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.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Posuere e feletseng e na le palo e kholo.

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.

Nulla attr vitae elit libero, pharetra augue.

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. Leha [hidden]e sa tšehetsoe ka tlhaho ke IE10, phatlalatso e hlakileng ho CSS ea rona e rarolla bothata boo.

<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 feela ponahalo ea ntho, ho bolelang hore displayha e ea fetoloa mme element e ntse e ka ama phallo ea tokomane, sebelisa sehlopha ho fapana le.invisible moo.