Tit

Tout tit HTML <h1>yo <h6>disponib.

h1. Tit 1

h2. Tit 2

h3. Tit 3

h4. Tit 4

h5. Tit 5

h6. Tit 6

Kopi kò

Defo global Bootstrap a font-sizese 14px , ak line-heightyon 20px . Sa a se aplike nan <body>ak tout paragraf yo. Anplis de sa, <p>(paragraf) resevwa yon maj anba mwatye wotè liy yo (10px pa default).

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

Cum sociis natoque penatibus ak magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Men, li pa gen okenn komodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Mecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Men, li pa gen okenn komodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Plon kò kopi

Fè yon paragraf parèt deyò lè w ajoute .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lè sa a, se pa yon bagay ki pa fasil.

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

Bati ak mwens

Echèl tipografik la baze sou de MWEN varyab nan varyab.less : @baseFontSizeak @baseLineHeight. Premye a se gwosè font de baz yo itilize nan tout e dezyèm lan se wotè liy debaz la. Nou itilize varyab sa yo ak kèk matematik senp pou kreye maj yo, paddings, ak liy-wotè nan tout kalite nou yo ak plis ankò. Customize yo epi Bootstrap adapte yo.

Anfaz

Sèvi ak etikèt default HTML anfaz ak estil ki lejè.

`<small>`

Pou de-aksantye sou liy oswa blòk tèks, sèvi ak ti tag la.

Liy tèks sa a vle di ke yo dwe trete kòm bèl lèt.

<p> <small> Liy tèks sa a fèt pou yo trete l kòm bèl lèt. </small> </p>

Bold

Pou mete aksan sou yon ti bout tèks ak yon pwa ki pi lou.

Fragman tèks sa a ap rann kòm tèks fonse .

<strong> rann kòm tèks fonse </strong>

Italik

Pou mete aksan sou yon ti bout tèks ak italik.

Fragman tèks sa a ap rann kòm tèks italik .

<em> rann kòm tèks italik </em>

Tèt leve!Ou lib pou itilize <b>ak <i>nan HTML5. <b>se vle di yo mete aksan sou mo oswa fraz san yo pa transmèt plis enpòtans pandan y ap <i>se sitou pou vwa, tèm teknik, elatriye.

Klas aliyman

Fasil reyaliye tèks nan eleman ak klas aliyman tèks.

Tèks ki aliye agoch.

Sant aliye tèks.

Tèks ki aliyen dwat.

<p class = "text-left" > Tèks ki aliye sou goch. </p> 
<p class = "text-center" > Sant aliye tèks. </p> 
<p class = "text-right" > Tèks ki aliye adwat. </p>

Klas anfaz

Transmèt siyifikasyon atravè koulè ak yon ti ponyen klas itilite anfaz.

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.

Men, li pa gen okenn bagay ki konfòm, li pa gen okenn bagay ki pa fasil pou li.

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor 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, is not commodo luctus, nisi erat porttitor ligula. </p>

Abreviyasyon yo

Enplemantasyon stilize nan <abbr>eleman HTML pou abrevyasyon ak akwonim yo montre vèsyon an elaji sou hover. Abreviyasyon ak yon titleatribi gen yon fwontyè anba limyè pwentiye ak yon kurseur èd sou hover, ki bay kontèks adisyonèl sou hover.

`<abbr>`

Pou tèks elaji sou hover long nan yon abrevyasyon, enkli titleatribi a.

Yon abrevyasyon mo atribi se attr .

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

`<abbr class="initialism">`

Ajoute .initialismnan yon abrevyasyon pou yon ti kras pi piti gwosè font.

HTML se pi bon bagay depi tranche pen.

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

Adrès

Prezante enfòmasyon kontak pou zansèt ki pi pre a oswa tout kò travay la.

`<address>`

Konsève fòma lè w fini tout liy yo ak <br>.

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

Non konplè
[email protected]

<adrès>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  San Francisco, CA 94107 <br>
  <abbr title = "Telefòn" > P: </abbr> (123) 456-7890 
</adrès>
 
<adrès>
  <strong> Non konplè </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</adrès>

Blockquotes

