Bootstrap

Basis CSS

Elementa fundamentalia HTML dicta et amplificata cum classibus amplis.

Typographia

Capitula

Omnia HTML capita, <h1>per <h6>in promptu sunt.

h1. Petere 1

h2. Petere 2

h3. Petere III "

h4. Petere 4

h5. Petere 5
h6. Petere 6

Corpus exemplum

Bootstrap's global default font-sizeis 14px , with a line-heightof 20px . Hoc ad <body>omnes paragraphos applicatur. Praeterea <p>(paragraphis) fundum marginis dimidii lineae altitudinis recipiunt (9px per defaltam).

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

<p> ... </p>

Duc corpus exemplum

Fac a paragrapho stare addendo .lead.

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

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

Aedificavit cum Minus

Scala typographica duabus minus variabilibus in variabilibus innititur : @baseFontSizeet @baseLineHeight. Prima est basis fontis amplitudo per totum et secundum est basis lineae altitudinis. Variabilibus illis et simplicibus quibusdam mathematica utimur ad oras, paddinges, et lineas altitudinum totius generis nostri magisque utimur. Mos eas et Bootstrap adaptat.

Emphasis

Utere HTML defectionis emphasin tags cum stylis levibus.

<small>

Ad illustrandum inlines vel insulis textus, parvo tag.

Hic linea textus intelligitur ut subtiliter imprimatur.

<p> <small> Haec linea textus intelligatur ut subtiliter imprimatur. </small> </p>

<strong>

Ad efferendum PRAECISIO textus momenti

Sequentia textus abruptionis pro audaci textu redditur .

<strong> red- ditur quam audax textus </strong>

<em>

Ad efferendum PRAECISIO textus cum accentus

The following snippet of text is rendered as italicized text .

<em> Littera cursivis reddita </em>

Capita! Libenter uti <b>et <i>in HTML5. <b>intelligitur exaggerare verba vel phrases sine importatione additi momenti dum <i>is mostly for vox, technica, etc.

Abbreviations

Exsecutio stylized <abbr>elementi HTML pro abbreviationibus et Acronym amplificatam versionem ostendere. Abbreviationes cum titleattributo levem imum punctatum habent et adiutorium cursoris in volatilibus, contextum additicium in volve praebentes.

<abbr>

Dilatata enim littera longitudinis abbreviationis includunt titleattributum.

Abbreviatio verbi attributum est attr .

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

<abbr class="initialism">

Adde .initialismabbreviationem pro fontium magnitudine paulo minore.

HTML optimum est cum panis divisa.

<abbr title = "attributum" class = "initialismus" > attr </abbr>

Addresses

Praesenti informationes contactus proximi vel totius corporis operis est antecessoris.

<address>

Serva formatting per omnes lineas cum ending <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
[email protected] 
  1. <inscriptio>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   <br> 795 Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Phone" > P: </abbr> (123) 456-7890 
  6. </inscriptio>
  7.  
  8. <inscriptio>
  9.   <strong> Full Name </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </inscriptio>

Blockquotes

Adfers caudices contentorum aliunde intra documentum tuum.

Default blockqoute

Circumcingere <blockquote>aliquem HTML ut auctoritas. Recta enim verba commendamus a <p>.

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

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

Blockquote optiones

Stylus et contenta mutationes pro simplicibus variationibus in regula clausula.

Nomen fontem

Adde <small>tag ad cognoscendum fontem. Nomen principii operis in involve <cite>.

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

In Source Title aliquis celebre 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3.   <small> Aliquis famosus <cite title = "Source Title" > Source Title </cite></small> 
  4. </blockquote>

Alternis ostendimus

Utere .pull-rightad fluitantem, stipitem recte-aligned.

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

In Source Title aliquis celebre 
  1. <blockquote class = "traho-ius" > 
  2.   ...
  3. </blockquote>

Lists

Inordinatus

Enumeratio rerum in quibus ordo explicite non refert.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat iaculis lectus
    • 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
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Iussit

Enumeratio rerum in quibus ordo explicite refert.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat iaculis lectus
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Unstyled

Index rerum cum nullo list-stylevel addito relicto Nullam.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat iaculis lectus
    • 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
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

Descriptio

Enumeratio terminorum cum earum adiunctis descriptionibus.

Descriptio tabulae
Descriptio perfectus est ad definiendum terminos.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Vestibulum malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Horizontalis descriptio

