Bootstrap

Bas CSS

Grundläggande HTML-element utformade och förbättrade med utökningsbara klasser.

Typografi

Rubriker

Alla HTML-rubriker är <h1>tillgängliga <h6>.

h1. Rubrik 1

h2. Rubrik 2

h3. Rubrik 3

h4. Rubrik 4

h5. Rubrik 5
h6. Rubrik 6

Kroppskopia

Bootstraps globala standard font-sizeär 14px , med en line-heightpå 20px . Detta tillämpas på <body>och alla stycken. Dessutom får <p>(stycken) en bottenmarginal på halva radhöjden (10 px som standard).

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

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

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

<p> ... </p>

Kopia av blykropp

Få ett stycke att sticka ut genom att lägga till .lead.

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

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

Byggd med mindre

Den typografiska skalan är baserad på två MINDRE variabler i variables.less : @baseFontSizeoch @baseLineHeight. Den första är grundteckensnittsstorleken som används genomgående och den andra är baslinjens höjd. Vi använder dessa variabler och lite enkel matematik för att skapa marginaler, fyllningar och linjehöjder av alla våra typer och mer. Anpassa dem och Bootstrap anpassar sig.

Betoning

Använd HTMLs förinställda betoningstaggar med lätta stilar.

<small>

Använd den lilla taggen för att minska betoningen på inline eller textblock .

Denna textrad är avsedd att behandlas som finstilt.

<p> <liten> Denna textrad är avsedd att behandlas som finstilt. </small> </p>

Djärv

För att framhäva ett textstycke med viktigt

Följande textavsnitt återges som fet text .

<strong> återges som fet text </strong>

Kursiv

För att betona en textbit med stress

Följande textutdrag renderas som kursiv text .

<em> återges som kursiv text </em>

Se upp! Använd gärna <b>och <i>i HTML5. <b>är tänkt att markera ord eller fraser utan att förmedla ytterligare betydelse medan <i>är mest för röst, tekniska termer, etc.

Betoningsklasser

Förmedla mening genom färg med en handfull betoningsklasser.

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.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "text-varning" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-framgång" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Förkortningar

Stiliserad implementering av HTML:s <abbr>element för förkortningar och akronymer för att visa den utökade versionen vid hovring. Förkortningar med ett titleattribut har en lätt prickad bottenkant och en hjälpmarkör vid hovring, vilket ger ytterligare sammanhang vid hovring.

<abbr>

titleInkludera attributet för utökad text vid lång hovring av en förkortning .

En förkortning av ordet attribut är attr .

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

<abbr class="initialism">

Lägg .initialismtill en förkortning för en lite mindre teckenstorlek.

HTML är det bästa sedan skivat bröd.

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

Adresser

Presentera kontaktinformation för närmaste förfader eller hela arbetet.

<address>

Bevara formateringen genom att avsluta alla rader med <br>.

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

Blockcitat

För att citera innehållsblock från en annan källa i ditt dokument.

Standard blockcitat

Linda <blockquote>runt vilken HTML som helst som citat. För raka citat rekommenderar vi en <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.

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

Blockcitat alternativ

Stil- och innehållsändringar för enkla varianter av ett standardblockcitat.

Namnge en källa

Lägg <small>till tagg för att identifiera källan. Slå in namnet på källverket i <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.

Någon känd i källtiteln 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante. </p>
  3.   <small> Någon berömd <cite title = "Källtitel" > Källtitel </cite></small> 
  4. </blockquote>

Alternativa skärmar

Använd .pull-rightför ett flytande, högerjusterat blockcitat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.

Någon känd i källtiteln 
  1. <blockquote class = "dra höger" > 
  2.   ...
  3. </blockquote>

Listor

Obeställd

En lista över objekt där ordningen inte uttryckligen spelar någon roll.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem vid massa
  • Facilisis i pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat kl
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Beställde

En lista över objekt där ordningen uttryckligen har betydelse.

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

Ostylad

En lista över föremål utan list-styleeller ytterligare vänster stoppning.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem vid massa
  • Facilisis i pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat kl
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

Beskrivning

En lista över termer med tillhörande beskrivningar.

Beskrivningslistor
En beskrivningslista är perfekt för att definiera termer.
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. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Horisontell beskrivning

