Vichwa

Vichwa vyote vya HTML, <h1>kupitia <h6>vinapatikana.

h1. Kichwa 1

h2. Kichwa cha 2

h3. Kichwa cha 3

h4. Kichwa cha 4

h5. Kichwa cha 5

h6. Kichwa cha 6

Nakala ya mwili

Chaguo-msingi la kimataifa la Bootstrap font-sizeni 14px , line-heightna 20px . Hii inatumika kwa <body>aya na aya zote. Kwa kuongeza, <p>(aya) hupokea ukingo wa chini wa nusu ya urefu wa mstari (10px kwa chaguo-msingi).

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Nakala ya mwili inayoongoza

Fanya aya isimame kwa kuongeza .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor dalali. Duis mollis, est non commodo luctus.

<p class = "lead" > ... </p>

Imejengwa kwa Chini

Kiwango cha uchapaji kinatokana na vigeu viwili LESS katika vigeuzo.less : @baseFontSizena @baseLineHeight. Ya kwanza ni saizi ya msingi ya fonti inayotumika kote na ya pili ni urefu wa mstari wa msingi. Tunatumia vigeu hivyo na hesabu fulani rahisi kuunda kando, pedi, na urefu wa mstari wa aina zetu zote na zaidi. Zibinafsishe na ubadilishe Bootstrap.

Mkazo

Tumia lebo za mkazo chaguomsingi za HTML na mitindo nyepesi.

`<small>`

Ili kuondoa msisitizo ndani ya mstari au vizuizi vya maandishi, tumia lebo ndogo.

Mstari huu wa maandishi unakusudiwa kuzingatiwa kama chapa nzuri.

<p> <small> Mstari huu wa maandishi unakusudiwa kuzingatiwa kama chapa bora. </ ndogo> </p>

Ujasiri

Kwa kusisitiza kijisehemu cha maandishi chenye uzito mkubwa wa fonti.

Kijisehemu kifuatacho cha maandishi kinatolewa kama maandishi mazito .

<strong> inayotolewa kama maandishi mazito </strong>

Italiki

Kwa kusisitiza kijisehemu cha maandishi chenye italiki.

Kijisehemu kifuatacho cha maandishi kinatolewa kama maandishi ya italiki .

<em> inayotolewa kama maandishi ya italiki </em>

Vichwa juu!Jisikie huru kutumia <b>na <i>katika HTML5. <b>inakusudiwa kuangazia maneno au vifungu vya maneno bila kuwasilisha umuhimu wa ziada ilhali <i>mara nyingi ni kwa sauti, maneno ya kiufundi, n.k.

Madarasa ya upatanishi

Pangilia maandishi upya kwa vipengele kwa urahisi na madarasa ya upatanishi wa maandishi.

Maandishi yaliyopangiliwa kushoto.

Maandishi yaliyopangiliwa katikati.

Maandishi yaliyopangiliwa kulia.

<p class = "text-left" > Maandishi yaliyopangiliwa kushoto. </ p> 
<p class = "text-center" > Maandishi yaliyopangiliwa katikati . </ p> 
<p class = "text-right" > Maandishi yaliyopangiliwa kulia. </ p>

Madarasa ya kusisitiza

Onyesha maana kupitia rangi na madarasa machache ya matumizi ya mkazo.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tor mauris nibh. </ p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </ p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </ p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </ p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </ p>

Vifupisho

Utekelezaji wa mtindo wa <abbr>kipengele cha HTML cha vifupisho na vifupisho ili kuonyesha toleo lililopanuliwa kwenye kielelezo. Vifupisho vyenye titlesifa vina mpaka wa chini wenye vitone vyepesi na kishale cha usaidizi kwenye kieleezaji, ukitoa muktadha wa ziada kwenye kuelea.

`<abbr>`

Kwa maandishi yaliyopanuliwa kwenye kielelezo kirefu cha kifupisho, jumuisha titlesifa.

Kifupi cha neno sifa ni attr .

<abbr title = "attribute" > attr </abbr>

`<abbr class="initialism">`

Ongeza .initialismkwa kifupi cha saizi ndogo ya fonti.

HTML ndio kitu bora zaidi tangu mkate uliokatwa.

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

Anwani

Wasilisha maelezo ya mawasiliano kwa babu wa karibu au kikundi kizima cha kazi.

`<address>`

Hifadhi umbizo kwa kumalizia mistari yote kwa <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Jina Kamili
[email protected]

<anwani>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  San Francisco, CA 94107 <br>
  <abbr title = "Simu" > P: </abbr> (123) 456-7890 
</ address>
 
<anwani>
  <strong> Jina Kamili </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</ address>

Nukuu za kuzuia

Kwa kunukuu vizuizi vya maudhui kutoka chanzo kingine ndani ya hati yako.