Constitue leges et descriptiones in <dl>acie iuxta.

Descriptio tabulae
Descriptio perfectus est ad definiendum terminos.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Vestibulum malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Capita! Tabulae horizontalis descriptiones erunt truncata vocabula quae nimis longa sunt apta in columna sinistra fix text-overflow. In angustiis prospectibus, ad defaltam reclinatam mutabuntur.

Code

Inline

Wrap inline excerpta of code with <code>.

Exempli gratia <section>debet inlinere ut inlinere. 
  1. Exempli gratia , <code><section> </ code > inlineri debet linea .

Basic obstructionum

<pre>Pluribus lineis codicis utere . Vide ut quemlibet angulum brackets effugere in codice ad propriam red- ditionem.

<p>Sample textum hic...</p>
  1. <pre>
  2.   <p>Sample textum hic...</p>
  3. </pre>

Capita! Vide ut codicem intra <pre>tags quam proxime ad sinistram quam maxime retinere possit; omnia tabs reddet.

Classem optione addere .pre-scrollablepotes quae max-altitudinis 350px ponet et in scrollbar y-axis providebit.

Tabulae

Default styles

Pro basic stylus - color levis et solum divisores horizontales - genus basin .tablecuivis adde <table>.

# Praenomen Cognomen Username
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Larry Avis @twitter 
  1. <mensa class = "mensa" > 
  2.   ...
  3. </table>

Ad libitum classes

Ullam ex .tableturpis class turpis.

.table-striped

Addit ad ordinem tabulae zebra nudandum in <tbody>via :nth-childelectrix CSS (non praesto est in IE7-IE8).

# Praenomen Cognomen Username
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Larry Avis @twitter 
  1. <mensa class = "mensa-striped" > 
  2.   ...
  3. </table>

.table-bordered

Fines et angulos rotundos addere tabulae.

# Praenomen Cognomen Username
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Iacobus Thornton @fat
3 Avis Larry @twitter 
  1. <mensa class = "mensa-bordered" > 
  2.   ...
  3. </table>

.table-hover

Admitte aliquet statum in mensa ordines intra a <tbody>.

# Praenomen Cognomen Username
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Avis Larry @twitter 
  1. <mensa class = "mensa-hover" > 
  2.   ...
  3. </table>

.table-condensed

Tabulas facit magis compactas secando Nullam cellulam in media.

# Praenomen Cognomen Username
1 Mark Otto @mdo
2 Iacobus Thornton @fat
3 Avis Larry @twitter 
  1. <mensa class = "mensa condensata" > 
  2.   ...
  3. </table>

Ad libitum row classes

Utere contextual classes ad colorandam mensam ordines.

Classis Descriptio
.success Indicat prosperam vel positivam actionem.
.error Indicat actionem periculosam vel potentiam negativam.
.info Usus est jocus ad styli default.
# Productum Mercedem Status
1 TB - Monthly 01/04/2012 Probatus
2 TB - Monthly 02/04/2012 Declinavit
3 TB - Monthly 03/04/2012 Eviewray 
  1. ...
  2.   < tr class = "success" >
  3.     <td> 1 < /td>
  4.     <td>TB - Monthly</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Approbata</ td >
  7.   </ tr >
  8. ...

Supported mensam markup

Elenchus mensae sustentandae elementorum HTML et quomodo utendum sit.

Tag Descriptio
<table> Involventes elementum ad ostentandam notitia in forma tabularis
<thead> Continens elementum ad mensam capitis ordines ( <tr>) ad columnas tabulas titulus
<tbody> Continens elementum ordines mensae ( <tr>) in corpore mensae
<tr> Continens elementum pro cellularum mensalium statuto ( <td>vel <th>) quod in uno ordine apparet
<td> Default mensam cell
<th> Tabulae speciales cellae pro columna (seu versu, scopo et collocatione pendentes) pittacia
intra a . adhibenda sunt<thead>
<caption> Descriptio seu summaria eorum quae in mensa tenet, praesertim ad lectorum tegumentum utile 
  1. <mensa>
  2.   <caption> ... </caption>
  3.   <thead>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </table>

Formae

Default styles

Formae singulae controllatae stylos accipiunt, sed sine ulla basi in genere <form>vel in markup mutationes magnas requiruntur. Proventus in reclinatis, pittaciis sinistro-aligned super forma controllis.

