Bootstrap

Basis CSS

Fundamental HTML Elementer styléiert a verbessert mat erweiterbare Klassen.

Typographie

Rubriken

All HTML Rubriken, <h1>duerch <h6>sinn verfügbar.

h1. Rubrik 1

h2 vun. Rubrik 2

h3 vun. Rubrik 3

h4 vun. Rubrik 4

h5. Rubrik 5
h6. Rubrik 6

Kierper Kopie

Dem Bootstrap säi globale Standard font-sizeass 14px , mat engem line-heightvun 20px . Dëst gëtt op d' <body>an all Paragrafen ugewannt. Zousätzlech <p>kréien (Paragrafen) eng ënnescht Marge vun der Halschent vun hirer Linn Héicht (10px par défaut).

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>

Lead Kierper Kopie

Maacht e Paragraf erausstinn andeems Dir bäidréit .lead.

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

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

Gebaut mat manner

Déi typographesch Skala baséiert op zwou MANNER Verännerlechen an Variablen.manner : @baseFontSizean @baseLineHeight. Déi éischt ass d'Basis Schrëftgréisst déi uechter benotzt gëtt an déi zweet ass d'Basislinn Héicht. Mir benotzen dës Variabelen an e puer einfache Mathematik fir d'Margen, Paddingen a Linnenhéichten vun all eisen Typen a méi ze kreéieren. Passt se un a Bootstrap passt un.

Schwéierpunkt

Benotzt d'Standardbetonungstags vun HTML mat liichte Stiler.

<small>

Fir Inline oder Textblocken z'ënnersträichen, benotzt de klenge Tag.

Dës Zeil vum Text soll als Feindréck behandelt ginn.

<p> <kleng> Dës Zeil vum Text soll als Feindréck behandelt ginn. </kleng> </p>

Fett

Fir en Textschnëtt mat engem méi schwéiere Schrëftgewiicht ze ënnersträichen.

De folgenden Ausschnëtt vum Text gëtt als fett Text ugewisen .

<strong> als fett Text gemaach </strong>

Kursiv

Fir e Stéck Text mat Kursiv ze ënnersträichen.

De folgenden Ausschnëtt vum Text gëtt als kursivéierten Text gemaach .

<em> als kursivéierten Text gemaach </em>

Kapp erop!Fillt Iech gratis ze benotzen <b>an <i>an HTML5. <b>ass geduecht fir Wierder oder Ausdréck ze markéieren ouni zousätzlech Wichtegkeet ze vermëttelen wärend <i>et meeschtens fir Stëmm, technesch Begrëffer, asw.

Ausriichtung Klassen

Einfach Text op Komponente mat Textausrichtungsklassen ëmsetzen.

Lénks ausgeriicht Text.

Zentrum ausgeriicht Text.

Recht ausgeriicht Text.

  1. <p class = "text-left" > Lénksausgeriicht Text. </p> 
  2. <p class = "text-center" > Zentréierten Text. </p> 
  3. <p class = "text-right" > Recht ausgeriichten Text. </p>

Schwéierpunkt Klassen

Vermëttelt Bedeitung duerch Faarf mat enger Handvoll Akzent Utility Klassen.

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 = "Textwarnung" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Ofkierzungen

Stiliséierter Implementatioun vum HTML <abbr>Element fir Ofkierzungen an Akronyme fir déi erweidert Versioun um Hover ze weisen. Ofkierzungen mat engem titleAttribut hunn eng liicht punktéiert ënnescht Grenz an en Hëllefscursor beim Hover, suergt fir zousätzlech Kontext beim Hover.

<abbr>

Fir erweidert Text op laang Hover vun enger Ofkierzung, enthält den titleAttribut.

Eng Ofkierzung vum Wuert Attribut ass attr .

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

<abbr class="initialism">

Füügt .initialismeng Ofkierzung fir eng liicht méi kleng Schrëftgréisst.

HTML ass déi bescht Saach zënter geschnidden Brout.

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

Adressen

Presentéiert Kontaktinformatioun fir den nooste Vorfahren oder de ganze Kierper vun der Aarbecht.

<address>

Erhaalen d'Formatéierung andeems Dir all Zeilen mat <br>.

