Bootstrap

Basis CSS

Fundamentele HTML-eleminten stylearre en ferbettere mei útwreide klassen.

Heads up! Dizze dokuminten binne foar v2.3.2, dy't net langer offisjeel stipe wurdt. Besjoch de lêste ferzje fan Bootstrap!

Typografy

Headings

Alle HTML headings, <h1>troch <h6>binne beskikber.

h1. Koptekst 1

h2. Koptekst 2

h3. Opskrift 3

h4. Opskrift 4

h5. Opskrift 5
h6. Opskrift 6

Body kopy

De globale standert fan Bootstrap font-sizeis 14px , mei in line-heightfan 20px . Dit wurdt tapast op de <body>en alle paragrafen. Derneist <p>krije (paragrafen) in ûnderste marzje fan de helte fan har linehichte (standert 10px).

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>

Kopy fan lead lichem

Meitsje in paragraaf opfallend troch ta te foegjen .lead.

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

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

Boud mei Minder

De typografyske skaal is basearre op twa MINDER fariabelen yn variables.less : @baseFontSizeen @baseLineHeight. De earste is de basislettertypegrutte dy't troch it heule brûkt wurdt en de twadde is de basislinehichte. Wy brûke dy fariabelen en wat ienfâldige wiskunde om de marzjes, paddings, en line-hichtes fan al ús type en mear te meitsjen. Pas se oan en Bootstrap past him oan.

Klam

Meitsje gebrûk fan HTML's standert klam tags mei lichtgewicht stilen.

<small>

Brûk de lytse tag om ynline of tekstblokken te beklamjen .

Dizze rigel tekst is bedoeld om behannele te wurden as lytse print.

<p> <lyts> Dizze rigel tekst is bedoeld om behannele te wurden as lytse print. </lyts> </p>

Fet

Foar it beklamjen fan in stikje tekst mei in swierder lettertype-gewicht.

It folgjende stikje tekst wurdt werjûn as fet tekst .

<strong> werjûn as fet tekst </strong>

Kursyf

Foar it beklamjen fan in stikje tekst mei kursyf.

It folgjende stikje tekst wurdt werjûn as kursive tekst .

<em> werjûn as kursive tekst </em>

Heads up!Fiel jo frij om te brûken <b>en <i>yn HTML5. <b>is bedoeld om wurden of útdrukkingen te markearjen sûnder ekstra belang oer te bringen, wylst <i>it meast foar stim, technyske termen, ensfh.

Alignment klassen

Tekst maklik opnij oanpasse oan komponinten mei tekstôfstimmingsklassen.

Links rjochte tekst.

Sintrum rjochte tekst.

Rjochts rjochte tekst.

  1. <p class = "text-left" > Links rjochte tekst. </p> 
  2. <p class = "text-center" > Sintrum rjochte tekst. </p> 
  3. <p class = "text-right" > Rjochts rjochte tekst. </p>

De klam klassen

Bring betsjutting oer troch kleur mei in hânfol klam klassen foar nut.

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-warskôging" > Etiam porta as 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>

Ofkoartings

Stilisearre ymplemintaasje fan HTML's <abbr>elemint foar ôfkoartings en akronyms om de útwreide ferzje te sjen op hover. Ofkoartings mei in titleattribút hawwe in ljocht stippele boaiem grins en in help rinnerke op hover, foarsjen ekstra kontekst op hover.

<abbr>

Foar útwreide tekst op lange hover fan in ôfkoarting, befetsje it titleattribút.

In ôfkoarting fan it wurd attribút is attr .

<abbr title = "attribút" > attr </abbr>

<abbr class="initialism">

Taheakje .initialismoan in ôfkoarting foar in wat lytsere lettertypegrutte.

HTML is it bêste ding sûnt gesneden bôle.

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

Adressen

Presintearje kontaktynformaasje foar de tichtstbye foarâlden as it heule wurk.

<address>

Bewarje opmaak troch alle rigels te einigjen mei <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Folsleine namme
[email protected] 
  1. <adres>
  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. </adres>
  7.  
  8. <adres>
  9.   <strong> Folsleine namme </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </adres>

