Basis CSS

Fundamentele HTML-elemente gestileer en verbeter met uitbreidbare klasse.

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

Vet

Om 'n stukkie teks met 'n swaarder lettergewig te beklemtoon.

Die volgende stukkie teks word as vetgedrukte teks weergegee .

<strong> as vetgedrukte teks weergegee </strong>

Kursief

Om 'n stukkie teks met kursief 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.

Belyningsklasse

Herbelyn teks maklik na komponente met teksbelyningsklasse.

Linksbelynde teks.

Sentreerbelynde teks.

Regsbelynde teks.

  1. <p class = "text-left" > Linksbelynde teks. </p>
  2. <p class = "text-center" > Sentreer-belynde teks. </p>
  3. <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.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p>
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p>
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p>
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p>
  5. <p klas = "teks-sukses" > 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 = "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 = "HyperText Markup Language" class = "initialisme" > 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>.

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

  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

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

In lyn

Plaas alle lysitems op 'n enkele lyn met ' inline-blockn ligte vulling.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul klas = "inlyn" >
  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.

In lyn

Wikkel inlyn-brokkies kode met <code>.

Moet byvoorbeeld <section>as inlyn toegedraai word.
  1. Byvoorbeeld , < code> & lt ; afdeling & gt ;</ 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.

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. </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 @twitter
  1. <table class = "tafel tafel-gestreep" >
  2. </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. </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. </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. </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
  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> Omvou-element 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
  1. <tabel>
  2. <caption> ... </caption>
  3. <kop>
  4. <tr>
  5. <de> ... </th>
  6. <de> ... </th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td> ... </td>
  12. <td> ... </td>
  13. </tr>
  14. </tbody>
  15. </tabel>

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. <veldset>
  3. <legend> Legende </legend>
  4. <label> Etiketnaam < /label>
  5. <input type = "text" placeholder = "Tik iets ..." >
  6. <span class = "help-block" > Voorbeeld blokvlak-hulpteks hier. </span>
  7. <label class = "checkbox" >
  8. <input type = "checkbox" > Kyk na my
  9. </label>
  10. <button type = "submit" class = "btn" > Dien in </button>
  11. </fieldset>
  12. </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
  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 rowskenmerk 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 ontselekteer 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. <input type = "checkbox" id = "inlineCheckbox3" waarde = "option3" > 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>
  3. <input class = "span2" id = "prependedInput" type = "text" placeholder = "Gebruikernaam" >
  4. </div>
  5. <div klas = "invoer-byvoeg" >
  6. <input class = "span2" id = "appendedInput " tipe = "text" >
  7. <span class = "byvoeging" > .00 </span>
  8. </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>
  3. < invoerklas = " span2 " id = "appendedPrependedInput " tipe = "teks" >
  4. <span class = "byvoeging" > .00 </span>
  5. </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 " tipe = "text" >
  3. <button class = "btn" type = "button" > Gaan! </knoppie>
  4. </div>
  1. <div klas = "invoer-byvoeg" >
  2. <input class = "span2" id = "appendedInputButtons " tipe = "text" >
  3. <button class = "btn" type = "button" > Soek </button>
  4. <button class = "btn" type = "button" > Opsies </button>
  5. </div>

Knoppie aftrekkies

  1. <div klas = "invoer-byvoeg" >
  2. < invoerklas = " span2 " id = "aangehegDropdownButton" tipe = "teks" >
  3. <div klas = "btn-groep" >
  4. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  5. Aksie
  6. <span class = "caret" ></span>
  7. </knoppie>
  8. <ul class = "dropdown-menu" >
  9. ...
  10. </ul>
  11. </div>
  12. </div>
  1. <div class = "input-prepend" >
  2. <div klas = "btn-groep" >
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. Aksie
  5. <span class = "caret" ></span>
  6. </knoppie>
  7. <ul class = "dropdown-menu" >
  8. ...
  9. </ul>
  10. </div>
  11. < invoerklas = " span2 " id = "prependedDropdownButton" tipe = "teks" >
  12. </div>
  1. <div klas = "invoer-vooraf invoer-byvoeg" >
  2. <div klas = "btn-groep" >
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. Aksie
  5. <span class = "caret" ></span>
  6. </knoppie>
  7. <ul class = "dropdown-menu" >
  8. ...
  9. </ul>
  10. </div>
  11. < invoerklas = " span2 " id = "appendedPrependedDropdownButton " tipe = "teks" >
  12. <div klas = "btn-groep" >
  13. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  14. Aksie
  15. <span class = "caret" ></span>
  16. </knoppie>
  17. <ul class = "dropdown-menu" >
  18. ...
  19. </ul>
  20. </div>
  21. </div>

Gesegmenteerde aftrekgroepe

  1. <vorm>
  2. <div class = "input-prepend" >
  3. <div class = "btn-group" > ... </div>
  4. <invoertipe = " teks" >
  5. </div>
  6. <div klas = "invoer-byvoeg" >
  7. <invoertipe = " teks" >
  8. <div class = "btn-group" > ... </div>
  9. </div>
  10. </form>

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.

Blok vlak insette

Laat enige element <input>of <textarea>element soos 'n blokvlakelement optree.

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

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 vormopmaak 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-actions, 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>

Vormbeheertoestande

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

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.

  1. < invoerklas = " span3 " tipe = "e-pos" vereis >

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-, inligting- en suksesboodskappe. Om te gebruik, voeg die toepaslike klas by die omliggende .control-group.

Iets het dalk verkeerd geloop
Maak asseblief die fout reg
Gebruikersnaam is reeds gevat
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.  
  9. <div class = "kontrolegroepfout" >
  10. <label class = "control-label" for = "inputError" > Invoer met fout </label>
  11. <div klas = "kontroles" >
  12. <input type = "text" id = "inputError" >
  13. <span class = "help-inline" > Maak asseblief die fout reg </span>
  14. </div>
  15. </div>
  16.  
  17. <div class = "kontrolegroep inligting" >
  18. <label class = "control-label" for = "inputInfo" > Invoer met inligting </label>
  19. <div klas = "kontroles" >
  20. <input type = "text" id = "inputInfo" >
  21. <span class = "help-inline" > Gebruikersnaam is reeds geneem </span>
  22. </div>
  23. </div>
  24.  
  25. <div class = "kontrolegroep sukses" >
  26. <label class = "control-label" for = "inputSuccess" > Invoer met sukses </label>
  27. <div klas = "kontroles" >
  28. <input type = "text" id = "inputSukses" >
  29. <span class = "help-inline" > Woohoo! </span>
  30. </div>
  31. </div>

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 gehandhaaf 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 bykomende 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 disabled" > Skakel </a>

Let op!Ons gebruik .disabledhier as 'n nutsklas, soortgelyk aan die algemene .activeklas, so geen voorvoegsel word vereis nie. Hierdie klas is ook slegs vir estetiese; jy moet pasgemaakte JavaScript gebruik om skakels hier te deaktiveer.

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.

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

140 x 140 140 x 140 140 x 140
  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.

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. <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>
Aftreklys in 'n knoppiegroep
  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>
Knoppie groottes
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Ster </a>
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Ster </a>
  3. <a klas = "btn btn-mini" href = "#" ><i klas = "ikoon-ster" ></i> Ster </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 klas = "byvoeging" ><i klas = "ikoon-omhulsel" ></i></span>
  6. <input class = "span2" id = "inputIcon" tipe = "text" >
  7. </div>
  8. </div>
  9. </div>