Twitter Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Voll Numm
[email protected] 
  1. <Adress>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Telefon" > P: </abbr> (123) 456-7890 
  6. </Adress>
  7.  
  8. <Adress>
  9.   <strong> Vollen Numm </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </Adress>

Blockquotes

Fir Blocken Inhalt vun enger anerer Quell an Ärem Dokument ze zitéieren.

Standard Blockquote

Wickelt <blockquote>all HTML als Zitat ëm. Fir direkt Zitater recommandéiere mir eng <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3. </blockquote>

Blockquote Optiounen

Stil an Inhalt Ännerungen fir einfach Variatiounen op engem Standard Blockquote.

Eng Quell benennen

Füügt <small>Tag fir d'Quell z'identifizéieren. Wickelt den Numm vun der Quellaarbecht an <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Een berühmten am Source Titel 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3.   <small> Een berühmten <cite title = "Source Title" > Source Title </cite></small> 
  4. </blockquote>

Alternativ Affichage

Benotzt .pull-rightfir e geschwemmt, riets ausgeriicht Blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Een berühmten am Source Titel 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </blockquote>

Lëschten

Onbestallt

Eng Lëscht vun Elementer an deenen d'Uerdnung net explizit wichteg ass.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem bei massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Bestallt

Eng Lëscht vun Elementer an deenen d'Uerdnung explizit wichteg ass .

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem bei massa
  4. Facilisis in 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>

Unstyled

Ewechzehuelen der Default list-stylea lénks padding op Lëscht Artikelen (nëmmen direkt Kanner).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem bei massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

An der Schlaang

Place all Lëscht Elementer op eng eenzeg Linn mat inline-blockan e puer liicht padding.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </ul>

Beschreiwung

Eng Lëscht vu Begrëffer mat hire verbonne Beschreiwunge.

Beschreiwung Lëschte
Eng Beschreiwungslëscht ass perfekt fir Begrëffer ze definéieren.
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>

Horizontal Beschreiwung

Maacht Begrëffer a Beschreiwungen an der <dl>Linn op Säit-vun-Säit.

Beschreiwung Lëschte
Eng Beschreiwungslëscht ass perfekt fir Begrëffer ze definéieren.
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>

Kapp erop!Horizontal Beschreiwungslëschte wäerte Begrëffer ofschneiden déi ze laang sinn fir an der lénkser Kolonnfix ze passen text-overflow. A schmueler Viewports wäerte se op de Standard Stacked Layout änneren.

Code

An der Schlaang

Wrap inline Snippets vum Code mat <code>.

Zum Beispill, <section>soll als inline gewéckelt ginn. 
  1. Zum Beispill , <code> & lt ; Sektioun & GT ;</ code > soll als inline gewéckelt ginn .

Basis Block

Benotzt <pre>fir verschidde Zeilen vum Code. Ginn sécher all Wénkel Klammeren am Code fir richteg Render- entkommen.

<p>Probetext hei...</p>
  1. <vir>
  2.   <p>Probetext hei...</p>
  3. </pre>

Kapp erop!Gitt sécher datt de Code bannent <pre>Tags esou no lénks wéi méiglech ass; et gëtt all Tabs Render-.

Dir kënnt optional d' .pre-scrollableKlass addéieren déi eng maximal Héicht vun 350px setzt an eng Y-Achs Scrollbar ubitt.

Dëscher

Standard Stiler

Fir Basis Styling - liicht Polsterung an nëmmen horizontalen Deeler - füügt d'Basisklass .tableop all <table>.

# Virnumm Familljennumm Benotzernumm
1 Mark Otto @mdo
2 Jakob Thornton @fett
3 Larry de Vugel @twitter 
  1. <table class = "table" > 
  2.   …
  3. </ Dësch>

Fakultativ Klassen

Füügt eng vun de folgende Klassen un d' .tableBasisklass.

.table-striped

Füügt Zebrastreifen un all Tabellerei bannent der <tbody>iwwer den :nth-childCSS Selector (net an IE7-8 verfügbar).