Pou site blòk kontni ki soti nan yon lòt sous nan dokiman w la.

Default blockquote

Anvlope <blockquote>nenpòt HTML kòm quote la. Pou quotes dwat nou rekòmande yon <p>.

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

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
</blockquote>

Opsyon Blockquote

Style ak chanjman kontni pou varyasyon senp sou yon blockquote estanda.

Bay non yon sous

Ajoute <small>tag pou idantifye sous la. Mete non travay sous la nan <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Yon moun ki pi popilè nan Tit Sous

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  <small> Yon moun ki pi popilè <cite title = "Source Title" > Sous Tit </cite></small> 
</blockquote>

Ekspozisyon altène

Sèvi ak .pull-rightpou yon flote, adwat-aliyen blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Yon moun ki pi popilè nan Tit Sous

<blockquote class = "rale-dwa" > 
  ...
</blockquote>

Lis

San lòd

Yon lis atik nan ki lòd la pa klèman enpòtan.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis nan 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>

Kòmande

Yon lis atik nan ki lòd la fè klèman enpòtan.

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

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

Unstyled

Retire defo list-styleak bò gòch padding sou atik lis (timoun imedya sèlman).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis nan 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>

Nan liy

Mete tout atik lis yo sou yon sèl liy ak inline-blockkèk limyè padding.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Deskripsyon

Yon lis tèm ak deskripsyon ki asosye yo.

Lis deskripsyon yo: Yon lis deskripsyon pafè pou defini tèm.
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>

Orizontal deskripsyon

Fè tèm ak deskripsyon nan <dl>liy kòt a kòt.

Lis deskripsyon yo: Yon lis deskripsyon pafè pou defini tèm.
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 ak cursus commodo, torttor mauris condimentum nibh, ut fermentum massa jis pou chita amet risus.

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

Tèt leve!Lis deskripsyon orizontal yo pral tronpe tèm ki twò long pou antre nan ranje kolòn gòch la text-overflow. Nan vi ki pi etwat yo, yo pral chanje nan Layout default anpile.

Nan liy

Vlope fragman nan kòd ak <code>.

Pou egzanp, <section>yo ta dwe vlope kòm inline.

Pa egzanp , <code> & lt ; seksyon & gt ;</ code > ta dwe vlope kòm aliye .

Blòk debaz

Itilize <pre>pou plizyè liy kòd. Asire ou ke ou chape anba nenpòt parantèz ang nan kòd la pou rann apwopriye.

<p>Egzanp tèks isit la...</p>

<pre>
  <p>Egzanp tèks isit la...</p>
</pre>

Tèt leve!Asire w ke w kenbe kòd nan <pre>tags pi pre gòch la ke posib; li pral rann tout onglet.

Opsyonèlman, ou ka ajoute .pre-scrollableklas la ki pral mete yon wotè maksimòm de 350px epi bay yon defile aks y.

Estil default

Pou manier debaz - padding limyè ak divizyon orizontal sèlman - ajoute klas debaz la .tablenan nenpòt <table>.

#	Premye Non	Siyati	Non itilizatè
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@twitter

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

Klas opsyonèl

Ajoute nenpòt nan klas sa yo nan .tableklas debaz la.

`.table-striped`

Ajoute zebra-striping nan nenpòt ranje tab la <tbody>atravè :nth-childseleksyon CSS la (pa disponib nan IE7-8).

#	Premye Non	Siyati	Non itilizatè
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry	Zwazo a	@twitter

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

`.table-bordered`

Ajoute fwontyè ak kwen awondi sou tab la.

#	Premye Non	Siyati	Non itilizatè
1	Mak	Otto	@mdo
1	Mak	Otto	@getbootstrap
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

<tab class = "tab tab-borde" > 
  …
</tab>

`.table-hover`

Pèmèt yon eta hover sou ranje tab nan yon <tbody>.

#	Premye Non	Siyati	Non itilizatè
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

`.table-condensed`

Fè tab yo plis kontra enfòmèl ant pa koupe selil padding an mwatye.

#	Premye Non	Siyati	Non itilizatè
1	Mak	Otto	@mdo
2	Jakòb	Thornton	@grès
3	Larry zwazo a		@twitter

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