Gör termer och beskrivningar i <dl>rad sida vid sida.

Beskrivningslistor
En beskrivningslista är perfekt för att definiera termer.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Se upp! Horisontella beskrivningslistor kommer att trunkera termer som är för långa för att passa i den vänstra kolumnen fix text-overflow. I smalare vyportar kommer de att ändras till den staplade standardlayouten.

Koda

I kö

Slå in inline kodavsnitt med <code>.

Till exempel <section>bör lindas som inline. 
  1. Till exempel bör <code><section> </ code > lindas som inline .

Grundblock

Använd <pre>för flera rader kod. Se till att undvika alla vinkelparenteser i koden för korrekt rendering.

<p>Exempeltext här...</p>
  1. <pre>
  2.   <p>Exempeltext här...</p>
  3. </pre>

Se upp! Se till att hålla koden i <pre>taggarna så nära vänster som möjligt; det kommer att rendera alla flikar.

Du kan valfritt lägga till .pre-scrollableklassen som kommer att ställa in en maxhöjd på 350px och tillhandahålla en rullningslist på y-axeln.

Tabeller

Standardstilar

För grundläggande styling—lätt stoppning och endast horisontella avdelare—lägg till basklassen .tabletill valfri <table>.

# Förnamn Efternamn Användarnamn
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Larry fågeln @Twitter 
  1. <tabellklass = " tabell" > 
  2.   …
  3. </table>

Valfria klasser

Lägg till någon av följande klasser till .tablebasklassen.

.table-striped

Lägger till zebra-striping till valfri tabellrad inom <tbody>via :nth-childCSS-väljaren (ej tillgängligt i IE7-IE8).

# Förnamn Efternamn Användarnamn
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Larry fågeln @Twitter 
  1. <table class = "tabell tabell-randig" > 
  2.   …
  3. </table>

.table-bordered

Lägg till kanter och rundade hörn på bordet.

# Förnamn Efternamn Användarnamn
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter 
  1. <tabellklass = " tabellkantad" > 
  2.   …
  3. </table>

.table-hover

Aktivera ett hovringsläge på tabellrader inom en <tbody>.

# Förnamn Efternamn Användarnamn
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter 
  1. <tabellklass = " tabell-svävare" > 
  2.   …
  3. </table>

.table-condensed

Gör borden mer kompakta genom att halvera cellstoppningen.

# Förnamn Efternamn Användarnamn
1 Mark Otto @mdo
2 Jacob Thornton @fett
3 Fågeln Larry @Twitter 
  1. <tabellklass = " tabell tabellkondenserad" > 
  2.   …
  3. </table>

Valfria radklasser

Använd kontextuella klasser för att färglägga tabellrader.

Klass Beskrivning
.success Indikerar en framgångsrik eller positiv handling.
.error Indikerar en farlig eller potentiellt negativ handling.
.warning Indikerar en varning som kan behöva åtgärdas.
.info Används som ett alternativ till standardstilarna.
# Produkt Betalning tagits Status
1 TB - Månatlig 01/04/2012 Godkänd
2 TB - Månatlig 2012-04-02 Tackade nej
3 TB - Månatlig 03/04/2012 I väntan på
4 TB - Månatlig 04/04/2012 Ring för att bekräfta 
  1. ...
  2.   < tr class = "framgång" >
  3.     <td> 1 < /td>
  4.     <td>TB – varje månad</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Godkänd</ td >
  7.   </ tr >
  8. ...

Tabelluppmärkning som stöds

Lista över HTML-element i tabellen som stöds och hur de ska användas.

Märka Beskrivning
<table> Omslagselement för att visa data i tabellformat
<thead> Behållarelement för tabellrubrikrader ( <tr>) för att märka tabellkolumner
<tbody> Behållarelement för tabellrader ( <tr>) i tabellens brödtext
<tr> Behållarelement för en uppsättning tabellceller ( <td>eller <th>) som visas på en enda rad
<td> Standardtabellcell
<th> Speciell tabellcell för kolumn (eller rad, beroende på omfattning och placering) etiketter
Måste användas inom en<thead>
<caption> Beskrivning eller sammanfattning av vad tabellen innehåller, särskilt användbar för skärmläsare 
  1. <tabell>
  2.   <caption> ... </caption>
  3.   <huvud>
  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>

Blanketter