# Virnumm Familljennumm Benotzernumm
1 Mark Otto @mdo
2 Jakob Thornton @fett
3 Larry de Vugel @twitter 
  1. <table class = "Table table-striped" > 
  2.   …
  3. </ Dësch>

.table-bordered

Füügt Grenzen a gerundeten Ecker op den Dësch.

# Virnumm Familljennumm Benotzernumm
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jakob Thornton @fett
3 Larry de Vugel @twitter 
  1. <table class = "table-bordered" > 
  2.   …
  3. </ Dësch>

.table-hover

Aktivéiert en Hover-Staat op Tabellereien bannent engem <tbody>.

# Virnumm Familljennumm Benotzernumm
1 Mark Otto @mdo
2 Jakob Thornton @fett
3 Larry de Vugel @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </ Dësch>

.table-condensed

Maacht Dëscher méi kompakt andeems d'Zellpolsterung an der Halschent geschnidden gëtt.

# Virnumm Familljennumm Benotzernumm
1 Mark Otto @mdo
2 Jakob Thornton @fett
3 Larry de Vugel @twitter 
  1. <table class = "Table table-condensed" > 
  2.   …
  3. </ Dësch>

Fakultativ Rei Klassen

Benotzen kontextuell Klassen Dësch Zeile ze Faarf.

Klass Beschreiwung
.success Gëtt eng erfollegräich oder positiv Handlung un.
.error Gëtt eng geféierlech oder potenziell negativ Handlung un.
.warning Gëtt eng Warnung un déi Opmierksamkeet brauch.
.info Benotzt als Alternativ zu de Standardstiler.
# Produit Bezuelung geholl Status
1 TB - Mount 01/04/2012 Genehmegt
2 TB - Mount 02/04/2012 Ofgeleent
3 TB - Mount 03/04/2012 Erwaardung
4 TB - Mount 04/04/2012 Rufft un fir ze bestätegen 
  1. ...
  2.   < tr class = "Erfolleg" >
  3.     <td> 1 < /td>
  4.     <td>TB - all Mount</ td >
  5.     < td > 01/04/2012 < / td >
  6.     <td>Genehmegt</ td >
  7.   </ tr >
  8. ...

Ënnerstëtzt Dësch Markup

Lëscht vun ënnerstëtzt Dësch HTML Elementer a wéi se solle benotzt ginn.

Tag Beschreiwung
<table> Wrapping Element fir Daten an engem Tabularformat ze weisen
<thead> Container Element fir Dësch Header Zeile ( <tr>) fir Tabellekolonnen ze markéieren
<tbody> Container Element fir Dësch Zeile ( <tr>) am Kierper vun der Tabell
<tr> Container Element fir eng Rei vun Dësch Zellen ( <td>oder <th>) datt op eng eenzeg Zeil schéngt
<td> Standard Dësch Zell
<th> Speziell Tabellzelle fir Kolonn (oder Zeil, jee no Ëmfang a Placement) Etiketten
<caption> Beschreiwung oder Resumé vun deem wat den Dësch hält, besonnesch nëtzlech fir Écran Lieser 
  1. <tabell>
  2.   <caption> ... </caption>
  3.   <eng>
  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. </ Dësch>

Formen

Standard Stiler

Individuell Form Kontrollen kréien Styling, awer ouni néideg Basis Klass op der <form>oder grouss Ännerungen am Markup. Resultater a gestapelt, lénks ausgeriicht Etiketten uewen op Form Kontrollen.

Legend Beispill Block-Niveau Hëllef Text hei. 
  1. <form>
  2.   <fieldset>
  3.     <legend> Legend </legend>
  4.     <label> Label Numm </label>
  5.     <input type = "text" placeholder = "Gitt eppes ..." >  
  6.     <span class = "help-block" > Beispill Block-Niveau Hëllef Text hei. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Kuckt mech eraus 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Ofschécken </button>  
  11.   </fieldset>
  12. </form>

Optional Layouten

Mat Bootstrap abegraff sinn dräi fakultativ Form Layouten fir allgemeng Benotzungsfäll.

Sich Form

Füügt .form-searchop d'Form an .search-queryd' <input>fir eng extra ofgerënnt Textinput.

  1. <form class = "form-search" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <knapp  type = "submit" class = "btn" > Sichen </button> 
  4. </form>