Klas ranje opsyonèl

Sèvi ak klas kontèks pou koulè ranje tab yo.

Klas	Deskripsyon
`.success`	Endike yon aksyon siksè oswa pozitif.
`.error`	Endike yon aksyon danjere oswa potansyèlman negatif.
`.warning`	Endike yon avètisman ki ta ka bezwen atansyon.
`.info`	Itilize kòm yon altènativ a estil yo default.

#	Pwodwi	Peman yo pran	Estati
1	TB - Chak mwa	01/04/2012	Apwouve
2	TB - Chak mwa	02/04/2012	Te refize
3	TB - Chak mwa	03/04/2012	annatant
4	TB - Chak mwa	04/04/2012	Rele pou konfime

...
  < tr class = "siksè" >
    <td> 1 < /td>
    <td>TB - Chak mwa</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>Apwouve</ td >
  </ tr >
...

Sipòte makè tab la

Lis eleman HTML yo sipòte ak kijan yo ta dwe itilize.

Tag	Deskripsyon
`<table>`	Eleman anbalaj pou montre done nan yon fòma tabular
`<thead>`	Eleman veso pou ranje header tab ( `<tr>`) pou make kolòn tab yo
`<tbody>`	Eleman veso pou ranje tab ( `<tr>`) nan kò tab la
`<tr>`	Eleman veso pou yon seri selil tab ( `<td>`oswa `<th>`) ki parèt sou yon sèl ranje
`<td>`	Selil tab default
`<th>`	Selil tab espesyal pou etikèt kolòn (oswa ranje, depann sou dimansyon ak plasman).
`<caption>`	Deskripsyon oswa rezime sa ki tab la kenbe, espesyalman itil pou lektè ekran yo

<tab>
  <caption> ... </caption>
  <tèt>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</tab>

Estil default

Kontwòl fòm endividyèl yo resevwa style, men san yo pa nenpòt klas de baz obligatwa sou <form>chanjman an oswa gwo nan maketing. Rezilta nan anpile, etikèt ki aliye sou bò gòch sou tèt kontwòl fòm yo.

<fòm>
  <fieldset>
    <lejand> Lejand </lejand>
    <label> Non etikèt </label>
    <input type = "text" placeholder = "Tape yon bagay..." >  
    <span class = "help-block" > Egzanp tèks èd nan nivo blòk isit la. </span> 
    <label class = "kazye" > 
      <input type = "checkbox" > Tcheke mwen 
    </label>
    <button type = "submit" class = "btn" > Soumèt </button>  
  </fieldset>
</form>

Layout si ou vle

Enkli ak Bootstrap gen twa fòm opsyonèl pou ka itilize komen.

Fòm rechèch

Ajoute .form-searchnan fòm lan ak .search-querynan <input>pou yon antre tèks siplemantè awondi.

<form class = "form-search" > 
  <input type = "text" class = "antre-mwayen rechèch-rekèt" >  
  <button type = "submit" class = "btn" > Rechèch </button>  
</form>

Fòm Inline

Ajoute .form-inlinepou etikèt ki aliye agoch ak kontwòl blòk an liy pou yon layout kontra enfòmèl ant.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Imel" >   
  < type input = "modpas" class = "input-small" placeholder = "Modpas" >   
  <label class = "kazye" > 
    <input type = "checkbox" > Sonje m 
  </label>
  <button type = "submit" class = "btn" > Konekte </button>  
</form>

Fòm orizontal

Dwa aliman etikèt yo epi flote yo sou bò gòch la pou fè yo parèt sou menm liy ak kontwòl yo. Egzije chanjman ki pi make nan yon fòm default:

Ajoute .form-horizontalnan fòm lan
Anvlope etikèt ak kontwòl yo nan.control-group
Ajoute .control-labelsou etikèt la
Vlope nenpòt kontwòl ki asosye yo nan .controlsaliyman apwopriye

