Bootstrap

Basis CSS

Fundamentele HTML-elemente gestileer en verbeter met uitbreidbare klasse.

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 (9 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> <klein> Hierdie reël teks is bedoel om as fynskrif hanteer te word. </klein> </p>

<strong>

Vir die klem op 'n stukkie teks met belangrike

Die volgende stukkie teks word as vetgedrukte teks weergegee .

<strong> as vetgedrukte teks weergegee </strong>

<em>

Om 'n stukkie teks met stres te beklemtoon

Die volgende stukkie teks word as kursief gedrukte teks weergegee .

<em> as skuinsgedrukte teks weergegee </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.

Afkortings

Gestileerde implementering van HTML se <abbr>element vir afkortings en akronieme om die uitgebreide weergawe te wys. 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 = "kenmerk" > attr </abbr>

<abbr class="initialism">

Voeg .initialismby 'n afkorting vir 'n effens kleiner lettergrootte.

HTML is die beste ding sedert gesnyde brood.

<abbr title = "attribuut" class = "initialisme" > attr </abbr>

Adresse

Bied kontakinligting aan vir die naaste voorouer of die hele liggaam van werk.

<address>

Behou formatering deur alle reëls met <br>.

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

Blokaanhalings

Vir die aanhaling van blokke inhoud van 'n ander bron binne jou dokument.

Verstek blokkering

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.

  1. <blokaanhaling>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante. </p>
  3. </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 
  1. <blokaanhaling>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante. </p>
  3.   <small> Iemand beroemde <cite title = "Brontitel" > Brontitel </cite></small> 
  4. </blockquote>

Alternatiewe vertonings

Gebruik .pull-rightvir 'n gesweefde, regs-belynde blokaanhaling.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante.

Iemand bekend in Brontitel 
  1. <blockquote class = "trek-regs" > 
  2.   ...
  3. </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
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Bestel

'n Lys van items waarin die volgorde wel uitdruklik saak maak.

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

Ongestileer

'n Lys items met geen list-styleof addisionele linkeropvulling.

  • 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
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </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. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </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. 
  1. <dl klas = "dl-horisontaal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </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>.

Moet byvoorbeeld <section>as inlyn toegedraai word. 
  1. Byvoorbeeld , <code><section> </ 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>
  1. <pre>
  2.   <p>Voorbeeldteks hier...</p>
  3. </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 @twitter 
  1. <tabelklas = " tafel" > 
  2.   …
  3. </tabel>

Opsionele klasse

Voeg enige van die volgklasse by die .tablebasisklas.

.table-striped

Voeg sebra-streep by enige tabelry binne die <tbody>via die :nth-childCSS-kieser (nie beskikbaar in IE7-IE8 nie).

# Eerste naam Van Gebruikersnaam
1 Merk Otto @mdo
2 Jakob Thornton @vet
3 Larry die voël @twitter 
  1. <table class = "tafel tafel-gestreep" > 
  2.   …
  3. </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 @twitter 
  1. <table class = "table-bordered" > 
  2.   …
  3. </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 @twitter 
  1. <table class = "table-table-sweef" > 
  2.   …
  3. </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 @twitter 
  1. <tabel klas = "tabel tabel-gekondenseerde" > 
  2.   …
  3. </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.
.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 
  1. ...
  2.   < tr klas = "sukses" >
  3.     <td> 1 < /td>
  4.     <td>TB – Maandeliks</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Goedgekeur</ td >
  7.   </ tr >
  8. ...

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
Moet gebruik word binne 'n<thead>
<caption> Beskrywing of opsomming van wat die tabel bevat, veral nuttig vir skermlesers 
  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>

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.

Legende Voorbeeld blokvlak-hulpteks hier. 
  1. <vorm>
  2.   <legend> Legende </legend>
  3.   <label> Etiketnaam < /label>
  4.   <input type = "text" placeholder = "Tik iets ..." >  
  5.   <span class = "help-block" > Voorbeeld blokvlak-hulpteks hier. </span> 
  6.   <label class = "checkbox" > 
  7.     <input type = "checkbox" > Kyk na my 
  8.   </label>
  9.   <button type = "submit" class = "btn" > Dien in </button>  
  10. </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.

  1. <vorm klas = "vorm-soek" > 
  2.   <input type = "text" class = "input-medium soektog-navraag" >  
  3.   <button type = "submit" class = "btn" > Soek </button>  
  4. </form>

Inlyn vorm

Voeg by .form-inlinevir linksbelynde etikette en inlynblokkontroles vir 'n kompakte uitleg.

  1. <vorm klas = "vorm-inlyn" > 
  2.   <input type = "text" class = "input-small" plekhouer = "E-pos" >   
  3.   <input type = "password" class = "input-small" placeholder = "Wagwoord" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Onthou my 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Meld aan </button>  
  8. </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
Legende 
  1. <vorm klas = "vorm-horisontaal" > 
  2.   <div klas = "kontrolegroep" > 
  3.     <label class = "control-label" for = "inputEmail" > E -pos </label>  
  4.     <div klas = "kontroles" > 
  5.       <input type = "text" id = "inputEmail" plekhouer = "E-pos" >   
  6.     </div>
  7.   </div>
  8.   <div klas = "kontrolegroep" > 
  9.     <label class = "control-label" for = "inputPassword" > Wagwoord </label>  
  10.     <div klas = "kontroles" > 
  11.       <input type = "password" id = "inputPassword" plekhouer = "Wagwoord" >   
  12.     </div>
  13.   </div>
  14.   <div klas = "kontrolegroep" > 
  15.     <div klas = "kontroles" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Onthou my 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Meld aan </button>  
  20.     </div>
  21.   </div>
  22. </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.

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

Teksarea

Vormbeheer wat verskeie reëls teks ondersteun. Verander rowkenmerk soos nodig.

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


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" waarde = "" >  
  3.   Opsie een is dit en dat - maak seker dat jy insluit hoekom dit wonderlik is
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   < invoertipe = "radio" naam = " optionsRadios " id = "optionsRadios1" waarde = "opsie1" gemerk >     
  8.   Opsie een is dit en dat - maak seker dat jy insluit hoekom dit wonderlik is
  9. </label>
  10. <label class = "radio" > 
  11.   <invoer tipe = "radio" naam = "opsiesRadios" id = "opsiesRadios2" waarde = "opsie2" >    
  12.   Opsie twee kan iets anders wees en as u dit kies, sal opsie een ontkies word
  13. </label>

Inlyn-merkblokkies

Voeg die .inlineklas by 'n reeks merkblokkies of radio's vir kontroles wat op dieselfde lyn verskyn.

  1. <label class = "checkbox inline" > 
  2.   <invoer tipe = "checkbox" id = "inlineCheckbox1" waarde = "opsie1" > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   <invoer tipe = "checkbox" id = "inlineCheckbox2" waarde = "opsie2" > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   <invoer tipe = "checkbox" id = "inlineCheckbox3" waarde = "opsie3" > 3   
  9. </label>

Kies

Gebruik die verstekopsie of spesifiseer 'n multiple="multiple"om veelvuldige opsies gelyktydig te wys.


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

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "byvoeging" > @ </span><input class = "span2" id = "prependedInput" size = "16" type = "text" placeholder = "Gebruikernaam" >      
  3. </div>
  4. <div klas = "invoer-byvoeg" > 
  5.   <input class = "span2" id = "appendedInput " size = "16" type = "text" ><span class = "byvoeging" > .00 </span>     
  6. </div>

Gekombineer

Gebruik beide klasse en twee gevalle van .add-onom 'n inset voor en by te voeg.

$ .00 
  1. <div klas = "invoer-vooraf invoer-byvoeg" > 
  2.   <span class = "byvoeging" > $ </span><input class = "span2" id = "appendedPrependedInput " size = "16" type = "teks" ><span class = "byvoeging" > .00 </span>      
  3. </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.


  1. <div klas = "invoer-byvoeg" > 
  2.   <input class = "span2" id = "appendedInputButton " size = "16" type = "text" ><button class = "btn" type = "button" > Gaan! </knoppie>      
  3. </div>
  4.  
  5. <div klas = "invoer-byvoeg" > 
  6.   <input class = "span2" id = "appendedInputButtons " size = "16" type = "text" ><button class = "btn" type = "button" > Soek </button><button class = "btn" tipe = "knoppie" > Opsies </button>        
  7. </div>

Soek vorm

  1. <vorm klas = "vorm-soek" > 
  2.   <div klas = "invoer-byvoeg" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Soek </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Soek </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Beheer grootte

Gebruik relatiewe grootteklasse soos .input-largeof pas jou insette by die roosterkolomgroottes deur .span*klasse te gebruik.

Relatiewe grootte

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

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.

  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. <kies klas = "span1" > 
  5.   ...
  6. </kies>
  7. <kies klas = "span2" > 
  8.   ...
  9. </kies>
  10. <kies klas = "span3" > 
  11.   ...
  12. </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.

  1. <div klas = "kontroles" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "kontroles-ry" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

Onwysigbare insette

Bied data aan in 'n vorm wat nie redigeerbaar is sonder om werklike vormopmerking te gebruik nie.

Hier is 'n bietjie waarde 
  1. <span class = "input-xlarge uneditable-input" > Sommige waarde hier </span>

Vorm aksies

Beëindig 'n vorm met 'n groep aksies (knoppies). Wanneer dit binne 'n geplaas word .form-horizontal, sal die knoppies outomaties inkeep om in lyn te wees met die vormkontroles.

  1. <div klas = "vorm-aksies" > 
  2.   <button type = "submit" class = "btn btn-primary" > Stoor veranderinge </button>  
  3.   <button type = "button" class = "btn" > Kanselleer </button>  
  4. </div>

Hulp teks

Inlyn- en blokvlakondersteuning vir hulpteks wat rondom vormkontroles verskyn.

Inlyn hulp

Inlyn hulpteks 
  1. <input type = "text" ><span class = "help-inline" > Inlyn hulpteks </span>

Blokkeer hulp

'n Langer blok hulpteks wat op 'n nuwe reël breek en verder as een reël kan strek. 
  1. <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.

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

Gedeaktiveerde insette

Voeg die disabledkenmerk by 'n invoer om gebruikersinvoer te voorkom en 'n effens ander voorkoms te aktiveer.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Gedeaktiveerde invoer hier..." gedeaktiveer >

Validasie state

Bootstrap bevat valideringstyle vir fout-, waarskuwing- en suksesboodskappe. Om te gebruik, voeg die toepaslike klas by die omliggende .control-group.

Iets het dalk verkeerd geloop
Maak asseblief die fout reg
Woohoo! 
  1. <div class = "kontrolegroepwaarskuwing" > 
  2.   <label class = "control-label" for = "inputWarning" > Invoer met waarskuwing </label>  
  3.   <div klas = "kontroles" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Iets het dalk verkeerd geloop </span> 
  6.   </div>
  7. </div>
  8. <div class = "kontrolegroepfout" > 
  9.   <label class = "control-label" for = "inputError" > Invoer met fout </label>  
  10.   <div klas = "kontroles" > 
  11.     <input type = "text" id = "inputError" >  
  12.     <span class = "help-inline" > Maak asseblief die fout reg </span> 
  13.   </div>
  14. </div>
  15. <div class = "kontrolegroep sukses" > 
  16.   <label class = "control-label" for = "inputSuccess" > Invoer met sukses </label>  
  17.   <div klas = "kontroles" > 
  18.     <input type = "text" id = "inputSukses" >  
  19.     <span class = "help-inline" > Woohoo! </span> 
  20.   </div>
  21. </div>

Knoppies

Standaard knoppies

Knoppiestyle kan op enigiets toegepas word met die .btnklas toegepas. <a>Tipies sal jy dit egter net op en <button>elemente wil toepas vir die beste weergawe.

Knoppie klas="" Beskrywing
btn Standaard grys knoppie met gradiënt
btn btn-primary Verskaf ekstra visuele gewig en identifiseer die primêre aksie in 'n stel knoppies
btn btn-info Word gebruik as 'n alternatief vir die verstekstyle
btn btn-success Dui 'n suksesvolle of positiewe aksie aan
btn btn-warning Dui aan dat versigtigheid met hierdie aksie geneem moet word
btn btn-danger Dui 'n gevaarlike of potensieel negatiewe aksie aan
btn btn-inverse Alternatiewe donkergrys knoppie, nie gekoppel aan 'n semantiese aksie of gebruik nie
btn btn-link Beklemtoon 'n knoppie deur dit soos 'n skakel te laat lyk terwyl knoppiegedrag behou word

Kruisblaaierversoenbaarheid

IE9 sny nie agtergrondgradiënte op afgeronde hoeke nie, so ons verwyder dit. Verwant, IE9 maak gedeaktiveerde buttonelemente weg, wat teks grys maak met 'n nare teksskadu wat ons nie kan regmaak nie.

Knoppie groottes

Lus vir groter of kleiner knoppies? Voeg .btn-large, .btn-small, of .btn-miniby vir addisionele groottes.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Groot knoppie </button>  
  3.   <button class = "btn btn-large" type = "button" > Groot knoppie </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Verstekknoppie </button>  
  7.   <button class = "btn" type = "button" > Verstekknoppie </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Klein knoppie </button>  
  11.   <button class = "btn btn-small" type = "button" > Klein knoppie </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mini-knoppie </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini-knoppie </button>  
  16. </p>

Skep blokvlakknoppies—dié wat oor die volle breedte van 'n ouer strek—deur by te voeg .btn-block.

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

Gestremde toestand

Laat knoppies onklikbaar lyk deur hulle 50% terug te verdof.

Anker element

Voeg die .disabledklas by <a>knoppies.

Primêre skakel Skakel 

  1. <a href = "#" class = "btn btn-groot btn-primêr gedeaktiveer" > Primêre skakel </a>  
  2. <a href = "#" class = "btn btn-large gedeaktiveer" > Skakel </a>

Let op! Ons gebruik .disabledas 'n nutsklas hier, soortgelyk aan die algemene .activeklas, so geen voorvoegsel word vereis nie.

Knoppie element

Voeg die disabledkenmerk by <button>knoppies.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Primêre knoppie </button>   
  2. <button type = "button" class = "btn btn-large" gedeaktiveer > Knoppie </button>

Een klas, veelvuldige etikette

Gebruik die .btnklas op 'n <a>, <button>, of <input>element.

Skakel 
  1. <a class = "btn" href = "" > Skakel </a>  
  2. <button class = "btn" type = "submit" > Knoppie </button>  
  3. <invoerklas = " btn" tipe = "knoppie" waarde = "Invoer" >   
  4. <input class = "btn" type = "submit" value = "Dien in" >

As 'n beste praktyk, probeer om die element vir jou konteks te pas om te verseker dat ooreenstem met kruisblaaier-weergawe. As jy 'n input, gebruik 'n <input type="submit">vir jou knoppie.

Beelde

Voeg klasse by 'n <img>element om beelde maklik in enige projek te styl.

  1. <img src = "..." class = "img-afgerond" >  
  2. <img src = "..." class = "img-sirkel" >  
  3. <img src = "..." class = "img-polaroid" >

Let op! .img-roundeden .img-circlewerk nie in IE7-8 nie weens 'n gebrek aan border-radiusondersteuning.

Ikone deur Glyphicons

Ikoon-glife

140 ikone in sprite-vorm, beskikbaar in donkergrys (verstek) en wit, verskaf deur Glyphicons .

  • ikoon-glas
  • ikoon-musiek
  • ikoon-soektog
  • ikoon-koevert
  • ikoon-hart
  • ikoon-ster
  • ikoon-ster-leeg
  • ikoon-gebruiker
  • ikoon-film
  • ikoon-de-groot
  • ikoon-ste
  • ikoon-ste lys
  • ikoon-ok
  • ikoon-verwyder
  • ikoon-zoem-in
  • ikoon-uitzoomen
  • ikoon-af
  • ikoon-sein
  • ikoon-rat
  • ikoon-asblik
  • ikoon-huis
  • ikoon-lêer
  • ikoon-tyd
  • ikoon-pad
  • ikoon-aflaai-alt
  • ikoon-aflaai
  • ikoon-oplaai
  • ikoon-inkassie
  • ikoon-speel-sirkel
  • ikoon-herhaal
  • ikoon-verfris
  • ikoon-lys-alt
  • ikoon-slot
  • ikoon-vlag
  • ikoon-oorfone
  • ikoon-volume-af
  • ikoon-volume-af
  • ikoon-volume-op
  • ikoon-qrcode
  • ikoon-strepieskode
  • ikoon-tag
  • ikoon-etikette
  • ikoon-boek
  • ikoon-boekmerk
  • ikoon-druk
  • ikoon-kamera
  • ikoon-font
  • ikoon-vetgedruk
  • ikoon-kursief
  • ikoon-teks-hoogte
  • ikoon-teks-wydte
  • ikoon-belyn-links
  • ikoon-belyn-sentrum
  • ikoon-belyn-regs
  • ikoon-belyn-regverdig
  • ikoon-lys
  • ikoon-inkeep-links
  • ikoon-inkeep-regs
  • ikoon-gesigtyd-video
  • ikoon-prentjie
  • ikoon-potlood
  • ikoon-kaart-merker
  • ikoon-pas
  • ikoon-tint
  • ikoon-wysig
  • ikoon-deel
  • ikoon-kontroleer
  • ikoon-skuif
  • ikoon-stap-terug
  • ikoon-vinnig-agteruit
  • ikoon-agteruit
  • ikoon-speel
  • ikoon-pouse
  • ikoon-stop
  • ikoon vorentoe
  • ikoon-snel vorentoe
  • ikoon-stap-vorentoe
  • ikoon-uitwerp
  • ikoon-chevron-links
  • ikoon-chevron-regs
  • ikoon-plus-teken
  • ikoon-minus-teken
  • ikoon-verwyder-teken
  • ikoon-ok-teken
  • ikoon-vraag-teken
  • ikoon-inligting-teken
  • ikoon-skermkiekie
  • ikoon-verwyder-sirkel
  • ikoon-ok-sirkel
  • ikoon-verbod-sirkel
  • ikoon-pyltjie-links
  • ikoon-pyl-regs
  • ikoon-pyltjie-op
  • ikoon-pyl-af
  • ikoon-deel-alt
  • ikoon-verander grootte-vol
  • ikoon-grootte-klein
  • ikoon-plus
  • ikoon-minus
  • ikoon-sterretjie
  • ikoon-uitroepteken
  • ikoon-geskenk
  • ikoon-blad
  • ikoon-vuur
  • ikoon-oog-oop
  • ikoon-oog-toe
  • ikoon-waarskuwing-teken
  • ikoon-vlak
  • ikoon-kalender
  • ikoon-lukraak
  • ikoon-opmerking
  • ikoon-magneet
  • ikoon-chevron-up
  • ikoon-chevron-af
  • ikoon-retweet
  • ikoon-inkopiemandjie
  • ikoon-vouer-toe
  • ikoon-vouer-oop
  • ikoon-verander grootte-vertikaal
  • ikoon-verander grootte-horisontaal
  • ikoon-hdd
  • ikoon-bulhorn
  • ikoon-klok
  • ikoon-sertifikaat
  • ikoon-duim-op
  • ikoon-duim-af
  • ikoon-hand-regs
  • ikoon-hand-links
  • ikoon-hand-up
  • ikoon-hand-down
  • ikoon-sirkel-pyl-regs
  • ikoon-sirkel-pyltjie-links
  • ikoon-sirkel-pyltjie-op
  • ikoon-sirkel-pyl-af
  • ikoon-wêreld
  • ikoonsleutel
  • ikoon-take
  • ikoon-filter
  • ikoon-aktetas
  • ikoon-volskerm

Glyphicons toeskrywing

Glyphicons Halflings is gewoonlik nie gratis beskikbaar nie, maar 'n reëling tussen Bootstrap en die Glyphicons-skeppers het dit moontlik gemaak sonder enige koste vir jou as ontwikkelaars. As 'n dankie, vra ons jou om 'n opsionele skakel terug na Glyphicons in te sluit wanneer dit ook al prakties is.

Hoe om te gebruik

Alle ikone vereis 'n <i>merker met 'n unieke klas, voorafgegaan met icon-. Om te gebruik, plaas die volgende kode omtrent enige plek:

  1. <i klas = "ikoon-soek" ></i>

Daar is ook style beskikbaar vir omgekeerde (wit) ikone, gereed gemaak met een ekstra klas. Ons sal hierdie klas spesifiek afdwing op sweef- en aktiewe toestande vir navigasie- en aftrekskakels.

  1. <i klas = "ikoon-soek ikoon-wit" ></i>

Let op! Wanneer jy langs stringe teks gebruik, soos in knoppies of navigasieskakels, maak seker dat jy 'n spasie agter die <i>merker laat vir behoorlike spasiëring.

Ikoon voorbeelde

Gebruik dit in knoppies, knoppiegroepe vir 'n nutsbalk, navigasie, of voorafgevoegde vorminvoer.

Knoppies

Knoppiegroep in 'n knoppie-nutsbalk
  1. <div klas = "btn-nutsbalk" > 
  2.   <div klas = "btn-groep" > 
  3.  
  4.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  7.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  8.   </div>
  9. </div>
Aftreklys in 'n knoppiegroep
Gebruiker 
  1. <div klas = "btn-groep" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Gebruiker </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 klas = "ikoon-potlood" ></i> Wysig </a></li>  
  6.     <li><a href = "#" ><i klas = "ikoon-asblik" ></i> Vee uit </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Verban </a></li>  
  8.     <li klas = "verdeler" ></li> 
  9.     <li><a href = "#" ><i klas = "i" ></i> Maak admin </a></li>  
  10.   </ul>
  11. </div>
Klein knoppie
  1. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i></a>

Navigasie

  1. <ul klas = "nav nav-lys" > 
  2.   <li klas = "aktief" ><a href = "#" ><i klas = "ikoon-huis ikoon-wit" ></i> Tuis </a></li>   
  3.   <li><a href = "#" ><i klas = "ikoon-boek" ></i> Biblioteek </a></li>  
  4.   <li><a href = "#" ><i klas = "ikoon-potlood" ></i> Toepassings </a></li>  
  5.   <li><a href = "#" ><i klas = "i" ></i> Diverse </a></li>  
  6. </ul>

Vorm velde

  1. <div klas = "kontrolegroep" > 
  2.   <label class = "control-label" for = "inputIcon" > E-posadres </label>  
  3.   <div klas = "kontroles" > 
  4.     <div class = "input-prepend" > 
  5.     <span class = "byvoeging" ><i class = "icon-envelope" ><i><span><input class = "span2" id = "inputIcon" type = "text" >     
  6.   </div>
  7. </div>