Standardstilar

Individuella formulärkontroller får stil, men utan någon nödvändig basklass på <form>eller stora förändringar i markeringen. Resulterar i staplade, vänsterjusterade etiketter ovanpå formulärkontrollerna.

Legend Exempel på hjälptext på blocknivå här. 
  1. <form>
  2.   <legend> Legend </legend>
  3.   <label> Etikettnamn </label>
  4.   <input type = "text" platshållare = "Skriv något..." >  
  5.   <span class = "help-block" > Exempel på hjälptext på blocknivå här. </span> 
  6.   <label class = "checkbox" > 
  7.     <input type = "checkbox" > Kolla in mig 
  8.   </label>
  9.   <button type = "submit" class = "btn" > Skicka </button>  
  10. </form>

Valfria layouter

Inkluderat med Bootstrap finns tre valfria formulärlayouter för vanliga användningsfall.

Sökformulär

Lägg .form-searchtill i formuläret och .search-queryför <input>en extra avrundad textinmatning.

  1. <form class = "form-search" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <button type = "submit" class = "btn" > Sök </button>  
  4. </form>

Inline formulär

Lägg .form-inlinetill för vänsterjusterade etiketter och inline-blockkontroller för en kompakt layout.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" platshållare = "E-post" >   
  3.   <input type = "lösenord" class = "input-small" platshållare = "Lösenord" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Kom ihåg mig 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Logga in </button>  
  8. </form>

Horisontell form

Högerjustera etiketterna och flytta dem till vänster så att de visas på samma rad som kontrollerna. Kräver flest uppmärkningsändringar från ett standardformulär:

  • Lägg .form-horizontaltill i formuläret
  • Linda in etiketter och kontroller.control-group
  • Lägg .control-labeltill på etiketten
  • Linda in alla tillhörande kontroller .controlsför korrekt inriktning
Legend 
  1. <form class = "form-horisontal" > 
  2.   <div class = "kontrollgrupp" > 
  3.     <label class = "control-label" for = "inputEmail" > E -post </label>  
  4.     <div class = "kontroller" > 
  5.       <input type = "text" id = "inputEmail" platshållare = "E-post" >   
  6.     </div>
  7.   </div>
  8.   <div class = "kontrollgrupp" > 
  9.     <label class = "control-label" for = "inputPassword" > Lösenord </label>  
  10.     <div class = "kontroller" > 
  11.       <input type = "password" id = "inputPassword" platshållare = "Lösenord" >   
  12.     </div>
  13.   </div>
  14.   <div class = "kontrollgrupp" > 
  15.     <div class = "kontroller" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Kom ihåg mig 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Logga in </button>  
  20.     </div>
  21.   </div>
  22. </form>

Formkontroller som stöds

Exempel på standardformulärkontroller som stöds i en exempelformulärlayout.

Ingångar

Vanligaste formulärkontroll, textbaserade inmatningsfält. Inkluderar stöd för alla HTML5-typer: text, lösenord, datetime, datetime-local, datum, månad, tid, vecka, nummer, e-post, url, sök, tel och färg.

Kräver alltid användning av en specificerad type.

  1. <inmatningstyp = " text" platshållare = "Textinmatning" >

Textområde

Formulärkontroll som stöder flera textrader. Ändra rowsattribut vid behov.

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

Kryssrutor och radioapparater

Kryssrutorna är för att välja ett eller flera alternativ i en lista medan radioapparater är för att välja ett alternativ bland många.

Standard (staplad)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" värde = "" >  
  3.   Alternativ ett är det och det - se till att inkludera varför det är bra
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" värde = "alternativ1" markerad >     
  8.   Alternativ ett är det och det - se till att inkludera varför det är bra
  9. </label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" värde = "alternativ2" >    
  12.   Alternativ två kan vara något annat och om du väljer det avmarkeras alternativ ett
  13. </label>

Inline kryssrutor

Lägg till .inlineklassen i en serie kryssrutor eller radioapparater för kontroller visas på samma rad.

  1. <label class = "checkbox inline" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" värde = "alternativ1" > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" värde = "alternativ2" > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" värde = "alternativ3" > 3   
  9. </label>

Väljer

Använd standardalternativet eller ange ett multiple="multiple"för att visa flera alternativ samtidigt.


  1. <välj>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </select>
  8.  
  9. <välj flera = "flera" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </select>