<form class = "form-orizontal" > 
  <div class = "gwoup kontwòl" > 
    <label class = "control-label" for = "inputEmail" > Imèl </label>  
    <div class = "kontwòl" > 
      <input type = "text" id = "inputEmail" placeholder = "Imel" >   
    </div>
  </div>
  <div class = "gwoup kontwòl" > 
    <label class = "control-label" for = "inputPassword" > Modpas </label>  
    <div class = "kontwòl" > 
      < type input = "modpas" id = "inputPassword" placeholder = "Modpas" >   
    </div>
  </div>
  <div class = "gwoup kontwòl" > 
    <div class = "kontwòl" > 
      <label class = "kazye" > 
        <input type = "checkbox" > Sonje m 
      </label>
      <button type = "submit" class = "btn" > Konekte </button>  
    </div>
  </div>
</form>

Sipòte kontwòl fòm

Egzanp kontwòl fòm estanda sipòte nan yon layout fòm egzanp.

Antre

Ki pi komen kontwòl fòm, tèks ki baze sou jaden D '. Gen ladann sipò pou tout kalite HTML5: tèks, modpas, datetime, datetime-lokal, dat, mwa, lè, semèn, nimewo, imèl, url, rechèch, tel, ak koulè.

Mande pou itilize yon espesifye typetout tan.

<input type = "text" placeholder = "Tèks antre" >

Textarea

Kontwòl fòm ki sipòte plizyè liy tèks. Chanje rowsatribi jan sa nesesè.

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

Case ak radyo

Bwat yo se pou chwazi youn oswa plizyè opsyon nan yon lis pandan ke radyo yo se pou chwazi yon opsyon nan plizyè.

Default (anpille)

<label class = "kazye" > 
  < type input = "checkbox" valè = "" >  
  Opsyon youn se sa a ak sa—asire w ou mete poukisa li gwo
</label>
 
<label class = "radyo" > 
  < type input = "radio" name = "optionsRadios" id = "optionsRadios1" valè = "option1" tcheke >     
  Opsyon youn se sa a ak sa—asire w ou mete poukisa li gwo
</label>
<label class = "radyo" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" valè = "option2" >    
  Opsyon de ka yon lòt bagay epi chwazi li pral deselect opsyon youn
</label>

Bwat aliye yo

Ajoute .inlineklas la nan yon seri kaz oswa radyo pou kontwòl ki parèt sou menm liy lan.

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

Chwazi

Sèvi ak opsyon default la oswa presize yon multiple="multiple"pou montre plizyè opsyon an menm tan.

<chwazi>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <opsyon> 4 </opsyon>
  <opsyon> 5 </opsyon>
</select>
 
<chwazi miltip = "miltip" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <opsyon> 4 </opsyon>
  <opsyon> 5 </opsyon>
</select>

Pwolonje kontwòl fòm yo

Ajoute sou kontwòl navigatè ki egziste deja yo, Bootstrap gen ladan lòt konpozan fòm itil.

Antre apwofondi ak ajoute

Ajoute tèks oswa bouton anvan oswa apre nenpòt opinyon ki baze sou tèks. Remake byen ke selecteleman yo pa sipòte isit la.

Opsyon default

Anvlope yon .add-onak yon inputak youn nan de klas yo pou mete tèks devan oswa ajoute nan yon opinyon.

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" tip = "tèks" placeholder = "Non itilizatè" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput" tip = "tèks" >   
  <span class = "add-on" > .00 </span> 
</div>

Konbine

Sèvi ak tou de klas yo ak de egzanp .add-onpou ajoute ak ajoute yon opinyon.

<div class = "antre-prepend antre-ananse" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput" tip = "tèks" >   
  <span class = "add-on" > .00 </span> 
</div>

Bouton olye de tèks

Olye de yon <span>ak tèks, sèvi ak yon .btnpou tache yon bouton (oswa de) nan yon opinyon.

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton" tip = "tèks" >   
  <button class = "btn" type = "bouton" > Ale! </boutton>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons" tip = "tèks" >   
  <button class = "btn" type = "button" > Rechèch </button>  
  <button class = "btn" type = "button" > Opsyon </button>  
</div>

Bouton dropdowns

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton" tip = "tèks" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Aksyon
      <span class = "caret" ></span> 
    </boutton>
    <ul class = "meni dewoulman" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Aksyon
      <span class = "caret" ></span> 
    </boutton>
    <ul class = "meni dewoulman" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" tip = "tèks" >   
