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.

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 araba 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 se seng le se seng le OS. Bala haholoanyane ka mekotla ea litlhaku tsa tlhaho sehloohong sena sa Smashing Magazine .

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

Hlokomela hore ka lebaka la hore pokello ea litlhaku e kenyelletsa litlhaku tsa emoji, litlhaku tse ngata tse tloaelehileng tsa matšoao a 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.

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.

  • 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
  1. Lenane le laetsoeng ke lena
  2. Ka lethathamo la lintho tse seng kae
  3. E na le ponahalo e tšoanang ka kakaretso
  4. 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.

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.

Mohlala oa tšōmo

100

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.

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