Utöka formulärkontroller

Bootstrap lägger utöver befintliga webbläsarkontroller och inkluderar andra användbara formulärkomponenter.

Bifogade och bifogade ingångar

Lägg till text eller knappar före eller efter textbaserad inmatning. Observera att selectelement inte stöds här.

Standardalternativ

Slå in en .add-onoch en inputmed en av två klasser för att lägga till eller lägga till text i en inmatning.

@

0,00 
  1. <div class = "input-prepend" > 
  2.   <span class = "tillägg" > @ </span><input class = "span2" id = "prependedInput" size = "16" type = "text" platshållare = "Användarnamn" >      
  3. </div>
  4. <div class = "input-append" > 
  5.   <input class = "span2" id = "appendedInput" size = "16" type = "text" ><span class = "tillägg" > .00 </span>     
  6. </div>

Kombinerad

Använd både klasser och två instanser av .add-onför att lägga till och lägga till en indata.

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

Knappar istället för text

Istället för en <span>med text, använd a .btnför att bifoga en knapp (eller två) till en inmatning.


  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton" size = "16" type = "text" ><button class = "btn" type = "button" > Gå! </button>      
  3. </div>
  4.  
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInputButtons" size = "16" type = "text" ><button class = "btn" type = "button" > Sök </button><button class = "btn" type = "knapp" > Alternativ </button>        
  7. </div>

Sökformulär

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

Kontrollera storlek

Använd relativa storleksklasser som .input-largeeller matcha dina indata till rutnätets kolumnstorlekar med hjälp av .span*klasser.

Relativ storlek

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

Se upp! I framtida versioner kommer vi att ändra användningen av dessa relativa inmatningsklasser för att matcha våra knappstorlekar. Kommer till exempel .input-largeatt öka utfyllnaden och teckensnittsstorleken på en inmatning.

Rutnätsstorlek

Använd .span1till .span12för indata som matchar samma storlekar på rutnätskolumnerna.

  1. <input class = "span1" type = "text" platshållare = ".span1" >   
  2. <input class = "span2" type = "text" platshållare = ".span2" >   
  3. <input class = "span3" type = "text" platshållare = ".span3" >   
  4. <välj klass = "span1" > 
  5.   ...
  6. </select>
  7. <välj klass = "span2" > 
  8.   ...
  9. </select>
  10. <välj klass = "span3" > 
  11.   ...
  12. </select>

För flera rutnätsingångar per rad, använd .controls-rowmodifieringsklassen för korrekt avstånd . Det flyter ingångarna för att kollapsa vitt utrymme, ställer in rätt marginaler och rensar flyten.

  1. <div class = "kontroller" > 
  2.   <input class = "span5" type = "text" platshållare = ".span5" >   
  3. </div>
  4. <div class = "kontroller kontroller-rad" > 
  5.   <input class = "span4" type = "text" platshållare = ".span4" >   
  6.   <input class = "span1" type = "text" platshållare = ".span1" >   
  7. </div>
  8. ...

Oredigerbara ingångar

Presentera data i ett formulär som inte går att redigera utan att använda faktisk formuläruppmärkning.

Något värde här 
  1. <span class = "input-xlarge uneditable-input" > Något värde här </span>

Forma åtgärder

Avsluta ett formulär med en grupp av åtgärder (knappar). När de placeras inom en .form-horizontal, dras knapparna automatiskt in för att passa in i formulärkontrollerna.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Spara ändringar </button>  
  3.   <button type = "button" class = "btn" > Avbryt </button>  
  4. </div>

Hjälp text

Inline- och blocknivåstöd för hjälptext som visas runt formulärkontroller.

Inline hjälp

Inline hjälptext 
  1. <input type = "text" ><span class = "help-inline" > Inline hjälptext </span>

Blockera hjälp

Ett längre block med hjälptext som bryter in på en ny rad och kan sträcka sig längre än en rad. 
  1. <input type = "text" ><span class = "help-block" > Ett längre block med hjälptext som bryts in på en ny rad och kan sträcka sig längre än en rad. </span>

Formulärkontrolltillstånd

Ge feedback till användare eller besökare med grundläggande feedbacktillstånd om formulärkontroller och etiketter.

