Titoloj

Ĉiuj HTML-titoloj, <h1>tra <h6>estas haveblaj.

h1. Titolo 1

h2. Titolo 2

h3. Titolo 3

h4. Titolo 4

h5. Titolo 5

h6. Titolo 6

Korpa kopio

La tutmonda defaŭlto de Bootstrap estas font-size14px , kun 20px . Ĉi tio estas aplikata al la kaj ĉiuj alineoj. Krome, (alineoj) ricevas malsupran marĝenon de duono de sia linio-alteco (10px defaŭlte).line-height<body><p>

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.

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

Ĉefa korpokopio

Elstarigu alineon aldonante .lead.

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

<p klaso = "plumbo" > ... </p>

Konstruita kun Malpli

La tipografia skalo baziĝas sur du MALAJ variabloj en variabloj.malpli : @baseFontSizekaj @baseLineHeight. La unua estas la baza tiparo-grandeco uzata ĉie kaj la dua estas la bazlinia alteco. Ni uzas tiujn variablojn kaj iun simplan matematikon por krei la randojn, remburaĵojn kaj linio-altojn de ĉiuj niaj tipoj kaj pli. Agordu ilin kaj Bootstrap adaptiĝas.

Emfazo

Uzu la defaŭltajn emfazajn etikedojn de HTML kun malpezaj stiloj.

`<small>`

Por malemfazi enlinion aŭ blokojn de teksto, uzu la malgrandan etikedon.

Ĉi tiu linio de teksto estas intencita esti traktata kiel bela preskribo.

<p> <malgranda> Ĉi tiu linio de teksto estas intencita traktata kiel eta preskribo. </malgranda> </p>

Aŭdaca

Por emfazi fragmenton de teksto kun pli peza tiparo.

La sekva fragmento de teksto estas prezentita kiel grasa teksto .

<strong> prezentita kiel grasa teksto </strong>

Kursivo

Por emfazi fragmenton de teksto kun kursivo.

La sekva fragmento de teksto estas prezentita kiel kursiva teksto .

<em> bildigita kiel kursiva teksto </em>

Atentu!Bonvolu uzi <b>kaj <i>en HTML5. <b>celas reliefigi vortojn aŭ frazojn sen transdoni aldonan gravecon dum <i>estas plejparte por voĉo, teknikaj terminoj ktp.

Alineaj klasoj

Facile realigu tekston al komponantoj kun tekstaj vicigoklasoj.

Maldekstre vicigita teksto.

Centra vicigita teksto.

Dekstre vicigita teksto.

<p class = "text-left" > Maldekstre vicigita teksto. </p> 
<p class = "text-center" > Centra vicigita teksto. </p> 
<p class = "text-right" > Dekstre vicigita teksto. </p>

Emfazaj klasoj

Transdonu signifon per koloro per manpleno da emfazaj utilaj klasoj.

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 = "muta" > 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, est non commodo luctus, nisi erat porttitor ligula. </p>

Mallongigoj

Stiligita efektivigo de HTML-a <abbr>elemento por mallongigoj kaj akronimoj por montri la vastigitan version sur ŝvebado. Mallongigoj kun titleatributo havas malpezan punktitan malsupran randon kaj helpkursoron sur ŝvebado, provizante plian kuntekston dum ŝvebado.

`<abbr>`

Por vastigita teksto sur longa ŝvebado de mallongigo, enmetu la titleatributon.

Mallongigo de la vorto atributo estas attr .

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

`<abbr class="initialism">`

Aldonu .initialismal mallongigo por iomete pli malgranda tiparo.

HTML estas la plej bona afero ekde tranĉaĵigita pano.

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

Adresoj

Prezentu kontaktinformojn por la plej proksima prapatro aŭ la tuta laboro.

`<address>`

Konservu formatadon finante ĉiujn liniojn per <br>.

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

Plena Nomo
[email protected]

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

Blokcitaĵoj

Por citado de enhavoblokoj de alia fonto ene de via dokumento.

Defaŭlta blokcitaĵo

Envolvi <blockquote>ajnan HTML kiel la citaĵo. Por rektaj citaĵoj ni rekomendas <p>.

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

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

Opcioj de blokquotetoj

Ŝanĝoj de stilo kaj enhavo por simplaj varioj sur norma blokcitaĵo.

Nomante fonton

Aldonu <small>etikedon por identigi la fonton. Envolvu la nomon de la fontverko en <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Iu fama en Fonta Titolo

<blokcitaĵo>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  <small> Iu fama <cite title = "Source Title" > Fonta Titolo </cite></small> 
</blockquote>

Alternaj ekranoj

Uzu .pull-rightpor flosita, dekstre vicigita blokcitaĵo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Iu fama en Fonta Titolo

<blockquote class = "tiri-dekstren" > 
  ...
</blockquote>

Listoj

Neordigita

Listo de eroj en kiuj la ordo ne eksplicite gravas.

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

