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.

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

<adres>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  San Francisco, CA 94107 <br>
  <abbr title = "Foon" > 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 = "Brontitel" > Brontitel </cite></small> 
</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

<blockquote class = "trek-regs" > 
  ...
</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 klas = "inlyn" > 
  <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 klas = "dl-horisontaal" > 
  <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.

In lyn

Wikkel inlyn-brokkies kode met <code>.

Moet byvoorbeeld <section>as inlyn toegedraai word.

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>

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

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

<tabelklas = " tafel" > 
  …
</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

<table class = "tafel tafel-gestreep" > 
  …
</tabel>

`.table-bordered`

Voeg rande en afgeronde hoeke by die tafel.

#	Eerste naam	Van	Gebruikersnaam
1	Merk	Otto	@mdo
1	Merk	Otto	@getbootstrap
2	Jakob	Thornton	@vet
3	Larry die voël		@twitter

<table class = "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		@twitter

<table class = "table-table-sweef" > 
  …
</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

<tabel klas = "tabel tabel-gekondenseerde" > 
  …
</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 klas = "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>`	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

<tabel>
  <caption> ... </caption>
  <kop>
    <tr>
      <de> ... </th>
      <de> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</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.

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

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

Inlyn vorm

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

<vorm klas = "vorm-inlyn" > 
  <input type = "text" class = "input-small" plekhouer = "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

<vorm klas = "vorm-horisontaal" > 
  <div klas = "kontrolegroep" > 
    <label class = "control-label" for = "inputEmail" > E -pos </label>  
    <div klas = "kontroles" > 
      <input type = "text" id = "inputEmail" plekhouer = "E-pos" >   
    </div>
  </div>
  <div klas = "kontrolegroep" > 
    <label class = "control-label" for = "inputPassword" > Wagwoord </label>  
    <div klas = "kontroles" > 
      <input type = "password" id = "inputPassword" plekhouer = "Wagwoord" >   
    </div>
  </div>
  <div klas = "kontrolegroep" > 
    <div klas = "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" waarde = "" >  
  Opsie een is dit en dat - maak seker dat jy insluit hoekom dit wonderlik is
</label>
 
<label class = "radio" > 
  < invoertipe = "radio" naam = " optionsRadios " id = "optionsRadios1" waarde = "opsie1" gemerk >     
  Opsie een is dit en dat - maak seker dat jy insluit hoekom dit wonderlik is
</label>
<label class = "radio" > 
  <invoer tipe = "radio" naam = "opsiesRadios" id = "opsiesRadios2" waarde = "opsie2" >    
  Opsie twee kan iets anders wees en as u dit kies, sal opsie een ontselekteer 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" > 
  <invoer tipe = "checkbox" id = "inlineCheckbox1" waarde = "opsie1" > 1   
</label>
<label class = "checkbox inline" > 
  <invoer tipe = "checkbox" id = "inlineCheckbox2" waarde = "opsie2" > 2   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox3" waarde = "option3" > 3   
</label>

Kies

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

<kies>
  <opsie> 1 </option>
  <opsie> 2 </option>
  <opsie> 3 </option>
  <opsie> 4 </option>
  <opsie> 5 </option>
</kies>
 
<kies veelvuldige = "veelvuldige" > 
  <opsie> 1 </option>
  <opsie> 2 </option>
  <opsie> 3 </option>
  <opsie> 4 </option>
  <opsie> 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 = "byvoeging" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Gebruikernaam" >    
</div>
<div klas = "invoer-byvoeg" > 
  <input class = "span2" id = "appendedInput " tipe = "text" >   
  <span class = "byvoeging" > .00 </span> 
</div>

Gekombineer

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

<div klas = "invoer-vooraf invoer-byvoeg" > 
  <span class = "byvoeging" > $ </span> 
  < invoerklas = " span2 " id = "appendedPrependedInput " tipe = "teks" >   
  <span class = "byvoeging" > .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 klas = "invoer-byvoeg" > 
  <input class = "span2" id = "appendedInputButton " tipe = "text" >   
  <button class = "btn" type = "button" > Gaan! </knoppie>  
</div>

<div klas = "invoer-byvoeg" > 
  <input class = "span2" id = "appendedInputButtons " tipe = "text" >   
  <button class = "btn" type = "button" > Soek </button>  
  <button class = "btn" type = "button" > Opsies </button>  
</div>

Knoppie aftrekkies

<div klas = "invoer-byvoeg" > 
  < invoerklas = " span2 " id = "aangehegDropdownButton" tipe = "teks" >   
  <div klas = "btn-groep" > 
    <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 klas = "btn-groep" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Aksie
      <span class = "caret" ></span> 
    </knoppie>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  < invoerklas = " span2 " id = "prependedDropdownButton" tipe = "teks" >   
</div>

<div klas = "invoer-vooraf invoer-byvoeg" > 
  <div klas = "btn-groep" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Aksie
      <span class = "caret" ></span> 
    </knoppie>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  < invoerklas = " span2 " id = "appendedPrependedDropdownButton " tipe = "teks" >   
  <div klas = "btn-groep" > 
    <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> 
    <invoertipe = " teks" > 
  </div>
  <div klas = "invoer-byvoeg" > 
    <invoertipe = " teks" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Soek vorm

<vorm klas = "vorm-soek" > 
  <div klas = "invoer-byvoeg" > 
    <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" >   
<kies klas = "span1" > 
  ...
</kies>
<kies klas = "span2" > 
  ...