</div>

<div class = "antre-prepend antre-ananse" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Aksyon
      <span class = "caret" ></span> 
    </boutton>
    <ul class = "meni dewoulman" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton" tip = "tèks" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Aksyon
      <span class = "caret" ></span> 
    </boutton>
    <ul class = "meni dewoulman" > 
      ...
    </ul>
  </div>
</div>

Gwoup dropdown ki segmante

<fòm>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    < tip antre = "tèks" > 
  </div>
  <div class = "input-append" > 
    < tip antre = "tèks" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Fòm rechèch

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

Kontwole gwosè

Sèvi ak klas relatif gwosè tankou .input-largeoswa matche ak antre ou yo ak gwosè kolòn kadriyaj yo lè l sèvi avèk .span*klas yo.

Blòk nivo entrées

Fè nenpòt <input>oswa <textarea>eleman konpòte tankou yon eleman nivo blòk.

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

Gwosè relatif

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

Tèt leve!Nan pwochen vèsyon, nou pral chanje itilizasyon klas opinyon relatif sa yo pou matche ak gwosè bouton nou an. Pou egzanp, .input-largepral ogmante padding a ak gwosè font nan yon opinyon.

Kadriyaj gwosè

Sèvi .span1ak .span12pou antre ki matche ak menm gwosè kolòn kadriyaj yo.

<antre klas = "span1" tip = "tèks" plasè = ".span1" >   
<input class = "span2" tip = "tèks" plasè = ".span2" >   
<input class = "span3" tip = "tèks" plasè = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</select>

Pou plizyè kadriyaj pou chak liy, sèvi ak .controls-rowklas modifikatè a pou bon espas . Li flote entrain yo efondre espas blan, mete maj apwopriye yo, epi netwaye flote a.

<div class = "kontwòl" > 
  <input class = "span5" tip = "tèks" plasè = ".span5" >   
</div>
<div class = "kontwole kontwòl-ranje" > 
  <input class = "span4" tip = "tèks" plasè = ".span4" >   
  <antre klas = "span1" tip = "tèks" plasè = ".span1" >   
</div>
...

Antre ki pa ka modifye

Prezante done yo nan yon fòm ki pa ka modifye san yo pa sèvi ak mak aktyèl fòm.

<span class = "input-xlarge uneditable-input" > Gen kèk valè isit la </span>

Fòme aksyon yo

Fini yon fòm ak yon gwoup aksyon (bouton). Lè yo mete yo nan yon .form-actions, bouton yo pral otomatikman endent nan liy ak kontwòl fòm yo.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > Sove chanjman yo </button>  
  <button type = "button" class = "btn" > Anile </button>  
</div>

Ede tèks

Inline ak blòk nivo sipò pou tèks èd ki parèt alantou kontwòl fòm yo.

Èd Inline

<input type = "text" ><span class = "help-inline" > Tèks èd nan liy </span>

Bloke èd

<input type = "text" ><span class = "help-block" > Yon blòk tèks èd ki pi long ki kase sou yon nouvo liy epi ki ka pwolonje pi lwen pase yon liy. </span>

Eta kontwòl fòm

Bay opinyon itilizatè yo oswa vizitè yo ak eta debaz fidbak sou kontwòl fòm ak etikèt.

Antre konsantre

Nou retire estil default outlineyo sou kèk kontwòl fòm epi aplike yon box-shadownan plas li pou :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Sa a konsantre..." >

Antre envalid

Antre style atravè fonksyonalite navigatè default ak :invalid. Espesifye yon type, ajoute requiredatribi a si jaden an pa opsyonèl, epi (si sa aplikab) presize yon pattern.

Sa a pa disponib nan vèsyon Internet Explorer 7-9 akòz mank sipò pou seleksyon pseudo CSS.

<input class = "span3" type = "imel" obligatwa >

Enfim entrées

Ajoute disabledatribi a sou yon opinyon pou anpeche opinyon itilizatè a epi deklanche yon gade yon ti kras diferan.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Enfim antre isit la..." enfim >

Validasyon eta yo