Ordonita

Listo de eroj en kiuj la ordo eksplicite gravas .

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

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

Senstila

Forigu la defaŭltan list-stylekaj maldekstran remburaĵon sur listaĵoj (nur tujaj infanoj).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in 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 = "senstila" > 
  <li> ... </li>
</ul>

En linio

Metu ĉiujn listaĵojn sur unu linion kun inline-blockiom da malpeza kompletigo.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Priskribo

Listo de terminoj kun iliaj rilataj priskriboj.

Priskribolistoj: Priskriba listo estas perfekta por difini terminojn.
Euismod: Vestibulum id ligula porta felis euismod sempre 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>

Horizontala priskribo

Faru terminojn kaj priskribojn en <dl>linio flank-al-flanke.

Priskribolistoj: Priskriba listo estas perfekta por difini terminojn.
Euismod: Vestibulum id ligula porta felis euismod sempre 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 sempre eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl klaso = "dl-horizontala" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Atentu!Horizontalaj priskriblistoj detranĉos terminojn kiuj estas tro longaj por konveni en la maldekstra kolumna riparo text-overflow. En pli mallarĝaj vidfenestroj, ili ŝanĝiĝos al la defaŭlta staplita aranĝo.

En linio

Envolvu enliniajn fragmentojn de kodo per <code>.

Ekzemple, <section>devus esti envolvita kiel enlinia.

Ekzemple , <code > & lt ; sekcio & gt ;</ code > devus esti envolvita kiel enlinia .

Baza bloko

Uzu <pre>por pluraj linioj de kodo. Nepre eskapu iujn ajn angulajn krampojn en la kodo por taŭga bildigo.

<p>Ekzempla teksto ĉi tie...</p>

<pre>
  <p>Ekzempla teksto ĉi tie...</p>
</pre>

Atentu!Nepre konservu kodon ene de <pre>etikedoj kiel eble plej proksime maldekstre; ĝi bildigos ĉiujn langetojn.

Vi povas laŭvole aldoni la .pre-scrollableklason, kiu starigos maksimuman altecon de 350px kaj disponigos y-akson rulumbren.

Defaŭltaj stiloj

Por baza stilo—malpeza remburaĵo kaj nur horizontalaj disigiloj—aldonu la bazan klason .tableal iu ajn <table>.

#	Antaŭnomo	Familia nomo	Uzantnomo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry	la birdo	@twitter

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

Laŭvolaj klasoj

Aldonu iun el la sekvaj klasoj al la .tablebaza klaso.

`.table-striped`

Aldonas zebro-striadon al iu ajn tabelvico ene de la <tbody>per la :nth-childCSS-elektilo (ne havebla en IE7-8).

#	Antaŭnomo	Familia nomo	Uzantnomo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry	la birdo	@twitter

<table class = "tabelo-striita" > 
  …
</tablo>

`.table-bordered`

Aldonu randojn kaj rondigitajn angulojn al la tablo.

#	Antaŭnomo	Familia nomo	Uzantnomo
1	Mark	Otto	@mdo
1	Mark	Otto	@getbootstrap
2	Jakobo	Thornton	@graso
3	Larry la Birdo		@twitter

<table class = "tabelo-bordita" > 
  …
</tablo>

`.table-hover`

Ebligu ŝveban staton sur tabelvicoj ene de <tbody>.

#	Antaŭnomo	Familia nomo	Uzantnomo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry la Birdo		@twitter

<table class = "tablo-ŝvebado" > 
  …
</tablo>

`.table-condensed`

Faras tablojn pli kompaktajn per tranĉado de ĉela remburaĵo en duono.

#	Antaŭnomo	Familia nomo	Uzantnomo
1	Mark	Otto	@mdo
2	Jakobo	Thornton	@graso
3	Larry la Birdo		@twitter

<table class = "tabelo densigita" > 
  …
</tablo>

Laŭvolaj vicaj klasoj

Uzu kuntekstajn klasojn por kolorigi tabelvicojn.

Klaso	Priskribo
`.success`	Indikas sukcesan aŭ pozitivan agon.
`.error`	Indikas danĝeran aŭ eble negativan agon.
`.warning`	Indikas averton, kiu eble bezonas atenton.
`.info`	Uzita kiel alternativo al la defaŭltaj stiloj.

#	Produkto	Pago Prenita	Statuso
1	TB - Monata	01/04/2012	Aprobita
2	TB - Monata	02/04/2012	Malakceptis
3	TB - Monata	03/04/2012	Decidota
4	TB - Monata	04/04/2012	Voku por konfirmi

...
  < tr class = "sukceso" >
    <td> 1 < /td>
    <td>TB - Monata</ td >
    < td > 01/04/2012 < / td >
    <td>Aprobita</ td >
  </ tr >
...

Subtenita tabelmarkado

Listo de subtenataj tabelaj HTML-elementoj kaj kiel ili estu uzataj.