Nukuu chaguomsingi ya kuzuia

Funga HTML<blockquote> yoyote kama nukuu. Kwa nukuu moja kwa moja tunapendekeza a .<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante. </ p>
</blockquote>

Chaguo za dondoo za kuzuia

Mtindo na mabadiliko ya yaliyomo kwa tofauti rahisi kwenye nukuu ya kawaida ya kuzuia.

Kutaja chanzo

Ongeza <small>lebo ili kutambua chanzo. Funga jina la kazi ya chanzo katika <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.
Mtu maarufu katika Mada ya Chanzo

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante. </ p>
  <small> Mtu maarufu <cite title = "Chanzo Kichwa" > Kichwa Chanzo </cite></small> 
</blockquote>

Maonyesho mbadala

Tumia .pull-rightkwa nukuu ya kuzuia iliyoelea, iliyopangiliwa kulia.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.
Mtu maarufu katika Mada ya Chanzo

<blockquote class = "pull-right" > 
  ...
</blockquote>

Orodha

Haijaagizwa

Orodha ya vitu ambavyo mpangilio haujalishi kwa uwazi.

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

<ul>
  <li> ... </li>
</ul>

Imeagizwa

Orodha ya vitu ambavyo agizo lina umuhimu wazi.

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

<ol>
  <li> ... </li>
</ol>

Isiyo na mtindo

Ondoa pedi chaguomsingi list-stylena kushoto kwenye vipengee vya orodha (watoto wa karibu pekee).

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

<ul class = "unstyled" > 
  <li> ... </li>
</ul>

Katika mstari

Weka vitu vyote vya orodha kwenye mstari mmoja inline-blockna pedi nyepesi.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = "inline" > 
  <li> ... </li>
</ul>

Maelezo

Orodha ya maneno na maelezo yanayohusiana nayo.

Orodha za maelezo: Orodha ya maelezo ni kamili kwa kufafanua maneno.
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.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</ dl>

Maelezo ya mlalo

Tengeneza masharti na maelezo kwa <dl>mstari kwa upande.

Orodha za maelezo: Orodha ya maelezo ni kamili kwa kufafanua maneno.
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.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class = "dl-horizontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</ dl>

Vichwa juu!Orodha za maelezo mlalo zitapunguza maneno ambayo ni marefu sana kutoshea katika kurekebisha safu wima ya kushoto text-overflow. Katika maeneo finyu ya kutazama, yatabadilika kuwa mpangilio chaguomsingi wa kura.

Katika mstari

Funga vijisehemu vya ndani vya msimbo kwa <code>.

Kwa mfano, <section>inapaswa kufungwa kama inline.

Kwa mfano , <code> & lt ; section & gt ;</ code > inapaswa kufungwa kama inline .

Kizuizi cha msingi

Tumia <pre>kwa mistari mingi ya msimbo. Hakikisha umeepuka mabano yoyote katika msimbo ili utoe sahihi.

<p>Mfano wa maandishi hapa...</p>

<kabla>
  <p>Mfano wa maandishi hapa...</p>
</ pre>

Vichwa juu!Hakikisha kuweka msimbo ndani ya <pre>vitambulisho karibu na kushoto iwezekanavyo; itatoa tabo zote.

Unaweza kuongeza kwa hiari .pre-scrollabledarasa ambalo litaweka urefu wa juu wa 350px na kutoa upau wa kusogeza wa y-axis.

Mitindo chaguomsingi

Kwa mtindo wa kimsingi - pedi nyepesi na vigawanyiko vya mlalo pekee - ongeza darasa la msingi .tablekwa yoyote <table>.

#	Jina la kwanza	Jina la familia	Jina la mtumiaji
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	ndege	@twitter

<table class = "meza" > 
  …
</ meza>

Madarasa ya hiari

Ongeza darasa lolote kati ya zifuatazo kwa .tabledarasa la msingi.

`.table-striped`

Huongeza michirizi ya pundamilia kwenye safu mlalo yoyote ya jedwali ndani ya <tbody>kiteuzi cha :nth-childCSS (hakipatikani katika IE7-8).

#	Jina la kwanza	Jina la familia	Jina la mtumiaji
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	ndege	@twitter

<meza  class = "table table-striped" >
  …
</ meza>

`.table-bordered`

Ongeza mipaka na pembe za mviringo kwenye meza.

#	Jina la kwanza	Jina la familia	Jina la mtumiaji
1	Weka alama	Otto	@mdo
1	Weka alama	Otto	@getbootstrap
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

<table class = "table-bordered" > 
  …
</ meza>

`.table-hover`

Washa hali ya kuelea kwenye safu mlalo za jedwali ndani ya <tbody>.