Inline Form

Füügt .form-inlinefir lénks ausgeriicht Etiketten an Inline-Block Kontrollen fir e kompakten Layout.

  1. <form  class = "form-inline" >
  2.   <input type = "text" class =   "input-small" placeholder = "E-Mail" > 
  3.   <input type = "Passwuert" class =   "input-small" placeholder = "Passwuert" > 
  4.   <label class = "checkbox" >
  5.     <input  type = "checkbox" > Erënnert mech un
  6.   </label>
  7.   <button type = "submit"   class = "btn" > Umellen </button>
  8. </form>

Horizontal Form

Riets alignéieren Etiketten a schwiewen se no lénks fir datt se op der selwechter Linn wéi Kontrollen erschéngen. Erfuerdert déi meescht Markupännerunge vun enger Standardform:

  • Füügt .form-horizontalop de Formulaire
  • Wickelt Etiketten a Kontrollen an.control-group
  • Füügt .control-labelop de Label
  • Wickelt all assoziéiert Kontrollen an .controlsfir eng korrekt Ausrichtung
  1. <form class = "form-horizontal" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" for = "inputEmail" > E- Mail </label>  
  4.     <div class = "controls" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "E-Mail" >   
  6.     </div>
  7.   </div>
  8.   <div class = "control-group" > 
  9.     <label class = "control-label" for = "inputPassword" > Passwuert </label>  
  10.     <div class = "controls" > 
  11.       <input type = "password " id = "inputPassword" placeholder = "Passwuert" >   
  12.     </div>
  13.   </div>
  14.   <div class = "control-group" > 
  15.     <div class = "controls" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Erënnert mech un 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Umellen </button>  
  20.     </div>
  21.   </div>
  22. </form>

Ënnerstëtzt Form Kontrollen

Beispiller vun Standard Form Kontrollen ënnerstëtzt an engem Beispill Form Layout.

Input

Meeschte gemeinsam Form Kontroll, Text-baséiert Input Felder. Ëmfaasst Ënnerstëtzung fir all HTML5 Typen: Text, Passwuert, Datetime, Datetime-lokal, Datum, Mount, Zäit, Woch, Nummer, E-Mail, URL, Sich, Tel, a Faarf.

Verlaangt de Gebrauch vun engem spezifizéierte typezu all Moment.

  1. <input type = "text" placeholder = "Textinput" >

Textberäich

Form Kontroll déi verschidde Linnen Text ënnerstëtzt. Änneren rowsAttributer wéi néideg.

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

Checkboxen a Radioen

Checkboxe si fir eng oder e puer Optiounen an enger Lëscht ze wielen, während Radios fir eng Optioun vu ville auswielen.

Standard (gestapelt)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" Wäert = "" >  
  3.   Optioun eent ass dëst an dat - gitt sécher mat abegraff firwat et super ass
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <Input Type = "Radio" Numm = "optionsRadios" id = "optionsRadios1" Wäert = "Optioun1" kontrolléiert >     
  8.   Optioun eent ass dëst an dat - gitt sécher mat abegraff firwat et super ass
  9. </label>
  10. <label class = "radio" > 
  11.   <Input Type = "Radio" Numm = "OptionsRadios" id = "OptionsRadios2" Wäert = "Optioun2" >    
  12.   Optioun zwee kann soss eppes sinn a se auswielen wäert d'Optioun een deseléieren
  13. </label>

Inline Checkboxen

Füügt d' .inlineKlass op eng Serie vu Checkboxen oder Radios fir Kontrollen op der selwechter Linn ze gesinn.

  1. <label class = "checkbox inline" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" Wäert = "Option1" > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" Wäert = "optioun2" > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" Wäert = "Optioun3" > 3   
  9. </label>

Wielt

