Sekala sa mongolo

Keriti eohle ea typographic e thehiloe holim'a mefuta e 'meli e Nyane ho mefuta ea rona.faele e se nang letho: @baseFontSizele @baseLineHeight. Ea pele ke boholo ba fonte e sebelisoang hohle 'me ea bobeli ke bophahamo ba mohala.

Re sebelisa mefuta-futa eo, le lipalo tse ling, ho theha marang-rang, li-padding, le bophahamo ba mela ea mefuta eohle ea rona le tse ling.

Mohlala oa mongolo oa 'mele

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etsa sed odio dui.

Ho sebelisa khatiso

Fusce dapibus , tellus ac cursus commodo , tor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.

Tlhokomeliso: Ikutloe u lokolohile ho sebelisa <b>le <i>ho HTML5, empa ts'ebeliso ea bona e fetohile hanyane. <b>e reretsoe ho totobatsa mantsoe kapa lipoleloana ntle le ho fana ka bohlokoa bo eketsehileng ha <i>boholo e le ea lentsoe, mantsoe a theknoloji, joalo-joalo.

Liaterese tsa mohlala

Mehlala e 'meli ke ena ea hore na <address>tag e ka sebelisoa joang:

Likgutsufatso tsa mohlala

Likgutsufatso li entsoe ka mongolo oa litlhaku tse kholo le moeli o tlase oa matheba a bobebe. Ba boetse ba na le sekhechana sa thuso ho hover kahoo basebelisi ba na le sesupo se eketsehileng se tla bonts'oa hover.

HTML ke ntho e ntle ka ho fetisisa ho tloha ha bohobe bo sehiloeng.

Kgutsufatso ya lentsoe tšobotsi ke attr .

Ho kenyelletsa blockquote, koahela HTML<blockquote> efe kapa efe joalo ka quote. Bakeng sa mantsoe a qotsitsoeng ka kotloloho re khothaletsa a .<p>

Kenyelletsa <small>karolo eo u ka e khethang ho qotsa mohloli oa hau, 'me u tla fumana letšoao la em —pele ho eona molemong oa ho etsa setaele.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis. </p>
  <e nyane> Motho ya tsebahalang </small>
</blockquote>

Li-blockquotes tsa kamehla li ngotsoe ka tsela e kang:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis.

Motho ya tummeng ka Mmele wa mosebetsi

Ho phaphamisa blockquote ea hau ka ho le letona, eketsa class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis.

Motho ya tummeng ka Mmele wa mosebetsi

Ha ea laeloa

<ul>

• 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

Unstyled

<ul class="unstyled">

• 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

E laetsoe

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem le massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Tlhaloso

<dl>

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

E mocheng

Qetella likotoana tse nyane tsa khoutu ka <code>.

Ka mohlala , <code> karolo </ code > e lokela ho phutheloa joalo ka inline .  

Thibelo ea motheo

Sebelisa <pre>bakeng sa mela e mengata ea khoutu. Etsa bonnete ba hore o fetola li-carets hore e be litlhaku tsa unicode bakeng sa phetolelo e nepahetseng.

<p>Mohlala oa mongolo mona...</p>

<pele>
  <p>Mohlala oa mongolo mona...</p>
</ pre>

Tlhokomeliso: Etsa bonnete ba hore u boloka khoutu ka har'a <pre>li-tag haufi le ho le letšehali kamoo ho ka khonehang; e tla fana ka li-tab tsohle.

Google Pretify

Nka <pre>ntho e tšoanang 'me u kenye lihlopha tse peli tseo u ka li khethang bakeng sa phetolelo e ntlafalitsoeng.

<p> Mohlala oa mongolo mona... </p>

<pre class = "prettyprint 
     linenum" >
  <p>Mohlala oa mongolo mona...</p>
</ pre>

Khoasolla google-code-prettify 'me u shebe buka eo u ka e sebelisang ho e sebelisa.

<tafole>
  <hlooho>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </ hlooho>
  <botho>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</tafole>

Litafole li entsoe ka mokhoa o ikemetseng ka meeli e fokolang feela ho netefatsa hore li balehe le ho boloka sebopeho. Ka 2.0, .tablesehlopha sea hlokahala.

< sehlopha sa tafole = "tafole" > 
  …
</tafole>

Fumana monate ka litafole tsa hau ka ho eketsa liqoaha-tsenya .table-stripedsehlopha.

Tlhokomeliso: Litafole tse hlophisitsoeng li sebelisa sekhetho sa :nth-childCSS 'me ha se fumanehe ho IE7-IE8.

< sehlopha sa tafole = "table-striped table" > 
  …
</tafole>

Kenya meeli ho potoloha tafole eohle le likhutlo tse chitja bakeng sa merero ea botle.

< sehlopha sa tafole = "tafole e moeling oa tafole" > 
  …
</tafole>

Etsa hore litafole tsa hau li kopane ho feta ka ho eketsa .table-condensedsehlopha ho khaola lisele tsa tafole ka halofo (ho tloha ho 8px ho isa ho 4px).