Legend Exemplum-gradus clausus hic textus adiuvatur. 
  1. <form>
  2.   <legenda> Legenda </legend>
  3.   <label> Nomen Label </label>
  4.   <input type = "text" placeholder = "Type something…" >  
  5.   <span class = "auxilium-block" > Exemplum scandali-campester hic textus ope. </span> 
  6.   <label class = "checkbox" > 
  7.     <input type = "checkbox" > Reprehendo me 
  8.   </ label>
  9.   <button type = "submit" class = "btn" > Submit </button>  
  10. </form>

Ad libitum layout

Comprehenduntur cum Bootstrap tres propositiones ad libitum formae pro usu communi casuum.

Quaerere formam

Adde .form-searchformam et .search-queryad <input>textum extra-rotundum input.

  1. <form class = "form-search" > 
  2.   <input type = "text" class = "input-medium inquisitionis" >  
  3.   <button type = "submit" class = "btn" > Quaerere </button>  
  4. </form>

Inline forma

Adde .form-inlinepro pittacia left-aligned and inline-obstructionum controls pro pacto pacto.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "Email" >   
  3.   <input type = "password" class = "input-small" placeholder = "Password" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Memento mei 
  6.   </ label>
  7.   <button type = "submit" class = "btn" > Sign in </button>  
  8. </form>

Forma horizontalis

Dextra pittacia aligna et innatat eas ad laevam ut appareant in eadem linea sicut imperium. Maxime requirit markup mutationes ex defalta forma;

  • Adde .form-horizontalad formam
  • Involvere pittacia et controllata in.control-group
  • Add .control-labelto pittacium
  • Involvere aliquem adiunctis imperium in .controlspropriis alignment
Legend 
  1. <form class = "form-horizontalis" > 
  2.   <div class = "control-group" > 
  3.     <label class = "imperium-label" for = "inputEmail" > Inscriptio </label>  
  4.     <div class = "controls" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "control-group" > 
  9.     <label class = "imperium" for = "inputPassword" > Password </label>  
  10.     <div class = "controls" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Password" >   
  12.     </div>
  13.   </div>
  14.   <div class = "control-group" > 
  15.     <div class = "controls" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Memento mei 
  18.       </ label>
  19.       <button type = "submit" class = "btn" > Sign in </button>  
  20.     </div>
  21.   </div>
  22. </form>

Supported forma controls

Exempla regulae formae normae in exempli forma attentatae sunt.

Inputs

Vulgaris forma imperium, text-based input agros. Subsidium includit omnibus HTML5 generibus: textum, password, diem, tempus, locum, diem, mensem, tempus, hebdomadam, numerum, electronicam, domicilium, inquisitionem, Tel, et colorem.

Usum certum typeomni tempore requirit.

  1. <input type = "text" placeholder = "Text input" >

Textarea

Forma temperantiae quae plures textus lineas sustinet. Mutare rowattributum ut necesse est.

  1. <textarea ordines = "3" ></textarea>

Checkboxes et radios

Checkboxes sunt ut unam vel plures optiones eligant in indicem dum radios sunt ad unam optionem e multis eligendum.

Default (reclinant)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Option una est haec et illa, ut certa comprehendere cur suus 'magnum' sit
  4. </ label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked >     
  8.   Option una est haec et illa, ut certa comprehendere cur suus 'magnum' sit
  9. </ label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios" value = "option2" >    
  12.   Optiones duae possunt esse aliquid aliud et eligens eam eligendo eligendo unum
  13. </ label>

Inline checkboxes

Classem ad seriem checkboxes vel radios adde .inlinepro controllis in eadem linea apparent.

  1. <titulus class = "checkbox inline" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </ label>
  4. <titulus class = "checkbox inline" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </ label>
  7. <titulus class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3 " >   
  9. </ label>

Eligit

Utere optione defalta vel specificare multiple="multiple"ut plures simul optiones ostendas.


  1. <select>
  2.   <optio> 1 </option>
  3.   <optio> 2 </option>
  4.   <optio> 3 </option>
  5.   <optio> 4 </option>
  6.   <optio> 5 </option>
  7. </select>
  8.  
  9. <select multiplex = "multiplex" > 
  10.   <optio> 1 </option>
  11.   <optio> 2 </option>
  12.   <optio> 3 </option>
  13.   <optio> 4 </option>
  14.   <optio> 5 </option>
  15. </select>