Blockquotes

Foar it oanheljen fan blokken ynhâld fan in oare boarne binnen jo dokumint.

Standert blokquote

Wrap <blockquote>om elke HTML as it sitaat. Foar rjochte quotes advisearje wy in <p>.

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

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

Blockquote opsjes

Styl en ynhâld feroaret foar ienfâldige fariaasjes op in standert blokquote.

In boarne neame

Foegje <small>tag ta foar it identifisearjen fan de boarne. Wrap de namme fan it boarnewurk yn <cite>.

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

Immen ferneamd yn Boarne Titel 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat in ante. </p>
  3.   <small> Immen ferneamde <cite title = "Boarnetitel" > Boarnetitel </cite></small> 
  4. </blockquote>

Alternatyf byldskermen

Brûk .pull-rightfoar in driuwend, rjochts rjochte blokquote.

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

Immen ferneamd yn Boarne Titel 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </blockquote>

Listen

Net oardere

In list mei items wêryn de folchoarder net eksplisyt fan belang is.

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

Besteld

In list mei items wêryn de folchoarder eksplisyt fan belang is .

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

Fuortsmite de standert list-styleen lofter padding op list items (allinich direkte bern).

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

Ynline

Plak alle list items op ien rigel mei inline-blocken wat ljocht padding.

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

Beskriuwing

In list mei termen mei har byhearrende beskriuwingen.

Beskriuwingslisten
In beskriuwingslist is perfekt foar it definiearjen fan termen.
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>

Horizontale beskriuwing

Meitsje termen en beskriuwingen yn <dl>line-up side-by-side.

Beskriuwingslisten
In beskriuwingslist is perfekt foar it definiearjen fan termen.
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>

Heads up!Horizontale beskriuwingslisten sille termen ôfbrekke dy't te lang binne om te passen yn 'e lofterkolom fix text-overflow. Yn smellere viewports sille se feroarje nei de standert steapele yndieling.

Koade

Ynline

Wrap ynline snippets fan koade mei <code>.

Bygelyks, <section>moatte wurde ferpakt as inline. 
  1. Bygelyks , <koade > & lt ; seksje & gt ;</ code > moat wurde ferpakt as ynline .

Basis blok

Brûk <pre>foar meardere rigels koade. Wês wis dat jo ûntkomme oan alle hoeke heakjes yn 'e koade foar in goede rendering.

<p>In foarbyldtekst hjir...</p>
  1. <foar>
  2.   <p>foarbyldtekst hjir...</p>
  3. </pre>

Heads up!Wês wis dat jo koade binnen <pre>tags sa ticht mooglik by de lofter hâlde; it sil alle ljeppers werjaan.

Jo kinne opsjoneel de .pre-scrollableklasse tafoegje dy't in max-hichte fan 350px sil ynstelle en in y-as scrollbar leverje.

Tabellen

Standert stilen

Foar basisstyling - ljochte padding en allinich horizontale ferdielen - foegje de basisklasse .tableta oan elke <table>.

# Foarnamme Achternamme Brûkersnamme
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de fûgel @twitter 
  1. <table class = "tabel" > 
  2.   …
  3. </tabel>

Opsjonele klassen

Foegje ien fan 'e folgjende klassen ta oan' e .tablebasisklasse.

.table-striped

Foeget zebra-striping ta oan eltse tabel rige binnen de <tbody>fia de :nth-childCSS selector (net beskikber yn IE7-8).

# Foarnamme Achternamme Brûkersnamme
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de fûgel @twitter 
  1. <table class = "table table-striped" > 
  2.   …
  3. </tabel>

.table-bordered

Foegje rânen en rûne hoeken ta oan 'e tafel.

# Foarnamme Achternamme Brûkersnamme
1 Merk Otto @mdo
Merk Otto @getbootstrap
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
  1. <table class = "table-bordered" > 
  2.   …
  3. </tabel>

.table-hover

Skeakelje in hover tastân op tabel rigen binnen in <tbody>.

