Bootstrap

Base CSS

Grundlæggende HTML-elementer stylet og forbedret med udvidelige klasser.

Typografi

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.

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

  1. <p class = "muted" > 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 = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <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] 
  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. </adresse>
  7.  
  8. <adresse>
  9.   <strong> Fulde navn </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </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.

  1. <blokcitat>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante. </p>
  3. </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 
  1. <blokcitat>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante. </p>
  3.   <small> En berømt <cite title = "Kildetitel" > Kildetitel </cite></small> 
  4. </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 
  1. <blockquote class = "træk til højre" > 
  2.   ...
  3. </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
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Bestilt

En liste over elementer, hvor rækkefølgen udtrykkeligt har 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>

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

Inline

Placer alle listeelementer på en enkelt linje med inline-blocklidt let 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 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. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </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. 
  1. <dl class = "dl-horisontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </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.

Kode

Inline

Ombryd inline kodestykker med <code>.

Skal f.eks. <section>pakkes ind som inline. 
  1. 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>
  1. <pre>
  2.   <p>Eksempeltekst her...</p>
  3. </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.

Tabeller

Standard stilarter

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

# Fornavn Efternavn Brugernavn
1 Mærke Otto @mdo
2 Jacob Thornton @fed
3 Larry fuglen @twitter 
  1. < tabelklasse = "tabel" > 
  2.   …
  3. </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 
  1. <table class = "table table-striped" > 
  2.   …
  3. </table>

.table-bordered

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

# Fornavn Efternavn Brugernavn
1 Mærke Otto @mdo
Mærke Otto @getbootstrap
2 Jacob Thornton @fed
3 Fuglen Larry @twitter 
  1. <table class = "tabel-bordered" > 
  2.   …
  3. </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 
  1. <table class = "table table-hover" > 
  2.   …
  3. </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 
  1. <tabel klasse = "tabel tabel-kondenseret" > 
  2.   …
  3. </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 
  1. ...
  2.   < tr class = "succes" >
  3.     <td> 1 < /td>
  4.     <td>TB – Månedligt</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Godkendt</ td >
  7.   </ tr >
  8. ...

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 
  1. <tabel>
  2.   <caption> ... </caption>
  3.   <hoved>
  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>

Formularer

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.

Legende Eksempel på blokniveau hjælpetekst her. 
  1. <form>
  2.   <feltsæt>
  3.     <legend> Forklaring </legend>
  4.     <label> Etiketnavn </label>
  5.     <input type = "text" pladsholder = "Skriv noget..." >  
  6.     <span class = "help-block" > Eksempel på blokniveau hjælpetekst her. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Tjek mig ud 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Send </button>  
  11.   </fieldset>
  12. </form>

Valgfri layouts

Inkluderet med Bootstrap er tre valgfri formlayout til almindelige brugssager.

Søgeformular

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

  1. <form class = "form-søgning" > 
  2.   <input type = "text" class = "input-medium søgeforespørgsel" >  
  3.   <button type = "submit" class = "btn" > Søg </button>  
  4. </form>

Inline formular

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

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" pladsholder = "E-mail" >   
  3.   <input type = "password" class = "input-small" pladsholder = "Adgangskode" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Husk mig 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Log ind </button>  
  8. </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øj .form-horizontaltil formularen
  • Pak etiketter og kontroller ind.control-group
  • Tilføj .control-labeltil etiketten
  • Pak alle tilknyttede kontroller ind .controlsfor korrekt justering
  1. <form class = "form-horisontal" > 
  2.   <div class = "kontrolgruppe" > 
  3.     <label class = "control-label" for = "inputEmail" > E- mail </label>  
  4.     <div class = "kontroller" > 
  5.       <input type = "text" id = "inputEmail" pladsholder = "E-mail" >   
  6.     </div>
  7.   </div>
  8.   <div class = "kontrolgruppe" > 
  9.     <label class = "control-label" for = "inputPassword" > Adgangskode </label>  
  10.     <div class = "kontroller" > 
  11.       <input type = "password" id = "inputPassword" pladsholder = "Adgangskode" >   
  12.     </div>
  13.   </div>
  14.   <div class = "kontrolgruppe" > 
  15.     <div class = "kontroller" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Husk mig 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Log ind </button>  
  20.     </div>
  21.   </div>
  22. </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.

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

Tekstområde

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

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


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" værdi = "" >  
  3.   Mulighed 1 er dette og hint - sørg for at inkludere, hvorfor det er fantastisk
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" navn = "optionsRadios" id = "optionsRadios1" værdi = "option1" markeret >     
  8.   Mulighed 1 er dette og hint - sørg for at inkludere, hvorfor det er fantastisk
  9. </label>
  10. <label class = "radio" > 
  11.   <input type = "radio" navn = "optionsRadios" id = "optionsRadios2" værdi = "option2" >    
  12.   Mulighed to kan være noget andet, og valg af det vil fravælge mulighed et
  13. </label>

Inline afkrydsningsfelter

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

  1. <label class = "checkbox inline" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" værdi = "option1" > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" værdi = "option2" > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" værdi = "option3" > 3   
  9. </label>

Vælger

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


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

@