Etikedo	Priskribo
`<table>`	Envolva elemento por montri datumojn en tabelformato
`<thead>`	Uja elemento por tabelkaplinioj ( `<tr>`) por etikedi tabelkolumnojn
`<tbody>`	Uja elemento por tabelvicoj ( `<tr>`) en la korpo de la tabelo
`<tr>`	Uja elemento por aro de tabelĉeloj ( `<td>`aŭ `<th>`) kiu aperas sur ununura vico
`<td>`	Defaŭlta tabelĉelo
`<th>`	Speciala tabelĉelo por kolumnaj (aŭ vicoj, depende de amplekso kaj lokigo) etikedoj
`<caption>`	Priskribo aŭ resumo de tio, kion enhavas la tabelo, precipe utila por ekranlegantoj

<tablo>
  <caption> ... </caption>
  <kapo>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </ tr >
  </thead>
  <tkorpo>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </ tr >
  </tbody>
</tablo>

Defaŭltaj stiloj

Individuaj formularaj kontroloj ricevas stilon, sed sen bezonata bazklaso pri la <form>aŭ grandaj ŝanĝoj en markado. Rezultas stakigitaj, maldekstre vicigitaj etikedoj aldone al formularaj kontroloj.

<formo>
  <kamparo>
    <legend> Legendo </legend>
    <label> Etikednomo </label>
    <input type = "text" placeholder = "Tajpu ion..." >  
    <span class = "help-block" > Ekzemplo de bloknivela helpteksto ĉi tie. </span> 
    <label class = "markbutono" > 
      <input type = "markbox" > Kontrolu min 
    </etikedo>
    <button type = "submit" class = "btn" > Sendi </button>  
  </fieldset>
</form>

Laŭvolaj aranĝoj

Inkluditaj kun Bootstrap estas tri laŭvolaj formulararanĝoj por oftaj uzkazoj.

Serĉformularo

Aldonu .form-searchal la formularo kaj .search-queryal la <input>por ekstra-ronda teksta enigo.

<form class = "form-serĉo" > 
  <input type = "text" class = "enigo-meza serĉ-demando" >  
  <button type = "submit" class = "btn" > Serĉu </button>  
</form>

Enlinia formo

Aldonu .form-inlinepor maldekstre vicigitaj etikedoj kaj enlini-blokaj kontroloj por kompakta aranĝo.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Retpoŝto" >   
  <input type = "pasvorto" class = "input-small" placeholder = "Pasvorto" >   
  <label class = "markbutono" > 
    <input type = "markbox" > Memoru min 
  </etikedo>
  <button type = "submit" class = "btn" > Ensalutu </button>  
</form>

Horizontala formo

Dekstre vicigu etikedojn kaj flosigu ilin maldekstren por ke ili aperu sur la sama linio kiel kontroloj. Postulas la plej multajn markadajn ŝanĝojn de defaŭlta formo:

Aldonu .form-horizontalal la formularo
Envolvu etikedojn kaj kontrolojn.control-group
Aldonu .control-labelal la etikedo
Envolvu iujn ajn rilatajn kontrolojn .controlspor taŭga vicigo

<form class = "form-horizontala" > 
  <div class = "kontrolgrupo" > 
    <label class = "control-label" for = "inputEmail" > Retpoŝto </label>  
    <div class = "kontroloj" > 
      <input type = "text" id = "inputEmail" placeholder = "Retpoŝto" >   
    </div>
  </div>
  <div class = "kontrolgrupo" > 
    <label class = "control-label" for = "inputPassword" > Pasvorto </label>  
    <div class = "kontroloj" > 
      <input type = "pasvorto" id = "inputPassword" placeholder = "Pasvorto" >   
    </div>
  </div>
  <div class = "kontrolgrupo" > 
    <div class = "kontroloj" > 
      <label class = "markbutono" > 
        <input type = "markbox" > Memoru min 
      </etikedo>
      <button type = "submit" class = "btn" > Ensalutu </button>  
    </div>
  </div>
</form>

Subtenataj formularaj kontroloj

Ekzemploj de normaj formularaj kontroloj subtenataj en ekzempla formo-aranĝo.

Enigaĵoj

Plej ofta formkontrolo, tekst-bazitaj enigkampoj. Inkluzivas subtenon por ĉiuj HTML5-tipoj: teksto, pasvorto, datotempo, datotempo-loka, dato, monato, horo, semajno, nombro, retpoŝto, url, serĉo, tel, kaj koloro.

Postulas la uzon de specifita typeĉiam.

<input type = "text" placeholder = "Enigo de teksto" >

Tekstaro

Formkontrolo kiu subtenas plurajn liniojn de teksto. Ŝanĝu rowsatributon laŭbezone.

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

Markobutonoj kaj radioj

Markobutonoj estas por elekti unu aŭ plurajn opciojn en listo dum radioj estas por elekti unu opcion el multaj.