#	Jina la kwanza	Jina la familia	Jina la mtumiaji
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

<table class = "table table-hover" > 
  …
</ meza>

`.table-condensed`

Hufanya jedwali kushikana zaidi kwa kukata pedi za seli katikati.

#	Jina la kwanza	Jina la familia	Jina la mtumiaji
1	Weka alama	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry Ndege		@twitter

<table class = "table-condensed table" > 
  …
</ meza>

Madarasa ya safu mlalo ya hiari

Tumia madarasa ya muktadha kupaka safu za jedwali rangi.

Darasa	Maelezo
`.success`	Inaonyesha hatua iliyofanikiwa au chanya.
`.error`	Huonyesha kitendo hatari au kinachoweza kuwa hasi.
`.warning`	Inaonyesha onyo ambalo linaweza kuhitaji kuzingatiwa.
`.info`	Inatumika kama mbadala kwa mitindo chaguo-msingi.

#	Bidhaa	Malipo Yamechukuliwa	Hali
1	TB - Kila mwezi	01/04/2012	Imeidhinishwa
2	TB - Kila mwezi	02/04/2012	Imekataliwa
3	TB - Kila mwezi	03/04/2012	Inasubiri
4	TB - Kila mwezi	04/04/2012	Piga simu ili kuthibitisha

...
  < tr class = "success" >
    <td> 1 < /td>
    <td>TB - Kila Mwezi</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>Imeidhinishwa</ td >
  </ tr >
...

Alama ya jedwali inayotumika

Orodha ya vipengele vya HTML vya jedwali vinavyotumika na jinsi vinapaswa kutumiwa.

Lebo	Maelezo
`<table>`	Kipengele cha kufunga kwa ajili ya kuonyesha data katika umbizo la jedwali
`<thead>`	Kipengele cha chombo cha safu mlalo za vichwa vya jedwali ( `<tr>`) kuweka lebo kwenye safu wima za jedwali
`<tbody>`	Kipengele cha chombo cha safu za jedwali ( `<tr>`) kwenye mwili wa jedwali
`<tr>`	Kipengele cha chombo cha seti ya seli za jedwali ( `<td>`au `<th>`) zinazoonekana kwenye safu mlalo moja
`<td>`	Seli chaguomsingi ya jedwali
`<th>`	Seli maalum ya jedwali kwa safu wima (au safu mlalo, kulingana na upeo na uwekaji) lebo
`<caption>`	Maelezo au muhtasari wa kile ambacho jedwali inashikilia, muhimu sana kwa visoma skrini

<meza>
  <caption> ... </caption>
  <kichwa>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </ tr>
  </ kichwa>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </ tr>
  </tbody>
</ meza>

Mitindo chaguomsingi

Vidhibiti vya aina ya mtu binafsi hupokea mitindo, lakini bila darasa la msingi linalohitajika kwenye <form>au mabadiliko makubwa katika tabo. Matokeo katika lebo zilizopangwa kwa rafu, zilizopangiliwa kushoto juu ya vidhibiti vya fomu.

<fomu>
  <seti ya uwanja>
    <legend> Legend </legend>
    <label> Jina la lebo </label>
    <input type = "text" placeholder = "Andika kitu..." >  
    <span class = "help-block" > Mfano wa maandishi ya usaidizi wa kiwango cha kuzuia hapa. </span> 
    <label class = "checkbox" > 
      <input type = "checkbox" > Niangalie 
    </lebo>
    <button type = "submit" class = "btn" > Wasilisha </button>  
  </fieldset>
</ fomu>

Mipangilio ya hiari

Iliyojumuishwa na Bootstrap ni miundo mitatu ya hiari ya fomu kwa kesi za matumizi ya kawaida.

Tafuta fomu

Ongeza .form-searchkwenye fomu na .search-querykwa <input>ingizo la maandishi ya ziada.

<form class = "form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Tafuta </button>  
</ fomu>

Fomu ya ndani

Ongeza .form-inlinekwa lebo zilizopangiliwa kushoto na vidhibiti vya uzuiaji wa ndani kwa mpangilio shikamanifu.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Nenosiri" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Nikumbuke 
  </lebo>
  <button type = "submit" class = "btn" > Ingia </button>  
</ fomu>

Fomu ya usawa

Pangilia lebo kulia na uzielee upande wa kushoto ili kuzifanya zionekane kwenye mstari sawa na vidhibiti. Inahitaji mabadiliko mengi zaidi kutoka kwa fomu chaguo-msingi:

Ongeza .form-horizontalkwenye fomu
Funga lebo na vidhibiti.control-group
Ongeza .control-labelkwenye lebo
Funga vidhibiti vyovyote vinavyohusishwa .controlskwa upangaji sahihi