Ingångsfokus

Vi tar bort standardstilarna outlinepå vissa formulärkontroller och använder en box-shadowi dess ställe för :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" värde = "Detta är fokuserat..." >

Inaktiverade ingångar

Lägg till disabledattributet på en ingång för att förhindra användarinmatning och utlösa ett lite annorlunda utseende.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" platshållare = "Inaktiverad inmatning här..." inaktiverad >

Validering tillstånd

Bootstrap innehåller valideringsstilar för fel-, varnings-, info- och framgångsmeddelanden. För att använda, lägg till lämplig klass till den omgivande .control-group.

Något kan ha gått fel
Vänligen rätta till felet
användarnamnet är taget
Woohoo! 
  1. <div class = "kontrollgruppsvarning" > 
  2.   <label class = "control-label" for = "inputWarning" > Ingång med varning </label>  
  3.   <div class = "kontroller" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Något kan ha gått fel </span> 
  6.   </div>
  7. </div>
  8. <div class = "kontrollgruppsfel" > 
  9.   <label class = "control-label" for = "inputError" > Indata med fel </label>  
  10.   <div class = "kontroller" > 
  11.     <input type = "text" id = "inputError" >  
  12.     <span class = "help-inline" > Vänligen rätta till felet </span> 
  13.   </div>
  14. </div>
  15. <div class = "kontrollgrupps framgång" > 
  16.   <label class = "control-label" for = "inputSuccess" > Indata med framgång </label>  
  17.   <div class = "kontroller" > 
  18.     <input type = "text" id = "inputSuccess" >  
  19.     <span class = "help-inline" > Woohoo! </span> 
  20.   </div>
  21. </div>

Knappar

Standardknappar

Knappstilar kan tillämpas på vad som helst med .btnklassen tillämpad. Vanligtvis vill du dock tillämpa dessa endast på <a>och <button>element för bästa rendering.

Knapp class="" Beskrivning
btn Standard grå knapp med lutning
btn btn-primary Ger extra visuell vikt och identifierar den primära åtgärden i en uppsättning knappar
btn btn-info Används som ett alternativ till standardstilarna
btn btn-success Indikerar en framgångsrik eller positiv handling
btn btn-warning Indikerar att försiktighet bör vidtas med denna åtgärd
btn btn-danger Indikerar en farlig eller potentiellt negativ handling
btn btn-inverse Alternativ mörkgrå knapp, inte bunden till en semantisk handling eller användning
btn btn-link Framhäv en knapp genom att få den att se ut som en länk samtidigt som knappens beteende bibehålls

Korswebbläsarkompatibilitet

IE9 beskär inte bakgrundsgradienter på rundade hörn, så vi tar bort det. Relaterat, IE9 jankifierar inaktiverade buttonelement, vilket gör text grå med en otäck textskugga som vi inte kan fixa.

Knappstorlekar

Vill du ha större eller mindre knappar? Lägg till .btn-large, .btn-small, eller .btn-miniför ytterligare storlekar.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Stor knapp </button>  
  3.   <button class = "btn btn-large" type = "button" > Stor knapp </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Standardknapp </button>  
  7.   <button class = "btn" type = "button" > Standardknapp </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Liten knapp </button>  
  11.   <button class = "btn btn-small" type = "button" > Liten knapp </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Miniknapp </button>  
  15.   <button class="btn btn-mini" type="button">Mini button</button>
  16. </p>

Create block level buttons—those that span the full width of a parent— by adding .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>

Disabled state

Make buttons look unclickable by fading them back 50%.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link 

  1. <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
  2. <a href="#" class="btn btn-large disabled">Link</a>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Button element

Add the disabled attribute to <button> buttons.

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

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

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

As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

Images

Add classes to an <img> element to easily style images in any project.

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

Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

Icons by Glyphicons

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Glyphicons attribution

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

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

There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.

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

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

Icon examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Buttons

Button group in a button toolbar
  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-justify"></i></a>
  8.   </div>
  9. </div>
Dropdown in a button group
User 
  1. <div class="btn-group">
  2.   <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></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-trash"></i> Delete</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> Make admin</a></li>
  10.   </ul>
  11. </div>
Small button
  1. <a class="btn btn-small" href="#"><i class="icon-star"></i></a>

Navigation

  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>

Form fields

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