Bootstrap

Bas CSS

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

Se upp! Dessa dokument är för v2.3.2, som inte längre stöds officiellt. Kolla in den senaste versionen av Bootstrap!

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 en textbit med en tyngre teckensnittsvikt.

Följande textavsnitt återges som fet text .

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

Kursiv

För att framhäva ett textstycke med kursiv stil.

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.

Uppriktningsklasser

Justera enkelt text till komponenter med textjusteringsklasser.

Vänsterjusterad text.

Centrerad text.

Högerjusterad text.

  1. <p class = "text-left" > Vänsterjusterad text. </p> 
  2. <p class = "text-center" > Centrerad text. </p> 
  3. <p class = "text-right" > Högerjusterad text. </p>

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

Ta bort standard list-styleoch vänster utfyllnad på listobjekt (endast omedelbara barn).

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

I kö

Placera alla listobjekt på en enda rad med inline-blocklite lätt stoppning.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "inline" > 
  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 , <kod> & lt ; sektionen & gt ;</ code > bör 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 vaddering 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 zebrastränder till valfri tabellrad inom <tbody>via :nth-childCSS-väljaren (ej tillgängligt i IE7-8).

# 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 kolumnetiketter (eller rader, beroende på omfattning och placering).
<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.   <fieldset>
  3.     <legend> Legend </legend>
  4.     <label> Etikettnamn </label>
  5.     <input type = "text" platshållare = "Skriv något..." >  
  6.     <span class = "help-block" > Exempel på hjälptext på blocknivå här. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Kolla in mig 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Skicka </button>  
  11.   </fieldset>
  12. </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
  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> 
  3.   <input class = "span2" id = "prependedInput" type = "text" platshållare = "Användarnamn" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput" type = "text" >   
  7.   <span class = "tillägg" > .00 </span> 
  8. </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 = "tillägg" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput" type = "text" >   
  4.   <span class = "tillägg" > .00 </span> 
  5. </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" type = "text" >   
  3.   <button class = "btn" type = "button" > Gå! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons" type = "text" >   
  3.   <button class = "btn" type = "button" > Sök </button>  
  4.   <button class = "btn" type = "button" > Alternativ </button>  
  5. </div>

Nedrullningsbara knappar

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton" type = "text" >   
  3.   <div class = "btn-grupp" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       Handling
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "rullgardinsmeny" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-grupp" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Handling
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "rullgardinsmeny" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-grupp" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Handling
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "rullgardinsmeny" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >   
  12.   <div class = "btn-grupp" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       Handling
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "rullgardinsmeny" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Segmenterade rullgardinsgrupper

  1. <form>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <inmatningstyp = " text" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <inmatningstyp = " text" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

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.

Blockera nivåingångar

Få ett <input>eller <textarea>flera element att bete sig som ett element på blocknivå.

  1. <input class = "input-block-level" type = "text" platshållare = ".input-block-level" >

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-actions, 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..." >

Ogiltiga inmatningar

Stilinmatningar via standardwebbläsarfunktionalitet med :invalid. Ange ett type, lägg till requiredattributet om fältet inte är valfritt och (om tillämpligt) ange ett pattern.

Detta är inte tillgängligt i versioner av Internet Explorer 7-9 på grund av bristande stöd för CSS-pseudoväljare.

  1. <input class = "span3" type = "e-post" krävs >

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.  
  9. <div class = "kontrollgruppsfel" > 
  10.   <label class = "control-label" for = "inputError" > Indata med fel </label>  
  11.   <div class = "kontroller" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Vänligen rätta till felet </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "kontrollgruppsinformation" > 
  18.   <label class = "control-label" for = "inputInfo" > Inmatning med info </label>  
  19.   <div class = "kontroller" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Användarnamnet har redan tagits </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "kontrollgrupps framgång" > 
  26.   <label class = "control-label" for = "inputSuccess" > Indata med framgång </label>  
  27.   <div class = "kontroller" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </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" > Miniknapp </button>  
  16. </p>

