Bo en behalwe die steierwerk word basiese HTML-elemente gestileer en verbeter met uitbreidbare klasse om 'n vars, konsekwente voorkoms en gevoel te gee.
Die hele tipografiese rooster is gebaseer op twee Less veranderlikes in ons variables.less lêer: @baseFontSizeen @baseLineHeight. Die eerste is die basiese lettergrootte wat deurgaans gebruik word en die tweede is die basislynhoogte.
Ons gebruik daardie veranderlikes, en 'n mate van wiskunde, om die marges, opvullings en lynhoogtes van al ons tipe en meer te skep.
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 ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| Element | Gebruik | Opsioneel |
|---|---|---|
<strong> |
Vir die klem op 'n stukkie teks met belangrike | Geen |
<em> |
Om 'n stukkie teks met stres te beklemtoon | Geen |
<abbr> |
Wikkel afkortings en akronieme om die uitgebreide weergawe te wys wanneer jy beweeg | Sluit opsionele .initialismklas vir hoofletters. |
<address> |
Vir kontakinligting vir sy naaste voorouer of die hele liggaam van werk | Behou formatering deur alle reëls te eindig met<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , uit fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, 'n pharetra augue.
Let wel: Gebruik gerus <b>en <i>in HTML5, maar hul gebruik het 'n bietjie verander. <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.
Hier is twee voorbeelde van hoe die <address>merker gebruik kan word:
Afkortings met 'n titleeienskap het 'n ligte gestippelde onderrand en 'n hulpwyser wanneer jy beweeg. Dit gee gebruikers 'n ekstra aanduiding dat iets gewys sal word wanneer hulle beweeg.
Voeg die initialismklas by 'n afkorting om tipografiese harmonie te verhoog deur dit 'n effens kleiner teksgrootte te gee.
HTML is die beste ding sedert gesnyde brood.
'n Afkorting van die woord eienskap is attr .
| Element | Gebruik | Opsioneel |
|---|---|---|
<blockquote> |
Blokvlakelement om inhoud van 'n ander bron aan te haal | Voeg .pull-leften .pull-rightklasse vir gedryf opsies |
<small> |
Opsionele element vir die byvoeging van 'n gebruikergerigte aanhaling, tipies 'n skrywer met titel van werk | Plaas die <cite>om die titel of naam van die bron |
Om 'n blokaanhaling in te sluit, draai <blockquote>om enige HTML as die aanhaling. Vir reguit aanhalings beveel ons 'n aan <p>.
Sluit 'n opsionele <small>element in om jou bron aan te haal en jy sal 'n streep —voor dit kry vir stileringsdoeleindes.
- <blokaanhaling>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere ert 'n ante venenatis. </p>
- <klein> Iemand beroemd </small>
- </blockquote>
Verstek blokaanhalings word so gestileer:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere ert 'n ante venenatis.
Iemand bekend in Body of work
Om jou blokaanhaling na regs te laat dryf, voeg by class="pull-right":
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere ert 'n ante venenatis.
Iemand bekend in Body of work
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Wikkel inlyn-brokkies kode met <code>.
- Byvoorbeeld , <code> afdeling </ code > moet as inlyn toegedraai word .
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 wel: 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.
Neem dieselfde <pre>element en voeg twee opsionele klasse by vir verbeterde weergawe.
- <p> Voorbeeldteks hier... </p>
- <pre class = "mooiafdruk
- lynnommers" >
- <p>Voorbeeldteks hier...</p>
- </pre>
Laai google-code-prettify af en kyk na die readme vir hoe om te gebruik.
| 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 Moet gebruik word binne 'n <thead> |
<caption> |
Beskrywing of opsomming van wat die tabel bevat, veral nuttig vir skermlesers |
- <tabel>
- <kop>
- <tr>
- <de> … </de>
- <de> … </de>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </tabel>
| Naam | Klas | Beskrywing |
|---|---|---|
| Verstek | Geen | Geen style nie, net kolomme en rye |
| Basies | .table |
Slegs horisontale lyne tussen rye |
| Omrand | .table-bordered |
Rond hoeke af en voeg buitenste rand by |
| Sebra-streep | .table-striped |
Voeg liggrys agtergrondkleur by vreemde rye (1, 3, 5, ens.) |
| Gekondenseerde | .table-condensed |
Sny vertikale vulling in die helfte, van 8px tot 4px, binne tdalle thelemente |
Tabelle word outomaties gestileer met slegs 'n paar rande om leesbaarheid te verseker en struktuur te behou. Met 2.0 word die .tableklas vereis.
- <tabelklas = " tafel" >
- …
- </tabel>
| # | Eerste naam | Van | Gebruikersnaam |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| 2 | Jakob | Thornton | @vet |
| 3 | Larry | die voël |
Raak 'n bietjie fancy met jou tafels deur sebrastrepe by te voeg - voeg net die .table-stripedklas by.
Let wel: Gestreepte tabelle gebruik die :nth-childCSS-kieser en is nie beskikbaar in IE7-IE8 nie.
- <table class = "tafel tafel-gestreep" >
- …
- </tabel>
| # | Eerste naam | Van | Gebruikersnaam |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| 2 | Jakob | Thornton | @vet |
| 3 | Larry | die voël |
Voeg rande om die hele tafel en afgeronde hoeke by vir estetiese doeleindes.
- <table class = "table-bordered" >
- …
- </tabel>
| # | Eerste naam | Van | Gebruikersnaam |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| Merk | Otto | @getbootstrap | |
| 2 | Jakob | Thornton | @vet |
| 3 | Larry die voël | ||
Maak jou tafels meer kompak deur die .table-condensedklas by te voeg om tafelselvulling in die helfte te sny (van 8px tot 4px).
- <tabel klas = "tabel tabel-gekondenseerde" >
- …
- </tabel>
| # | Eerste naam | Van | Gebruikersnaam |
|---|---|---|---|
| 1 | Merk | Otto | @mdo |
| 2 | Jakob | Thornton | @vet |
| 3 | Larry die voël | ||
Kombineer gerus enige van die tafelklasse om verskillende voorkoms te verkry deur enige van die beskikbare klasse te gebruik.
- <table class = "tafel-tabel-gestreepte tafel-begrensde tafel-gekondenseerde" >
- ...
- </tabel>
| Volle naam | |||
|---|---|---|---|
| # | Eerste naam | Van | Gebruikersnaam |
| 1 | Merk | Otto | @mdo |
| 2 | Jakob | Thornton | @vet |
| 3 | Larry die voël | ||
Die beste deel van vorms in Bootstrap is dat al jou invoere en kontroles goed lyk, maak nie saak hoe jy dit in jou opmaak bou nie. Geen oortollige HTML word vereis nie, maar ons verskaf die patrone vir diegene wat dit benodig.
Meer ingewikkelde uitlegte kom met bondige en skaalbare klasse vir maklike stilering en gebeurtenisbinding, sodat jy by elke stap gedek is.
Bootstrap kom met ondersteuning vir vier tipes vormuitlegte:
Verskillende tipes vormuitlegte vereis 'n paar veranderinge aan opmaak, maar die kontroles self bly en tree dieselfde op.
Bootstrap se vorms bevat style vir al die basisvormkontroles soos invoer, teksarea en seleksie wat jy sou verwag. Maar dit kom ook met 'n aantal pasgemaakte komponente soos aangehegte en voorafgesette invoere en ondersteuning vir lyste van merkblokkies.
State soos fout, waarskuwing en sukses is ingesluit vir elke tipe vormbeheer. Ook ingesluit is style vir gedeaktiveerde kontroles.
Bootstrap bied eenvoudige opmaak en style vir vier style van algemene webvorms.
| Naam | Klas | Beskrywing |
|---|---|---|
| Vertikaal (verstek) | .form-vertical (nie benodig nie) |
Gestapelde, links-belynde etikette oor kontroles |
| In lyn | .form-inline |
Links-belynde etiket- en inlynblokkontroles vir kompakte styl |
| Soek | .form-search |
Ekstra afgeronde teksinvoer vir 'n tipiese soek-estetiese |
| Horisontaal | .form-horizontal |
Swaai links, regs-belynde etikette op dieselfde lyn as kontroles |
Met v2.0 het ons ligter en slimmer verstekke vir vormstyle. Geen ekstra opmaak nie, net vormkontroles.
- <vorm klas = "wel" >
- <label> Etiketnaam < /label>
- <input type = "text" class = "span3" placeholder = " Tik iets ..." >
- <span class = "help-inline" > Geassosieerde hulpteks! </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Kyk na my
- </label>
- <button type = "submit" class = "btn" > Dien in </button>
- </form>
Weerspieël standaard WebKit-style, voeg net by .form-searchvir ekstra afgeronde soekvelde.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium soektog-navraag" >
- <button type = "submit" class = "btn" > Soek </button>
- </form>
Insette is blokvlak om te begin. Vir .form-inlineen .form-horizontalgebruik ons inlynblok.
- <form class = "well form-inline" >
- <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>
Gegewe die bostaande voorbeeldvormuitleg, hier is die opmaak wat met die eerste invoer- en kontrolegroep geassosieer word. Die .control-group, .control-label, en .controlsklasse word almal benodig vir stilering.
- <vorm klas = "vorm-horisontaal" >
- <veldset>
- <legend> Legendeteks </legend>
- <div klas = "kontrolegroep" >
- <label class = "control-label" for = "input01" > Teksinvoer </label>
- <div klas = "kontroles" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > Ondersteunende hulpteks </p>
- </div>
- </div>
- </fieldset>
- </form>
Aan die linkerkant is al die verstekvormkontroles wat ons ondersteun. Hier is die kolpuntlys:
Tot v1.4 het Bootstrap se verstekvormstyle die horisontale uitleg gebruik. Met Bootstrap 2 het ons daardie beperking verwyder om slimmer, meer skaalbare verstekke vir enige vorm te hê.
Bootstrap beskik oor style vir blaaier-ondersteunde gefokusde en disabledstate. Ons verwyder die verstek Webkit outlineen pas 'n box-shadowin die plek daarvan toe vir :focus.
Dit sluit ook valideringstyle vir foute, waarskuwings en sukses in. Om te gebruik, voeg die foutklas by die omliggende .control-group.
- <veldstel
- class = "kontrolegroepfout" >
- …
- </fieldset>
Invoergroepe—met aangehegte of voorgeskrewe teks—verskaf 'n maklike manier om meer konteks vir jou insette te gee. Goeie voorbeelde sluit in die @-teken vir Twitter-gebruikersname of $ vir finansies.
Tot v1.4 het Bootstrap ekstra opmaak rondom merkblokkies en radio's vereis om dit op te stapel. Nou, dit is 'n eenvoudige kwessie van die herhaal <label class="checkbox">wat die omvou <input type="checkbox">.
Inlyn-merkblokkies en radio's word ook ondersteun. Voeg net .inlineby enige .checkboxof .radioen jy is klaar.
Om voor- of byvoeginsette in 'n inlynvorm te gebruik, maak seker dat jy die .add-onen inputop dieselfde lyn plaas, sonder spasies.
Om hulpteks vir jou vorminvoere by te voeg, sluit inlyn-hulpteks by <span class="help-inline">of 'n hulpteksblok <p class="help-block">na die invoerelement in.
In plaas daarvan om elke ikoon 'n ekstra versoek te maak, het ons dit saamgestel in 'n sprite - 'n klomp beelde in een lêer wat CSS gebruik om die beelde met background-position. Dit is dieselfde metode wat ons op Twitter.com gebruik en dit het goed gewerk vir ons.
Alle ikoneklasse word voorafgegaan .icon-vir behoorlike naamspasiëring en omvang, net soos ons ander komponente. Dit sal help om konflikte met ander instrumente te vermy.
Glyphicons het ons die gebruik gegee van die Halflings-stel in ons oopbron-nutsgoedstel solank ons 'n skakel en krediet hier in die dokumente verskaf. Oorweeg asseblief om dieselfde in jou projekte te doen.
Bootstrap gebruik 'n <i>merker vir alle ikone, maar hulle het geen saakklas nie - slegs 'n gedeelde voorvoegsel. 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:
- <i klas = "ikoon-soek ikoon-wit" ></i>
Daar is 120 klasse om van te kies vir jou ikone. Voeg net 'n <i>merker by met die regte klasse en jy is gereed. Jy kan die volledige lys in sprites.less of hier in hierdie dokument vind.
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.
Ikone is wonderlik, maar waar sal 'n mens dit gebruik? Hier is 'n paar idees:
In wese, enige plek waar jy 'n <i>merker kan plaas, kan jy 'n ikoon plaas.
Gebruik dit in knoppies, knoppiegroepe vir 'n nutsbalk, navigasie, of voorafgevoegde vorminvoer.