<form class = "form-horizontal" > 
  <div class = "control-group" > 
    <label class = "control-label" for = "inputEmail" > Barua pepe </label>  
    <div class = "vidhibiti" > 
      <input type = "text" id = "inputEmail" placeholder = "Barua pepe" >   
    </ div>
  </ div>
  <div class = "control-group" > 
    <label class = "control-label" kwa = "inputPassword" > Nenosiri </label>  
    <div class = "vidhibiti" > 
      <input type = "password" id = "inputPassword" placeholder = "Nenosiri" >   
    </ div>
  </ div>
  <div class = "control-group" > 
    <div class = "vidhibiti" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > Nikumbuke 
      </lebo>
      <button type = "submit" class = "btn" > Ingia </button>  
    </ div>
  </ div>
</ fomu>

Vidhibiti vya fomu vinavyotumika

Mifano ya vidhibiti vya kawaida vya fomu vinavyotumika katika muundo wa muundo wa mfano.

Ingizo

Udhibiti wa kawaida wa fomu, uga zinazotegemea maandishi. Inajumuisha usaidizi wa aina zote za HTML5: maandishi, nenosiri, saa, tarehe-ndani, tarehe, mwezi, saa, wiki, nambari, barua pepe, url, utafutaji, simu na rangi.

Inahitaji matumizi ya maalum typewakati wote.

<input type = "text" placeholder = "Ingizo la maandishi" >

Eneo la maandishi

Udhibiti wa fomu ambao unaauni mistari mingi ya maandishi. Badilisha rowssifa inapohitajika.

<textarea rows = "3" ></textarea>

Visanduku vya kuteua na redio

Vikasha tiki ni vya kuchagua chaguo moja au kadhaa katika orodha huku redio ni za kuchagua chaguo moja kutoka nyingi.

Chaguomsingi (imerundikwa)

<label class = "checkbox" > 
  <input type = "checkbox" value = "" >  
  Chaguo la kwanza ni hili na lile—hakikisha umejumuisha kwa nini ni nzuri
</lebo>
 
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" imechaguliwa >     
  Chaguo la kwanza ni hili na lile—hakikisha umejumuisha kwa nini ni nzuri
</lebo>
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  Chaguo la pili linaweza kuwa jambo lingine na kulichagua kutaondoa chaguo la kwanza
</lebo>

Visanduku vya kuteua vya ndani

Ongeza .inlinedarasa kwenye mfululizo wa visanduku vya kuteua au redio kwa ajili ya vidhibiti kuonekana kwenye mstari mmoja.

<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</lebo>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</lebo>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</lebo>

Inachagua

Tumia chaguo-msingi au bainisha a multiple="multiple"ili kuonyesha chaguo nyingi kwa wakati mmoja.

<chagua>
  <chaguo> 1 </option>
  <chaguo> 2 </option>
  <chaguo> 3 </option>
  <chaguo> 4 </option>
  <chaguo> 5 </option>
</ chagua>
 
<chagua nyingi = "multiple" > 
  <chaguo> 1 </option>
  <chaguo> 2 </option>
  <chaguo> 3 </option>
  <chaguo> 4 </option>
  <chaguo> 5 </option>
</ chagua>

Kupanua vidhibiti vya fomu

Kuongeza juu ya vidhibiti vilivyopo vya kivinjari, Bootstrap inajumuisha vipengele vingine muhimu vya fomu.

Pembejeo zilizotanguliwa na kuongezwa

Ongeza maandishi au vitufe kabla au baada ya ingizo lolote linalotegemea maandishi. Kumbuka kuwa selectvipengele havitumiki hapa.

Chaguo-msingi

Funga .add-onna inputmoja ya madarasa mawili ili kutanguliza au kuambatanisha maandishi kwa ingizo.

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" kishika nafasi = "Jina la mtumiaji" >    
</ div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput" type = "text" >   
  <span class =  "add-on" > .00 </span>
</ div>

Pamoja

Tumia madarasa yote mawili na matukio mawili ya.add-on kutayarisha na kuongezea ingizo.

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput" type = "text" >   
  <span class = "add-on" > .00 </span> 
</ div>

Vifungo badala ya maandishi

Badala ya a <span>na maandishi, tumia a .btnkuambatisha kitufe (au mbili) kwa ingizo.

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton" type = "text" >   
  <button class = "btn" type = "button" > Nenda! </kifungo>  
</ div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons" type = "text" >   
  <button class = "btn" type = "button" > Tafuta </button>  
  <button class = "btn" type = "button" > Chaguo </button>  
</ div>

Vifungo kunjuzi

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton" type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Kitendo
      <span class = "caret" ></span> 
    </kifungo>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </ div>
</ div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Kitendo
      <span class = "caret" ></span> 
    </kifungo>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </ div>
  <input class = "span2" id = "prependedDropdownButton" type = "text" >   