Skapa blocknivåknappar – de som spänner över hela bredden av en förälder – genom att lägga till .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Blocknivåknapp </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Blocknivåknapp </button>

Inaktiverat tillstånd

Få knappar att se oklickbara ut genom att tona tillbaka dem 50 %.

Ankare element

Lägg till .disabledklassen på <a>knappar.

Primär länk Länk 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Primär länk </a>  
  2. <a href = "#" class = "btn btn-large inaktiverad" > Länk </a>

Se upp!Vi använder .disabledsom en verktygsklass här, liknande den vanliga .activeklassen, så inget prefix krävs. Dessutom är denna klass endast för estetik; du måste använda anpassad JavaScript för att inaktivera länkar här.

Knappelement

Lägg till disabledattributet till <button>knappar.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = " disabled " > Primär knapp </button>   
  2. <button type = "button" class = "btn btn-large" inaktiverad > Knapp </button>

En klass, flera taggar

Använd .btnklassen på ett <a>, <button>, eller <input>element.

Länk 
  1. <a class = "btn" href = "" > Länk </a>  
  2. <button class = "btn" type = "submit" > Knapp </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit" value = "Submit" >

Som en bästa praxis, försök att matcha elementet för ditt sammanhang för att säkerställa matchande rendering i flera webbläsare. Om du har en input, använd en <input type="submit">för din knapp.

Bilder

Lägg till klasser i ett <img>element för att enkelt utforma bilder i alla projekt.

140 x 140 140 x 140 140 x 140 
  1. <img src = "..." class = "img-rundad" >  
  2. <img src = "..." class = "img-cirkel" >  
  3. <img src = "..." class = "img-polaroid" >

Se upp! .img-roundedoch .img-circlefungerar inte i IE7-8 på grund av bristande border-radiussupport.

Ikoner av Glyphicons

Ikon glyfer

140 ikoner i sprite-form, tillgängliga i mörkgrå (standard) och vit, tillhandahållna av Glyphicons .

  • ikon-glas
  • ikon-musik
  • ikon-sökning
  • ikon-kuvert
  • ikon-hjärta
  • ikon-stjärna
  • ikon-stjärna-tom
  • ikon-användare
  • ikon-film
  • ikon-th-stor
  • ikon-th
  • ikon-th-listan
  • ikon-ok
  • ikon-ta bort
  • ikon-zooma-in
  • ikon-zooma ut
  • ikon av
  • ikon-signal
  • ikon-kugg
  • ikon-papperskorgen
  • ikon-hem
  • ikon-fil
  • ikon-tid
  • ikon-väg
  • icon-download-alt
  • ikon-nedladdning
  • ikon-uppladdning
  • ikon-inkorg
  • ikon-spel-cirkel
  • ikon-upprepa
  • icon-refresh
  • icon-list-alt
  • ikonlås
  • ikon-flagga
  • ikon-hörlurar
  • ikon-volym av
  • ikon-volym ned
  • ikon-volym upp
  • icon-qrcode
  • ikon-streckkod
  • ikon-tagg
  • ikon-taggar
  • ikon-bok
  • ikon-bokmärke
  • ikon-tryck
  • ikon-kamera
  • ikon-teckensnitt
  • ikon-fet
  • ikon-kursiv
  • ikon-text-höjd
  • ikon-text-bredd
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • ikonlista
  • ikon-indrag-vänster
  • ikon-indrag-höger
  • icon-facetime-video
  • ikon-bild
  • ikon-penna
  • ikon-karta-markör
  • ikon-justera
  • ikon-ton
  • icon-edit
  • ikon-delning
  • ikonkontroll
  • icon-move
  • ikon-steg-bakåt
  • ikon-snabb-bakåt
  • ikon bakåt
  • ikon-spel
  • ikon-paus
  • icon-stop
  • ikon-framåt
  • ikon-spolning framåt
  • ikon-steg-framåt
  • ikon-mata ut
  • ikon-chevron-vänster
  • icon-chevron-höger
  • ikon-plus-tecken
  • ikon-minus-tecken
  • ikon-ta bort-tecken
  • ikon-ok-tecken
  • ikon-fråga-tecken
  • ikon-info-tecken
  • ikon-skärmdump
  • ikon-ta bort-cirkel
  • ikon-ok-cirkel
  • icon-ban-cirkel
  • ikon-pil-vänster
  • ikon-pil-höger
  • ikon-pil upp
  • ikon-pil ner
  • icon-share-alt
  • ikon-ändra storlek-full
  • ikon-ändra storlek-liten
  • ikon-plus
  • ikon-minus
  • ikon-asterisk
  • ikon-utropstecken
  • ikon-gåva
  • ikon-blad
  • ikon-eld
  • ikon-ögonöppna
  • ikon-öga-stäng
  • ikon-varningsskylt
  • ikon-plan
  • ikon-kalender
  • ikon-slumpmässigt
  • ikon-kommentar
  • ikon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • ikon-varukorg
  • ikon-mapp-stäng
  • ikon-mapp-öppen
  • ikon-ändra storlek-vertikal
  • ikon-ändra storlek-horisontell
  • ikon-hdd
  • ikon-tjurhorn
  • ikon-klocka
  • ikon-certifikat
  • ikon-tummen upp
  • ikon-tummen-ner
  • ikon-hand-höger
  • ikon-hand-vänster
  • ikon-hand-up
  • ikon-hand-down
  • ikon-cirkel-pil-höger
  • ikon-cirkel-pil-vänster
  • ikon-cirkel-pil upp
  • ikon-cirkel-pil ner
  • ikon-glob
  • ikon-skiftnyckel
  • ikon-uppgifter
  • ikon-filter
  • ikon-portfölj
  • ikon-helskärm