Extendit formam controls

Addito super imperio pasco existentem, Bootstrap alias componentes utiles formas includit.

Prepended et apponi inputs

Adde textum vel bullarum ante vel post aliquem scripti fundatum input. Nota quod selectelementa hic non sustinentur.

Default optiones

Involve an .add-onet inputcum uno duorum generum ad textum praependendum vel appendendum ad input.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span><input class = "span2" id = "prependedInput" size = "16" type = "text" placeholder = "Username" >      
  3. </div>
  4. <div class = "input-append" > 
  5.   <input class = "span2" id = "appendedInput" size = "16" type = "text" ><span class = "add-on" > .00 </span>     
  6. </div>

Composita

Utere utroque genere et duobus instantiis, .add-onpraetendere et apponere input.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span><input class = "span2" id = "appensumPrependedInput" size = "16" type = "text" ><span class = "add-on" > .00 </span>      
  3. </div>

Bullae pro textu

Loco a <span>cum textu, uti .btntesseram (vel duas) ad input.


  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton" size = "16" type = "text" ><button class = "btn" type = "button" > Vade! </button>      
  3. </div>
  4.  
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendi-InputButtons" size = "16" type = "text" ><button class = "btn" type = "button" > Search </button><button class = "btn" type = "button" > Optiones </button>        
  7. </div>

Quaerere formam

  1. <form class = "form-search" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Quaerere </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Quaerere </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Imperium inspectionem

Classes inspectionis relativae utere sicut .input-largevel inputationes tuas aequare ad magnitudinum columnarum gridi utens .span*classes.

Relativum inspectionem

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Capita! In futuris versionibus, usum horum relativorum input classes mutabimus ad magnitudinum conjunctionem nostram aequandam. Pro exemplo, .input-largeaugebit Nullam et font-magnitudinem input.

Eget inspectionem

Utere .span1pro .span12inputibus qui aequant columnas magnitudinis euismod.

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <select class = "span1" > 
  5.   ...
  6. </select>
  7. <select class = "span2" > 
  8.   ...
  9. </select>
  10. <select class = "span3" > 
  11.   ...
  12. </select>

Multiplex enim eget inputs per lineam, genus determinatum ad iustam spatialem utere.controls-row . Innatat initibus ad spatium album construxit, margines proprias ponit, et fluitantum repurgat.

  1. <div class = "controls" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "controls-row controls" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

initibus initibus

Praesens notitia in forma quod editabile non est sine nota actuali forma adhibita.

Quidam hic pretii 
  1. <span class = "input-xlrage ineditable-input" > Aliquam hic valorem </span>

Forma actus

Finis forma cum grege actionum (Bullae). Cum intra a positis .form-horizontal, automatice globuli indent aciem cum imperiorum forma.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Servare mutationes </button>  
  3.   <button type = "button" class = "btn" > Cancel </button>  
  4. </div>

Auxilium text

Inline et angustum firmamentum pro textu adiuvando, qui circa formas regiminum apparet.

Inline auxilium

Inline auxilium text 
  1. <input type = "text" > < span class = "help-inline " >

Obstructionum auxilium

Longius truncus textus adiumenti qui in novam lineam erumpit et ultra unam lineam potest extendere. 
  1. <input type = "text" ><span class = "help-block" > Longior truncus auxilii textus qui novam lineam frangit et ultra unam lineam potest extendere. </span>

Forma imperium civitatibus

Praebere feedback ad users vel visitatores cum basic feedback civitatibus in forma controllata et pittacia.

Input focus

Defectus outlinestyli in aliqua forma controllata removemus et box-shadowin eius locum applicamus :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Hoc est focused..." >

Debilitatum initibus

Adde disabledattributum in initus ne user input et trigger paulo aliter aspectum.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Disabled input here ... "

Validation civitatibus

Bootstrap includit genera sanationis erroris, admonitionis et felicitatis nuntia. Uti, aptam classem circumquaque addere .control-group.