0,00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" pladsholder = "Brugernavn" >    
  4. </div>
  5. <div class = "input-tilføj" > 
  6.   <input klasse = "span2" id = "appendedInput" type = "tekst" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

Kombineret

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

$ 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, brug a .btntil at vedhæfte en knap (eller to) til et input.

  1. <div class = "input-tilføj" > 
  2.   <input klasse = "span2" id = "appendedInputButton" type = "tekst" >   
  3.   <button class = "btn" type = "button" > Gå! </button>  
  4. </div>
  1. <div class = "input-tilføj" > 
  2.   <input klasse = "span2" id = "appendedInputButtons" type = "tekst" >   
  3.   <button class = "btn" type = "button" > Søg </button>  
  4.   <button class = "btn" type = "button" > Indstillinger </button>  
  5. </div>

Knap rullemenuer

  1. <div class = "input-tilføj" > 
  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 = "dropdown-menu" > 
  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 = "dropdown-menu" > 
  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 = "dropdown-menu" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input klasse = "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 = "dropdown-menu" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Segmenterede dropdown-grupper

  1. <form>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <input type = "tekst" > 
  5.   </div>
  6.   <div class = "input-tilføj" > 
  7.     <input type = "tekst" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Søgeformular

  1. <form class = "form-søgning" > 
  2.   <div class = "input-tilføj" > 
  3.     <input type = "text" class = "span2 søgeforespørgsel" >  
  4.     <button type = "submit" class = "btn" > Søg </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Søg </button>  
  8.     <input type = "text" class = "span2 søgeforespørgsel" >  
  9.   </div>
  10. </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.

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

Relativ størrelse

  1. <input class = "input-mini" type = "text" pladsholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" pladsholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" pladsholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" pladsholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" pladsholder = ".input-xlarge" >   
  6. <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-largevil det øge udfyldningen og skriftstørrelsen af ​​et input.

Gitterstørrelse

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

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

  1. <div class = "kontroller" > 
  2.   <input class = "span5" type = "text" pladsholder = ".span5" >   
  3. </div>
  4. <div class = "kontroller kontrol-rækken" > 
  5.   <input class = "span4" type = "text" pladsholder = ".span4" >   
  6.   <input class = "span1" type = "text" pladsholder = ".span1" >   
  7. </div>
  8. ...

Uredigerbare input

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

Nogen værdi her 
  1. <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.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Gem ændringer </button>  
  3.   <button type = "button" class = "btn" > Annuller </button>  
  4. </div>

Hjælpetekst

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

Inline hjælp

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

Bloker hjælp

En længere blok med hjælpetekst, der bryder ind på en ny linje og kan strække sig ud over en linje. 
  1. <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.

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

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

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

Noget kan være gået galt
Ret venligst fejlen
Brugernavn er taget
Woohoo! 
  1. <div  class = "kontrolgruppeadvarsel" >
  2.   <label class = "kontrol-label"   for = "inputWarning" > Input med advarsel </label>
  3.   <div class = "kontroller" >
  4.     <input type = "tekst"   id = "inputWarning" >
  5.     <span klasse  = "help-inline" > Noget kan være gået galt </span>
  6.   </div>
  7. </div>
  8.  
  9. <div  class = "kontrolgruppefejl" >
  10.   <label class = "kontrol-label" for =   "inputError" > Input med fejl </label>
  11.   <div klasse = "kontroller" >
  12.     <input type = "tekst" id   = "inputError" >
  13.     <span class = "help-inline"  > Ret venligst fejlen </span>
  14.   </div>
  15. </div>
  16.  
  17. <div klasse =  "kontrolgruppe info" >
  18.   <label class = "control-label" for = "inputInfo" >   Input med info </label>
  19.   <div class = "kontroller" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Brugernavnet er allerede taget </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "kontrolgruppe succes" > 
  26.   <label class = "control-label" for = "inputSuccess" > Input med succes   </label>
  27.   <div class = "kontroller" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Knapper

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 deaktiverede buttonelementer, 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.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Stor knap </button>  
  3.   <button class = "btn btn-large" type = "button" > Stor knap </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Standardknap </button>  
  7.   <button class = "btn" type = "button" > Standardknap </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Lille knap </button>  
  11.   <button class = "btn btn-small" type = "button" > Lille knap </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Miniknap </button>  
  15.   <button class = "btn btn-mini" type = "button" > Miniknap </button>  
  16. </p>

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

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

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

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

Én klasse, flere tags

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

Link 
  1. <a class = "btn" href = "" > Link </a>  
  2. <button class = "btn" type = "submit" > Knap </button>  
  3. <input klasse = "btn" type = "knap" værdi = "Input" >   
  4. <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.

Billeder

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

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

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

Ikoner af Glyphicons

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 et arrangement 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:

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

  1. <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
  1. <div class = "btn-værktøjslinje" > 
  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 knapgruppe
Bruger 
  1. <div class = "btn-gruppe" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Bruger </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "dropdown-menu" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Rediger </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Slet </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Udelukkelse </a></li>  
  8.     <li klasse = "deler" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Gør admin </a></li>  
  10.   </ul>
  11. </div>
Knap stø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>

Navigation

  1. <ul class = "nav nav-liste" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Startside </a></li>   
  3.   <li><a href = "#" ><i class = "ikonbog" ></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>

Formularfelter

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