</ div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Kitendo
      <span class = "caret" ></span> 
    </kifungo>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </ div>
  <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Kitendo
      <span class = "caret" ></span> 
    </kifungo>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </ div>
</ div>

Vikundi vya kunjuzi vilivyogawanywa

<fomu>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <input type = "text" > 
  </ div>
  <div class = "input-append" > 
    <input type = "text" > 
    <div class = "btn-group" > ... </div> 
  </ div>
</ fomu>

Tafuta fomu

<form class = "form-search" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Tafuta </button>  
  </ div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Tafuta </button>  
    <input type = "text" class = "span2 search-query" >  
  </ div>
</ fomu>

Kudhibiti ukubwa

Tumia madarasa ya kupima ukubwa kama vile .input-largeau kulinganisha maingizo yako na saizi ya safu wima kwa kutumia .span*madarasa.

Ingiza kiwango cha kuzuia

Fanya kitu chochote <input>au <textarea>kipengee kiwe kama kipengele cha kiwango cha kuzuia.

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Saizi ya jamaa

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Vichwa juu!Katika matoleo yajayo, tutakuwa tukibadilisha matumizi ya madarasa haya ya kuingiza data kulingana na ukubwa wa vitufe vyetu. Kwa mfano, .input-largeitaongeza pedi na saizi ya fonti ya ingizo.

Ukubwa wa gridi

Tumia .span1kwa .span12ingizo zinazolingana na ukubwa sawa wa safu wima za gridi ya taifa.

<input class = "span1" type = "text" kishika nafasi = ".span1" >   
<input class = "span2" type = "text" kishika nafasi = ".span2" >   
<input class = "span3" type = "text" kishika nafasi = ".span3" >   
<select class = "span1" > 
  ...
</ chagua>
<select class = "span2" > 
  ...
</ chagua>
<select class = "span3" > 
  ...
</ chagua>

Kwa pembejeo nyingi za gridi kwa kila mstari, tumia .controls-rowdarasa la kurekebisha kwa nafasi sahihi . Huelea pembejeo ili kukunja nafasi-nyeupe, huweka pambizo zinazofaa, na kusafisha kuelea.

<div class = "vidhibiti" > 
  <input class = "span5" type = "text" kishika nafasi = ".span5" >   
</ div>
<div class = "controls-rows-row" > 
  <input class = "span4" type = "text" kishika nafasi = ".span4" >   
  <input class = "span1" type = "text" kishika nafasi = ".span1" >   
</ div>
...

Ingizo zisizoweza kuhaririwa

Wasilisha data katika fomu ambayo haiwezi kuhaririwa bila kutumia fomula halisi.

<span class = "input-xlarge input-input" > Thamani fulani hapa </span>

Vitendo vya fomu

Maliza fomu na kikundi cha vitendo (vifungo). Inapowekwa ndani ya .form-actions, vitufe vitajipinda kiotomatiki ili kupatana na vidhibiti vya fomu.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > Hifadhi mabadiliko </button>  
  <button type = "button" class = "btn" > Ghairi </button>  
</ div>

Nakala ya usaidizi

Usaidizi wa kiwango cha ndani na cha kuzuia kwa maandishi ya usaidizi yanayoonekana karibu na vidhibiti vya fomu.

Usaidizi wa ndani

<input type = "text" ><span class = "help-inline" > Maandishi ya usaidizi ya ndani </span>

Zuia usaidizi

<input type = "text" ><span class = "help-block" > Kizuizi kirefu cha matini ya usaidizi ambayo huingia kwenye mstari mpya na huenda ikavuka mstari mmoja. </span>

Majimbo ya udhibiti wa fomu

Toa maoni kwa watumiaji au wageni na hali za msingi za maoni kuhusu vidhibiti vya fomu na lebo.

Ingizo la kuzingatia

Tunaondoa outlinemitindo chaguo-msingi kwenye baadhi ya vidhibiti vya fomu na kuweka a box-shadowbadala yake kwa :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Hii imelenga..." >

Ingizo batili

Ingizo za mtindo kupitia utendakazi chaguomsingi wa kivinjari na :invalid. Bainisha type, ongeza requiredsifa ikiwa uga si wa hiari, na (ikiwa inatumika) bainisha pattern.

Hii haipatikani katika matoleo ya Internet Explorer 7-9 kwa sababu ya ukosefu wa usaidizi kwa viteuzi bandia vya CSS.

<input class = "span3" type = "email" inahitajika >

Ingizo zilizozimwa

Ongeza disabledsifa kwenye ingizo ili kuzuia ingizo la mtumiaji na uanzishe mwonekano tofauti kidogo.

