Støvelhempe

Base CSS

Grunnleggende HTML-elementer stylet og forbedret med utvidbare klasser.

Typografi

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.

  1. <p class = "text-left" > Venstrejustert tekst. </p> 
  2. <p class = "text-center" > Sentrert tekst. </p> 
  3. <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.

  1. <p class = "dempet" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "tekst-advarsel" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "tekst-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <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] 
  1. <adresse>
  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. <adresse>
  9.   <strong> Fullt navn </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </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.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante. </p>
  3. </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 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante. </p>
  3.   <small> Noen berømt <cite title = "Kildetittel" > Kildetittel </cite></small> 
  4. </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 
  1. <blockquote class = "trekk til høyre" > 
  2.   ...
  3. </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
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Bestilt

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

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

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
  1. <ul class = "ustilt" > 
  2.   <li> ... </li>
  3. </ul>

På linje

Plasser alle listeelementer på en enkelt linje med inline-blockog litt lett polstring.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </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. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </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. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </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.

Kode

På linje

Pakk inn innebygde kodebiter med <code>.

Skal for eksempel <section>pakkes inn som inline. 
  1. 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>
  1. <pre>
  2.   <p>Eksempeltekst her...</p>
  3. </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.

Tabeller

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 
  1. < tabellklasse = "tabell" > 
  2.   …
  3. </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 
  1. < tabellklasse = "tabell-tabellstripet" > 
  2.   …
  3. </table>

.table-bordered

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

# Fornavn Etternavn Brukernavn
1 merke Otto @mdo
merke Otto @getbootstrap
2 Jacob Thornton @fett
3 Fuglen Larry @twitter 
  1. < tabellklasse = "tabellkantet" > 
  2.   …
  3. </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 
  1. < tabellklasse = "tabell-sveve" > 
  2.   …
  3. </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 
  1. < tabellklasse = "tabelltabellkondensert" > 
  2.   …
  3. </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 
  1. ...
  2.   < tr class = "suksess" >
  3.     <td> 1 < /td>
  4.     <td>TB – Månedlig</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Godkjent</ td >
  7.   </ tr >
  8. ...

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 
  1. <tabell>
  2.   <caption> ... </caption>
  3.   <thead>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </table>

Skjemaer

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.

Legende Eksempel på hjelpetekst på blokknivå her. 
  1. <skjema>
  2.   <feltsett>
  3.     <legend> Legend </legend>
  4.     <label> Etikettnavn < /label>
  5.     <input type = "text" placeholder = "Skriv noe..." >  
  6.     <span class = "help-block" > Eksempel hjelpetekst på blokknivå her. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Sjekk meg ut 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Send inn </button>  
  11.   </fieldset>
  12. </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.

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

Innebygd skjema

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

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" plassholder = "E-post" >   
  3.   <input type = "password" class = "input-small" plassholder = "Passord" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Husk meg 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Logg på </button>  
  8. </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
  1. <form class = "form-horisontal" > 
  2.   <div class = "kontrollgruppe" > 
  3.     <label class = "control-label" for = "inputEmail" > E- post </label>  
  4.     <div class = "kontroller" > 
  5.       <input type = "text" id = "inputEmail" plassholder = "E-post" >   
  6.     </div>
  7.   </div>
  8.   <div class = "kontrollgruppe" > 
  9.     <label class = "control-label" for = "inputPassword" > Passord </label>  
  10.     <div class = "kontroller" > 
  11.       <input type = "password" id = "inputPassword" plassholder = "Passord" >   
  12.     </div>
  13.   </div>
  14.   <div class = "kontrollgruppe" > 
  15.     <div class = "kontroller" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Husk meg 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Logg på </button>  
  20.     </div>
  21.   </div>
  22. </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.

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

Tekstområde

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

  1. <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)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" verdi = "" >  
  3.   Alternativ én er dette og hint - husk å ta med hvorfor det er flott
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" verdi = "alternativ1" merket >     
  8.   Alternativ én er dette og hint - husk å ta med hvorfor det er flott
  9. </label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" verdi = "alternativ2" >    
  12.   Alternativ to kan være noe annet, og hvis du velger det, fjerner du valget av alternativ en
  13. </label>

Innebygde avmerkingsbokser

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

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

Velger

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


  1. <velg>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </select>
  8.  
  9. <velg flere = "flere" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </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.

@

0,00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" plassholder = "Brukernavn" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput " type = "tekst" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

Kombinert

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

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

Knapper i stedet for tekst