# Foarnamme Achternamme Brûkersnamme
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </tabel>

.table-condensed

Makket tabellen kompakter troch sel padding yn de helte te snijen.

# Foarnamme Achternamme Brûkersnamme
1 Merk Otto @mdo
2 Jacob Thornton @fet
3 Larry de Fûgel @twitter 
  1. <table class = "tabel table-condensed" > 
  2.   …
  3. </tabel>

Opsjoneel rige klassen

Brûk kontekstuele klassen om tabel rigen te kleurjen.

Klasse Beskriuwing
.success Jout in suksesfolle of positive aksje oan.
.error Jout in gefaarlike of mooglik negative aksje oan.
.warning Jout in warskôging oan dy't miskien oandacht nedich hawwe.
.info Wurdt brûkt as alternatyf foar de standert stilen.
# Produkt Betelling opnommen Status
1 TB - Monthly 01/04/2012 Goedkard
2 TB - Monthly 02/04/2012 wegere
3 TB - Monthly 03/04/2012 Yn ôfwachting
4 TB - Monthly 04/04/2012 Skilje yn om te befêstigjen 
  1. ...
  2.   < tr class = "sukses" >
  3.     <td> 1 < /td>
  4.     <td>TB - Moanlikse</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Goedkard</ td >
  7.   </ tr >
  8. ...

Stipe tabelmarkearring

List mei stipe HTML-eleminten foar tabel en hoe't se moatte wurde brûkt.

Tag Beskriuwing
<table> Wrapping elemint foar it werjaan fan gegevens yn in tabelformaat
<thead> Container elemint foar tabelkop rigen ( <tr>) om tabelkolommen te labeljen
<tbody> Container elemint foar tabel rigen ( <tr>) yn it lichem fan 'e tabel
<tr> Container elemint foar in set fan tabel sellen ( <td>of <th>) dat ferskynt op in inkele rige
<td> Standert tabel sel
<th> Spesjale tabelsel foar kolom (as rige, ôfhinklik fan omfang en pleatsing) labels
<caption> Beskriuwing of gearfetting fan wat de tabel hâldt, benammen nuttich foar skermlêzers 
  1. <tabel>
  2.   <caption> ... </caption>
  3.   <kop>
  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. </tabel>

Formulieren

Standert stilen

Yndividuele foarm kontrôles ûntfange styling, mar sûnder in fereaske basis klasse op de <form>of grutte feroarings yn markup. Resultaten yn opsteapele, lofts rjochte labels boppe op formulierkontrôles.

Leginde Foarbyld helptekst op bloknivo hjir. 
  1. <foarm>
  2.   <fieldset>
  3.     <legend> Legend </legend>
  4.     <label> Labelnamme </label>
  5.     <input type = "text" placeholder = "Typ wat ..." >  
  6.     <span class = "help-block" > Foarbyld helptekst op bloknivo hjir. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Kontrolearje my 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Ferstjoere </button>  
  11.   </fieldset>
  12. </form>

Opsjonele layouts

Ynbegrepen mei Bootstrap binne trije opsjonele formulierlayouts foar gewoane gebrûksgefallen.

Sykje formulier

Taheakje .form-searchoan it formulier en .search-queryoan de <input>foar in ekstra rûne tekst ynfier.

  1. <form class = "form-search" > 
  2.   <input type = "text" class = "ynput-medium sykfraach" >  
  3.   <button type = "submit" class = "btn" > Sykje </button>  
  4. </form>

Inline formulier

Taheakje .form-inlinefoar etiketten en ynline-blokkontrôles foar in kompakte yndieling.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "E-post" >   
  3.   <input type = "password" class = "input-small" placeholder = "Wachtwurd" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Unthâld my 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Oanmelde </button>  
  8. </form>

Horizontale foarm