Aliquid potest errasse
Quaeso corrigere errorem
Woohoo! 
  1. <div class = "control-group" > 
  2.   <label class = "input -tabel" for = "inputWarning" > Input cum admonitione </label>  
  3.   <div class = "controls" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "auxilio-inline" > aliquid erravisse </span> 
  6.   </div>
  7. </div>
  8. <div class = "control-group error" > 
  9.   <label class = "imperium" for = "inputError" > Input cum error </label>  
  10.   <div class = "controls" > 
  11.     <input type = "text" id = "inputError" >  
  12.     <span class = "auxilium-inline" > errorem corrigere quaeso </span> 
  13.   </div>
  14. </div>
  15. <div class = "potestatem coetus" > 
  16.   <label class = "input -tabel" for = "inputSuccess" > Input cum success </label>  
  17.   <div class = "controls" > 
  18.     <input type = "text" id = "inputSuccess" >  
  19.     <span class = "auxilium-inline" > Woohoo! </span> 
  20.   </div>
  21. </div>

Bullae

Default Bullae

Puga pyga ad aliquid applicari potest cum .btnclasse applicata. <a>Sed haec ad solas et <button>elementa optimae reddendae typice adhibere voles .

Button class="" Descriptio
btn Vexillum griseo puga cum gradiente
btn btn-primary Extra pondus visualium praebet actionem primariam in statuto bullarum
btn btn-info Usus est jocus ad default generibus
btn btn-success Indicat prospera vel positivum actio
btn btn-warning Indicat cautio habenda est cum hac actione
btn btn-danger Indicat periculosa vel potentia negativa
btn btn-inverse Alternate button griseo, non ligatum ad semanticam actionem vel usum
btn btn-link Deemphasize conjunctionem faciendo eam tamquam nexum servato felis moribus

Crucis pasco convenientiae

IE9 graduum rotundorum in angulis rotundatis seges non facit, sic removemus. Related, IE9 elementa debilitata jankificat button, textum griseum reddens cum sordido textuum umbraculo quod figere non possumus.

Puga pyga magnitudinum

Fac maiorem vel minorem globulis? Add .btn-large, .btn-small, vel .btn-miniamplitudines additas .

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Bulla magna </button>  
  3.   <button class = "btn btn-large" type = "button" > Bulla magna </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Default button </button>  
  7.   <button class = "btn" type = "button" > Default button </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Bulla parva </button>  
  11.   <button class = "btn btn-small" type = "button" > Bulla parva </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Bulla Mini </button>  
  15.   <button class = "btn btn-mini" type = "button" > Bulla Mini </button>  
  16. </p>

Faces angustos globulis gradu, quae plenam latitudinem parentis cludunt, addendo .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Block level button </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Block level button </button>

Debilitatum statum

Fac tesserae inexplicabiles inspicias per defluentes eas ad 50%.

anchor elementum

Classem .disabledglobulis <a>addere.

Prima pagina Link 

  1. <a href = "#" class = "btn btn-large btn-primaria debilitata" > Prima pagina </a>  
  2. <a href = "#" class = "btn btn-magnis debilitatum" > Link </a>

Capita! Utimur .disabledut hic classis utilitas, similis communi .activeclassi, ita praepositio nulla desideratur.

Button elementum

disabledBullae attributum add <button>.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Bulla prima </button>   
  2. <button type = "button" class = "btn btn-large" disabled > Button </button>

Unum genus, multa tags

.btnClass utere in elementum <a>, <button>vel .<input>

Link 
  1. <a class = "btn" href = ""> Link </a> _  
  2. <button class = "btn" type = "submit" > Button </button>  
  3. <input class = "btn" type = "button" value = "input" >   
  4. <input class = "btn" type = "submit" value = "Submit" >

Pro praxi optime, stude elementum pro contextu tuo aequare ut transitus pascuae congruens reddat. Si habes input, utere <input type="submit">pro conjunctione tua.

Imagines

Classes <img>elemento adde, ut imagines in aliqua re facile exprimant.

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

Capita! .img-roundedet .img-circlenon operantur in IE7-8 propter defectum border-radiussubsidii.

Icones a Glyphicons

Icon glyphs