Defaŭlte (stakita)

<label class = "markbutono" > 
  <input type = "markbox" value = "" >  
  Unua opcio estas ĉi tio kaj tio—nepre inkluzivu kial ĝi estas bonega
</etikedo>
 
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "opcio1" kontrolita >     
  Unua opcio estas ĉi tio kaj tio—nepre inkluzivu kial ĝi estas bonega
</etikedo>
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "opcio2" >    
  Opcio du povas esti io alia kaj elektante ĝin malelektos opcion unu
</etikedo>

Enliniaj markobutonoj

Aldonu la .inlineklason al serio de markobutonoj aŭ radioj por kontroloj aperas sur la sama linio.

<label class = "markbutono enlinia" > 
  <input type = "checkbox" id = "inlineCheckbox1" valoro = "opcio1" > 1   
</etikedo>
<label class = "markbutono enlinia" > 
  <input type = "checkbox" id = "inlineCheckbox2" valoro = "opcio2" > 2   
</etikedo>
<label class = "markbutono enlinia" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "opcio3" > 3   
</etikedo>

Elektas

Uzu la defaŭltan opcion aŭ specifu a multiple="multiple"por montri plurajn opciojn samtempe.

<elekto>
  <opcio> 1 </opcio>
  <opcio> 2 </opcio>
  <opcio> 3 </opcio>
  <opcio> 4 </opcio>
  <opcio> 5 </opcio>
</select>
 
<select multiple = "multoblo" > 
  <opcio> 1 </opcio>
  <opcio> 2 </opcio>
  <opcio> 3 </opcio>
  <opcio> 4 </opcio>
  <opcio> 5 </opcio>
</select>

Etendante formularajn kontrolojn

Aldonante al ekzistantaj retumiloj, Bootstrap inkluzivas aliajn utilajn formkomponentojn.

Antaŭmetitaj kaj aldonitaj enigaĵoj

Aldonu tekston aŭ butonojn antaŭ aŭ post iu ajn tekst-bazita enigo. Notu, ke selectelementoj ne estas subtenataj ĉi tie.

Defaŭltaj opcioj

Envolvu an .add-onkaj an inputper unu el du klasoj por antaŭmeti aŭ almeti tekston al enigo.

<div class = "enigo-antaŭa" > 
  <span class = "aldonaĵo" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "teksto" anstataŭilo = "Uzantnomo" >    
</div>
<div class = "enigo-aldona" > 
  <input class = "span2" id = "appendedInput " type = "teksto" >   
  <span class = "aldonaĵo" > .00 </span> 
</div>

Kombinita

Uzu ambaŭ klasojn kaj du okazojn de .add-onpor antaŭmeti kaj almeti enigon.

<div class = "enigo-antaŭa enigo-aldono" > 
  <span class = "aldonaĵo" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput " type = "teksto" >   
  <span class = "aldonaĵo" > .00 </span> 
</div>

Butonoj anstataŭ teksto

Anstataŭ <span>kun teksto, uzu a .btnpor alfiksi butonon (aŭ du) al enigo.

<div class = "enigo-aldona" > 
  <input class = "span2" id = "apendedInputButton " type = "teksto" >   
  <button class = "btn" type = "butono" > Iru! </butono>  
</div>

<div class = "enigo-aldona" > 
  <input class = "span2" id = "apendedInputButtons " type = "teksto" >   
  <button class = "btn" type = "button" > Serĉu </button>  
  <button class = "btn" type = "butono" > Opcioj </button>  
</div>

Butonfalumoj

<div class = "enigo-aldona" > 
  <input class = "span2" id = "apendedDropdownButton " type = "teksto" >   
  <div class = "btn-grupo" > 
    <button class = "btn dropdown-toggle" data-toggle = "menumenumo" >  
      Ago
      <span class = "karto" ></span> 
    </butono>
    <ul class = "falmenuo" > 
      ...
    </ul>
  </div>
</div>

<div class = "enigo-antaŭa" > 
  <div class = "btn-grupo" > 
    <button class = "btn dropdown-toggle" data-toggle = "menumenumo" >  
      Ago
      <span class = "karto" ></span> 
    </butono>
    <ul class = "falmenuo" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "teksto" >   
</div>

<div class = "enigo-antaŭa enigo-aldono" > 
  <div class = "btn-grupo" > 
    <button class = "btn dropdown-toggle" data-toggle = "menumenumo" >  
      Ago
      <span class = "karto" ></span> 
    </butono>
    <ul class = "falmenuo" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " type = "teksto" >   
  <div class = "btn-grupo" > 
    <button class = "btn dropdown-toggle" data-toggle = "menumenumo" >  
      Ago
      <span class = "karto" ></span> 
    </butono>
    <ul class = "falmenuo" > 
      ...
    </ul>
  </div>
</div>

Segmentitaj falmenumaj grupoj