Rjochts rjochtsje labels út en driuw se nei lofts om se op deselde rigel te meitsjen as kontrôles. Fereasket de measte markupwizigingen fan in standertformulier:

  • Tafoegje .form-horizontaloan it formulier
  • Wrap etiketten en kontrôles yn.control-group
  • Taheakje .control-labeloan it label
  • Wrap alle assosjearre kontrôles yn .controlsfoar juste ôfstimming
  1. <form class = "form-horizontal" > 
  2.   <div class = "kontrôlegroep" > 
  3.     <label class = "control-label" for = "inputEmail" > E-post </label>  
  4.     <div class = "kontrôles" > 
  5.       <input type = "text" id = "inputEmail" plakhâlder = "E-post" >   
  6.     </div>
  7.   </div>
  8.   <div class = "kontrôlegroep" > 
  9.     <label class = "control-label" for = "inputPassword" > Wachtwurd </label>  
  10.     <div class = "kontrôles" > 
  11.       <input type = "password" id = "inputPassword" plakhâlder = "Wachtwurd" >   
  12.     </div>
  13.   </div>
  14.   <div class = "kontrôlegroep" > 
  15.     <div class = "kontrôles" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Unthâld my 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Oanmelde </button>  
  20.     </div>
  21.   </div>
  22. </form>

Stipe formulierkontrôles

Foarbylden fan standertfoarmkontrôles stipe yn in foarbyldfoarmyndieling.

Ynputen

Meast foarkommende foarmkontrôle, tekst-basearre ynfierfjilden. Omfettet stipe foar alle HTML5-typen: tekst, wachtwurd, datetime, datetime-lokaal, datum, moanne, tiid, wike, nûmer, e-post, url, sykje, tel, en kleur.

Fereasket it brûken fan in spesifisearre typeop alle tiden.

  1. <input type = "text" placeholder = "Tekst ynfier" >

Tekstgebiet

Formkontrôle dy't meardere rigels tekst stipet. Feroarje rowsattribút as nedich.

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

Checkboxes en radio's

Checkboxes binne foar it selektearjen fan ien of meardere opsjes yn in list, wylst radio's binne foar it selektearjen fan ien opsje út in protte.

Standert (steapele)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" wearde = "" >  
  3.   Opsje ien is dit en dat - wês wis dat jo opnimme wêrom't it geweldich is
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" wearde = "option1" kontrolearre >     
  8.   Opsje ien is dit en dat - wês wis dat jo opnimme wêrom't it geweldich is
  9. </label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" wearde = "option2" >    
  12.   Opsje twa kin wat oars wêze en it selektearjen sil opsje ien deselektearje
  13. </label>

Inline karfakjes

Foegje de .inlineklasse ta oan in searje karfakjes of radio's foar kontrôles ferskine op deselde rigel.

  1. <label class = "checkbox inline" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" wearde = "opsje1" > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" wearde = "opsje2" > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" wearde = "opsje3" > 3   
  9. </label>

Selektearret

Brûk de standertopsje of spesifisearje in multiple="multiple"om meardere opsjes tagelyk te sjen.


  1. <selektearje>
  2.   <opsje> 1 </option>
  3.   <opsje> 2 </option>
  4.   <opsje> 3 </option>
  5.   <opsje> 4 </option>
  6.   <opsje> 5 </option>
  7. </selektearje>
  8.  
  9. <selektearje meardere = "meardere" > 
  10.   <opsje> 1 </option>
  11.   <opsje> 2 </option>
  12.   <opsje> 3 </option>
  13.   <opsje> 4 </option>
  14.   <opsje> 5 </option>
  15. </selektearje>

It útwreidzjen fan formulierkontrôles

Boppe op besteande browserkontrôles tafoegje, Bootstrap omfettet oare nuttige formulierkomponinten.

Prepended en taheakke yngongen

Foegje tekst of knoppen ta foar of nei elke tekst-basearre ynfier. Tink derom dat selecteleminten hjir net wurde stipe.

Standert opsjes

Wrap in .add-onen in inputmei ien fan twa klassen foar in prepend of heakjen tekst oan in ynfier.

@

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

Kombinearre

Brûk beide klassen en twa eksimplaren fan .add-onom in ynfier foar te setten en ta te foegjen.

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

Knoppen ynstee fan tekst

