Overskrifter

Alle HTML-overskrifter er <h1>tilgængelige <h6>.

h1. Overskrift 1

h2. Overskrift 2

h3. Overskrift 3

h4. Overskrift 4

h5. Overskrift 5

h6. Overskrift 6

Brødtekst

Bootstraps globale standard font-sizeer 14px , med en line-heightpå 20px . Dette gælder for <body>og alle afsnit. Derudover <p>modtager (afsnit) en bundmargen på halvdelen af deres linjehøjde (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>

Blykropskopi

Få et afsnit til at skille sig ud ved at tilføje .lead.

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

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

Bygget med mindre

Den typografiske skala er baseret på to MINDRE variable i variables.less : @baseFontSizeog @baseLineHeight. Den første er basisskriftstørrelsen, der bruges hele vejen igennem, og den anden er basislinjehøjden. Vi bruger disse variabler og noget simpel matematik til at skabe marginer, fyldninger og linjehøjder af alle vores typer og mere. Tilpas dem og Bootstrap tilpasser sig.

Vægt

Gør brug af HTML's standard emphasis tags med lette stilarter.

`<small>`

Brug det lille tag for at mindske inline eller tekstblokke .

Denne tekstlinje er beregnet til at blive behandlet som småt.

<p> <lille> Denne tekstlinje er beregnet til at blive behandlet som småt. </small> </p>

Fremhævet

For at fremhæve et tekststykke med en tungere skrifttype.

Det følgende tekststykke gengives som fed tekst .

<strong> gengivet som fed tekst </strong>

Kursiv

For at fremhæve et uddrag af tekst med kursiv.

Det følgende tekststykke gengives som kursiv tekst .

<em> gengivet som kursiv tekst </em>

Heads up!Du er velkommen til at bruge <b>og <i>i HTML5. <b>er beregnet til at fremhæve ord eller sætninger uden at formidle yderligere betydning, mens <i>det mest er til stemme, tekniske termer osv.

Opstillingsklasser

Juster nemt tekst til komponenter med tekstjusteringsklasser.

Venstrejusteret tekst.

Centreret tekst.

Højrejusteret tekst.

<p class = "text-left" > Venstrejusteret tekst. </p> 
<p class = "text-center" > Centreret tekst. </p> 
<p class = "text-right" > Højrejusteret tekst. </p>

Vægtklasser

Formidle mening gennem farver med en håndfuld vægtbrugsklasser.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

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

Forkortelser

Stiliseret implementering af HTMLs <abbr>element til forkortelser og akronymer for at vise den udvidede version på hover. Forkortelser med en titleattribut har en let stiplet bundkant og en hjælpemarkør ved svævning, hvilket giver yderligere kontekst ved svævning.

`<abbr>`

titleMedtag attributten for udvidet tekst ved lang svævning af en forkortelse .

En forkortelse af ordet attribut er attr .

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

`<abbr class="initialism">`

Tilføj .initialismtil en forkortelse for en lidt mindre skriftstørrelse.

HTML er det bedste siden skiveskåret brød.

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

Adresser

Præsenter kontaktoplysninger for den nærmeste forfader eller hele arbejdet.

`<address>`

Bevar formateringen ved at afslutte alle linjer med <br>.

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

Fulde navn
[email protected]

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

Blokcitater

Til at citere indholdsblokke fra en anden kilde i dit dokument.

Standard blokcitat

Ombryd <blockquote>enhver HTML som citatet. For lige citater anbefaler vi en <p>.

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

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

Indstillinger for blokcitat

Stil- og indholdsændringer for simple variationer på et standard blokcitat.

Navngivning af en kilde

Tilføj <small>tag for at identificere kilden. Pak navnet på kildeværket ind i <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.
En berømt i Kildetitel

<blokcitat>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante. </p>
  <small> En berømt <cite title = "Kildetitel" > Kildetitel </cite></small> 
</blockquote>

Alternative skærme

Bruges .pull-righttil et flydende, højrejusteret blokcitat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.
En berømt i Kildetitel

<blockquote class = "træk til højre" > 
  ...
</blockquote>

Lister

Uordnet

En liste over elementer, hvor rækkefølgen ikke eksplicit betyder noget.

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

<ul>
  <li> ... </li>
</ul>

Bestilt

En liste over elementer, hvor rækkefølgen udtrykkeligt har betydning.

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

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

Ustylet

Fjern standard list-styleog venstre polstring på listeelementer (kun umiddelbare børn).

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

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

Inline

Placer alle listeelementer på en enkelt linje med inline-blocklidt let polstring.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Beskrivelse

En liste over termer med tilhørende beskrivelser.

Beskrivelseslister: En beskrivelsesliste er perfekt til at definere 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.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Vandret beskrivelse

Lav termer og beskrivelser på <dl>linje side om side.

Beskrivelseslister: En beskrivelsesliste er perfekt til at definere 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, ud fermentum massa justo sit amet risus.

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

Heads up!Horisontale beskrivelseslister vil afkorte termer, der er for lange til at passe ind i den venstre kolonne rettelse text-overflow. I smallere visningsporte vil de skifte til standard stablet layout.

Inline

Ombryd inline kodestykker med <code>.

Skal f.eks. <section>pakkes ind som inline.

For eksempel , <code> & lt ; afsnit & gt ;</ code > skal pakkes ind som inline .

Grundblok

Bruges <pre>til flere linjer kode. Sørg for at undslippe eventuelle vinkelparenteser i koden for korrekt gengivelse.

<p>Eksempeltekst her...</p>

<pre>
  <p>Eksempeltekst her...</p>
</pre>

Heads up!Sørg for at holde koden i <pre>tags så tæt på venstre som muligt; det vil gengive alle faner.

Du kan eventuelt tilføje .pre-scrollableklassen, som vil indstille en maks. højde på 350px og give en y-akse rullebjælke.

Standard stilarter

Til grundlæggende styling - let polstring og kun vandrette skillevægge - tilføj basisklassen .tabletil enhver <table>.

#	Fornavn	Efternavn	Brugernavn
1	Mærke	Otto	@mdo
2	Jacob	Thornton	@fed
3	Larry	fuglen	@twitter

< tabelklasse = "tabel" > 
  …
</table>

Valgfri klasser

Tilføj en af følgende klasser til .tablebasisklassen.

`.table-striped`

Tilføjer zebrastriber til enhver tabelrække i <tbody>via :nth-childCSS-vælgeren (ikke tilgængelig i IE7-8).

#	Fornavn	Efternavn	Brugernavn
1	Mærke	Otto	@mdo
2	Jacob	Thornton	@fed
3	Larry	fuglen	@twitter

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

`.table-bordered`

Tilføj kanter og afrundede hjørner til bordet.

#	Fornavn	Efternavn	Brugernavn
1	Mærke	Otto	@mdo
1	Mærke	Otto	@getbootstrap
2	Jacob	Thornton	@fed
3	Fuglen Larry		@twitter

<table class = "tabel-bordered" > 
  …
</table>

`.table-hover`

Aktiver en svævetilstand på tabelrækker i en <tbody>.

#	Fornavn	Efternavn	Brugernavn
1	Mærke	Otto	@mdo
2	Jacob	Thornton	@fed
3	Fuglen Larry		@twitter

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

`.table-condensed`

Gør borde mere kompakte ved at skære cellepolstring i to.

#	Fornavn	Efternavn	Brugernavn
1	Mærke	Otto	@mdo
2	Jacob	Thornton	@fed
3	Fuglen Larry		@twitter

<tabel klasse = "tabel tabel-kondenseret" > 
  …
</table>

Valgfri rækkeklasser

Brug kontekstuelle klasser til at farve tabelrækker.

Klasse	Beskrivelse
`.success`	Angiver en vellykket eller positiv handling.
`.error`	Angiver en farlig eller potentielt negativ handling.
`.warning`	Indikerer en advarsel, der måske kræver opmærksomhed.
`.info`	Bruges som et alternativ til standardstilene.

#	Produkt	Betaling modtaget	Status
1	TB - Månedligt	01/04/2012	godkendt
2	TB - Månedligt	02/04/2012	Afvist
3	TB - Månedligt	03/04/2012	Verserende
4	TB - Månedligt	04/04/2012	Ring for at bekræfte

...
  < tr class = "succes" >
    <td> 1 < /td>
    <td>TB – Månedligt</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>Godkendt</ td >
  </ tr >
...

Understøttet tabelmarkering

Liste over understøttede tabel HTML-elementer og hvordan de skal bruges.

Tag	Beskrivelse
`<table>`	Indpakningselement til visning af data i tabelformat
`<thead>`	Containerelement til tabeloverskriftsrækker ( `<tr>`) for at mærke tabelkolonner
`<tbody>`	Containerelement til tabelrækker ( `<tr>`) i tabellens brødtekst
`<tr>`	Containerelement for et sæt tabelceller ( `<td>`eller `<th>`), der vises på en enkelt række
`<td>`	Standardtabelcelle
`<th>`	Speciel tabelcelle til kolonne (eller række, afhængigt af omfang og placering) etiketter
`<caption>`	Beskrivelse eller oversigt over, hvad tabellen indeholder, især nyttig for skærmlæsere

<tabel>
  <caption> ... </caption>
  <hoved>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

Standard stilarter

Individuelle formularkontrolelementer modtager styling, men uden nogen påkrævet basisklasse på <form>eller store ændringer i markup. Resulterer i stablede, venstrejusterede etiketter oven på formularkontrollerne.

<form>
  <feltsæt>
    <legend> Forklaring </legend>
    <label> Etiketnavn </label>
    <input type = "text" pladsholder = "Skriv noget..." >  
    <span class = "help-block" > Eksempel på blokniveau hjælpetekst her. </span> 
    <label class = "checkbox" > 
      <input type = "checkbox" > Tjek mig ud 
    </label>
    <button type = "send"   class = "btn" > Send </button>
  </fieldset>
</form>

Valgfri layouts

Inkluderet med Bootstrap er tre valgfri formlayout til almindelige brugssager.

Søgeformular

Tilføje.form-search til formularen og .search-querytil <input>for en ekstra afrundet tekstinput.

<form klasse =  "form-søgning" >
  <input type = "tekst" klasse =   "input-medium søgeforespørgsel" >
  <button type = "submit" class = "btn"   > Søg </button>
</form>

Inline formular

Tilføj .form-inlinetil venstrejusterede etiketter og inline-blok-kontroller for et kompakt layout.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" pladsholder = "E-mail" >   
  <input type = "password" class = "input-small" pladsholder = "Adgangskode" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Husk mig 
  </label>
  <button type = "submit" class = "btn" > Log ind </button>  
</form>

Vandret form

Højrejuster etiketter og svæv dem til venstre for at få dem til at blive vist på samme linje som kontroller. Kræver flest markeringsændringer fra en standardformular:

Tilføje.form-horizontal til formularen
Pak etiketter og kontroller ind.control-group
Tilføj .control-labeltil etiketten
Pak alle tilknyttede kontroller ind .controlsfor korrekt justering

<form class = "form-horisontal" > 
  <div class = "kontrolgruppe" > 
    <label class = "control-label" for = "inputEmail" > E- mail </label>  
    <div class = "kontroller" > 
      <input type = "text" id = "inputEmail" pladsholder = "E-mail" >   
    </div>
  </div>
  <div class = "kontrolgruppe" > 
    <label class = "control-label" for = "inputPassword" > Adgangskode </label>  
    <div class = "kontroller" > 
      <input type = "password" id = "inputPassword" pladsholder = "Adgangskode" >   
    </div>
  </div>
  <div class = "kontrolgruppe" > 
    <div class = "kontroller" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > Husk mig 
      </label>
      <button type = "submit" class = "btn" > Log ind </button>  
    </div>
  </div>
</form>

Understøttede formularkontrolelementer

Eksempler på standardformularkontrolelementer, der understøttes i et eksempelformularlayout.

Indgange

Mest almindelige formularkontrol, tekstbaserede inputfelter. Inkluderer understøttelse af alle HTML5-typer: tekst, adgangskode, datetime, datetime-local, dato, måned, tid, uge, nummer, e-mail, url, søgning, tel og farve.

Kræver brug af en specificeret typetil enhver tid.

<input type = "text" pladsholder = "Tekstinput" >

Tekstområde

Formkontrol, der understøtter flere tekstlinjer. Skift rowsattribut efter behov.

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

Afkrydsningsfelter og radioer

Afkrydsningsfelter er til at vælge en eller flere muligheder på en liste, mens radioer er til at vælge en mulighed blandt mange.

Standard (stablet)

<label class = "checkbox" > 
  <input type = "checkbox" værdi = "" >  
  Mulighed 1 er dette og hint - sørg for at inkludere, hvorfor det er fantastisk
</label>
 
<label class = "radio" > 
  <input type = "radio" navn = "optionsRadios" id = "optionsRadios1" værdi = "option1" markeret >     
  Mulighed 1 er dette og hint - sørg for at inkludere, hvorfor det er fantastisk
</label>
<label class = "radio" > 
  <input type = "radio" navn = "optionsRadios" id = "optionsRadios2" værdi = "option2" >    
  Mulighed to kan være noget andet, og valg af det vil fravælge mulighed et
</label>

Inline afkrydsningsfelter

Føj .inlineklassen til en række afkrydsningsfelter eller radioer, så kontroller vises på samme linje.

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

Vælger

Brug standardindstillingen, eller angiv en multiple="multiple"for at vise flere muligheder på én gang.

<vælg>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<vælg multiple = "multiple" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

Udvidelse af formularkontroller

Bootstrap tilføjer oven på eksisterende browserkontroller og inkluderer andre nyttige formularkomponenter.

Forelagte og tilføjede input

Tilføj tekst eller knapper før eller efter et tekstbaseret input. Bemærk, at selectelementer ikke understøttes her.

Standardindstillinger

Ombryd en .add-onog en inputmed en af to klasser for at sætte tekst foran eller tilføje tekst til et input.

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" pladsholder = "Brugernavn" >    
</div>
<div class = "input-tilføj" > 
  <input klasse = "span2" id = "appendedInput" type = "tekst" >   
  <span class = "add-on" > .00 </span> 
</div>

Kombineret

Brug både klasser og to forekomster af .add-ontil at indsætte og tilføje et input.

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput" type = "tekst" >   
  <span class = "add-on" > .00 </span> 
</div>

Knapper i stedet for tekst

I stedet for en <span>med tekst, brug a .btntil at vedhæfte en knap (eller to) til et input.

<div class = "input-tilføj" > 
  <input klasse = "span2" id = "appendedInputButton" type = "tekst" >   
  <button class = "btn" type = "button" > Gå! </button>  
</div>

<div class = "input-tilføj" > 
  <input klasse = "span2" id = "appendedInputButtons" type = "tekst" >   
  <button class = "btn" type = "button" > Søg </button>  
  <button class = "btn" type = "button" > Indstillinger </button>  
</div>

Knap rullemenuer

<div class = "input-tilføj" > 
  <input class = "span2" id = "appendedDropdownButton" type = "tekst" >   
  <div class = "btn-gruppe" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Handling
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-gruppe" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Handling
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "tekst" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-gruppe" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Handling
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  <input klasse = "span2" id = "appendedPrependedDropdownButton" type = "tekst" >   
  <div class = "btn-gruppe" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Handling
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

Segmenterede dropdown-grupper

<form>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <input type = "tekst" > 
  </div>
  <div class = "input-tilføj" > 
    <input type = "tekst" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Søgeformular

<form class = "form-søgning" > 
  <div class = "input-tilføj" > 
    <input type = "text" class = "span2 søgeforespørgsel" >  
    <button type = "submit" class = "btn" > Søg </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Søg </button>  
    <input type = "text" class = "span2 søgeforespørgsel" >  
  </div>
</form>

Styr størrelsen

Brug relative størrelsesklasser som .input-largeeller match dine input til gitterkolonnestørrelserne ved hjælp af .span*klasser.

Bloker niveauindgange

Få et hvilket som helst <input>eller <textarea>element til at opføre sig som et element på blokniveau.

<input klasse = "input-blok-niveau" type = "tekst" pladsholder = ".input-blok-niveau" >

Relativ størrelse

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

Heads up!I fremtidige versioner vil vi ændre brugen af disse relative inputklasser, så de matcher vores knapstørrelser. For eksempel,.input-large vil det øge udfyldningen og skriftstørrelsen af et input.

Gitterstørrelse

Brug .span1til .span12til input, der matcher de samme størrelser af gitterkolonnerne.

<input class = "span1" type = "text" pladsholder = ".span1" >   
<input class = "span2" type = "text" pladsholder = ".span2" >   
<input class = "span3" type = "text" pladsholder = ".span3" >   
<vælg klasse = "span1" > 
  ...
</select>
<vælg klasse = "span2" > 
  ...
</select>
<vælg klasse = "span3" > 
  ...
</select>

For flere gitterinput pr. linje skal du bruge .controls-rowmodifikatorklassen til korrekt mellemrum . Det flyder inputs for at kollapse hvidt mellemrum, indstiller de korrekte marginer og rydder float.

<div class = "kontroller" > 
  <input class = "span5" type = "text" pladsholder = ".span5" >   
</div>
<div class = "kontroller kontrol-rækken" > 
  <input class = "span4" type = "text" pladsholder = ".span4" >   
  <input class = "span1" type = "text" pladsholder = ".span1" >   
</div>
...

Uredigerbare input

Præsenter data i en formular, der ikke kan redigeres uden brug af faktisk formularmarkering.

<span class = "input-xlarge uneditable-input" > En vis værdi her </span>

Form handlinger

Afslut en formular med en gruppe handlinger (knapper). Når de placeres i en .form-actions, vil knapperne automatisk indrykke for at flugte med formularkontrollerne.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > Gem ændringer </button>  
  <button type = "button" class = "btn" > Annuller </button>  
</div>

Hjælpetekst

Inline- og blokniveau-understøttelse af hjælpetekst, der vises omkring formularkontrolelementer.

Inline hjælp

<input type = "text" ><span class = "help-inline" > Inline hjælpetekst </span>

Bloker hjælp

<input type = "text" ><span class = "help-block" > En længere blok af hjælpetekst, der bryder ind på en ny linje og kan strække sig ud over en linje. </span>

Form kontroltilstande

Giv feedback til brugere eller besøgende med grundlæggende feedbacktilstande på formularkontrolelementer og etiketter.

Input fokus

Vi fjerner standardstilene outlinepå nogle formularkontrolelementer og anvender en box-shadowi stedet for :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" værdi = "Dette er fokuseret..." >

Ugyldige input

Stilinput via standardbrowserfunktionalitet med :invalid. Angiv en type, tilføj requiredattributten, hvis feltet ikke er valgfrit, og (hvis relevant) angiv en pattern.

Dette er ikke tilgængeligt i versioner af Internet Explorer 7-9 på grund af manglende understøttelse af CSS-pseudovælgere.

<input class = "span3" type = "e-mail" påkrævet >

Deaktiverede input

Tilføj disabledattributten på et input for at forhindre brugerinput og udløse et lidt anderledes udseende.

<input class = "input-xlarge" id = "disabledInput" type = "text" pladsholder = "Deaktiveret input her..." deaktiveret >

Valideringstilstande

Bootstrap inkluderer valideringsstile til fejl-, advarsels-, info- og succesmeddelelser. For at bruge skal du tilføje den relevante klasse til det omgivende .control-group.

<div class = "kontrolgruppeadvarsel" > 
  <label class = "control-label" for = "inputWarning" > Input med advarsel </label>  
  <div class = "kontroller" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Noget kan være gået galt </span> 
  </div>
</div>
 
<div class = "kontrolgruppefejl" > 
  <label class = "control-label" for = "inputError" > Input med fejl </label>  
  <div class = "kontroller" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Ret venligst fejlen </span> 
  </div>
</div>
 
<div class = "kontrolgruppe info" > 
  <label class = "control-label" for = "inputInfo" > Input med info </label>  
  <div class = "kontroller" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Brugernavnet er allerede taget </span> 
  </div>
</div>
 
<div class = "kontrolgruppe succes" > 
  <label class = "control-label" for = "inputSuccess" > Input med succes </label>  
  <div class = "kontroller" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

Standard knapper

Knapstile kan anvendes på alt med .btnklassen anvendt. Du vil dog typisk kun anvende disse på <a>og <button>elementer for den bedste gengivelse.

Knap	klasse=""	Beskrivelse
	`btn`	Standard grå knap med gradient
	`btn btn-primary`	Giver ekstra visuel vægt og identificerer den primære handling i et sæt knapper
	`btn btn-info`	Bruges som et alternativ til standardstilene
	`btn btn-success`	Angiver en vellykket eller positiv handling
	`btn btn-warning`	Angiver, at der skal udvises forsigtighed med denne handling
	`btn btn-danger`	Angiver en farlig eller potentielt negativ handling
	`btn btn-inverse`	Alternativ mørkegrå knap, ikke bundet til en semantisk handling eller brug
	`btn btn-link`	Fremhæv en knap ved at få den til at ligne et link, samtidig med at knappens adfærd bevares

Cross browser kompatibilitet

IE9 beskærer ikke baggrundsgradienter på afrundede hjørner, så vi fjerner det. Relateret, IE9 jankifies deaktiveretbutton elementer, gør tekst grå med en grim tekst-skygge, som vi ikke kan rette.

Knap størrelser

Kunne du tænke dig større eller mindre knapper? Tilføj .btn-large, .btn-small, eller .btn-minifor yderligere størrelser.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Stor knap </button>  
  <button class = "btn btn-large" type = "button" > Stor knap </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Standardknap </button>  
  <button class = "btn" type = "button" > Standardknap </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Lille knap </button>  
  <button class = "btn btn-small" type = "button" > Lille knap </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Miniknap </button>  
  <button class = "btn btn-mini" type = "button" > Miniknap </button>  
</p>

Opret blokniveauknapper – dem, der spænder over hele bredden af en forælder – ved at tilføje .btn-block.

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

Deaktiveret tilstand

Få knapper til at se uklikbare ud ved at fade dem 50 % tilbage.

Ankerelement

Føj .disabledklassen til <a>knapper.

Primært link Link

<a href = "#" class = "btn btn-large btn-primary deaktiveret" > Primært link </a>  
<a href = "#" class = "btn btn-large deaktiveret" > Link </a>

Heads up!Vi bruger .disabledsom en hjælpeklasse her, i lighed med den almindelige .activeklasse, så der kræves ingen præfiks. Også denne klasse er kun for æstetik; du skal bruge tilpasset JavaScript for at deaktivere links her.

Knapelement

Tilføj disabledattributten til <button>knapper.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "deaktiveret" > Primær knap </button>   
<button type = "button" class = "btn btn-large" deaktiveret > Knap </button>

Én klasse, flere tags

Brug .btnklassen på et <a>, <button>, eller <input>element.

<a class = "btn" href = "" > Link </a>  
<button class = "btn" type = "submit" > Knap </button>  
<input klasse = "btn" type = "knap" værdi = "Input" >   
<input klasse = "btn" type = "send" værdi = "Send" >

Som en bedste praksis kan du prøve at matche elementet til din kontekst for at sikre matchende gengivelse på tværs af browsere. Hvis du har en input, skal du bruge en <input type="submit">til din knap.

Tilføj klasser til et <img>element for nemt at style billeder i ethvert projekt.

<img src = "..." class = "img-afrundet" >  
<img src = "..." class = "img-cirkel" >  
<img src = "..." class = "img-polaroid" >

Heads up! .img-roundedog .img-circlevirker ikke i IE7-8 på grund af manglende border-radiussupport.

Ikon glyffer

140 ikoner i sprite-form, tilgængelige i mørkegrå (standard) og hvid, leveret af Glyphicons .

ikon-glas
ikon-musik
ikon-søgning
ikon-konvolut
ikon-hjerte
ikon-stjerne
ikon-stjerne-tom
ikon-bruger
ikon-film
ikon-th-store
ikon-th
ikon-th-liste
ikon-ok
ikon-fjern
ikon-zoom-ind
ikon-zoom-ud
ikon-fra
ikon-signal
ikon-tandhjul
ikon-trash
ikon-hjem
ikon-fil
ikon-tid
ikon-vej
ikon-download-alt
ikon-download
ikon-upload
ikon-indbakke
ikon-afspil-cirkel
ikon-gentag
ikon-opdatering
ikon-liste-alt
ikon-lås
ikon-flag
ikon-hovedtelefoner
ikon-lydstyrke-fra
ikon-lydstyrke-ned
ikon-volumen op
icon-qrcode
ikon-stregkode
ikon-tag
ikon-tags
ikon-bog
ikon-bogmærke
ikon-print
ikon-kamera
ikon-skrifttype
ikon-fed
ikon-kursiv
ikon-tekst-højde
ikon-tekst-bredde
ikon-justering-venstre
icon-align-center
icon-align-right
icon-align-justify
ikon-liste
ikon-indryk-venstre
ikon-indryk-højre
ikon-facetime-video
ikon-billede
ikon-blyant
ikon-kort-markør
ikon-juster
ikon-farve
ikon-rediger
ikon-deling
ikon-tjek
ikon-flyt
ikon-trin-tilbage
ikon-hurtigt-tilbage
ikon tilbage
ikon-spil
ikon-pause
ikon-stop
ikon-frem
ikon-spol frem
ikon-skridt-frem
ikon-skub ud
ikon-chevron-venstre
ikon-chevron-højre
ikon-plus-tegn
ikon-minus-tegn
ikon-fjern-tegn
ikon-ok-tegn
ikon-spørgsmål-tegn
ikon-info-tegn
ikon-skærmbillede
ikon-fjern-cirkel
ikon-ok-cirkel
ikon-forbud-cirkel
ikon-pil-venstre
ikon-pil-højre
ikon-pil op
ikon-pil ned
icon-share-alt
ikon-ændre størrelse-fuld
ikon-ændre størrelse-lille
ikon-plus
ikon-minus
ikon-stjerne
ikon-udråbstegn
ikon-gave
ikon-blad
ikon-ild
ikon-øje-åben
ikon-øje-tæt
ikon-advarselsskilt
ikon-plan
ikon-kalender
ikon-tilfældig
ikon-kommentar
ikon-magnet
ikon-chevron-up
ikon-chevron-down
ikon-retweet
ikon-indkøbsvogn
ikon-mappe-luk
ikon-mappe-åben
ikon-ændre størrelse-lodret
ikon-ændre størrelse-vandret
ikon-hdd
ikon-tyrehorn
ikon-klokke
ikon-certifikat
ikon-thumbs-up
ikon-thumbs-down
ikon-hånd-højre
ikon-hånd-venstre
ikon-hånd op
ikon-hånd-ned
ikon-cirkel-pil-højre
ikon-cirkel-pil-venstre
ikon-cirkel-pil op
ikon-cirkel-pil ned
ikon-klode
ikon-skruenøgle
ikon-opgaver
ikon-filter
ikon-mappe
ikon-fuldskærm

Glyphicons tilskrivning

Glyphicons Halflings er normalt ikke tilgængelige gratis, men en aftale mellem Bootstrap og Glyphicons-skaberne har gjort dette muligt uden omkostninger for dig som udviklere. Som tak beder vi dig om at inkludere et valgfrit link tilbage til Glyphicons , når det er praktisk muligt.

Sådan bruges

Alle ikoner kræver et <i>tag med en unik klasse, foranstillet med icon-. For at bruge skal du placere følgende kode stort set hvor som helst:

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

Der er også tilgængelige stilarter til omvendte (hvide) ikoner, klargjort med en ekstra klasse. Vi vil specifikt håndhæve denne klasse på hover og aktive tilstande for nav- og dropdown-links.

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

Heads up!Når du bruger tekststrenge ved siden af, som i knapper eller nav-links, skal du sørge for at efterlade et mellemrum efter <i>tagget for korrekt mellemrum.

Ikon eksempler

Brug dem i knapper, knapgrupper til en værktøjslinje, navigation eller forudsat formularinput.

Knapper

Knapgruppe i en knapværktøjslinje

<div class = "btn-værktøjslinje" > 
  <div class = "btn-gruppe" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

Dropdown i en knapgruppe

Bruger

<div class = "btn-gruppe" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Bruger </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "dropdown-menu" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> Rediger </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Slet </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Udelukkelse </a></li>  
    <li klasse = "deler" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Gør admin </a></li>  
  </ul>
</div>

Knap størrelser

Stjerne Stjerne Stjerne

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Stjerne </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Stjerne </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Stjerne </a>

Navigation

<ul class = "nav nav-liste" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Startside </a></li>   
  <li><a href = "#" ><i class = "ikonbog" ></i> Bibliotek </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Programmer </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Diverse </a></li>  
</ul>

Formularfelter

<div class = "kontrolgruppe" > 
  <label class = "control-label" for = "inputIcon" > E-mailadresse </label>  
  <div class = "kontroller" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      <input klasse = "span2" id = "inputIcon" type = "tekst" >   
    </div>
  </div>
</div>

Typografi

Overskrifter

h1. Overskrift 1

h2. Overskrift 2

h3. Overskrift 3

h4. Overskrift 4

h5. Overskrift 5

h6. Overskrift 6

Brødtekst

Blykropskopi

Bygget med mindre

Vægt

<small>

Fremhævet

Kursiv

Opstillingsklasser

Vægtklasser

Forkortelser

<abbr>

<abbr class="initialism">

Adresser

<address>

Blokcitater

Standard blokcitat

Indstillinger for blokcitat

Navngivning af en kilde

Alternative skærme

Lister

Uordnet

Bestilt

Ustylet

Inline

Beskrivelse

Vandret beskrivelse

Kode

Inline

Grundblok

Tabeller

Standard stilarter

Valgfri klasser

.table-striped

.table-bordered

.table-hover

.table-condensed

Valgfri rækkeklasser

Understøttet tabelmarkering

Formularer

Standard stilarter

Valgfri layouts

Søgeformular

Inline formular

Vandret form

Understøttede formularkontrolelementer

Indgange

Tekstområde

Afkrydsningsfelter og radioer

Standard (stablet)

Inline afkrydsningsfelter

Vælger

Udvidelse af formularkontroller

Forelagte og tilføjede input

Standardindstillinger

Kombineret

Knapper i stedet for tekst

Knap rullemenuer

Segmenterede dropdown-grupper

Søgeformular

Styr størrelsen

Bloker niveauindgange

Relativ størrelse

Gitterstørrelse

Uredigerbare input

Form handlinger

Hjælpetekst

Inline hjælp

Bloker hjælp

Form kontroltilstande

Input fokus

Ugyldige input

Deaktiverede input

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`