Benotzt d'Standardoptioun oder spezifizéiert eng multiple="multiple"fir méi Optiounen gläichzäiteg ze weisen.


  1. <auswielen>
  2.   <Optioun> 1 </Optioun>
  3.   <Optioun> 2 </Optioun>
  4.   <Optioun> 3 </Optioun>
  5.   <Optioun> 4 </Optioun>
  6.   <Optioun> 5 </Optioun>
  7. </auswielen>
  8.  
  9. <wielt multiple = "multiple" > 
  10.   <Optioun> 1 </Optioun>
  11.   <Optioun> 2 </Optioun>
  12.   <Optioun> 3 </Optioun>
  13.   <Optioun> 4 </Optioun>
  14.   <Optioun> 5 </Optioun>
  15. </auswielen>

Form Kontrollen verlängeren

Füügt uewen op existente Browser Kontrollen, Bootstrap enthält aner nëtzlech Formkomponenten.

Prependéiert an ugeschloss Inputen

Füügt Text oder Knäpper virun oder no all Text-baséiert Input. Notéiert datt selectElementer net hei ënnerstëtzt ginn.

Standard Optiounen

Wrap en .add-onan eng inputmat enger vun zwou Klassen fir Text un en Input virzebereeden oder ze addéieren.

@

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

Kombinéiert

Benotzt béid Klassen an zwou Instanzen .add-onfir en Input virzebereeden an ze addéieren.

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

Knäppercher amplaz Text

Amplaz vun engem <span>mat Text, benotzen .btnengem Knäppchen (oder zwee) zu engem Input.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton" type = "text" >   
  3.   <button class = "btn" type = "button" > Gitt! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons" type = "text" >   
  3.   <button class = "btn" type = "button" > Sichen </button>  
  4.   <button class = "btn" type = "button" > Optiounen </button>  
  5. </div>

Knäppchen dropdowns

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

Segmentéiert Dropdowngruppen

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

Sich Form

  1. <form class = "form-search" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Sichen </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Sichen </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Kontroll Gréisst

Benotzt relativ Gréisst Klassen wéi .input-largeoder passt Är Inputen un d'Gitter Kolonngréissten mat .span*Klassen.

Block Niveau Input

Maacht all <input>oder <textarea>Element sech wéi e Blockniveau Element behuelen.

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

Relativ Gréisst

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Kapp erop!An zukünfteg Versioune wäerte mir d'Benotzung vun dëse relativen Input Klassen änneren fir eis Knäppchengréissten ze passen. Zum Beispill .input-largewäert d'Padding an d'Schrëftgréisst vun engem Input erhéijen.

Gitter Gréisst

Benotzt .span1fir .span12Inputen déi mat der selwechter Gréisst vun de Gitterkolonnen passen.

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <select class = "span1" > 
  5.   ...
  6. </auswielen>
  7. <select class = "span2" > 
  8.   ...
  9. </auswielen>
  10. <select class = "span3" > 
  11.   ...
  12. </auswielen>

Fir multiple Gitter-Inputen pro Zeil, benotzt d' .controls-rowModifikateurklass fir richteg Abstand . Et schwëmmt d'Inputen fir de Wäissraum ze kollapsen, setzt déi richteg Margen a läscht de Schwämm.

  1. <div class = "controls" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "kontrolléiert Kontrollen-Zeil" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

Uneditable Input

Presentéiert Donnéeën an enger Form déi net editéierbar ass ouni aktuell Formmarkup ze benotzen.

E puer Wäert hei 
  1. <span class = "input-xlarge uneditable-input" > E puer Wäert hei </span>

Form Aktiounen

Enn eng Form mat enger Grupp vun Aktiounen (Knäppercher). Wann se an engem plazéiert sinn .form-actions, ginn d'Knäppercher automatesch ofgeschnidden fir mat de Formulaire Kontrollen opzestellen.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Ännerungen späicheren </button>  
  3.   <button type = "button" class = "btn" > Ofbriechen </button>  
  4. </div>

Hëllef Text

Inline- a Blockniveau Ënnerstëtzung fir Hëllefstext, deen ronderëm Form Kontrollen erschéngt.

Inline Hëllef

Inline Hëllef Text 
  1. <input type = "text" ><span class = "help-inline" > Inline Hëllefstext </span>

Block Hëllef

E méi laange Block vun Hëllefstext, deen op eng nei Zeil brécht an iwwer eng Zeil erausstécht. 
  1. <input type = "text" ><span class = "help-block" > E méi laange Block vun Hëllefstext, deen op eng nei Linn brécht an iwwer eng Zeil erausstécht. </span>