<input class = "input-xlarge" id = "disabledInput" type = "text" kishika nafasi = "Ingizo limezimwa hapa..." imezimwa >

Majimbo ya uthibitishaji

Bootstrap inajumuisha mitindo ya uthibitishaji kwa hitilafu, onyo, maelezo na ujumbe wa mafanikio. Ili kutumia, ongeza darasa linalofaa kwa jirani .control-group.

<div class = "control-group onyo" > 
  <label class = "control-label" for = "inputWarning" > Ingizo lenye onyo </label>  
  <div class = "vidhibiti" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Huenda kitu kimeenda vibaya </span> 
  </ div>
</ div>
 
<div class = "control-group error" > 
  <label class = "control-label" for = "inputError" > Ingizo lenye hitilafu </label>  
  <div class = "vidhibiti" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Tafadhali sahihisha hitilafu </span> 
  </ div>
</ div>
 
<div class = "control-group info" > 
  <label class = "control-label" for = "inputInfo" > Ingizo lenye maelezo </label>  
  <div class = "vidhibiti" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Jina la mtumiaji tayari limechukuliwa </span> 
  </ div>
</ div>
 
<div class = "control-group success" > 
  <label class = "control-label" for = "inputSuccess" > Ingizo limefanikiwa </label>  
  <div class = "vidhibiti" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </ div>
</ div>

Vifungo chaguo-msingi

Mitindo ya vifungo inaweza kutumika kwa kitu chochote na .btndarasa kutumika. Hata hivyo, kwa kawaida utataka kutumia hizi kwa pekee <a>na <button>vipengele kwa uwasilishaji bora zaidi.

Kitufe	darasa=""	Maelezo
	`btn`	Kitufe cha kawaida cha kijivu chenye gradient
	`btn btn-primary`	Hutoa uzito wa ziada wa kuona na kubainisha kitendo cha msingi katika seti ya vitufe
	`btn btn-info`	Inatumika kama mbadala kwa mitindo chaguo-msingi
	`btn btn-success`	Inaonyesha hatua iliyofanikiwa au chanya
	`btn btn-warning`	Inaonyesha tahadhari inapaswa kuchukuliwa na hatua hii
	`btn btn-danger`	Huonyesha kitendo hatari au kinachoweza kuwa hasi
	`btn btn-inverse`	Kitufe mbadala cha kijivu giza, kisichofungwa kwa kitendo cha kisemantiki au matumizi
	`btn btn-link`	Sisitiza kitufe kwa kukifanya kionekane kama kiungo huku ukidumisha tabia ya vitufe

Utangamano wa kivinjari

IE9 haipunguzi viwango vya chinichini kwenye pembe za mviringo, kwa hivyo tunaiondoa. Kuhusiana, IE9 inaharibu buttonvipengee vilivyozimwa, ikitoa maandishi ya kijivu na kivuli cha maandishi kibaya ambacho hatuwezi kurekebisha.

Ukubwa wa vifungo

Ungependa vitufe vikubwa au vidogo? Ongeza .btn-large, .btn-small, au .btn-minikwa saizi za ziada.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Kitufe kikubwa </button>  
  <button class = "btn btn-large" type = "button" > Kitufe kikubwa </button>  
</ p>
<p>
  <button class = "btn btn-primary" type = "button" > Kitufe chaguo -msingi </button>  
  <button class = "btn" type = "button" > Kitufe chaguo -msingi </button>  
</ p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Kitufe kidogo </button>  
  <button class = "btn btn-small" type = "button" > Kitufe kidogo </button>  
</ p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Kitufe kidogo </button>  
  <button class = "btn btn-mini" type = "button" > Kitufe kidogo </button>  
</ p>

Unda vitufe vya kiwango cha kuzuia—vile vinavyochukua upana kamili wa mzazi— kwa kuongeza .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > Kitufe cha kuzuia kiwango </button>  
<button class = "btn btn-large btn-block" type = "button" > Kitufe cha kuzuia kiwango </button>

Jimbo la walemavu

Fanya vitufe vionekane visivyobofya kwa kufifisha nyuma 50%.

Kipengele cha nanga

Ongeza .disableddarasa kwa <a>vifungo.

Kiungo cha msingi Kiungo

<a href = "#" class = "btn btn-large btn-primary disabled" > Kiungo msingi </a>  
<a href = "#" class = "btn btn-large disabled" > Kiungo </a>

Vichwa juu!Tunatumia .disabledkama darasa la matumizi hapa, sawa na .activedarasa la kawaida, kwa hivyo hakuna kiambishi awali kinachohitajika. Pia, darasa hili ni la uzuri tu; lazima utumie JavaScript maalum kuzima viungo hapa.

Kitufe kipengele