Yn stee fan in <span>mei tekst, brûk in .btnte heakjen in knop (of twa) oan in ynfier.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton" type = "tekst" >   
  3.   <button class = "btn" type = "button" > Gean! </knop>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons" type = "tekst" >   
  3.   <button class = "btn" type = "button" > Sykje </button>  
  4.   <button class = "btn" type = "button" > Opsjes </button>  
  5. </div>

Knop dropdowns

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

Segmentearre dropdown-groepen

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

Sykje formulier

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

Kontrolearje grutte

Brûk klassen fan relative grutte lykas .input-largeof oerienkomme mei jo ynputs mei de gridkolomgrutte mei .span*klassen.

Block nivo yngongen

Meitsje ien <input>of <textarea>elemint gedrage as in blok nivo elemint.

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

Relative grutte

  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" >

Heads up!Yn takomstige ferzjes sille wy it gebrûk fan dizze relative ynfierklassen feroarje om oerien te kommen mei ús knopgrutte. Bygelyks, .input-largesil fergrutsje de padding en lettertype-grutte fan in ynfier.

Grid sizing

Brûk .span1oan .span12foar ynputen dy't oerienkomme mei deselde grutte fan 'e rasterkolommen.

  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. <selektearje klasse = "span1" > 
  5.   ...
  6. </selektearje>
  7. <select class = "span2" > 
  8.   ...
  9. </selektearje>
  10. <selektearje klasse = "span3" > 
  11.   ...
  12. </selektearje>

Foar meardere rasterynputen per rigel, brûk de .controls-rowmodifikaasjeklasse foar juste ôfstân . It driuwt de yngongen om de wite romte yn te fallen, stelt de juste marzjes yn en wisket de float.

  1. <div class = "kontrôles" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "kontrôles-rige" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

Unbewurkbere yngongen

Presintearje gegevens yn in formulier dat net te bewurkjen is sûnder gebrûk fan werklike formuliermarkearring.

Guon wearde hjir 
  1. <span class = "input-xlarge uneditable-input" > Guon wearde hjir </span>

Formearje aksjes

Einigje in formulier mei in groep aksjes (knoppen). As se yn in pleatst wurde .form-actions, sille de knoppen automatysk ynspringe om op te lizzen mei de formulierkontrôles.

  1. <div class = "form-aksjes" > 
  2.   <button type = "submit" class = "btn btn-primary" > Bewarje wizigingen </button>  
  3.   <button type = "button" class = "btn" > Ofbrekke </button>  
  4. </div>

Helptekst

Inline- en bloknivo-stipe foar helptekst dy't om formulierkontrôles ferskynt.

Inline help

Inline helptekst 
  1. <input type = "text" ><span class = "help-inline" > Ynline helptekst </span>

Help blokkearje

In langer blok helptekst dy't brekt op in nije rigel en kin útrinne oer ien rigel. 
  1. <input type = "text" ><span class = "help-block" > In langer blok helptekst dy't op in nije rigel brekt en oer ien rigel kin útrinne. </span>

Form kontrôle steaten

Jou feedback oan brûkers as besikers mei basisfeedback-steaten oer formulierkontrôles en labels.

Ynput fokus

Wy ferwiderje de standertstilen outlineop guon formulierkontrôles en tapasse in box-shadowop syn plak foar :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" wearde = "Dit is rjochte..." >

Unjildige yngongen

Style inputs fia standert blêder funksjonaliteit mei :invalid. Spesifisearje in type, foegje it requiredattribút ta as it fjild net opsjoneel is, en (as fan tapassing) spesifisearje in pattern.

Dit is net beskikber yn ferzjes fan Internet Explorer 7-9 fanwegen gebrek oan stipe foar CSS-pseudo-selektors.

  1. <input class = "span3" type = "e-post" fereaske >

Utskeakele yngongen

Foegje it disabledattribút ta op in ynfier om ynput fan brûkers te foarkommen en in wat oare uterlik te triggerjen.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Ynfier hjir útskeakele..." útskeakele >

Validaasje steaten