Form Kontroll Staaten

Gitt Feedback un d'Benotzer oder Besucher mat Basisfeedback-Staaten op Form Kontrollen an Etiketten.

Input Fokus

Mir läschen d'Standardstiler outlineop e puer Form Kontrollen a gëllen en box-shadowop senger Plaz fir :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Dëst ass fokusséiert..." >

Ongülteg Input

Style Input iwwer Standard Browser Funktionalitéit mat :invalid. Spezifizéiert e type, füügt den requiredAttribut derbäi wann d'Feld net fakultativ ass, an (wann zoutreffend) spezifizéiert apattern .

Dëst ass net verfügbar a Versioune vum Internet Explorer 7-9 wéinst Mangel un Ënnerstëtzung fir CSS Pseudo Selektoren.

  1. <input class = "span3" type = "E-Mail" erfuerderlech >

Behënnert Input

Füügt den disabledAttribut op en Input fir d'Benotzerinput ze verhënneren an e bëssen anere Look ausléisen.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" Plazhalter = "Behënnert Input hei..." behënnert >

Validatioun Staaten

Bootstrap enthält Validatiounsstile fir Feeler, Warnung, Infoen an Erfollegsmeldungen. Fir ze benotzen, füügt déi entspriechend Klass an d'Ëmgéigend .control-group.

Eppes ass vläicht falsch gaang
Korrigéiert w.e.g. de Feeler
Benotzernumm gëtt geholl
Woohoo! 
  1. <div class = "Kontrollgruppewarnung" > 
  2.   <label class = "control-label" for = "inputWarning" > Input mat Warnung </label>  
  3.   <div class = "controls" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Eppes ass vläicht falsch gaang </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "Kontrollgruppefehler" > 
  10.   <label class = "control-label" for = "inputError" > Input mat Feeler </label>  
  11.   <div class = "controls" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Korrigéiert w.e.g. de Feeler </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "control-group info" > 
  18.   <label class = "control-label" for = "inputInfo" > Input mat Info </label>  
  19.   <div class = "controls" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > De Benotzernumm ass scho geholl </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "Kontrollgrupp Erfolleg" > 
  26.   <label class = "control-label" for = "inputSuccess" > Input mat Erfolleg </label>  
  27.   <div class = "controls" > 
  28.     <input type = "text" id = "inputSuccès" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Knäppercher

Standard Knäppercher

Button Styles kënnen op alles mat der .btnKlass applizéiert ginn. Wéi och ëmmer, normalerweis wëllt Dir dës nëmmen <a>op <button>Elementer applizéieren fir déi bescht Rendering.

Knäppchen class="" Beschreiwung
btn Standard groe Knäppchen mat Gradient
btn btn-primary Bitt extra visuell Gewiicht an identifizéiert déi primär Handlung an enger Rei vu Knäppercher
btn btn-info Benotzt als Alternativ zu de Standardstiler
btn btn-success Gëtt eng erfollegräich oder positiv Handlung un
btn btn-warning Bedeit datt virsiichteg mat dëser Aktioun geholl ginn soll
btn btn-danger Gëtt eng geféierlech oder potenziell negativ Handlung un
btn btn-inverse Alternativ donkelgro Knäppchen, net un enger semantescher Handlung oder Benotzung gebonnen
btn btn-link Entlooss e Knäppchen andeems se wéi e Link ausgesäit wärend de Knäppeverhalen behalen

Cross Browser Kompatibilitéit

IE9 cropt net Hannergrondgradienten op gerundeten Ecker, also hu mir se ewechgeholl. Zesummenhang, IE9 jankifies behënnert buttonElementer, Rendering Text gro mat engem béisen Text-Schatten datt mir net befestegt.

Knäppchen Gréissten

Loscht op méi grouss oder méi kleng Knäppercher? Add .btn-large, .btn-small, oder .btn-minifir zousätzlech Gréissten.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Grousse Knäppchen </button>  
  3.   <button class = "btn btn-large" type = "button" > Grousse Knäppchen </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Standard Knäppchen </button>  
  7.   <button class = "btn" type = "button" > Default Button </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Klenge Knäppchen </button>  
  11.   <button class = "btn btn-small" type = "button" > Klenge Knäppchen </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mini Button </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini Button </button>  
  16. </p>