</kies>
<kies klas = "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 klas = "kontroles" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "kontroles-ry" > 
  <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 vormopmaak te gebruik nie.

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

<div klas = "vorm-aksies" > 
  <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>

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.

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

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

<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 = "kontrolegroepwaarskuwing" > 
  <label class = "control-label" for = "inputWarning" > Invoer met waarskuwing </label>  
  <div klas = "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 klas = "kontroles" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Maak asseblief die fout reg </span> 
  </div>
</div>
 
<div class = "kontrolegroep inligting" > 
  <label class = "control-label" for = "inputInfo" > Invoer met inligting </label>  
  <div klas = "kontroles" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Gebruikersnaam is reeds geneem </span> 
  </div>
</div>
 
<div class = "kontrolegroep sukses" > 
  <label class = "control-label" for = "inputSuccess" > Invoer met sukses </label>  
  <div klas = "kontroles" > 
    <input type = "text" id = "inputSukses" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</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.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Groot knoppie </button>  
  <button class = "btn btn-large" type = "button" > Groot knoppie </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Verstekknoppie </button>  
  <button class = "btn" type = "button" > Verstekknoppie </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Klein knoppie </button>  
  <button class = "btn btn-small" type = "button" > Klein knoppie </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Mini-knoppie </button>  
  <button class = "btn btn-mini" type = "button" > Mini-knoppie </button>  
</p>

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

<button class = "btn btn-large btn-block btn-primary" type = "button" > Blokvlakknoppie </button>  
<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

<a href = "#" class = "btn btn-groot btn-primêr gedeaktiveer" > Primêre skakel </a>  
<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.

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

Een klas, veelvuldige etikette

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

<a class = "btn" href = "" > Skakel </a>  
<button class = "btn" type = "submit" > Knoppie </button>  
<invoerklas = " btn" tipe = "knoppie" waarde = "Invoer" >   
<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.

<img src = "..." class = "img-afgerond" >  
<img src = "..." class = "img-sirkel" >  
<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:

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

<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

<div klas = "btn-nutsbalk" > 
  <div klas = "btn-groep" > 
    <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>

Aftreklys in 'n knoppiegroep

Gebruiker

<div klas = "btn-groep" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Gebruiker </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 klas = "ikoon-potlood" ></i> Wysig </a></li>  
    <li><a href = "#" ><i klas = "ikoon-asblik" ></i> Vee uit </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Verban </a></li>  
    <li klas = "verdeler" ></li> 
    <li><a href = "#" ><i klas = "i" ></i> Maak admin </a></li>  
  </ul>
</div>

Knoppie groottes

Ster Ster Ster

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Ster </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Ster </a>   
<a klas = "btn btn-mini" href = "#" ><i klas = "ikoon-ster" ></i> Ster </a>

Navigasie

<ul klas = "nav nav-lys" > 
  <li klas = "aktief" ><a href = "#" ><i klas = "ikoon-huis ikoon-wit" ></i> Tuis </a></li>   
  <li><a href = "#" ><i klas = "ikoon-boek" ></i> Biblioteek </a></li>  
  <li><a href = "#" ><i klas = "ikoon-potlood" ></i> Toepassings </a></li>  
  <li><a href = "#" ><i klas = "i" ></i> Diverse </a></li>  
</ul>

Vorm velde

<div klas = "kontrolegroep" > 
  <label class = "control-label" for = "inputIcon" > E-posadres </label>  
  <div klas = "kontroles" > 
    <div class = "input-prepend" > 
      <span klas = "byvoeging" ><i klas = "ikoon-omhulsel" ></i></span>  
      <input class = "span2" id = "inputIcon" tipe = "text" >   
    </div>
  </div>
</div>

Tipografie

Opskrifte

h1. Opskrif 1

h2. Opskrif 2

h3. Opskrif 3

h4. Opskrif 4

h5. Opskrif 5

h6. Opskrif 6

Liggaam kopie

Loodliggaamkopie

Gebou met Minder

Beklemtoning

<small>

Vet

Kursief

Belyningsklasse

Klemklasse

Afkortings

<abbr>

<abbr class="initialism">

Adresse

<address>

Blokaanhalings

Verstek blokaanhaling

Blokaanhalingsopsies

Benoem 'n bron

Alternatiewe vertonings

Lyste

Ongeorden

Bestel

Ongestileer

In lyn

Beskrywing

Horisontale beskrywing

Kode

In lyn

Basiese blok

Tabelle

Verstek style

Opsionele klasse

.table-striped

.table-bordered

.table-hover

.table-condensed

Opsionele ryklasse

Ondersteunde tabelopmaak

Vorms

Verstek style

Opsionele uitlegte

Soek vorm

Inlyn vorm

Horisontale vorm

Ondersteunde vormkontroles

Insette

Teksarea

Merkblokkies en radio's

Verstek (gestapel)

Inlyn-merkblokkies

Kies

Uitbreiding van vormkontroles

Voorgeskrewe en aangehegte insette

Verstek opsies

Gekombineer

Knoppies in plaas van teks

Knoppie aftrekkies

Gesegmenteerde aftrekgroepe

Soek vorm

Beheer grootte

Blok vlak insette

Relatiewe grootte

Roostergrootte

Onwysigbare insette

Vorm aksies

Hulp teks

Inlyn hulp

Blokkeer hulp

Vormbeheertoestande

Invoerfokus

Ongeldige invoere

Gedeaktiveerde insette

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`