Bootstrap omfettet falidaasjestilen foar flater, warskôging, ynfo en súksesberjochten. Om te brûken, foegje de passende klasse ta oan 'e omlizzende .control-group.

Der kin wat mis gien
Korrigearje asjebleaft de flater
Brûkersnamme wurdt nommen
Woohoo! 
  1. <div class = "kontrôlegroep warskôging" > 
  2.   <label class = "control-label" for = "inputWarning" > Ynfier mei warskôging </label>  
  3.   <div class = "kontrôles" > 
  4.     <input type = "text" id = "inputWarskôging" >  
  5.     <span class = "help-inline" > Der kin wat mis gien </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "kontrôlegroepflater" > 
  10.   <label class = "control-label" for = "inputError" > Ynfier mei flater </label>  
  11.   <div class = "kontrôles" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Korrigearje asjebleaft de flater </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "control-group info" > 
  18.   <label class = "control-label" for = "inputInfo" > Ynfier mei ynformaasje </label>  
  19.   <div class = "kontrôles" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Brûkersnamme is al nommen </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "sukses fan kontrôlegroep" > 
  26.   <label class = "control-label" for = "inputSuccess" > Ynfier mei súkses </label>  
  27.   <div class = "kontrôles" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Knoppen

Standert knoppen

Knopstilen kinne op alles tapast wurde mei de .btntapaste klasse. Typysk wolle jo dizze lykwols allinich tapasse op <a>eleminten <button>foar de bêste werjefte.

Knop class="" Beskriuwing
btn Standert grize knop mei gradient
btn btn-primary Biedt ekstra fisueel gewicht en identifisearret de primêre aksje yn in set fan knoppen
btn btn-info Wurdt brûkt as alternatyf foar de standert stilen
btn btn-success Jout in suksesfolle of positive aksje oan
btn btn-warning Jout oan dat foarsichtigens moatte wurde nommen mei dizze aksje
btn btn-danger Jout in gefaarlike of mooglik negative aksje oan
btn btn-inverse Alternatyf donkergrize knop, net bûn oan in semantyske aksje of gebrûk
btn btn-link Beklamje in knop troch te meitsjen dat it liket op in keppeling by it behâld fan it gedrach fan knop

Cross browser kompatibiliteit

IE9 snijt gjin eftergrûngradiënten op rûne hoeken, dus wy ferwiderje it. Related, IE9 jankifies útskeakele buttoneleminten, rendering tekst griis mei in ferfelende tekst-skaad dat wy net kinne reparearje.

Knop maten

Wolle jo gruttere of lytsere knoppen? Add .btn-large, .btn-small, of .btn-minifoar ekstra maten.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "knop" > Grutte knop </button>  
  3.   <button class = "btn btn-large" type = "knop" > Grutte knop </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Standert knop </button>  
  7.   <button class = "btn" type = "button" > Standert knop </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Lytse knop </button>  
  11.   <button class = "btn btn-small" type = "button" > Lytse knop </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Miniknop </button>  
  15.   <button class = "btn btn-mini" type = "button" > Miniknop </button>  
  16. </p>

Meitsje knoppen op bloknivo - dyjingen dy't de folsleine breedte fan in âlder spanne - troch ta te foegjen .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "knop" > Knop op bloknivo </button>  
  2. <button class = "btn btn-large btn-block" type = "knop" > Knop foar bloknivo </button>

Utskeakele steat

Meitsje knoppen net te klikken lykje troch se 50% werom te fading.

Anker elemint

Foegje de .disabledklasse ta oan <a>knoppen.

Primêre keppeling Link 

  1. <a href = "#" class = "btn btn-grutte btn-primêr útskeakele" > Primêre keppeling </a>  
  2. <a href = "#" class = "btn btn-large útskeakele" > Keppeling </a>

Heads up!Wy brûke .disabledhjir as nutsklasse, fergelykber mei de mienskiplike .activeklasse, dus gjin foarheaksel is nedich. Ek, dizze klasse is allinnich foar estetyske; jo moatte oanpast JavaSkript brûke om keppelings hjir út te skeakeljen.