Bootstrap gen ladan estil validation pou mesaj erè, avètisman, enfòmasyon ak siksè. Pou itilize, ajoute klas ki apwopriye a nan vwazinaj la .control-group.

<div class = "avètisman gwoup kontwòl" > 
  <label class = "control-label" for = "inputWarning" > Antre ak avètisman </label>  
  <div class = "kontwòl" > 
    < type input = "tèks" id = "inputWarning" >  
    <span class = "help-inline" > Gen yon bagay ki ka pase mal </span> 
  </div>
</div>
 
<div class = "Erè gwoup kontwòl" > 
  <label class = "control-label" for = "inputError" > Antre ak erè </label>  
  <div class = "kontwòl" > 
    < type input = "tèks" id = "inputError" >  
    <span class = "help-inline" > Tanpri korije erè a </span> 
  </div>
</div>
 
<div class = "enfomasyon gwoup kontwòl" > 
  <label class = "control-label" for = "inputInfo" > Antre ak enfòmasyon </label>  
  <div class = "kontwòl" > 
    < type input = "tèks" id = "inputInfo" >  
    <span class = "help-inline" > Non itilizatè a deja pran </span> 
  </div>
</div>
 
<div class = "siksè gwoup kontwòl" > 
  <label class = "control-label" for = "inputSuccess" > Antre ak siksè </label>  
  <div class = "kontwòl" > 
    < type input = "tèks" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

Bouton default

Styles bouton yo ka aplike nan nenpòt bagay ak .btnklas la aplike. Sepandan, tipikman ou pral vle aplike sa yo sèlman <a>ak <button>eleman pou rann nan pi bon.

Bouton	klas=""	Deskripsyon
	`btn`	Bouton gri estanda ak gradyan
	`btn btn-primary`	Bay plis pwa vizyèl epi idantifye aksyon prensipal la nan yon seri bouton
	`btn btn-info`	Itilize kòm yon altènativ a estil yo default
	`btn btn-success`	Endike yon aksyon siksè oswa pozitif
	`btn btn-warning`	Endike yo ta dwe pran prekosyon ak aksyon sa a
	`btn btn-danger`	Endike yon aksyon danjere oswa potansyèlman negatif
	`btn btn-inverse`	Altène bouton gri fonse, pa mare nan yon aksyon semantik oswa itilize
	`btn btn-link`	Deemphasize yon bouton pa fè li sanble yon lyen pandan w ap kenbe konpòtman bouton

Cross navigatè konpatibilite

IE9 pa koupe gradyan background sou kwen awondi, kidonk nou retire li. Ki gen rapò, IE9 jankifies buttoneleman ki andikape, rann tèks gri ak yon lonbraj tèks anbarasan ke nou pa ka ranje.

Gwosè bouton

Anpenpan bouton ki pi gwo oswa pi piti? Ajoute .btn-large, .btn-small, oswa .btn-minipou gwosè adisyonèl.

<p>
  <button class = "btn btn-large btn-primary" type = "bouton" > Gwo bouton </button>  
  <button class = "btn btn-large" type = "bouton" > Gwo bouton </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "bouton" > Bouton Default </button>  
  <button class = "btn" type = "button" > Bouton par défaut </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "bouton" > Ti bouton </button>  
  <button class = "btn btn-small" type = "bouton" > Ti bouton </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "bouton" > Mini bouton </button>  
  <button class = "btn btn-mini" type = "bouton" > Mini bouton </button>  
</p>

Kreye bouton nivo blòk - sa yo ki kouvri tout lajè yon paran - lè w ajoute .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "bouton" > Bouton nivo blòk </button>  
<button class = "btn btn-large btn-block" type = "bouton" > Bouton nivo blòk </button>

Eta andikape

Fè bouton yo gade unclickable pa fading yo tounen 50%.

Eleman jete lank

Ajoute .disabledklas la nan <a>bouton.

Prensipal lyen Link

<a href = "#" class = "btn btn-large btn-primary disabled" > Lyen prensipal </a>  
<a href = "#" class = "btn btn-large disabled" > Lyen </a>

Tèt leve!Nou itilize .disabledkòm yon klas sèvis piblik isit la, menm jan ak klas la komen .active, kidonk pa gen okenn prefiks obligatwa. Epitou, klas sa a se sèlman pou ayestetik; ou dwe itilize JavaScript koutim pou enfim lyen isit la.