Ongeza disabledsifa kwa <button>vifungo.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Kitufe cha msingi </button>   
<button type = "button" class = "btn btn-large" imezimwa > Kitufe </button>

Darasa moja, vitambulisho vingi

Tumia .btndarasa kwenye <a>, <button>, au <input>kipengele.

<a class = "btn" href = ""> Kiungo </a> _  
<button class = "btn" type = "submit" > Kitufe </button>  
<input class = "btn" type = "button" value = "Ingizo" >   
<input class = "btn" type = "submit" value = "Wasilisha" >

Kama mazoezi bora, jaribu kulinganisha kipengele cha muktadha wako ili kuhakikisha uwasilishaji unaolingana wa kivinjari. Ikiwa unayo input, tumia <input type="submit">kwa kitufe chako.

Ongeza madarasa kwenye <img>kipengele ili uunde kwa urahisi picha katika mradi wowote.

<img src = "..." class = "img-rounded" >  
<img src = "..." class = "img-circle" >  
<img src = "..." class = "img-polaroid" >

Vichwa juu! .img-roundedna .img-circleusifanye kazi katika IE7-8 kwa sababu ya ukosefu wa border-radiusmsaada.

Aikoni za glyphs

Ikoni 140 katika umbo la sprite, zinapatikana katika kijivu giza (chaguo-msingi) na nyeupe, zinazotolewa na Glyphicons .

icon-kioo
icon-muziki
icon-tafuta
icon-bahasha
icon-moyo
ikoni-nyota
ikoni-nyota-tupu
icon-mtumiaji
icon-filamu
icon-th-kubwa
ikoni-th
icon-th-orodha
ikoni-sawa
icon-ondoa
ikoni-kuza-ndani
ikoni-kuza-nje
icon-off
ishara-ikoni
icon-cog
ikoni-takataka
ikoni-nyumbani
icon-faili
icon-wakati
icon-barabara
ikoni-kupakua-alt
ikoni-kupakua
icon-upload
ikoni-kikasha
icon-play-mduara
ikoni-rudia
icon-onyesha upya
ikoni-orodha-alt
icon-lock
icon-bendera
icon-headphones
ikoni-kiasi-kuzimwa
ikoni-kiasi-chini
icon-kiasi-up
ikoni-qrcode
icon-barcode
icon-tag
icon-tagi
icon-kitabu
ikoni-alamisho
icon-print
ikoni-kamera
ikoni-fonti
icon-bold
ikoni-italiki
icon-text-urefu
icon-text-upana
ikoni-panganisha-kushoto
ikoni-panganisha-katikati
ikoni-panganisha-kulia
icon-align-justify
icon-orodha
ikoni-indent-kushoto
ikoni-indent-kulia
icon-facetime-video
icon-picha
icon-penseli
icon-ramani-alama
ikoni-rekebisha
icon-tint
ikoni-hariri
icon-shiriki
icon-angalia
ikoni-sogeza
icon-hatua-nyuma
ikoni-haraka-nyuma
ikoni-nyuma
icon-play
icon-pause
icon-stop
ikoni-mbele
icon-haraka-mbele
icon-hatua-mbele
icon-toa
ikoni-chevron-kushoto
ikoni-chevron-kulia
icon-plus-saini
icon-minus-saini
ishara-ondoa-saini
ikoni-sawa-saini
icon-swali-ishara
ishara-maelezo-ishara
icon-screenshot
ikoni-ondoa-mduara
ikoni-sawa-mduara
ikoni-marufuku-duara
ikoni-mshale-kushoto
ikoni-mshale-kulia
ikoni-mshale-juu
icon-arrow-down
icon-share-alt
ikoni-resize-imejaa
ikoni-resize-ndogo
icon-plus
icon-minus
ikoni ya nyota
icon-mshangao-ishara
icon-zawadi
icon-jani
icon-moto
ikoni-jicho-wazi
icon-jicho-funga
icon-onyo-ishara
icon-ndege
icon-kalenda
icon-nasibu
icon-maoni
ikoni-sumaku
icon-chevron-up
ikoni-chevron-chini
icon-retweet
icon-shopping-cart
ikoni-folda-funga
icon-folda-wazi
ikoni-resize-wima
ikoni-resize-usawa
ikoni-hdd
icon-bullhorn
ikoni-kengele
icon-cheti
icon-gumba-up
icon-domba-chini
ikoni-mkono-kulia
ikoni-mkono-kushoto
icon-mkono-up
ikoni-chini
ikoni-mduara-mshale-kulia
ikoni-duara-mshale-kushoto
ikoni-mduara-mshale-juu
ikoni-mduara-mshale-chini
icon-globe
icon-wrench
icon-kazi
kichujio cha ikoni
icon-briefcase
ikoni ya skrini nzima

Maelezo ya Glyphicons