Knop elemint

Foegje it disabledattribút ta oan <button>knoppen.

  1. <button type = "button" class = "btn btn-large btn-primêr útskeakele" útskeakele = "útskeakele" > Primêre knop </button>   
  2. <button type = "button" class = "btn btn-large" útskeakele > Knop </button>

Ien klasse, meardere tags

Brûk de .btnklasse op in <a>, <button>, of <input>elemint.

Link 
  1. <a class = "btn" href = ""> Keppeling </a> _  
  2. <button class = "btn" type = "submit" > Knop </button>  
  3. <input class = "btn" type = "button" wearde = "Ynfier" >   
  4. <input class = "btn" type = "submit" wearde = "Ferstjoere" >

As bêste praktyk, besykje it elemint foar jo kontekst te passen om te garandearjen oerienkommende cross-browser-rendering. As jo ​​​​in hawwe input, brûk dan in <input type="submit">foar jo knop.

Ofbyldings

Foegje klassen ta oan in <img>elemint om ôfbyldings maklik yn elk projekt te stylearjen.

140x140 140x140 140x140 
  1. <img src = "..." class = "img-ronde" >  
  2. <img src = "..." class = "img-sirkel" >  
  3. <img src = "..." class = "img-polaroid" >

Heads up! .img-roundeden .img-circlewurkje net yn IE7-8 fanwege gebrek oan border-radiusstipe.

Ikoanen troch Glyphicons

Ikoan glyphs

140 ikoanen yn sprite-foarm, beskikber yn donkergriis (standert) en wyt, levere troch Glyphicons .

  • ikoan-glas
  • ikoan-muzyk
  • ikoan-sykje
  • ikoan-envelope
  • ikoan-hert
  • ikoan-stjer
  • ikoan-stjer-leech
  • ikoan-brûker
  • ikoan-film
  • ikoan-th-grutte
  • ikoan-th
  • ikoan-ste-list
  • ikoan-ok
  • ikoan-ferwiderje
  • ikoan-zoom-yn
  • ikoan-útzoomen
  • ikoan-út
  • ikoan-sinjaal
  • icon-cog
  • ikoan-jiskefet
  • ikoan-thús
  • ikoan-bestân
  • ikoan-tiid
  • ikoan-wei
  • ikoan-download-alt
  • ikoan-download
  • ikoan-upload
  • ikoan-ynfak
  • icon-play-sirkel
  • ikoan-werhelje
  • ikoan-ferfarskje
  • ikoan-list-alt
  • ikoan-slot
  • ikoan-flagge
  • ikoan-koptelefoan
  • ikoan-folume-út
  • ikoan-folume-omleech
  • ikoan-folume-up
  • icon-qrcode
  • ikoan-barcode
  • ikoan-tag
  • ikoan-tags
  • ikoan-boek
  • ikoan-blêdwizer
  • ikoan-print
  • ikoan-kamera
  • ikoan-lettertype
  • ikoan-bold
  • ikoan-kursyf
  • ikoan-tekst-hichte
  • ikoan-tekst-breedte
  • icon-align-lofts
  • icon-align-center
  • icon-align-rjochts
  • icon-align-justify
  • ikoan-list
  • ikoan-ynspringen-lofts
  • ikoan-ynspringen-rjochts
  • ikoan-facetime-fideo
  • ikoan-ôfbylding
  • ikoan-potlead
  • icon-map-marker
  • ikoan-oanpasse
  • ikoan-tint
  • icon-bewurkje
  • ikoan-share
  • ikoan-kontrolearje
  • ikoan-ferpleatse
  • ikoan-stap-efterút
  • ikoan-snel-efterút
  • ikoan-efterút
  • icon-play
  • ikoan-pauze
  • ikoan-stop
  • ikoan-foarút
  • ikoan-fast-foarút
  • ikoan-stap-foarút
  • ikoan-útwerp
  • ikoan-chevron-lofts
  • ikoan-chevron-rjochts
  • ikoan-plus-teken
  • ikoan-minus-teken
  • ikoan-ferwiderje-teken
  • ikoan-ok-teken
  • ikoan-fraach-teken
  • ikoan-ynfo-teken
  • ikoan-skermôfbylding
  • icon-remove-sirkel
  • ikoan-ok-sirkel
  • icon-ban-sirkel
  • ikoan-pylk-lofts
  • ikoan-pylk-rjochts
  • icon-arrow-up
  • ikoan-pylk-omleech
  • icon-share-alt
  • ikoan-feroarje-folslein
  • byldkaike-feroarje-lyts
  • ikoan-plus
  • ikoan-minus
  • ikoan-asterisk
  • ikoan-útropteken
  • ikoan-gift
  • ikoan-blêd
  • ikoan-fjoer
  • ikoan-each-iepen
  • ikoan-each-ticht
  • ikoan-warskôging-teken
  • ikoan-fleantúch
  • ikoan-kalinder
  • ikoan-willekeurich
  • ikoan-kommentaar
  • ikoan-magneet
  • ikoan-chevron-up
  • icon-chevron-down
  • icon-retweet
  • ikoan-winkelkarre
  • ikoan-map-slute
  • ikoan-map-iepen
  • ikoan-feroarje-fertikaal
  • ikoan-feroarje-horizontaal
  • ikoan-hdd
  • ikoan-bulhorn
  • ikoan-bell
  • ikoan-sertifikaat
  • ikoan-thumbs-up
  • icon-thumbs-down
  • ikoan-hân-rjochts
  • ikoan-hân-lofts
  • ikoan-hand-up
  • ikoan-hand-down
  • ikoan-sirkel-pylk-rjochts
  • ikoan-sirkel-pylk-lofts
  • ikoan-sirkel-pylk omheech
  • ikoan-sirkel-pylk-omleech
  • icon-globe
  • ikoan-wrench
  • ikoan-taken
  • ikoan-filter
  • ikoan-aktetas
  • ikoan-folslein skerm