<formo>
  <div class = "enigo-antaŭa" > 
    <div class = "btn-group" > ... </div> 
    <input type = "teksto" > 
  </div>
  <div class = "enigo-aldona" > 
    <input type = "teksto" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Serĉformularo

<form class = "form-serĉo" > 
  <div class = "enigo-aldona" > 
    <input type = "text" class = "span2 serĉ-demando" >  
    <button type = "submit" class = "btn" > Serĉu </button>  
  </div>
  <div class = "enigo-antaŭa" > 
    <button type = "submit" class = "btn" > Serĉu </button>  
    <input type = "text" class = "span2 serĉ-demando" >  
  </div>
</form>

Kontrolu grandecon

Uzu relativajn grandecoklasojn kiel .input-largeaŭ kongruu viajn enigojn al la kradaj kolongrandoj uzante .span*klasojn.

Blokaj nivelaj enigoj

Faru iun <input>aŭ <textarea>elementon konduti kiel bloknivela elemento.

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

Relativa grandeco

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

Atentu!En estontaj versioj, ni ŝanĝos la uzon de ĉi tiuj relativaj enigklasoj por kongrui kun niaj butongrandoj. Ekzemple, .input-largepliigos la kompletigo kaj tiparograndon de enigo.

Krada grandeco

Uzu .span1al .span12por enigaĵoj kiuj kongruas kun la samaj grandecoj de la kradaj kolumnoj.

<input class = "span1" type = "teksto" anstataŭilo = ".span1" >   
<input class = "span2" type = "teksto" anstataŭilo = ".span2" >   
<input class = "span3" type = "teksto" anstataŭilo = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</select>

Por pluraj kradaj enigaĵoj per linio, uzu la .controls-rowmodifklason por taŭga interspaco . Ĝi flosas la enigojn por kolapsigi blankspacon, fiksas la taŭgajn randojn, kaj purigas la flosilon.

<div class = "kontroloj" > 
  <input class = "span5" type = "teksto" anstataŭilo = ".span5" >   
</div>
<div class = "regas kontrolo-vico" > 
  <input class = "span4" type = "teksto" anstataŭilo = ".span4" >   
  <input class = "span1" type = "teksto" anstataŭilo = ".span1" >   
</div>
...

Neredakteblaj enigaĵoj

Prezenti datumojn en formo, kiu ne estas redaktebla, sen uzi realan forman markadon.

<span class = "input-xlarge uneditable-input" > Iu valoro ĉi tie </span>

Formi agojn

Finu formularon per grupo de agoj (butonoj). Kiam estas metitaj ene de .form-actions, la butonoj aŭtomate indentiĝos por vicigi la formularajn kontrolojn.

<div class = "form-agoj" > 
  <button type = "submit" class = "btn btn-primary" > Konservi ŝanĝojn </button>  
  <button type = "button" class = "btn" > Nuligi </button>  
</div>

Helpa teksto

Enlinia kaj bloknivela subteno por helpteksto, kiu aperas ĉirkaŭ formularaj kontroloj.

Enlinia helpo

<input type = "text" ><span class = "help-inline" > Enlinia helpteksto </span>

Bloki helpon

<input type = "text" ><span class = "help-block" > Pli longa bloko de helpteksto, kiu rompas al nova linio kaj povas etendi preter unu linio. </span>

Formkontrolaj ŝtatoj

Provizu retrosciigon al uzantoj aŭ vizitantoj kun bazaj sugestaj statoj pri formularaj kontroloj kaj etikedoj.

Eniga fokuso

Ni forigas la defaŭltajn outlinestilojn en iuj formularaj kontroloj kaj aplikas a box-shadowen ĝia loko por :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Ĉi tio estas fokusita..." >

Nevalidaj enigaĵoj

Stilaj enigaĵoj per defaŭlta retumila funkcio kun :invalid. Specifu type, aldonu la requiredatributon se la kampo ne estas laŭvola, kaj (se aplikeble) specifu pattern.

Ĉi tio ne haveblas en versioj de Internet Explorer 7-9 pro manko de subteno por CSS-pseŭdo-elektiloj.

<input class = "span3" type = "retpoŝto" bezonata >

Malebligitaj enigaĵoj

Aldonu la disabledatributon al enigo por malhelpi uzantan enigon kaj ekigi iomete malsaman aspekton.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Malŝaltita enigo ĉi tie..." malŝaltita >

Konvalidaj ŝtatoj

Bootstrap inkluzivas validajn stilojn por eraroj, avertoj, informoj kaj sukcesaj mesaĝoj. Por uzi, aldonu la taŭgan klason al la ĉirkaŭaĵo .control-group.

<div class = "averto de kontrolgrupo" > 
  <label class = "control-label" for = "inputWarning" > Enigo kun averto </label>  
  <div class = "kontroloj" > 
    <input type = "text" id = "enigoAverto" >  
    <span class = "help-inline" > Eble io misfunkciis </span> 
  </div>