I stedet for en <span>med tekst, bruk a .btnfor å feste en knapp (eller to) til en inngang.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "tekst" >   
  3.   <button class = "btn" type = "button" > Gå! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "tekst" >   
  3.   <button class = "btn" type = "button" > Søk </button>  
  4.   <button class = "btn" type = "button" > Alternativer </button>  
  5. </div>

Nedtrekkslister for knapper

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

Segmenterte rullegardingrupper

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

Søkeskjema

  1. <form class = "skjema-søk" > 
  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>

Kontroller dimensjonering

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.

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

Relativ dimensjonering

  1. <input class = "input-mini" type = "text" plassholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" plassholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" plassholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" plassholder = ".input-xlarge" >   
  6. <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.

  1. <input class = "span1" type = "text" plassholder = ".span1" >   
  2. <input class = "span2" type = "text" plassholder = ".span2" >   
  3. <input class = "span3" type = "text" plassholder = ".span3" >   
  4. <velg klasse = "span1" > 
  5.   ...
  6. </select>
  7. <velg klasse = "span2" > 
  8.   ...
  9. </select>
  10. <velg klasse = "span3" > 
  11.   ...
  12. </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.

  1. <div class = "kontroller" > 
  2.   <input class = "span5" type = "text" plassholder = ".span5" >   
  3. </div>
  4. <div class = "kontroller kontrollrad" > 
  5.   <input class = "span4" type = "text" plassholder = ".span4" >   
  6.   <input class = "span1" type = "text" plassholder = ".span1" >   
  7. </div>
  8. ...

Uredigerbare innganger

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

Noe verdi her 
  1. <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.

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

Hjelpetekst

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

Innebygd hjelp

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

Blokker hjelp

En lengre blokk med hjelpetekst som bryter inn på en ny linje og kan strekke seg utover én linje. 
  1. <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.

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

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

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

Noe kan ha gått galt
Rett opp feilen
Brukernavnet er tatt
Woohoo! 
  1. <div class = "kontrollgruppeadvarsel" > 
  2.   <label class = "control-label" for = "inputWarning" > Inndata med advarsel </label>  
  3.   <div class = "kontroller" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Noe kan ha gått galt </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "kontrollgruppefeil" > 
  10.   <label class = "control-label" for = "inputError" > Inndata med feil </label>  
  11.   <div class = "kontroller" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Rett opp feilen </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "kontrollgruppeinformasjon" > 
  18.   <label class = "control-label" for = "inputInfo" > Inndata med info </label>  
  19.   <div class = "kontroller" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Brukernavnet er allerede tatt </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "kontrollgruppesuksess" > 
  26.   <label class = "control-label" for = "inputSuccess" > Inndata med suksess </label>  
  27.   <div class = "kontroller" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Knapper

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.

  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>

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

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Blokknivåknapp </button>  
  2. <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 

  1. <a href = "#" class = "btn btn-large btn-primary deaktivert" > Primærkobling </a>  
  2. <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.

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

Én klasse, flere tagger

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

Link 
  1. <a class = "btn" href = "" > Link </a>  
  2. <button class = "btn" type = "submit" > Knapp </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <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.

Bilder

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

140 x 140 140 x 140 140 x 140 
  1. <img src = "..." class = "img-avrundet" >  
  2. <img src = "..." class = "img-sirkel" >  
  3. <img src = "..." class = "img-polaroid" >

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

Ikoner av Glyphicons

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>tag med en unik klasse, foran med icon-. For å bruke, plasser følgende kode omtrent hvor som helst:

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

  1. <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
  1. <div class = "btn-verktøylinje" > 
  2.   <div class = "btn-gruppe" > 
  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 knappegruppe
Bruker 
  1. <div class = "btn-gruppe" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Bruker </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "rullegardinmeny" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Rediger </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Slett </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Ban </a></li>  
  8.     <li class = "deler" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Gjør admin </a></li>  
  10.   </ul>
  11. </div>
Knappestørrelser
Stjerne Stjerne Stjerne 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Stjerne </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Stjerne </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Stjerne </a>

Navigasjon

  1. <ul class = "nav nav-liste" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Hjem </a></li>   
  3.   <li><a href = "#" ><i class = "ikonbok" ></i> Bibliotek </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Programmer </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Diverse </a></li>  
  6. </ul>

Skjemafelt

  1. <div class = "kontrollgruppe" > 
  2.   <label class = "control-label" for = "inputIcon" > E-postadresse </label>  
  3.   <div class = "kontroller" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "tekst" >   
  7.     </div>
  8.   </div>
  9. </div>