Glyphicons tillskrivning

Glyphicons Halflings är normalt inte tillgängliga gratis, men ett arrangemang mellan Bootstrap och Glyphicons-skaparna har gjort detta möjligt utan kostnad för dig som utvecklare. Som tack ber vi dig att inkludera en valfri länk tillbaka till Glyphicons när det är praktiskt möjligt.

Hur man använder

Alla ikoner kräver en <i>tagg med en unik klass med prefixet icon-. För att använda, placera följande kod nästan var som helst:

  1. <i class = "ikonsökning" ></i>

Det finns även stilar tillgängliga för inverterade (vita) ikoner, färdiga med en extra klass. Vi kommer specifikt att tillämpa den här klassen på hovring och aktiva tillstånd för nav- och rullgardinslänkar.

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

Se upp!När du använder bredvid textsträngar, som i knappar eller navigeringslänkar, se till att lämna ett mellanslag efter <i>taggen för korrekt avstånd.

Ikonexempel

Använd dem i knappar, knappgrupper för ett verktygsfält, navigering eller förhandsinmatningar.

Knappar

Knappgrupp i ett knappverktygsfält
  1. <div class = "btn-verktygsfält" > 
  2.   <div class = "btn-grupp" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
Dropdown i en knappgrupp
Användare 
  1. <div class = "btn-grupp" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Användare </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "rullgardinsmeny" > 
  5.     <li><a href = "#" ><i class = "ikon-penna" ></i> Redigera </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Ta bort </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Förbjud </a></li>  
  8.     <li class = "avdelare" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Gör administratör </a></li>  
  10.   </ul>
  11. </div>
Knappstorlekar
Stjärna Stjärna Stjärna 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Stjärna </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Stjärna </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Stjärna </a>

Navigering

  1. <ul class = "nav nav-lista" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Hem </a></li>   
  3.   <li><a href = "#" ><i class = "ikonbok" ></i> Bibliotek </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Applikationer </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Övrigt </a></li>  
  6. </ul>

Formulärfält

  1. <div class = "kontrollgrupp" > 
  2.   <label class = "control-label" for = "inputIcon" > E-postadress </label>  
  3.   <div class = "kontroller" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "tillägg" ><i class = "ikon-kuvert" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>