< sehlopha sa tafole = "table table-condensed" > 
  …
</tafole>

Ikutloe u lokolohile ho kopanya lihlopha life kapa life tsa litafole ho fihlela chebahalo e fapaneng ka ho sebelisa litlelase life kapa life tse fumanehang.

< sehlopha sa tafole = "tafole e nang le methalo e nang le moeli oa tafole e khutsufalitsoeng" > 
  ...
</tafole>

Flexible HTML le CSS

Karolo e ntle ka ho fetisisa mabapi le liforomo ho Bootstrap ke hore lintho tsohle tse kentsoeng le litaolo tsa hau li shebahala li le ntle ho sa tsotelehe hore na u li haha ​​joang ka har'a letšoao la hau. Ha ho hlokahale HTML e sa hlokahaleng, empa re fana ka lipaterone bakeng sa ba e hlokang.

Meaho e rarahaneng haholoanyane e tla le litlelase tse hlakileng le tse ka senyehang bakeng sa ho etsa setaele habonolo le ho tlama liketsahalo, kahoo o tla u thusa mohatong o mong le o mong.

Mehaho e mene e kenyelelitsoe

Bootstrap e tla le tšehetso bakeng sa mefuta e mene ea meralo ea liforomo:

• E otlolohileng (ea kamehla)
• Batla
• E mocheng
• E tshekaletseng

Mefuta e fapaneng ea meralo ea liforomo e hloka liphetoho tse itseng ho markup, empa litsamaiso ka botsona li sala li sebetsa ka mokhoa o ts'oanang.

Laola linaha le tse ling

Liforomo tsa Bootstrap li kenyelletsa setaele bakeng sa taolo eohle ea liforomo tse kang ho kenya, mongolo, le khetho eo u ka e lebellang. Empa e boetse e tla le likarolo tse 'maloa tsa tloaelo joalo ka likenyelletso tse kentsoeng le tse reriloeng esale pele le tšehetso bakeng sa manane a li-checkbox.

Linaha tse kang phoso, temoso, le katleho li kenyelelitsoe bakeng sa mofuta o mong le o mong oa taolo ea foromo. Hape ho kenyelelitsoe mekhoa ea li-control tse holofetseng.

Ka v2.0, re na le likhetho tse bobebe le tse bohlale bakeng sa mefuta ea libopeho. Ha ho na li-markups tse ling, etsa li-control feela.

E bonts'a mekhoa ea kamehla ea WebKit, eketsa feela .form-searchlibaka tsa ho batla tse pota-potiloeng.

Litlhahiso ke boemo ba block ho qala. Bakeng sa .form-inlinele .form-horizontal, re sebelisa inline-block.

Se kenyellelitsoeng

Ka ho le letšehali ho bonts'itsoe li-control tsa kamehla tsa foromo tseo re li tšehetsang. Lenane le nang le marumo ke lena:

• mongolo (mongolo, phasewete, imeile, joalo-joalo)
• lebokose la ho hlahloba
• seea-le-moea
• khetha
• khethang ho tsona tse ngata
• ho kenya faele
• textarea

Likhetho tse ncha tse nang le v2.0

Ho fihla ho v1.4, mekhoa ea sebopeho sa Bootstrap e sebelisitse sebopeho se otlolohileng. Ka Bootstrap 2, re tlositse tšitiso eo hore re be le mefokolo e bohlale, e mpe haholoanyane bakeng sa mofuta ofe kapa ofe.

Sebaka sa marang-rang se hlophisitsoeng bocha

Bootstrap e na le mekhoa ea ho shebana le libaka tse tšehelitsoeng ke sebatli disabled. Re tlosa Webkit ea kamehla outlineebe re kenya a box-shadowsebakeng sa eona bakeng sa :focus.

Netefatso ea foromo

E boetse e kenyelletsa mekhoa ea ho netefatsa liphoso, litemoso, le katleho. Ho e sebelisa, eketsa sehlopha sa liphoso sebakeng se potolohileng .control-group.

<fieldset
  class = "phoso ea sehlopha sa taolo" >
  …
</ fieldset>

Etsa esale pele 'me u kenye letsoho

Lihlopha tsa ho kenya—tse nang le mongolo o kentsoeng kapa o reriloeng—li fana ka tsela e bonolo ea ho fana ka moelelo o eketsehileng oa seo u se ngotseng. Mehlala e metle e kenyelletsa letšoao la @ bakeng sa mabitso a basebelisi ba Twitter kapa $ bakeng sa lichelete.

Li-checkbox le liea-le-moea

Ho fihla ho v1.4, Bootstrap e ne e hloka letšoao le eketsehileng ho potoloha mabokose a tlhahlobo le liea-le-moea ho li beha. Joale, ke taba e bonolo ea ho pheta <label class="checkbox">se phuthelang <input type="checkbox">.

Mabokose a marang-rang le liea-le-moea le tsona lia tšehetsoa. Eketsa feela .inlineho efe .checkboxkapa efe kapa .radioo qetile.