Erstellt Blockniveau Knäppercher - déi déi d'ganz Breet vun engem Elterendeel spanen - andeems Dir .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Block Level Button </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Block Level Button </button>

Behënnert Staat

Maacht Knäppercher onklickbar ausgesinn andeems se se 50% zréckfaden.

Anker Element

Füügt d' .disabledKlass op <a>Knäppercher.

Primärverbindung Link 

  1. <a href = "#" class = "btn btn-large btn-primär behënnert" > Primärlink </a>  
  2. <a href = "#" class = "btn btn-large behënnert" > Link </a>

Kapp erop!Mir benotzen .disabledals Utility Klass hei, ähnlech wéi déi gemeinsam .activeKlass, sou datt kee Präfix erfuerderlech ass. Och dës Klass ass nëmme fir Ästhetesch; Dir musst personaliséiert JavaScript benotze fir Linken hei auszeschalten.

Knäppchen Element

Füügt den disabledAttribut op <button>Knäppercher.

  1. <button type = "button" class = "btn btn-large btn-primär behënnert" disabled = "behënnert" > Primär Knäppchen </button>   
  2. <button type = "button" class = "btn btn-large" ausgeschalt > Button </button>

Eng Klass, verschidde Tags

Benotzt d' .btnKlass op engem <a>, <button>, oder <input>Element.

Link 
  1. <a class = "btn" href = ""> Link </a> _  
  2. <button class = "btn" type = "submit" > Knäppchen </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit" value = "Soumissioun" >

Als bescht Praxis, probéiert d'Element fir Äre Kontext ze passen fir passende Cross-Browser Rendering ze garantéieren. Wann Dir eng hutt input, benotzt e <input type="submit">fir Äre Knäppchen.

Biller

Füügt Klassen un en <img>Element fir einfach Biller an all Projet ze styléieren.

140x140 140x140 140x140 
  1. <img src = "..." class = "img-ronderëm" >  
  2. <img src = "..." class = "img-Circle" >  
  3. <img src = "..." class = "img-polaroid" >

Kapp erop! .img-roundeda .img-circleschaffen net am IE7-8 wéinst Mangel un border-radiusËnnerstëtzung.

Symboler vun Glyphicons

Ikon glyphs