Glyphicons Halflings kwa kawaida haipatikani bila malipo, lakini mpangilio kati ya Bootstrap na waundaji wa Glyphicons umewezesha hili bila gharama yoyote kwako kama wasanidi. Kama shukrani, tunakuomba ujumuishe kiungo cha hiari cha kurudi kwenye Glyphicons wakati wowote inapowezekana.

Jinsi ya kutumia

Aikoni zote zinahitaji <i>lebo iliyo na darasa la kipekee, iliyoangaziwa na icon-. Ili kutumia, weka nambari ifuatayo karibu popote:

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

Pia kuna mitindo inayopatikana kwa ikoni zilizogeuzwa (nyeupe), zilizotengenezwa tayari na darasa moja la ziada. Tutatekeleza darasa hili la kuelea na hali amilifu kwa viungo vya nav na kunjuzi.

<i class = "ikoni-ya utafutaji ikoni-nyeupe" ></i>

Vichwa juu!Unapotumia kando ya mifuatano ya maandishi, kama vile vitufe au viungo vya nav, hakikisha kuwa umeacha nafasi baada ya <i>lebo kwa nafasi ifaayo.

Mifano ya ikoni

Zitumie katika vitufe, vikundi vya vitufe kwa upau wa vidhibiti, usogezaji, au ingizo za fomu zilizotangulizwa.

Vifungo

Kikundi cha kitufe kwenye upau wa vidhibiti

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </ div>
</ div>

Kunjuzi katika kikundi cha vitufe

Mtumiaji

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Mtumiaji </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "dropdown-menu" > 
    <li><a href = "#" ><i class = "icon-penseli" ></i> Hariri </a></li>  
    <li><a href = "#" ><i class = "ikoni-takataka" ></i> Futa </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Piga marufuku </a></li>  
    <li class = "divider" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Weka msimamizi </a></li>  
  </ul>
</ div>

Ukubwa wa vifungo

Nyota Nyota Nyota

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Star </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Star </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Star </a>

Urambazaji

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Nyumbani </a></li>   
  <li><a href = "#" ><i class = "ikoni-kitabu" ></i> Maktaba </a></li>  
  <li><a href = "#" ><i class = "icon-penseli" ></i> Maombi </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Misc </a></li>  
</ul>

Viwanja vya fomu

<div class = "control-group" > 
  <label class = "control-label" for = "inputIcon" > Anwani ya barua pepe </label>  
  <div class = "vidhibiti" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "ikoni-bahasha" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </ div>
  </ div>
</ div>

Uchapaji

Vichwa

h1. Kichwa 1

h2. Kichwa cha 2

h3. Kichwa cha 3

h4. Kichwa cha 4

h5. Kichwa cha 5

h6. Kichwa cha 6

Nakala ya mwili

Nakala ya mwili inayoongoza

Imejengwa kwa Chini

Mkazo

<small>

Ujasiri

Italiki

Madarasa ya upatanishi

Madarasa ya kusisitiza

Vifupisho

<abbr>

<abbr class="initialism">

Anwani

<address>

Nukuu za kuzuia

Nukuu chaguomsingi ya kuzuia

Chaguo za dondoo za kuzuia

Kutaja chanzo

Maonyesho mbadala

Orodha

Haijaagizwa

Imeagizwa

Isiyo na mtindo

Katika mstari

Maelezo

Maelezo ya mlalo

Kanuni

Katika mstari

Kizuizi cha msingi

Majedwali

Mitindo chaguomsingi

Madarasa ya hiari

.table-striped

.table-bordered

.table-hover

.table-condensed

Madarasa ya safu mlalo ya hiari

Alama ya jedwali inayotumika

Fomu

Mitindo chaguomsingi

Mipangilio ya hiari

Tafuta fomu

Fomu ya ndani

Fomu ya usawa

Vidhibiti vya fomu vinavyotumika

Ingizo

Eneo la maandishi

Visanduku vya kuteua na redio

Chaguomsingi (imerundikwa)

Visanduku vya kuteua vya ndani

Inachagua

Kupanua vidhibiti vya fomu

Pembejeo zilizotanguliwa na kuongezwa

Chaguo-msingi

Pamoja

Vifungo badala ya maandishi

Vifungo kunjuzi

Vikundi vya kunjuzi vilivyogawanywa

Tafuta fomu

Kudhibiti ukubwa

Ingiza kiwango cha kuzuia

Saizi ya jamaa

Ukubwa wa gridi

Ingizo zisizoweza kuhaririwa

Vitendo vya fomu

Nakala ya usaidizi

Usaidizi wa ndani

Zuia usaidizi

Majimbo ya udhibiti wa fomu

Ingizo la kuzingatia

Ingizo batili

Ingizo zilizozimwa

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`