</div>
 
<div class = "kontrolgrupo-eraro" > 
  <label class = "control-label" for = "inputError" > Enigo kun eraro </label>  
  <div class = "kontroloj" > 
    <input type = "text" id = "enigo-Eraro" >  
    <span class = "help-inline" > Bonvolu korekti la eraron </span> 
  </div>
</div>
 
<div class = "kontrolgrupo-informoj" > 
  <label class = "control-label" for = "inputInfo" > Enigo kun informoj </label>  
  <div class = "kontroloj" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Uzantnomo jam estas prenita </span> 
  </div>
</div>
 
<div class = "kontrolgrupo sukceso" > 
  <label class = "control-label" for = "inputSuccess" > Enigo kun sukceso </label>  
  <div class = "kontroloj" > 
    <input type = "text" id = "enigoSukceso" >  
    <span class = "help-enline" > Ho! </span> 
  </div>
</div>

Defaŭltaj butonoj

Butonstiloj povas esti aplikitaj al io ajn kun la .btnklaso aplikata. Tamen, kutime vi volas apliki ĉi tiujn nur al <a>kaj <button>elementoj por la plej bona bildigo.

Butono	klaso=""	Priskribo
	`btn`	Norma griza butono kun gradiento
	`btn btn-primary`	Provizas ekstran vidan pezon kaj identigas la ĉefan agon en aro de butonoj
	`btn btn-info`	Uzita kiel alternativo al la defaŭltaj stiloj
	`btn btn-success`	Indikas sukcesan aŭ pozitivan agon
	`btn btn-warning`	Indikas singardemon pri ĉi tiu ago
	`btn btn-danger`	Indikas danĝeran aŭ eble negativan agon
	`btn btn-inverse`	Alterna malhelgriza butono, ne ligita al semantika ago aŭ uzo
	`btn btn-link`	Malemfazu butonon igante ĝin aspekti kiel ligilo dum konservante butonkonduton

Interkongruo de retumilo

IE9 ne tondas fonajn gradientojn sur rondigitaj anguloj, do ni forigas ĝin. Rilata, IE9 jankigas malfunkciigitajn buttonelementojn, farante tekston griza kun aĉa tekst-ombro, kiun ni ne povas ripari.

Butongrandoj

Ĉu vi volas pli grandajn aŭ pli malgrandajn butonojn? Aldonu .btn-large, .btn-small, aŭ .btn-minipor pliaj grandecoj.

<p>
  <button class = "btn btn-large btn-primary" type = "butono" > Granda butono </button>  
  <button class = "btn btn-large" type = "butono" > Granda butono </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "butono" > Defaŭlta butono </button>  
  <button class = "btn" type = "butono" > Defaŭlta butono </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "butono" > Malgranda butono </button>  
  <button class = "btn btn-small" type = "butono" > Malgranda butono </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "butono" > Mini butono </button>  
  <button class = "btn btn-mini" type = "butono" > Mini butono </button>  
</p>

Kreu bloknivelajn butonojn—tiujn kiuj ampleksas la tutan larĝon de gepatro— aldonante .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "butono" > Bloknivela butono </button>  
<button class = "btn btn-large btn-block" type = "butono" > Bloknivela butono </button>

Malfunkciigita ŝtato

Faru butonojn aspekti neklakeblaj per forvelkado de ili reen 50%.

Ankro-elemento

Aldonu la .disabledklason al <a>butonoj.

Primara ligilo Ligo

<a href = "#" class = "btn btn-large btn-primary disabled" > Ĉefa ligilo </a>  
<a href = "#" class = "btn btn-large malfunkciigita" > Ligo </a>

Atentu!Ni uzas .disabledĉi tie kiel utilan klason, similan al la komuna .activeklaso, do ne necesas prefikso. Ankaŭ ĉi tiu klaso estas nur por estetiko; vi devas uzi kutiman JavaScript por malŝalti ligilojn ĉi tie.

Butona elemento

Aldonu la disabledatributon al <button>butonoj.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "malŝaltita" > Ĉefa butono </button>   
<button type = "button" class = "btn btn-large" malŝaltita > Butono </button>

Unu klaso, pluraj etikedoj

Uzu la .btnklason sur <a>, <button>, aŭ <input>elemento.

<a class = "btn" href = "" > Ligo </a>  
<button class = "btn" type = "submetiĝi" > Butono </button>  
<input class = "btn" type = "button" value = "Enigo" >   
<input class = "btn" type = "submit" value = "Sendu" >

Kiel plej bona praktiko, provu kongrui kun la elemento por via kunteksto por certigi kongruan trans-retumilon bildigon. Se vi havas input, uzu <input type="submit">por via butono.

Aldonu klasojn al <img>elemento por facile stiligi bildojn en iu ajn projekto.

<img src = "..." class = "img-rondigita" >  
<img src = "..." class = "img-cirklo" >  
<img src = "..." class = "img-polaroid" >