Liforomo tse ka har'a marang-rang 'me u li kenye / u li ekise pele

Ho sebelisa lintho tse kentsoeng esale pele kapa tse hlomathisang ka mokhoa o inline, etsa bonnete ba hore u beha .add-onle inputmoleng o le mong, ntle le libaka.

Mongolo oa thuso oa foromo

Ho kenya mongolo oa thuso bakeng sa lintho tseo u li ngotseng ka foromo, kenyelletsa mongolo oa thuso oa inline <span class="help-inline">kapa mongolo oa thuso ka <p class="help-block">mor'a ntho e kentsoeng.

Likonopo tsa liketso

E le kopano, likonopo li lokela ho sebelisoa feela bakeng sa liketso ha li-hyperlink li lokela ho sebelisoa bakeng sa lintho. Mohlala, "Download" e lokela ho ba konopo ha "ts'ebetso ea morao-rao" e lokela ho ba sehokelo.

Bakeng sa liankora le liforomo

Mefuta ea likonopo e ka sebelisoa ho eng kapa eng e .btnsebelisitsoeng. Leha ho le joalo, ka tloaelo u tla batla ho sebelisa tsena feela <a>le <button>likarolo.

Tlhokomeliso: Likonopo tsohle li tlameha ho kenyelletsa .btnsehlopha. Litaele tsa likonopo li lokela ho sebelisoa <button>le <a>likarolo tsa ho lumellana.

Mefuta e mengata

U batla likonopo tse kholoanyane kapa tse nyane? E be le eona!

Ts'ebetso ea mantlha Ketso

Ts'ebetso ea mantlha Ketso

Boemo ba bokooa

Bakeng sa likonopo tse koetsoeng, sebelisa bakeng .btn-disabledsa lihokelo le likarolo.:disabled<button>

Ts'ebetso ea mantlha Ketso

Ts'ebetso ea mantlha Ketso

Sebapali se lumellanang

Ho IE9, re lahlela gradient holim'a likonopo tsohle molemong oa likhutlo tse chitja kaha IE9 ha e hlahise li-gradients tsa bokamorao ho lihuku.

E amanang, IE9 e jankifies buttonlikarolo tse holofetseng, e fetolela mongolo o moputsoa ka moriti o mobe oa mongolo—ka bomalimabe ha re khone ho lokisa sena.

E hahiloe joalo ka sprite

Ho e-na le ho etsa hore setšoantšo se seng le se seng e be kopo e eketsehileng, re li hlophisitse hore e be sprite-sehlopha sa litšoantšo faeleng e le 'ngoe e sebelisang CSS ho beha litšoantšo ka background-position. Ona ke ona mokhoa oo re o sebelisang ho Twitter.com mme o re sebelitse hantle.

Lihlopha tsohle tsa litšoantšo li hlophisitsoe pele .icon-bakeng sa sebaka se nepahetseng sa mabitso le scoping, joalo ka likarolo tse ling tsa rona. Sena se tla thusa ho qoba likhohlano le lisebelisoa tse ling.

Li-Glyphicons li re file monyetla oa ho sebelisa Halflings tse behiloeng ka har'a sesebelisoa sa rona sa mohloli o bulehileng ha feela re fana ka sehokelo le mokitlane mona ho litokomane. Ka kopo nahana ho etsa se tšoanang mererong ea hau.

Mokhoa oa ho sebelisa

Ka v2.0.0, re khethile ho sebelisa li- <i>tag bakeng sa litšoantšo tsohle tsa rona, empa ha li na sehlopha sa maemo—ke sehlongoapele se arolelanoang feela. Ho e sebelisa, beha khoutu e latelang hoo e ka bang kae kapa kae:

<i class = "icon-search" > </i> 

Ho boetse ho na le mefuta e fumanehang bakeng sa litšoantšo tse inverted (tse tšoeu), tse lokiselitsoeng ka sehlopha se le seng:

<i class = "icon-search icon-white" ></i> 

Ho na le lihlopha tse 120 tseo u ka khethang ho tsona bakeng sa litšoantšo tsa hau. Kenya feela <i>tag e nang le litlelase tse nepahetseng 'me u se u behiloe. U ka fumana lenane le felletseng ho sprites.ka tlase kapa hona mona tokomaneng ena.

Sebelisa linyeoe

Litšoantšo li ntle, empa motho o ne a ka li sebelisa hokae? Mehopolo e 'maloa ke ena:

• E le lipono bakeng sa navigation ea bara ba hau
• Bakeng sa navigation e tsamaisoang ke li-icon
• Bakeng sa likonopo ho thusa ho fetisa moelelo oa ketso
• E na le likhokahano tsa ho arolelana litaba sebakeng sa mosebelisi

Ha e le hantle, kae kapa kae moo u ka behang <i>tag, u ka beha letšoao.

Hlasimolla Sheba Hlakola

Maikutlo Litlhophiso Lintlha tse ling