Overskrifter

<h1>Alle HTML - overskrifter <h6>er tilgjengelige.

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 gjelder for <body>og alle ledd. I tillegg får <p>(avsnitt) en bunnmargin på halvparten av linjehøyden (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>

Bly kropp kopi

Få et avsnitt til å skille seg ut ved å legge til .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 skalaen er basert på to MINDRE variabler i variabler.mindre : @baseFontSizeog @baseLineHeight. Den første er grunnskriftstørrelsen som brukes hele veien, og den andre er grunnlinjehøyden. Vi bruker disse variablene og litt enkel matematikk for å lage marginer, utfyllinger og linjehøyder for alle våre typer og mer. Tilpass dem og Bootstrap tilpasser seg.

Vektlegging

Benytt HTMLs standard emphasis tags med lette stiler.

`<small>`

Bruk den lille etiketten for å få mindre vekt på inline eller blokker med tekst .

Denne tekstlinjen er ment å bli behandlet som liten skrift.

<p> <liten> Denne tekstlinjen er ment å bli behandlet som liten skrift. </small> </p>

Modig

For å fremheve en tekstbit med en tyngre skriftvekt.

Følgende tekstbit gjengis som fet tekst .

<strong> gjengitt som fet tekst </strong>

Kursiv

For å fremheve en tekstbit med kursiv.

Følgende tekstbit gjengis som kursiv tekst .

<em> gjengitt som kursiv tekst </em>

Vær oppmerksom!Bruk gjerne <b>og <i>i HTML5. <b>er ment å fremheve ord eller setninger uten å formidle ekstra betydning, mens <i>det er mest for stemme, tekniske termer, etc.

Opprettingsklasser

Juster enkelt tekst til komponenter med tekstjusteringsklasser.

Venstrejustert tekst.

Sentrert tekst.

Høyrejustert tekst.

<p class = "text-left" > Venstrejustert tekst. </p> 
<p class = "text-center" > Sentrert tekst. </p> 
<p class = "text-right" > Høyrejustert tekst. </p>

Vektklasser

Formidle mening gjennom farger med en håndfull vektbruksklasser.

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 = "dempet" > 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 = "tekst-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "tekst-suksess" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Forkortelser

Stilisert implementering av HTMLs <abbr>element for forkortelser og akronymer for å vise den utvidede versjonen ved sveving. Forkortelser med et titleattributt har en lys prikket bunnkant og en hjelpemarkør ved sveving, noe som gir ekstra kontekst ved sveving.

`<abbr>`

titleTa med attributtet for utvidet tekst ved lang sveving av en forkortelse .

En forkortelse av ordet attributt er attr .

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

`<abbr class="initialism">`

Legg .initialismtil en forkortelse for en litt mindre skriftstørrelse.

HTML er det beste siden oppskåret brød.

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

Adresser

Presenter kontaktinformasjon for nærmeste stamfar eller hele arbeidet.

`<address>`

Bevar formateringen ved å avslutte alle linjer med <br>.

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

Fullt 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 
</address>
 
<adresse>
  <strong> Fullt navn </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</address>

Blockquotes

For å sitere blokker med innhold fra en annen kilde i dokumentet ditt.

Standard blokksitat

Pakk <blockquote>rundt hvilken som helst HTML som sitatet. For rette sitater anbefaler vi en <p>.

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

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

Alternativer for blokksitat

Stil- og innholdsendringer for enkle variasjoner på et standard blokksitat.

Navngi en kilde

Legg <small>til tag for å identifisere kilden. Pakk inn navnet på kildeverket i <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante.
Noen kjent i kildetittelen

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante. </p>
  <small> Noen berømt <cite title = "Kildetittel" > Kildetittel </cite></small> 
</blockquote>

Alternative skjermer

Bruk .pull-rightfor et flytende, høyrejustert blokkanførselstegn.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante.
Noen kjent i kildetittelen

<blockquote class = "trekk til høyre" > 
  ...
</blockquote>

Lister

Uordnet

En liste over elementer der rekkefølgen ikke har eksplisitt betydning.

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 der rekkefølgen har eksplisitt 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>

Ustilt

Fjern standard list-styleog venstre utfylling på listeelementer (kun umiddelbare barn).

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 = "ustilt" > 
  <li> ... </li>
</ul>

På linje

Plasser alle listeelementer på en enkelt linje med inline-blockog litt lett 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 for å definere begreper.
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>

Horisontal beskrivelse

Lag vilkår og beskrivelser på <dl>linje side ved side.

Beskrivelseslister: En beskrivelsesliste er perfekt for å definere begreper.
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.

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

Vær oppmerksom!Horisontale beskrivelseslister vil avkorte termer som er for lange til å passe inn i den venstre kolonnen text-overflow. I smalere visningsporter vil de endres til standard stablet layout.

På linje

Pakk inn innebygde kodebiter med <code>.

Skal for eksempel <section>pakkes inn som inline.

For eksempel , <kode> & lt ; seksjon & gt ;</ code > skal pakkes inn som inline .

Grunnblokk

Bruk <pre>for flere linjer med kode. Pass på å unnslippe eventuelle vinkelparenteser i koden for riktig gjengivelse.

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

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

Vær oppmerksom!Sørg for å holde koden i <pre>tagger så nær venstre som mulig; det vil gjengi alle faner.

Du kan eventuelt legge til .pre-scrollableklassen som vil sette en maks-høyde på 350px og gi en y-akse rullefelt.

Standard stiler

For grunnleggende styling – lett polstring og bare horisontale skillelinjer – legg til basisklassen .tabletil en hvilken som helst <table>.

#	Fornavn	Etternavn	Brukernavn
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fuglen	@twitter

< tabellklasse = "tabell" > 
  …
</table>

Valgfrie klasser

Legg til en av følgende klasser til .tablebasisklassen.

`.table-striped`

Legger til sebrastriping til enhver tabellrad i <tbody>via :nth-childCSS-velgeren (ikke tilgjengelig i IE7-8).

#	Fornavn	Etternavn	Brukernavn
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Larry	fuglen	@twitter

< tabellklasse = "tabell-tabellstripet" > 
  …
</table>

`.table-bordered`

Legg til kanter og avrundede hjørner på bordet.

#	Fornavn	Etternavn	Brukernavn
1	merke	Otto	@mdo
1	merke	Otto	@getbootstrap
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

< tabellklasse = "tabellkantet" > 
  …
</table>

`.table-hover`

Aktiver en svevetilstand på tabellrader i en <tbody>.

#	Fornavn	Etternavn	Brukernavn
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

< tabellklasse = "tabell-sveve" > 
  …
</table>

`.table-condensed`

Gjør bord mer kompakte ved å kutte cellepolstring i to.

#	Fornavn	Etternavn	Brukernavn
1	merke	Otto	@mdo
2	Jacob	Thornton	@fett
3	Fuglen Larry		@twitter

< tabellklasse = "tabelltabellkondensert" > 
  …
</table>

Valgfrie radklasser

Bruk kontekstuelle klasser til å fargelegge tabellrader.

Klasse	Beskrivelse
`.success`	Indikerer en vellykket eller positiv handling.
`.error`	Indikerer en farlig eller potensielt negativ handling.
`.warning`	Indikerer en advarsel som kan trenge oppmerksomhet.
`.info`	Brukes som et alternativ til standardstilene.

#	Produkt	Betaling tatt	Status
1	TB - Månedlig	01.04.2012	Godkjent
2	TB - Månedlig	02/04/2012	Avslått
3	TB - Månedlig	03.04.2012	Avventer
4	TB - Månedlig	04.04.2012	Ring for å bekrefte

...
  < tr class = "suksess" >
    <td> 1 < /td>
    <td>TB – Månedlig</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>Godkjent</ td >
  </ tr >
...

Støttet tabellmarkering

Liste over støttede tabell HTML-elementer og hvordan de skal brukes.

stikkord	Beskrivelse
`<table>`	Innpakningselement for visning av data i tabellformat
`<thead>`	Beholderelement for tabelloverskriftsrader ( `<tr>`) for å merke tabellkolonner
`<tbody>`	Beholderelement for tabellrader ( `<tr>`) i brødteksten i tabellen
`<tr>`	Beholderelement for et sett med tabellceller ( `<td>`eller `<th>`) som vises på en enkelt rad
`<td>`	Standard tabellcelle
`<th>`	Spesiell tabellcelle for kolonne (eller rad, avhengig av omfang og plassering) etiketter
`<caption>`	Beskrivelse eller oppsummering av hva tabellen inneholder, spesielt nyttig for skjermlesere

<tabell>
  <caption> ... </caption>
  <thead>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

Standard stiler

Individuelle skjemakontroller mottar styling, men uten noen nødvendig grunnklasse på <form>eller store endringer i markup. Resultater i stablede, venstrejusterte etiketter på toppen av skjemakontrollene.

<skjema>
  <feltsett>
    <legend> Legend </legend>
    <label> Etikettnavn < /label>
    <input type = "text" placeholder = "Skriv noe..." >  
    <span class = "help-block" > Eksempel hjelpetekst på blokknivå her. </span> 
    <label class = "checkbox" > 
      <input type = "checkbox" > Sjekk meg ut 
    </label>
    <button type = "submit" class = "btn" > Send inn </button>  
  </fieldset>
</form>

Valgfrie oppsett

Inkludert med Bootstrap er tre valgfrie skjemaoppsett for vanlig bruk.

Søkeskjema

Legg .form-searchtil i skjemaet og .search-queryi <input>for en ekstra avrundet tekstinntasting.

<form class = "skjema-søk" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Søk </button>  
</form>

Innebygd skjema

Legg .form-inlinetil venstrejusterte etiketter og inline-blokkkontroller for en kompakt layout.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" plassholder = "E-post" >   
  <input type = "password" class = "input-small" plassholder = "Passord" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Husk meg 
  </label>
  <button type = "submit" class = "btn" > Logg på </button>  
</form>

Horisontal form

Høyrejuster etiketter og flyt dem til venstre for å få dem til å vises på samme linje som kontrollene. Krever flest markeringsendringer fra et standardskjema:

Legg .form-horizontaltil i skjemaet
Pakk inn etiketter og kontroller.control-group
Legg .control-labeltil etiketten
Pakk inn eventuelle tilknyttede kontroller .controlsfor riktig justering

<form class = "form-horisontal" > 
  <div class = "kontrollgruppe" > 
    <label class = "control-label" for = "inputEmail" > E- post </label>  
    <div class = "kontroller" > 
      <input type = "text" id = "inputEmail" plassholder = "E-post" >   
    </div>
  </div>
  <div class = "kontrollgruppe" > 
    <label class = "control-label" for = "inputPassword" > Passord </label>  
    <div class = "kontroller" > 
      <input type = "password" id = "inputPassword" plassholder = "Passord" >   
    </div>
  </div>
  <div class = "kontrollgruppe" > 
    <div class = "kontroller" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > Husk meg 
      </label>
      <button type = "submit" class = "btn" > Logg på </button>  
    </div>
  </div>
</form>

Støttede skjemakontroller

Eksempler på standard skjemakontroller som støttes i et eksempelskjemaoppsett.

Innganger

Mest vanlige skjemakontroll, tekstbaserte inndatafelt. Inkluderer støtte for alle HTML5-typer: tekst, passord, datetime, datetime-local, dato, måned, tid, uke, nummer, e-post, url, søk, tel og farge.

Krever bruk av en spesifisert typetil enhver tid.

< inndatatype = "tekst" plassholder = "Tekstinndata" >

Tekstområde

Skjemakontroll som støtter flere tekstlinjer. Endre rowsattributt etter behov.

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

Avmerkingsbokser og radioer

Avmerkingsbokser er for å velge ett eller flere alternativer i en liste, mens radioer er for å velge ett alternativ fra mange.

Standard (stablet)

<label class = "checkbox" > 
  <input type = "checkbox" verdi = "" >  
  Alternativ én er dette og hint - husk å ta med hvorfor det er flott
</label>
 
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" verdi = "alternativ1" merket >     
  Alternativ én er dette og hint - husk å ta med hvorfor det er flott
</label>
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" verdi = "alternativ2" >    
  Alternativ to kan være noe annet, og hvis du velger det, fjerner du valget av alternativ en
</label>

Innebygde avmerkingsbokser

Legg til .inlineklassen i en rekke avmerkingsbokser eller radioer for kontroller vises på samme linje.

<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox1" verdi = "alternativ1" > 1   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox2" verdi = "alternativ2" > 2   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox3" verdi = "alternativ3" > 3   
</label>

Velger

Bruk standardalternativet eller spesifiser et multiple="multiple"for å vise flere alternativer samtidig.

<velg>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<velg flere = "flere" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

Utvide skjemakontroller

Bootstrap legger på toppen av eksisterende nettleserkontroller, og inkluderer andre nyttige skjemakomponenter.

Prependerte og vedlagte innganger

Legg til tekst eller knapper før eller etter tekstbasert inndata. Vær oppmerksom på at selectelementer ikke støttes her.

Standardalternativer

Pakk inn en .add-onog en inputmed en av to klasser for å legge tekst foran eller legge til en inndata.

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" plassholder = "Brukernavn" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " type = "tekst" >   
  <span class = "add-on" > .00 </span> 
</div>

Kombinert

Bruk både klasser og to forekomster av for .add-onå legge til og legge til en inngang.

<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, bruk a .btnfor å feste en knapp (eller to) til en inngang.

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " type = "tekst" >   
  <button class = "btn" type = "button" > Gå! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " type = "tekst" >   
  <button class = "btn" type = "button" > Søk </button>  
  <button class = "btn" type = "button" > Alternativer </button>  
</div>

Nedtrekkslister for knapper

<div class = "input-append" > 
  <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 = "rullegardinmeny" > 
      ...
    </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 = "rullegardinmeny" > 
      ...
    </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 = "rullegardinmeny" > 
      ...
    </ul>
  </div>
  <input class = "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 = "rullegardinmeny" > 
      ...
    </ul>
  </div>
</div>

Segmenterte rullegardingrupper

<skjema>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    < inndatatype = "tekst" > 
  </div>
  <div class = "input-append" > 
    < inndatatype = "tekst" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Søkeskjema

<form class = "skjema-søk" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Søk </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Søk </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

Kontroller størrelsen

Bruk relative størrelsesklasser som .input-largeeller match inndataene dine til rutenettkolonnestørrelsene ved å bruke .span*klasser.

Blokker nivåinnganger

Få et hvilket som helst <input>element <textarea>til å oppføre seg som et blokknivåelement.

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

Relativ dimensjonering

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

Vær oppmerksom!I fremtidige versjoner vil vi endre bruken av disse relative inndataklassene for å matche knappestørrelsene våre. Vil for eksempel .input-largeøke utfyllingen og skriftstørrelsen til en inndata.

Rutenettstørrelse

Bruk .span1til .span12for innganger som samsvarer med samme størrelser på rutenettkolonnene.

<input class = "span1" type = "text" plassholder = ".span1" >   
<input class = "span2" type = "text" plassholder = ".span2" >   
<input class = "span3" type = "text" plassholder = ".span3" >   
<velg klasse = "span1" > 
  ...
</select>
<velg klasse = "span2" > 
  ...
</select>
<velg klasse = "span3" > 
  ...
</select>

For flere rutenettinnganger per linje, bruk .controls-rowmodifikasjonsklassen for riktig avstand . Den flyter inngangene for å kollapse mellomrom, setter de riktige margene og fjerner flyten.

<div class = "kontroller" > 
  <input class = "span5" type = "text" plassholder = ".span5" >   
</div>
<div class = "kontroller kontrollrad" > 
  <input class = "span4" type = "text" plassholder = ".span4" >   
  <input class = "span1" type = "text" plassholder = ".span1" >   
</div>
...

Uredigerbare innganger

Presenter data i et skjema som ikke kan redigeres uten å bruke faktisk skjemaoppmerking.

<span class = "input-xlarge uneditable-input" > Noe verdi her </span>

Form handlinger

Avslutt et skjema med en gruppe handlinger (knapper). Når de er plassert innenfor en .form-actions, vil knappene automatisk rykke inn for å justere med skjemakontrollene.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > Lagre endringer </button>  
  <button type = "button" class = "btn" > Avbryt </button>  
</div>

Hjelpetekst

Inline- og blokknivåstøtte for hjelpetekst som vises rundt skjemakontroller.

Innebygd hjelp

<input type = "text" ><span class = "help-inline" > Innebygd hjelpetekst </span>

Blokker hjelp

<input type = "text" ><span class = "help-block" > En lengre blokk med hjelpetekst som brytes inn på en ny linje og kan strekke seg utover én linje. </span>

Skjemakontrolltilstander

Gi tilbakemelding til brukere eller besøkende med grunnleggende tilbakemeldingstilstander på skjemakontroller og etiketter.

Input fokus

Vi fjerner standardstilene outlinepå noen skjemakontroller og bruker en box-shadowi stedet for :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Dette er fokusert..." >

Ugyldige inndata

Stilinnganger via standard nettleserfunksjonalitet med :invalid. Spesifiser en type, legg til requiredattributtet hvis feltet ikke er valgfritt, og (hvis aktuelt) spesifiser en pattern.

Dette er ikke tilgjengelig i versjoner av Internet Explorer 7-9 på grunn av manglende støtte for CSS-pseudovelgere.

<input class = "span3" type = "e-post" kreves >

Deaktiverte innganger

Legg til disabledattributtet på en inngang for å forhindre brukerinndata og utløse et litt annet utseende.

<input class = "input-xlarge" id = "disabledInput" type = "text" plassholder = "Deaktivert input her..." deaktivert >

Valideringstilstander

Bootstrap inkluderer valideringsstiler for feil-, advarsels-, info- og suksessmeldinger. For å bruke, legg til den aktuelle klassen i omgivelsene .control-group.

<div class = "kontrollgruppeadvarsel" > 
  <label class = "control-label" for = "inputWarning" > Inndata med advarsel </label>  
  <div class = "kontroller" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Noe kan ha gått galt </span> 
  </div>
</div>
 
<div class = "kontrollgruppefeil" > 
  <label class = "control-label" for = "inputError" > Inndata med feil </label>  
  <div class = "kontroller" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Rett opp feilen </span> 
  </div>
</div>
 
<div class = "kontrollgruppeinformasjon" > 
  <label class = "control-label" for = "inputInfo" > Inndata med info </label>  
  <div class = "kontroller" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Brukernavnet er allerede tatt </span> 
  </div>
</div>
 
<div class = "kontrollgruppesuksess" > 
  <label class = "control-label" for = "inputSuccess" > Inndata med suksess </label>  
  <div class = "kontroller" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

Standardknapper

Knappestiler kan brukes på hva som helst med .btnklassen brukt. Vanligvis vil du imidlertid bare bruke disse på <a>og <button>elementer for best mulig gjengivelse.

Knapp	klasse=""	Beskrivelse
	`btn`	Standard grå knapp med gradient
	`btn btn-primary`	Gir ekstra visuell vekt og identifiserer hovedhandlingen i et sett med knapper
	`btn btn-info`	Brukes som et alternativ til standardstilene
	`btn btn-success`	Indikerer en vellykket eller positiv handling
	`btn btn-warning`	Indikerer at det bør utvises forsiktighet med denne handlingen
	`btn btn-danger`	Indikerer en farlig eller potensielt negativ handling
	`btn btn-inverse`	Alternativ mørkegrå knapp, ikke knyttet til en semantisk handling eller bruk
	`btn btn-link`	Legg vekt på en knapp ved å få den til å se ut som en lenke mens du opprettholder knappens virkemåte

Kryssnettleserkompatibilitet

IE9 beskjærer ikke bakgrunnsgradienter på avrundede hjørner, så vi fjerner den. Beslektet, IE9 jankifies deaktiverte buttonelementer, gjengir tekst grå med en ekkel tekst-skygge som vi ikke kan fikse.

Knappestørrelser

Lyst på større eller mindre knapper? Legg til .btn-large, .btn-small, eller .btn-minifor flere størrelser.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Stor knapp </button>  
  <button class = "btn btn-large" type = "button" > Stor knapp </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Standardknapp </button>  
  <button class = "btn" type = "button" > Standardknapp </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Liten knapp </button>  
  <button class = "btn btn-small" type = "button" > Liten knapp </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Miniknapp </button>  
  <button class = "btn btn-mini" type = "button" > Miniknapp </button>  
</p>

Lag blokknivåknapper – de som spenner over hele bredden til en forelder – ved å legge til .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > Blokknivåknapp </button>  
<button class = "btn btn-large btn-block" type = "button" > Blokknivåknapp </button>

Deaktivert tilstand

Få knappene til å se uklikkbare ut ved å tone dem 50 % tilbake.

Ankerelement

Legg .disabledklassen til <a>knapper.

Primær lenke Link

<a href = "#" class = "btn btn-large btn-primary deaktivert" > Primærkobling </a>  
<a href = "#" class = "btn btn-large deaktivert" > Link </a>

Vær oppmerksom!Vi bruker .disabledsom en bruksklasse her, lik den vanlige .activeklassen, så ingen prefiks er nødvendig. Dessuten er denne klassen kun for estetikk; du må bruke tilpasset JavaScript for å deaktivere koblinger her.

Knappeelement

Legg til disabledattributtet til <button>knapper.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "deaktivert" > Primærknapp </button>   
<button type = "button" class = "btn btn-large" deaktivert > Knapp </button>

Én klasse, flere tagger

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

<a class = "btn" href = "" > Link </a>  
<button class = "btn" type = "submit" > Knapp </button>  
<input class = "btn" type = "button" value = "Input" >   
<input class = "btn" type = "send" verdi = "Send" >

Som en god fremgangsmåte kan du prøve å matche elementet for konteksten din for å sikre samsvarende gjengivelse på tvers av nettlesere. Hvis du har en input, bruk en <input type="submit">for knappen din.

Legg til klasser til et <img>element for enkelt å style bilder i ethvert prosjekt.

<img src = "..." class = "img-avrundet" >  
<img src = "..." class = "img-sirkel" >  
<img src = "..." class = "img-polaroid" >

Vær oppmerksom! .img-roundedog .img-circlefungerer ikke i IE7-8 på grunn av manglende border-radiusstøtte.

Ikon glyfer

140 ikoner i sprite-form, tilgjengelig i mørkegrå (standard) og hvit, levert av Glyphicons .

ikon-glass
ikon-musikk
ikon-søk
ikon-konvolutt
ikon-hjerte
ikon-stjerne
ikon-stjerne-tom
ikon-bruker
ikon-film
ikon-th-large
ikon-th
ikon-te-listen
ikon-ok
ikon-fjern
ikon-zoome inn
ikon-zoome ut
ikon av
ikon-signal
ikon-tannhjul
ikon-søppel
ikon-hjem
ikon-fil
ikon-tid
ikon-vei
ikon-last ned-alt
ikon-last ned
ikon-opplasting
ikon-innboks
ikon-spill-sirkel
ikon-gjenta
ikon-oppdatering
icon-list-alt
ikon-lås
ikon-flagg
ikon-hodetelefoner
ikon-volum av
ikon-volum ned
ikon-volum opp
icon-qrcode
ikon-strekkode
ikon-tag
ikon-tagger
ikon-bok
ikon-bokmerke
ikon-utskrift
ikon-kamera
ikon-font
ikon-fet skrift
ikon-kursiv
ikon-tekst-høyde
ikon-tekst-bredde
icon-align-venstre
icon-align-center
icon-align-right
icon-align-justify
ikon-liste
ikon-innrykk-venstre
ikon-innrykk-høyre
icon-facetime-video
ikon-bilde
ikon-blyant
ikon-kart-markør
ikon-juster
ikon-farge
icon-edit
ikon-deling
ikon-sjekk
icon-move
ikon-trinn-bakover
ikon-raskt-bakover
ikon-bakover
ikon-spill
ikon-pause
ikon-stopp
ikon-fremover
ikon-spol fremover
ikon-skritt-fremover
ikon-utkast
icon-chevron-venstre
icon-chevron-right
ikon-pluss-tegn
ikon-minus-tegn
ikon-fjern-tegn
ikon-ok-tegn
ikon-spørsmål-tegn
ikon-info-skilt
ikon-skjermbilde
ikon-fjern-sirkel
ikon-ok-sirkel
icon-ban-sirkel
ikon-pil-venstre
ikon-pil-høyre
ikon-pil opp
ikon-pil ned
icon-share-alt
ikon-endre størrelse-full
ikon-endre størrelse-liten
ikon-pluss
ikon-minus
ikon-stjerne
ikon-utropstegn
ikon-gave
ikon-blad
ikon-brann
ikon-øyeåpent
ikon-øye-lukk
ikon-advarselsskilt
ikon-plan
ikon-kalender
ikon-tilfeldig
ikon-kommentar
ikon-magnet
icon-chevron-up
icon-chevron-down
ikon-retweet
ikon-handlevogn
ikon-mappe-lukk
ikon-mappe-åpen
ikon-endre størrelse-vertikal
ikon-endre størrelse-horisontal
ikon-hdd
ikon-tyrehorn
ikon-bjelle
ikon-sertifikat
ikon-tommel opp
ikon-tommel ned
ikon-hånd-høyre
ikon-hånd-venstre
ikon-hånd opp
ikon-hånd-ned
ikon-sirkel-pil-høyre
ikon-sirkel-pil-venstre
ikon-sirkel-pil opp
ikon-sirkel-pil ned
ikon-klode
ikon-nøkkel
ikon-oppgaver
ikon-filter
ikon-koffert
ikon-fullskjerm

Glyphicons attribusjon

Glyphicons Halflings er normalt ikke tilgjengelig gratis, men en ordning mellom Bootstrap og Glyphicons-skaperne har gjort dette mulig uten kostnad for deg som utviklere. Som takk ber vi deg om å inkludere en valgfri lenke tilbake til Glyphicons når det er praktisk mulig.

Hvordan å bruke

Alle ikoner krever en <i>kode med en unik klasse, foran med icon-. For å bruke, plasser følgende kode omtrent hvor som helst:

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

Det er også stiler tilgjengelig for inverterte (hvite) ikoner, gjort klare med én ekstra klasse. Vi vil spesifikt håndheve denne klassen på hover og aktive tilstander for nav- og rullegardinkoblinger.

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

Vær oppmerksom!Når du bruker tekststrenger ved siden av, som i knapper eller nav-lenker, må du sørge for å legge igjen et mellomrom etter <i>taggen for riktig avstand.

Ikon eksempler

Bruk dem i knapper, knappegrupper for en verktøylinje, navigasjon eller forhåndsinnlagte skjemainndata.

Knapper

Knappegruppe i en knappeverktøylinje

<div class = "btn-verktøylinje" > 
  <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 knappegruppe

Bruker

<div class = "btn-gruppe" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Bruker </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "rullegardinmeny" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> Rediger </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Slett </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Ban </a></li>  
    <li class = "deler" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Gjør admin </a></li>  
  </ul>
</div>

Knappestø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>

Navigasjon

<ul class = "nav nav-liste" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Hjem </a></li>   
  <li><a href = "#" ><i class = "ikonbok" ></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>

Skjemafelt

<div class = "kontrollgruppe" > 
  <label class = "control-label" for = "inputIcon" > E-postadresse </label>  
  <div class = "kontroller" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      <input class = "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

Bly kropp kopi

Bygget med mindre

Vektlegging

<small>

Modig

Kursiv

Opprettingsklasser

Vektklasser

Forkortelser

<abbr>

<abbr class="initialism">

Adresser

<address>

Blockquotes

Standard blokksitat

Alternativer for blokksitat

Navngi en kilde

Alternative skjermer

Lister

Uordnet

Bestilt

Ustilt

På linje

Beskrivelse

Horisontal beskrivelse

Kode

På linje

Grunnblokk

Tabeller

Standard stiler

Valgfrie klasser

.table-striped

.table-bordered

.table-hover

.table-condensed

Valgfrie radklasser

Støttet tabellmarkering

Skjemaer

Standard stiler

Valgfrie oppsett

Søkeskjema

Innebygd skjema

Horisontal form

Støttede skjemakontroller

Innganger

Tekstområde

Avmerkingsbokser og radioer

Standard (stablet)

Innebygde avmerkingsbokser

Velger

Utvide skjemakontroller

Prependerte og vedlagte innganger

Standardalternativer

Kombinert

Knapper i stedet for tekst

Nedtrekkslister for knapper

Segmenterte rullegardingrupper

Søkeskjema

Kontroller størrelsen

Blokker nivåinnganger

Relativ dimensjonering

Rutenettstørrelse

Uredigerbare innganger

Form handlinger

Hjelpetekst

Innebygd hjelp

Blokker hjelp

Skjemakontrolltilstander

Input fokus

Ugyldige inndata

Deaktiverte innganger

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`