Eleman bouton

Ajoute disabledatribi a nan <button>bouton.

<button type = "bouton" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Bouton prensipal </button>   
<button type = "bouton" class = "btn btn-large" andikape > Bouton </boutton>

Yon klas, plizyè tags

Sèvi ak .btnklas la sou yon <a>, <button>, oswa <input>eleman.

<a class = "btn" href = "" > Lyen </a>  
<button class = "btn" type = "submit" > Bouton </button>  
<input class = "btn" tip = "bouton" value = "Entre" >   
<input class = "btn" tip = "soumèt" valè = "Soumèt" >

Kòm yon pi bon pratik, eseye matche ak eleman an pou kontèks ou a asire matche rann kwa-navigatè. Si ou gen yon input, sèvi ak yon <input type="submit">pou bouton ou a.

Ajoute klas nan yon <img>eleman fasilman style imaj nan nenpòt pwojè.

<img src = "..." klas = "img-awondi" >  
<img src = "..." klas = "img-sèk" >  
<img src = "..." klas = "img-polaroid" >

Tèt leve! .img-roundedepi .img-circleyo pa travay nan IE7-8 akòz mank border-radiussipò.

Glif icon

140 ikon nan fòm luten, ki disponib nan gri fonse (default) ak blan, ki bay Glyphicons .

icon-vè
icon-mizik
icon-rechèch
icon-anvlòp
icon-kè
icon-zetwal
icon-star-vid
icon-itilizatè
icon-fim
icon-th-gwo
icon-th
icon-th-list
icon-ok
icon-retire
icon-zoom-an
icon-zoom-out
icon-off
icon-siyal
icon-cog
icon-fatra
icon-kay
ikon-fichye
icon-tan
icon-wout
icon-download-alt
ikon-telechaje
icon-upload
icon-inbox
icon-jwe-sèk
icon-repete
icon-refresh
icon-list-alt
icon-lock
icon-drapo
icon-kas ekoutè
icon-volim-off
icon-volim-desann
icon-volim-up
icon-qrcode
icon-kod bar
icon-tag
icon-tag
icon-liv
icon-markèt
icon-print
icon-kamera
icon-font
icon-gras
icon-italik
icon-tèks-wotè
icon-tèks-lajè
icon-align-left
icon-align-center
icon-align-dwat
icon-align-justify
icon-lis
icon-indent-gòch
icon-indent-dwa
icon-facetime-videyo
icon-foto
icon-kreyon
icon-map-marker
icon-ajiste
icon-tint
icon-edit
icon-pataje
icon-tcheke
icon-deplase
icon-step-backward
icon-vit-bak
icon-an bak
icon-jwe
icon-poz
icon-sispann
icon-pi devan
icon-vit-pi devan
icon-etap-pi devan
icon-ejecter
icon-chevron-gòch
icon-chevron-dwat
icon-plis-siy
icon-mwens-siy
icon-retire-siy
icon-ok-siy
icon-kesyon-siy
icon-info-siy
icon-ekran
icon-retire-sèk
icon-ok-sèk
icon-entèdiksyon-sèk
icon-flèch-gòch
icon-flèch-dwat
icon-flech-up
icon-flèch-desann
icon-share-alt
icon-resize-plen
icon-resize-ti
icon-plis
icon-mwens
icon-asterisk
icon-siy-eksklamasyon
icon-kado
icon-fèy
icon-dife
icon-je-louvri
icon-je-fèmen
icon-siy-avètisman
icon-avyon
icon-kalandriye
icon-o aza
icon-kòmantè
icon-eman
icon-chevron-up
icon-chevron-desann
icon-retweet
icon-shopping-cart
icon-dosye-fèmen
icon-dosye-louvri
icon-resize-vètikal
icon-resize-orizontal
icon-hdd
icon-bullhorn
icon-kloch
icon-sètifika
icon-pous-up
icon-pous-desann
icon-men-dwat
icon-men-gòch
icon-men-up
icon-men-desann
icon-sèk-flèch-dwa
icon-sèk-flèch-gòch
icon-sèk-flèch-up
icon-sèk-flèch-desann
icon-globe
icon-kle
icon-travay
icon-filtre
icon-sèk
icon-fulscreen