Atentu! .img-roundedkaj .img-circlene funkcias en IE7-8 pro manko de border-radiussubteno.

Ikonaj glifoj

140 ikonoj en sprite-formo, haveblaj en malhelgriza (defaŭlte) kaj blanka, provizitaj de Glyphicons .

ikono-vitro
ikono-muziko
ikono-serĉo
ikono-koverto
ikono-koro
ikono-stelo
ikono-stelo-malplena
ikono-uzanto
ikono-filmo
ikono-th-granda
ikono-th
ikono-th-listo
ikono-ok
ikono-forigi
ikono-zoom-en
ikono-zoom-malgrandigi
ikono-malŝaltita
ikono-signalo
ikono-kogo
ikono-rubo
ikono-hejmo
ikono-dosiero
ikono-tempo
ikono-vojo
ikono-elŝuto-alt
ikono-elŝuto
ikono-alŝuto
ikono-enirkesto
ikono-ludado-cirklo
ikono-ripeto
ikono-refreŝigi
ikono-listo-alt
ikono-seruro
ikono-flago
ikono-aŭdiloj
ikono-volumo-malŝaltita
ikono-volumen-malsupren
ikono-volumen-supren
ikono-qrkodo
ikono-strekkodo
ikono-etikedo
ikon-etikedoj
ikono-libro
ikono-legosigno
ikono-presaĵo
ikono-fotilo
ikono-tiparo
ikono-grasa
ikono-kursiva
ikono-teksto-alteco
ikono-teksto-larĝo
ikono-vicigi-maldekstren
icon-align-center
ikono-vicigi-dekstre
ikono-vicigi-pravigi
ikono-listo
ikono-indent-maldekstre
ikono-indent-dekstra
ikono-facetime-video
ikono-bildo
ikono-krajono
ikono-mapo-markilo
ikono-ĝustigi
ikono-nuanco
ikono-redakti
ikono-kunhavigo
ikono-kontrolo
ikono-movo
ikono-paŝo-malantaŭen
ikono-rapide-malantaŭen
ikono-malantaŭen
ikono-ludado
ikono-paŭzo
ikono-halto
ikono-antaŭen
ikono-rapide-antaŭen
ikono-paŝo-antaŭen
ikono-elĵeto
ikono-ĉevrono-maldekstre
ikono-ĉevron-dekstra
ikono-plus-signo
ikono-minus-signo
ikono-forigi-signo
ikono-ok-signo
ikono-demando-signo
ikono-informsigno
ikono-ekrankopio
ikono-forigi-cirklo
ikono-ok-cirklo
ikono-malpermeso-cirklo
ikono-sago-maldekstre
ikono-sago-dekstra
ikono-sago-supren
ikono-sago-malsupren
ikono-kunhavigi-alt
ikono-regrandigo-plena
ikono-regrandigi-malgranda
ikono-plus
ikono-minuso
ikono-asterisko
ikono-ekkrio-signo
ikono-donaco
ikono-folio
ikono-fajro
ikono-okulo-malfermita
ikono-okulo-proksima
ikono-averto-signo
ikono-aviadilo
ikono-kalendaro
ikono-hazarda
ikono-komento
ikono-magneto
ikono-ĉevron-supren
ikono-ĉevron-malsupren
ikono-retweet
ikono-aĉetĉaro
ikono-dosierujo-fermi
ikono-dosierujo-malfermita
ikono-regrandigo-vertikala
ikono-regrandigo-horizontala
ikono-hdd
ikono-bovkorno
ikono-sonorilo
ikono-atestilo
ikono-dikfingro-supren
ikono-dikfingroj-malsupren
ikono-mano-dekstra
ikono-mano-maldekstre
ikono-mano-supren
ikono-man-malsupren
ikono-cirklo-sago-dekstra
ikono-cirklo-sago-maldekstre
ikono-cirklo-sago-supren
ikono-cirklo-sago-malsupren
ikono-globo
ikono-ŝlosilo
ikono-taskoj
ikono-filtrilo
ikono-tetujo
ikono-plena ekrano

Glyphicons atribuo

Glyphicons Halflings kutime ne haveblas senpage, sed aranĝo inter Bootstrap kaj la kreintoj de Glyphicons ebligis tion senkoste por vi kiel programistoj. Kiel dankon, ni petas vin inkluzivi laŭvolan ligilon reen al Glyphicons kiam ajn praktike.

Kiel uzi

Ĉiuj ikonoj postulas <i>etikedon kun unika klaso, prefiksita per icon-. Por uzi, metu la sekvan kodon preskaŭ ie ajn:

<i klaso = "ikono-serĉo" ></i>

Estas ankaŭ disponeblaj stiloj por renversitaj (blankaj) ikonoj, pretaj per unu ekstra klaso. Ni specife devigos ĉi tiun klason sur ŝvebado kaj aktivaj ŝtatoj por nav kaj falmenuaj ligiloj.