140 icones spiritu formata, in griseo (default) et albo, a Glyphicone paratas .

  • icon-glas
  • icon-music
  • icon-search
  • icon-involucrum
  • icon-cor
  • icon-stella
  • icon-astrum inane
  • icon-user
  • icon-cinematographica
  • icon-th-magna
  • icon-th*
  • icon-th-album
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • signum-icon-
  • icon-cog
  • icon-quisquiliae
  • icon-home
  • icon-file
  • icon-time
  • icon-via
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-fabula-circulus
  • repetere-icon-
  • icon-renovare
  • icon-album-alt
  • icon-cincinno
  • icon-flag
  • icon-headphones
  • icon-volumen-off
  • icon-volumen-down
  • icon-volumen-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-audacia
  • icon-italic
  • icon-text-altitudinis
  • icon-text-latitudo
  • icon-align-left
  • icon-align-media
  • icon-align-ius
  • icon-align-iusty
  • icon-list
  • icon-indent-left
  • icon-indent-ius
  • icon-facetime-video
  • icon-imago
  • icon-pincello
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-reprehendo
  • icon-move
  • icon-gradus-retrorsum
  • icon celeriter retro
  • icon-retrorsum
  • icon-play
  • icon-pausa
  • icon-stop
  • icon-deinceps
  • icon, celeriter exstitit
  • icon GRADATUS
  • icon-eject
  • icon-chevron-left
  • icon-chevron-ius
  • icon-plus-signe
  • icon-minus-signe
  • icon-remove-signum
  • icon-ok-signum
  • icon-quaestio-signum
  • icon-info-sign
  • icon-tortor
  • icon-remove-circulo
  • icon-ok-circulus
  • icon-ban-circulus
  • icon-sagitta sinistra
  • icon-sagitta-ius
  • icon-sagitta-up
  • icon-sagitta-down
  • icon-share-alt
  • resize-icon-plenus
  • icon-resize-parvus
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamatio-signum
  • icon-donum
  • icon-folium
  • icon-ignis
  • icon-oculus-patentibus
  • icon-oculus-prope
  • icon-praemonitio-signum
  • icon-planum
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shop-cart
  • icon-folder-prope
  • icon-folder-patentibus
  • icon-resize-vertical
  • icon-resize-horizontalis
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificium
  • icon-pollices-up
  • icon-pollicibus-down
  • icon-manus-ius
  • icon-manus-sinistram
  • icon-manu-sursum
  • icon-manu-down
  • icon circulo-sagitta-ius
  • icon-circulus-sagitta-left
  • icon-circulo-sagitta-up
  • icon-circulo-sagitta-down
  • icon-globe
  • icon-convellunt
  • icon-munerum
  • icon-filter
  • brevissimum icon-
  • icon-fullscreen

Glyphicons attributio

Glyphicons Halflings normaliter gratis praesto non sunt, sed ordinatio inter Bootstrap et creatores Glyphicones hoc fieri posse fecerunt, ut tincidunt non tibi constant. Ut gratias tibi agimus, rogamus te ut ad Glyphicones cum practica retrahat, libitum nexum includas.

Quomodo uti

Omnes icones desiderant <i>tag cum singulari classe, praefixam icon-. Uti, codice sequenti fere ubique pone;

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

Sunt etiam styli prompti iconibus inversis (albis) paratis cum uno genere extra. Hoc genus in volitibus et activis civitatibus ad nav et dropdown nexus speciali modo urgebimus.

  1. <i class = "icon-investigationis icon-album" ></i>

Capita! Cum praeter chordas textus utens, ut in globulis vel nexus nav, scito spatium relictum post <i>tag ad iustae spatii.

Icon exempla

In globulis, globulis globulis uti pro instrumentorum communicationis socialis instrumentis, navigationis, vel initibus formarum praeparatis.

Bullae

Puga pyga in toolbar puga
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.  
  4.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  7.     <a class = "btn" href = "#" ><i class = "icon-align-iustifica" ></i></a>   
  8.   </div>
  9. </div>
Dropdown in a button group
User 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primarium" href = "#" ><i class = "icon-user icon-album" ></i> User </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "dropdown-menu" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Edit </a></li>  
  6.     <li><a href = "#" ><i class = "icon-tramentum" ></i> Delere </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Ban </a></li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Fac admin </a></li>  
  10.   </ul>
  11. </div>
Bulla parva
  1. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i></a>

Navigatio

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" < a href = " # " ><i class = "icon-home icon-white" ></i> Home </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Library </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Applications </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Misc </a></li>  
  6. </ul>

Forma agri

  1. <div class = "control-group" > 
  2.   <label class = "imperium-label" for = "inputIcon" > Electronicus electronicus </label>  
  3.   <div class = "controls" > 
  4.     <div class = "input-prepend" > 
  5.     <span class = "add-on" ><i class = "icon-envelope" ><i><span><input class = "span2" id = "inputIcon" type = "text" >     
  6.   </div>
  7. </div>