Atribisyon Glyphicons

Glyphicons Halflings yo nòmalman pa disponib gratis, men yon aranjman ant Bootstrap ak Glyphicons kreyatè yo te rann sa posib gratis pou ou kòm devlopè. Kòm yon di ou mèsi, nou mande w mete yon lyen opsyonèl tounen nan Glyphicons nenpòt lè pratik.

Kouman pou itilize

Tout ikon mande pou yon <i>tag ak yon klas inik, prefiks ak icon-. Pou itilize, mete kòd sa a jis sou nenpòt kote:

<i klas = "ikon-rechèch" ></i>

Genyen tou estil ki disponib pou envèse (blan) ikon, prepare ak yon klas siplemantè. Nou pral espesyalman aplike klas sa a sou eta aktif ak eta aktif pou lyen navigasyon ak dropdown.

<i klas = "icon-rechèch icon-blan" ></i>

Tèt leve!Lè w ap itilize akote kòd tèks, tankou nan bouton oswa lyen navigasyon, asire w ke ou kite yon espas apre <i>tag la pou espas apwopriye.

Egzanp ikon yo

Sèvi ak yo nan bouton, gwoup bouton pou yon ba ikòn, navigasyon, oswa antre fòm avan.

Bouton

Gwoup bouton nan yon ba ikòn bouton

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

Dropdown nan yon gwoup bouton

Itilizatè

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-itilizatè icon-white" ></i> Itilizatè </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "meni dewoulman" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> Edit </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Efase </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Ban </a></li>  
    <li class = "divider" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Fè admin </a></li>  
  </ul>
</div>

Gwosè bouton

Star Star Star

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

Navigasyon

<ul class = "nav nav-list" > 
  <li klas = "aktif" ><a href = "#" ><i klas = "icon-home icon-white" ></i> Kay </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Bibliyotèk </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Aplikasyon </a></li>  
  <li><a href = "#" ><i klas = "i" ></i> Divers </a></li>  
</ul>

Fòm jaden yo

<div class = "gwoup kontwòl" > 
  <label class = "control-label" for = "inputIcon" > Adrès imèl </label>  
  <div class = "kontwòl" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i klas = "ikon-anvlòp" ></i></span>  
      <input class = "span2" id = "inputIcon" tip = "tèks" >   
    </div>
  </div>
</div>

Tipografi

Tit

h1. Tit 1

h2. Tit 2

h3. Tit 3

h4. Tit 4

h5. Tit 5

h6. Tit 6

Kopi kò

Plon kò kopi

Bati ak mwens

Anfaz

<small>

Bold

Italik

Klas aliyman

Klas anfaz

Abreviyasyon yo

<abbr>

<abbr class="initialism">

Adrès

<address>

Blockquotes

Default blockquote

Opsyon Blockquote

Bay non yon sous

Ekspozisyon altène

Lis

San lòd

Kòmande

Unstyled

Nan liy

Deskripsyon

Orizontal deskripsyon

Kòd

Nan liy

Blòk debaz

Tablo

Estil default

Klas opsyonèl

.table-striped

.table-bordered

.table-hover

.table-condensed

Klas ranje opsyonèl

Sipòte makè tab la

Fòm

Estil default

Layout si ou vle

Fòm rechèch

Fòm Inline

Fòm orizontal

Sipòte kontwòl fòm

Antre

Textarea

Case ak radyo

Default (anpille)

Bwat aliye yo

Chwazi

Pwolonje kontwòl fòm yo

Antre apwofondi ak ajoute

Opsyon default

Konbine

Bouton olye de tèks

Bouton dropdowns

Gwoup dropdown ki segmante

Fòm rechèch

Kontwole gwosè

Blòk nivo entrées

Gwosè relatif

Kadriyaj gwosè

Antre ki pa ka modifye

Fòme aksyon yo

Ede tèks

Èd Inline

Bloke èd

Eta kontwòl fòm

Antre konsantre

Antre envalid

Enfim entrées

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`