<i klaso = "ikono-serĉa ikono-blanka" ></i>

Atentu!Kiam vi uzas apud tekstoĉenoj, kiel en butonoj aŭ navigaciaj ligiloj, nepre lasu spacon post la <i>etikedo por taŭga interspaco.

Ekzemploj de ikonoj

Uzu ilin en butonoj, butongrupoj por ilobreto, navigado aŭ antaŭmetitaj formularenigaĵoj.

Butonoj

Butongrupo en butona ilbreto

<div class = "btn-ilbreto" > 
  <div class = "btn-grupo" > 
    <a klaso = "btn" href = "#" ><i class = "ikono-align-maldekstre" ></i></a>   
    <a class = "btn" href = "#" ><i class = "ikono-align-center" ></i></a>   
    <a klaso = "btn" href = "#" ><i class = "ikono-align-dekstra" ></i></a>   
    <a class = "btn" href = "#" ><i class = "ikono-align-justify" ></i></a>   
  </div>
</div>

Dropdown en butongrupo

Uzanto

<div class = "btn-grupo" > 
  <a class = "btn btn-primary" href = "#" ><i class = "ikono-uzanto ikono-blanka" ></i> Uzanto </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "menumenumo" href = "#" ><span class = "karto" ></span></a>    
  <ul class = "falmenuo" > 
    <li><a href = "#" ><i class = "ikono-krajono" ></i> Redakti </a></li>  
    <li><a href = "#" ><i class = "ikono-rubo" ></i> Forigi </a></li>  
    <li><a href = "#" ><i class = "ikono-malpermeso-cirklo" ></i> Malpermeso </a></li>  
    <li class = "dividanto" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Faru administranton </a></li>  
  </ul>
</div>

Butongrandoj

Stelo Stelo Stelo

<a class = "btn btn-large" href = "#" ><i class = "ikono-stelo" ></i> Stelo </a>   
<a class = "btn btn-small" href = "#" ><i class = "ikono-stelo" ></i> Stelo </a>   
<a class = "btn btn-mini" href = "#" ><i class = "ikono-stelo" ></i> Stelo </a>

Navigado

<ul class = "nav nav-list" > 
  <li class = "aktiva" ><a href = "#" ><i class = "ikono-hejma ikono-blanka" ></i> Hejmo </a></li>   
  <li><a href = "#" ><i class = "piktogramo" ></i> Biblioteko </a></li>  
  <li><a href = "#" ><i class = "ikono-krajono" ></i> Aplikoj </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Diversaĵoj </a></li>  
</ul>

Formkampoj

<div class = "kontrolgrupo" > 
  <label class = "control-label" for = "inputIcon" > Retadreso </label>  
  <div class = "kontroloj" > 
    <div class = "enigo-antaŭa" > 
      <span class = "aldonaĵo" ><i class = "ikono-koverto" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "teksto" >   
    </div>
  </div>
</div>

Tipografio

Titoloj

h1. Titolo 1

h2. Titolo 2

h3. Titolo 3

h4. Titolo 4

h5. Titolo 5

h6. Titolo 6

Korpa kopio

Ĉefa korpokopio

Konstruita kun Malpli

Emfazo

<small>

Aŭdaca

Kursivo

Alineaj klasoj

Emfazaj klasoj

Mallongigoj

<abbr>

<abbr class="initialism">

Adresoj

<address>

Blokcitaĵoj

Defaŭlta blokcitaĵo

Opcioj de blokquotetoj

Nomante fonton

Alternaj ekranoj

Listoj

Neordigita

Ordonita

Senstila

En linio

Priskribo

Horizontala priskribo

Kodo

En linio

Baza bloko

Tabeloj

Defaŭltaj stiloj

Laŭvolaj klasoj

.table-striped

.table-bordered

.table-hover

.table-condensed

Laŭvolaj vicaj klasoj

Subtenita tabelmarkado

Formoj

Defaŭltaj stiloj

Laŭvolaj aranĝoj

Serĉformularo

Enlinia formo

Horizontala formo

Subtenataj formularaj kontroloj

Enigaĵoj

Tekstaro

Markobutonoj kaj radioj

Defaŭlte (stakita)

Enliniaj markobutonoj

Elektas

Etendante formularajn kontrolojn

Antaŭmetitaj kaj aldonitaj enigaĵoj

Defaŭltaj opcioj

Kombinita

Butonoj anstataŭ teksto

Butonfalumoj

Segmentitaj falmenumaj grupoj

Serĉformularo

Kontrolu grandecon

Blokaj nivelaj enigoj

Relativa grandeco

Krada grandeco

Neredakteblaj enigaĵoj

Formi agojn

Helpa teksto

Enlinia helpo

Bloki helpon

Formkontrolaj ŝtatoj

Eniga fokuso

Nevalidaj enigaĵoj

Malebligitaj enigaĵoj

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`