140 Symboler a Sprite Form, verfügbar an donkelgrau (Standard) a wäiss, geliwwert vu Glyphicons .

  • icon-glas
  • icon-Musek
  • icon-Sich
  • icon-Enveloppe
  • icon-Häerz
  • icon-Stär
  • icon-Stär-eidel
  • icon-Benotzer
  • icon-film
  • icon-th-grouss
  • icon-th
  • icon-th-Lëscht
  • icon-ok
  • icon-ewechhuelen
  • icon-zoom-an
  • icon-auszoomen
  • icon-off
  • icon-Signal
  • icon-Zännstaang
  • icon-Dreck
  • icon-doheem
  • icon-Datei
  • icon-Zäit
  • icon-Strooss
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-Inbox
  • icon-Spill-Krees
  • icon-widderhuelen
  • icon-erfrëschen
  • icon-list-alt
  • icon-Spär
  • icon-Fändel
  • Ikon-Kopfhörer
  • icon-Volume-Off
  • icon-Volumen-Down
  • icon-Volumen-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tag
  • icon-Buch
  • Ikon-Lieszeechen
  • icon-druck
  • icon-Kamera
  • icon-Schrëft
  • icon-fett
  • icon-kursiv
  • icon-Text-Héicht
  • icon-Text-Breet
  • icon-align-lénks
  • icon-align-center
  • icon-align-right
  • icon-align-justifiéieren
  • Ikon Lëscht
  • icon-indent-lénks
  • icon-indent-riets
  • icon-facetime-video
  • icon-Bild
  • icon-Bläistëft
  • icon-map-marker
  • icon-ajustéieren
  • icon-tint
  • icon-edit
  • icon-deelen
  • icon-Check
  • icon-move
  • icon-Schrëtt-zeréck
  • icon-séier-zréck
  • icon-zeréck
  • icon-Spill
  • icon-paus
  • icon-stoppen
  • icon-Forward
  • icon-séier-Forward
  • icon-Schrëtt-Forward
  • icon-austauschen
  • icon-chevron-lénks
  • icon-chevron-riets
  • icon-plus-Zeechen
  • icon-minus-Zeechen
  • icon-ewechhuelen-Zeechen
  • icon-ok-Zeechen
  • icon-Fro-Zeechen
  • icon-info-sign
  • icon-Screenshot
  • icon-ewechhuelen-Krees
  • icon-ok-Krees
  • icon-verbuet-Krees
  • icon-Pfeil-lénks
  • icon-Pfeil-riets
  • icon-Pfeil-up
  • icon-Pfeil erof
  • icon-share-alt
  • icon-Gréisst änneren-voll
  • icon-Gréisst änneren-kleng
  • icon-plus
  • icon-minus
  • icon-Asterisk
  • icon-Ausrufezeeche
  • icon-cadeau
  • icon-blatt
  • icon-feier
  • icon-Aen-oppen
  • icon-Aen-zou
  • icon-warnung-schëld
  • icon-Fliger
  • icon-Kalenner
  • icon-zoufälleg
  • icon-kommentéieren
  • icon-Magnéit
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-Dossier-zou
  • icon-Dossier-oppen
  • icon-Gréisst änneren-vertikal
  • icon-Gréisst änneren-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-Zertifikat
  • icon-Daumen-up
  • icon-daumen-down
  • icon-Hand-Recht
  • icon-Hand-lénks
  • icon-Hand-up
  • icon-Hand-down
  • icon-Krees-Pfeil-Recht
  • icon-Krees-Pfeil-lénks
  • icon-Krees-Pfeil-up
  • icon-Krees-Pfeil erof
  • icon-globe
  • icon-schlüssel
  • icon-Aufgaben
  • icon-filter
  • icon-koffer
  • Ikon-Vollbildschierm

Glyphicons Attributioun

Glyphicons Halflings sinn normalerweis net gratis verfügbar, awer en Arrangement tëscht Bootstrap an de Glyphicons Creatoren hunn dëst ouni Käschten fir Iech als Entwéckler méiglech gemaach. Als Merci froe mir Iech en optionalen Link zréck op Glyphicons opzehuelen wann et praktesch ass.

Wéi benotzen

All Symboler erfuerderen en <i>Tag mat enger eenzegaarteger Klass, mat Präfix icon-. Fir ze benotzen, plazéiert de folgende Code just iwwerall:

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

Et ginn och Stiler verfügbar fir ëmgedréint (wäiss) Symboler, fäerdeg gemaach mat enger extra Klass. Mir wäerten dës Klass speziell op Hover an aktiv Staate fir nav an Dropdown Linken ëmsetzen.

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

Kapp erop!Wann Dir nieft Strings vum Text benotzt, wéi a Knäppercher oder Navigatiounslinks, gitt sécher datt Dir e Raum hannert dem <i>Tag fir richteg Abstand hannerloosst.

Ikon Beispiller

Benotzt se a Knäppercher, Knäpperchergruppen fir eng Toolbar, Navigatioun oder Prepended Form Input.

Knäppercher

Knäppchen Grupp an enger Knäppchen Toolbar
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  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 an engem Knäppchen Grupp
Benotzer 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Benotzer </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> Änneren </a></li>  
  6.     <li><a href = "#" ><i class = "Icon-Trash" ></i> Läschen </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Verbuet </a></li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Administrator maachen </a></li>  
  10.   </ul>
  11. </div>
Knäppchen Gréissten
Stär Stär Stär 
  1. <a class = "btn btn-large" href = "#" ><i class = "Icon-Star" ></i> Star </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Star </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "Icon-Star" ></i> Star </a>

Navigatioun

  1. <ul class = "nav nav-list" > 
  2.   <li class = "aktiv" ><a href = "#" ><i class = "icon-home icon-white" ></i> Home </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Bibliothéik </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Uwendungen </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Verschiddenes </a></li>  
  6. </ul>

Form Felder

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