Tipografie
Opskrifte
Alle HTML-opskrifte, <h1>deur , <h6>is beskikbaar.
h1. Opskrif 1
h2. Opskrif 2
h3. Opskrif 3
h4. Opskrif 4
h5. Opskrif 5
h6. Opskrif 6
Liggaam kopie
Bootstrap se globale verstek font-sizeis 14px , met 'n line-heightvan 20px . Dit word toegepas op die <body>en alle paragrawe. Daarbenewens ontvang <p>(paragrawe) 'n onderste marge van die helfte van hul lynhoogte (10 px by verstek).
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 by eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
Loodliggaamkopie
Laat 'n paragraaf uitstaan deur by te voeg .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, is nie commodo luctus.
<p class="lead">...</p>
Gebou met Minder
Die tipografiese skaal is gebaseer op twee MINDER veranderlikes in veranderlikes.minder : @baseFontSizeen @baseLineHeight. Die eerste is die basiese lettergrootte wat deurgaans gebruik word en die tweede is die basislynhoogte. Ons gebruik daardie veranderlikes en 'n paar eenvoudige wiskunde om die marges, opvullings en lynhoogtes van al ons tipe en meer te skep. Pas hulle aan en Bootstrap pas aan.
Beklemtoning
Maak gebruik van HTML se verstek klem-etikette met liggewigstyle.
<small>
Gebruik die klein merker om inlyn of blokke teks te ontbeklemtoon.
Hierdie teksreël is bedoel om as fynskrif hanteer te word.
<p> <small>Hierdie teksreël is bedoel om as fynskrif hanteer te word.</small> </p>
Vet
Om 'n stukkie teks met 'n swaarder lettergewig te beklemtoon.
Die volgende stukkie teks word as vetgedrukte teks weergegee .
<strong>weergegee as vetdruk</strong>
Kursief
Om 'n stukkie teks met kursief te beklemtoon.
Die volgende stukkie teks word as kursief gedrukte teks weergegee .
<em>weergegee as skuinsgedrukte teks</em>
Let op! Gebruik gerus <b>en <i>in HTML5. <b>is bedoel om woorde of frases uit te lig sonder om bykomende belangrikheid oor te dra, terwyl <i>dit meestal vir stem, tegniese terme, ens.
Belyningsklasse
Herbelyn teks maklik na komponente met teksbelyningsklasse.
Linksbelynde teks.
Sentreerbelynde teks.
Regsbelynde teks.
<p class="text-left">Linksbelynde teks.</p> <p class="text-center">Sentreer-belynde teks.</p> <p class="text-right">Regsbelynde teks.</p>
Klemklasse
Dra betekenis oor deur kleur met 'n handvol klem nutsklasse.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
Afkortings
Gestileerde implementering van HTML se <abbr>element vir afkortings en akronieme om die uitgebreide weergawe te wys op hover. Afkortings met 'n titleeienskap het 'n ligte gestippelde onderrand en 'n hulpwyser wanneer jy beweeg, wat addisionele konteks verskaf wanneer jy beweeg.
<abbr>
titleSluit die kenmerk in vir uitgebreide teks op lang sweef van 'n afkorting .
'n Afkorting van die woord eienskap is attr .
<abbr title="attribute">attr</abbr>
<abbr class="initialism">
Voeg .initialismby 'n afkorting vir 'n effens kleiner lettergrootte.
HTML is die beste ding sedert gesnyde brood.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Adresse
Bied kontakinligting aan vir die naaste voorouer of die hele liggaam van werk.
<address>
Behou formatering deur alle reëls met <br>.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Volle naam
[email protected]
<adres> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </adres> <adres> <strong>Volle Naam</strong><br> <a href="mailto:#">[email protected]</a> </adres>
Blokaanhalings
Vir die aanhaling van blokke inhoud van 'n ander bron binne jou dokument.
Verstek blokaanhaling
Draai <blockquote>enige HTML om as die aanhaling. Vir reguit aanhalings beveel ons 'n aan <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante.
<blokaanhaling> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante.</p> </blockquote>
Blokaanhalingsopsies
Styl en inhoud verander vir eenvoudige variasies op 'n standaard blokaanhaling.
Benoem 'n bron
Voeg <small>merker by om die bron te identifiseer. Draai die naam van die bronwerk in <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante.
Iemand bekend in Brontitel
<blokaanhaling> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante.</p> <small>Iemand beroemde <cite title="Source Title">Brontitel</cite></small> </blockquote>
Alternatiewe vertonings
Gebruik .pull-rightvir 'n gesweefde, regs-belynde blokaanhaling.
<blockquote class="trekregs"> ... </blockquote>
Lyste
Ongeorden
'n Lys van items waarin die volgorde nie uitdruklik saak maak nie.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Heelgetal 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 by
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul> <li>...</li> </ul>
Bestel
'n Lys van items waarin die volgorde wel uitdruklik saak maak.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Heelgetal molestie lorem by massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ol> <li>...</li> </ol>
Ongestileer
Verwyder die verstek- list-styleen linkeropvulling op lysitems (slegs onmiddellike kinders).
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Heelgetal 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 by
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="unstyled"> <li>...</li> </ul>
In lyn
Plaas alle lysitems op 'n enkele lyn met ' inline-blockn ligte vulling.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="inline"> <li>...</li> </ul>
Beskrywing
'n Lys terme met hul gepaardgaande beskrywings.
- Beskrywing lyste
- 'n Beskrywingslys is perfek om terme te definieer.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida by eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl> <dt>...</dt> <dd>...</dd> </dl>
Horisontale beskrywing
Maak terme en beskrywings in <dl>lyn langs mekaar.
- Beskrywing lyste
- 'n Beskrywingslys is perfek om terme te definieer.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida by 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, uit fermentum massa justo sit amet risus.
<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>
Let op! Horisontale beskrywingslyste sal terme wat te lank is om in die linkerkolomoplossing te pas, afkap text-overflow. In nouer viewports, sal hulle verander na die verstek gestapelde uitleg.
Kode
In lyn
Wikkel inlyn-brokkies kode met <code>.
<section>as inlyn toegedraai word.
Byvoorbeeld, <code><afdeling></code> moet as inlyn toegedraai word.
Basiese blok
Gebruik <pre>vir veelvuldige reëls kode. Maak seker dat jy enige hoekhakies in die kode ontsnap vir behoorlike weergawe.
<p>Voorbeeldteks hier...</p>
<pre> <p>Voorbeeldteks hier...</p> </pre>
Let op! Maak seker dat jy kode binne <pre>etikette so na as moontlik aan die linkerkant hou; dit sal alle oortjies weergee.
Jy kan opsioneel die .pre-scrollableklas byvoeg wat 'n maksimum hoogte van 350px sal stel en 'n y-as-rolbalk sal verskaf.
Tabelle
Verstek style
Vir basiese stilering—ligte vulling en slegs horisontale verdelers—voeg die basisklas .tableby enige <table>.
| # | Eerste naam | Van | Gebruikersnaam |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| 2 | Jakob | Thornton | @vet |
| 3 | Larry | die voël |
<table class="table"> … </tabel>
Opsionele klasse
Voeg enige van die volgende klasse by die .tablebasisklas.
.table-striped
Voeg sebra-streep by enige tabelry binne die <tbody>via die :nth-childCSS-kieser (nie beskikbaar in IE7-8 nie).
| # | Eerste naam | Van | Gebruikersnaam |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| 2 | Jakob | Thornton | @vet |
| 3 | Larry | die voël |
<table class="table table-striped"> … </tabel>
.table-bordered
Voeg rande en afgeronde hoeke by die tafel.
| # | Eerste naam | Van | Gebruikersnaam |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| Merk | Otto | @getbootstrap | |
| 2 | Jakob | Thornton | @vet |
| 3 | Larry die voël | ||
<table class="table table-bordered"> … </tabel>
.table-hover
Aktiveer 'n sweeftoestand op tabelrye binne 'n <tbody>.
| # | Eerste naam | Van | Gebruikersnaam |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| 2 | Jakob | Thornton | @vet |
| 3 | Larry die voël | ||
<table class="table table-hover"> … </tabel>
.table-condensed
Maak tafels meer kompak deur selvulling in die helfte te sny.
| # | Eerste naam | Van | Gebruikersnaam |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| 2 | Jakob | Thornton | @vet |
| 3 | Larry die voël | ||
<table class="table table-condensed"> … </tabel>
Opsionele ryklasse
Gebruik kontekstuele klasse om tabelrye in te kleur.
| Klas | Beskrywing |
|---|---|
.success |
Dui 'n suksesvolle of positiewe aksie aan. |
.error |
Dui 'n gevaarlike of potensieel negatiewe aksie aan. |
.warning |
Dui 'n waarskuwing aan wat dalk aandag moet kry. |
.info |
Word gebruik as 'n alternatief vir die verstekstyle. |
| # | Produk | Betaling geneem | Status |
|---|---|---|---|
| 1 | TB - Maandeliks | 01/04/2012 | Goedgekeur |
| 2 | TB - Maandeliks | 02/04/2012 | Geweier |
| 3 | TB - Maandeliks | 03/04/2012 | Hangende |
| 4 | TB - Maandeliks | 04/04/2012 | Bel om te bevestig |
...
<tr class="sukses">
<td>1</td>
<td>TB – Maandeliks</td>
<td>01/04/2012</td>
<td>Goedgekeur</td>
</tr>
...
Ondersteunde tabelopmaak
Lys van ondersteunde tabel HTML-elemente en hoe hulle gebruik moet word.
| Merk | Beskrywing |
|---|---|
<table> |
Omvouelement vir die vertoon van data in 'n tabelformaat |
<thead> |
Houerelement vir tabelopskrifrye ( <tr>) om tabelkolomme te benoem |
<tbody> |
Houerelement vir tabelrye ( <tr>) in die liggaam van die tabel |
<tr> |
Houerelement vir 'n stel tabelselle ( <td>of <th>) wat op 'n enkele ry verskyn |
<td> |
Verstek tabelsel |
<th> |
Spesiale tabelsel vir kolom (of ry, afhangende van omvang en plasing) etikette |
<caption> |
Beskrywing of opsomming van wat die tabel bevat, veral nuttig vir skermlesers |
<tabel>
<caption>...</caption>
<kop>
<tr>
<de>...</th>
<de>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</tabel>
Vorms
Verstek style
Individuele vormkontroles ontvang stilering, maar sonder enige vereiste basisklas op die <form>of groot veranderinge in opmaak. Dit lei tot gestapelde, links-belynde etikette bo-op vormkontroles.
<vorm>
<veldset>
<legend>Legende</legend>
<label>Etiketnaam</label>
<input type="text" placeholder="Tik iets...">
<span class="help-block">Voorbeeld blokvlak-hulpteks hier.</span>
<label class="checkbox">
<input type="checkbox"> Kyk na my
</label>
<button type="submit" class="btn">Dien in</button>
</fieldset>
</form>
Opsionele uitlegte
Ingesluit by Bootstrap is drie opsionele vormuitlegte vir algemene gebruiksgevalle.
Soek vorm
Voeg .form-searchby die vorm en .search-queryby die <input>vir 'n ekstra afgeronde teksinvoer.
<form class="form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Soek</button> </form>
Inlyn vorm
Voeg by .form-inlinevir linksbelynde etikette en inlynblokkontroles vir 'n kompakte uitleg.
<form class="form-inline">
<input type="text" class="input-small" placeholder="E-pos">
<input type="password" class="input-small" placeholder="Wagwoord">
<label class="checkbox">
<input type="checkbox"> Onthou my
</label>
<button type="submit" class="btn">Meld aan</button>
</form>
Horisontale vorm
Belyn etikette regs en dryf hulle na links om hulle op dieselfde lyn as kontroles te laat verskyn. Vereis die meeste opmerkveranderings vanaf 'n verstekvorm:
- Voeg
.form-horizontalby die vorm - Draai etikette en kontroles in
.control-group - Voeg
.control-labelby die etiket - Draai enige verwante kontroles in
.controlsvir behoorlike belyning
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">E-pos</label>
<div class="kontroles">
<input type="text" id="inputEmail" placeholder="E-pos">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Wagwoord</label>
<div class="kontroles">
<input type="password" id="inputPassword" placeholder="Wagwoord">
</div>
</div>
<div class="control-group">
<div class="kontroles">
<label class="checkbox">
<input type="checkbox"> Onthou my
</label>
<button type="submit" class="btn">Meld aan</button>
</div>
</div>
</form>
Ondersteunde vormkontroles
Voorbeelde van standaardvormkontroles wat in 'n voorbeeldvormuitleg ondersteun word.
Insette
Mees algemene vormbeheer, teksgebaseerde invoervelde. Sluit ondersteuning vir alle HTML5-tipes in: teks, wagwoord, datumtyd, datumtyd-plaaslik, datum, maand, tyd, week, nommer, e-pos, URL, soektog, tel en kleur.
Vereis die gebruik van 'n gespesifiseerde typete alle tye.
<input type="text" placeholder="Teksinvoer">
Teksarea
Vormbeheer wat verskeie reëls teks ondersteun. Verander rowskenmerk soos nodig.
<textarea rows="3"></textarea>
Merkblokkies en radio's
Merkblokkies is om een of meer opsies in 'n lys te kies, terwyl radio's is om een opsie uit baie te kies.
Verstek (gestapel)
<label class="checkbox"> <input type="checkbox" value=""> Opsie een is dit en dat - maak seker dat jy insluit hoekom dit wonderlik is </label> <label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" gemerk> Opsie een is dit en dat - maak seker dat jy insluit hoekom dit wonderlik is </label> <label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Opsie twee kan iets anders wees en as u dit kies, sal opsie een ontkies word </label>
Inlyn-merkblokkies
Voeg die .inlineklas by 'n reeks merkblokkies of radio's vir kontroles wat op dieselfde lyn verskyn.
<label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> <label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label>
Kies
Gebruik die verstekopsie of spesifiseer 'n multiple="multiple"om veelvuldige opsies gelyktydig te wys.
<kies> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </kies> <select multiple="veelvuldige"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </kies>
Uitbreiding van vormkontroles
Byvoeging bo-op bestaande blaaierkontroles, bevat Bootstrap ander nuttige vormkomponente.
Voorgeskrewe en aangehegte insette
Voeg teks of knoppies voor of na enige teksgebaseerde invoer by. Let daarop dat selectelemente nie hier ondersteun word nie.
Verstek opsies
Wikkel 'n .add-onen 'n inputmet een van twee klasse om teks voor of by 'n invoer te voeg.
<div class="input-prepend"> <span class="add-on">@</span> <input class="span2" id="prependedInput" type="text" placeholder="Gebruikernaam"> </div> <div class="input-append"> <input class="span2" id="appendedInput" type="text"> <span class="add-on">.00</span> </div>
Gekombineer
Gebruik beide klasse en twee gevalle van .add-onom 'n inset voor en by te voeg.
<div class="input-prepend input-appd"> <span class="add-on">$</span> <input class="span2" id="appendedPrependedInput" type="text"> <span class="add-on">.00</span> </div>
Knoppies in plaas van teks
In plaas van 'n <span>met teks, gebruik 'n .btnom 'n knoppie (of twee) aan 'n invoer te heg.
<div class="input-append"> <input class="span2" id="appendedInputButton" type="text"> <button class="btn" type="button">Gaan!</button> </div>
<div class="input-append"> <input class="span2" id="appendedInputButtons" type="text"> <button class="btn" type="button">Soek</button> <button class="btn" type="button">Opsies</button> </div>
Knoppie aftrekkies
<div class="input-append">
<input class="span2" id="appendedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Aksie
<span class="caret"></span>
</knoppie>
<ul class="dropdown-menu">
...
</ul>
</div>
</div>
<div class="input-prepend">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Aksie
<span class="caret"></span>
</knoppie>
<ul class="dropdown-menu">
...
</ul>
</div>
<input class="span2" id="prependedDropdownButton" type="text">
</div>
<div class="input-prepend input-appd">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Aksie
<span class="caret"></span>
</knoppie>
<ul class="dropdown-menu">
...
</ul>
</div>
<input class="span2" id="appendedPrependedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Aksie
<span class="caret"></span>
</knoppie>
<ul class="dropdown-menu">
...
</ul>
</div>
</div>
Gesegmenteerde aftrekgroepe
<vorm>
<div class="input-prepend">
<div class="btn-group">...</div>
<input type="text">
</div>
<div class="input-append">
<input type="text">
<div class="btn-group">...</div>
</div>
</form>
Soek vorm
<form class="form-search">
<div class="input-append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">Soek</button>
</div>
<div class="input-prepend">
<button type="submit" class="btn">Soek</button>
<input type="text" class="span2 search-query">
</div>
</form>
Beheer grootte
Gebruik relatiewe grootteklasse soos .input-largeof pas jou insette by die roosterkolomgroottes deur .span*klasse te gebruik.
Blok vlak insette
Laat enige element <input>of <textarea>element soos 'n blokvlakelement optree.
<input class="input-block-level" type="text" placeholder=".input-block-level">
Relatiewe grootte
<input class="input-mini" type="text" placeholder=".input-mini"> <input class="input-small" type="text" placeholder=".input-small"> <input class="input-medium" type="text" placeholder=".input-medium"> <input class="input-large" type="text" placeholder=".input-large"> <input class="input-xlarge" type="text" placeholder=".input-xlarge"> <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
Let op! In toekomstige weergawes sal ons die gebruik van hierdie relatiewe invoerklasse verander om by ons knoppiegroottes te pas. Sal byvoorbeeld .input-largedie opvulling en lettergrootte van 'n invoer vergroot.
Roostergrootte
Gebruik .span1om .span12vir invoere wat ooreenstem met dieselfde groottes van die roosterkolomme.
<input class="span1" type="text" placeholder=".span1"> <input class="span2" type="text" placeholder=".span2"> <input class="span3" type="text" placeholder=".span3"> <select class="span1"> ... </kies> <select class="span2"> ... </kies> <select class="span3"> ... </kies>
Vir veelvuldige roosterinsette per lyn, gebruik die .controls-rowwysigerklas vir behoorlike spasiëring . Dit laat die insette dryf om witruimte in te vou, stel die regte marges in en maak die vlotter skoon.
<div class="kontroles"> <input class="span5" type="text" placeholder=".span5"> </div> <div class="controls controls-row"> <input class="span4" type="text" placeholder=".span4"> <input class="span1" type="text" placeholder=".span1"> </div> ...
Onwysigbare insette
Bied data aan in 'n vorm wat nie redigeerbaar is sonder om werklike vormopmerking te gebruik nie.
<span class="input-xlarge uneditable-input">Hier is 'n bietjie waarde</span>
Vorm aksies
Beëindig 'n vorm met 'n groep aksies (knoppies). Wanneer dit binne 'n geplaas word .form-actions, sal die knoppies outomaties inkeep om in lyn te wees met die vormkontroles.
<div class="form-actions"> <button type="submit" class="btn btn-primary">Stoor veranderinge</button> <button type="button" class="btn">Kanselleer</button> </div>
Hulp teks
Inlyn- en blokvlakondersteuning vir hulpteks wat rondom vormkontroles verskyn.
Inlyn hulp
<input type="text"><span class="help-inline">Inlyn hulpteks</span>
Blokkeer hulp
<input type="text"><span class="help-block">'n Langer blok hulpteks wat op 'n nuwe reël breek en verder as een reël kan strek.</span>
Vorm beheer state
Gee terugvoer aan gebruikers of besoekers met basiese terugvoertoestande oor vormkontroles en etikette.
Invoerfokus
Ons verwyder die verstekstyle outlineop sommige vormkontroles en pas 'n box-shadowin die plek daarvan toe vir :focus.
<input class="input-xlarge" id="focusedInput" type="text" value="Dit is gefokus...">
Ongeldige invoere
Stylinvoere via verstekblaaierfunksionaliteit met :invalid. Spesifiseer 'n type, voeg die requiredkenmerk by as die veld nie opsioneel is nie, en (indien van toepassing) spesifiseer 'n pattern.
Dit is nie beskikbaar in weergawes van Internet Explorer 7-9 nie weens 'n gebrek aan ondersteuning vir CSS pseudo-keurders.
<input class="span3" type="e-pos" vereis>
Gedeaktiveerde insette
Voeg die disabledkenmerk by 'n invoer om gebruikersinvoer te voorkom en 'n effens ander voorkoms te aktiveer.
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Gedeaktiveerde invoer hier..." gedeaktiveer>
Validasie state
Bootstrap bevat valideringstyle vir fout-, waarskuwing-, inligting- en suksesboodskappe. Om te gebruik, voeg die toepaslike klas by die omliggende .control-group.
<div class="control-group warning">
<label class="control-label" for="inputWarning">Invoer met waarskuwing</label>
<div class="kontroles">
<input type="text" id="inputWarning">
<span class="help-inline">Iets het dalk verkeerd geloop</span>
</div>
</div>
<div class="kontrolegroepfout">
<label class="control-label" for="inputError">Invoer met fout</label>
<div class="kontroles">
<input type="text" id="inputError">
<span class="help-inline">Maak asseblief die fout reg</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="inputInfo">Invoer met inligting</label>
<div class="kontroles">
<input type="text" id="inputInfo">
<span class="help-inline">Gebruikernaam is reeds geneem</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Invoer met sukses</label>
<div class="kontroles">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>
Images
Add classes to an <img> element to easily style images in any project.
<img src="..." class="img-rounded"> <img src="..." class="img-circle"> <img src="..." class="img-polaroid">
Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.
Icons by Glyphicons
Icon glyphs
140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.
Glyphicons attribution
Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.
How to use
All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:
<i class="icon-search"></i>
There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.
<i class="icon-search icon-white"></i>
Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.
Icon examples
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
Buttons
Button group in a button toolbar
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><i class="icon-align-left"></i></a>
<a class="btn" href="#"><i class="icon-align-center"></i></a>
<a class="btn" href="#"><i class="icon-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
</div>
Dropdown in a button group
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
<li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
Button sizes
<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a> <a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a> <a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
Navigation
<ul class="nav nav-list"> <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li> <li><a href="#"><i class="icon-book"></i> Library</a></li> <li><a href="#"><i class="icon-pencil"></i> Applications</a></li> <li><a href="#"><i class="i"></i> Misc</a></li> </ul>
Form fields
<div class="control-group">
<label class="control-label" for="inputIcon">E-posadres</label>
<div class="kontroles">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<input class="span2" id="inputIcon" type="text">
</div>
</div>
</div>