Glyphicons attribúsje

Glyphicons Halflings binne normaal net fergees beskikber, mar in regeling tusken Bootstrap en de Glyphicons makkers hawwe dit mooglik makke sûnder kosten foar jo as ûntwikkelders. As tank freegje wy jo om in opsjonele keppeling werom te nimmen nei Glyphicons wannear praktysk.

Hoe te brûken

Alle ikoanen fereaskje in <i>tag mei in unike klasse, foarôfgeand mei icon-. Om te brûken, pleats de folgjende koade sawat oeral:

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

D'r binne ek stilen beskikber foar omkearde (wite) ikoanen, klear makke mei ien ekstra klasse. Wy sille spesifyk hanthavenje dizze klasse op hover en aktive steaten foar nav en dropdown keppelings.

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

Heads up!As jo ​​​​njonken tekststrings brûke, lykas yn knoppen of nav-keppelings, wês dan wis dat jo in spaasje efter de <i>tag litte foar juste ôfstân.

Foarbylden fan ikoanen

Brûk se yn knoppen, knopgroepen foar in arkbalke, navigaasje, of foarôfgeande formulierynputs.

Knoppen

Knop groep yn in knop arkbalke
  1. <div class = "btn-arkbalke" > 
  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 yn in knop groep
Brûker 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Meidogger </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> Bewurkje </a></li>  
  6.     <li><a href = "#" ><i class = "icon-jiskefet" ></i> Wiskje </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Ban </a></li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Meitsje admin </a></li>  
  10.   </ul>
  11. </div>
Knop maten
Stjer Stjer Stjer 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Stjer </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Stjer </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Stjer </a>

Navigaasje

  1. <ul class = "nav nav-list" > 
  2.   <li class = "aktyf" ><a href = "#" ><i class = "icon-home icon-white" ></i> Thús </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Bibleteek </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Applikaasjes </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Misc </a></li>  
  6. </ul>

Form fjilden

  1. <div class = "kontrôlegroep" > 
  2.   <label class = "control-label" for = "inputIcon" > E-postadres </label>  
  3.   <div class = "kontrôles" > 
  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>