Leturfræði
Fyrirsagnir
Allar HTML fyrirsagnir, <h1>gegnum <h6>eru fáanlegar.
h1. Fyrirsögn 1
h2. Fyrirsögn 2
h3. Fyrirsögn 3
h4. Fyrirsögn 4
h5. Fyrirsögn 5
h6. Fyrirsögn 6
Líkamsafrit
Alþjóðlegt sjálfgefið sjálfgefið font-sizeer 14pxline-height , með 20px . Þetta á við um <body>og allar málsgreinar. Að auki <p>fá (málsgreinar) neðri spássíu sem nemur hálfri línuhæð (10px sjálfgefið).
Nullam quis risus eget urna mollis ornare vel eu leo. Þegar þú ert samfélagslegur og stórkostlegur í fæðingu, verður þú að hlakka til. Nullam id dolor id nibh ultricies vehicula.
Þegar þú ert samfélagslegur og stórkostlegur í fæðingu, verður þú að hlakka til. 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 at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
Afrit af blýlíkam
Láttu málsgrein skera sig úr með því að bæta við .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor uppboðsmaður. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
Byggt með minna
Leturfræðikvarðinn byggir á tveimur MINNI breytum í breytum.minna : @baseFontSizeog @baseLineHeight. Sú fyrri er grunnleturstærðin sem notuð er í gegn og sú seinni er grunnlínuhæðin. Við notum þessar breytur og einfalda stærðfræði til að búa til spássíur, fyllingar og línuhæðir af öllum gerðum okkar og fleira. Sérsníddu þá og Bootstrap aðlagar sig.
Áherslur
Notaðu sjálfgefna áherslumerki HTML með léttum stílum.
<small>
Notaðu litla merkið til að draga úr áherslu á innbyggða texta eða blokkir af texta .
Þessari textalínu er ætlað að meðhöndla sem smáa letur.
<p> <small>Þessi textalína á að meðhöndla sem smáa letur.</small> </p>
Djarft
Til að leggja áherslu á textabrot með þyngri leturþunga.
Eftirfarandi textabútur er birtur sem feitletraður texti .
<strong>gerður sem feitletraður texti</strong>
Skáletrun
Til að leggja áherslu á textabrot með skáletri.
Eftirfarandi textabútur er sýndur sem skáletraður texti .
<em>gefinn sem skáletraður texti</em>
Höfuð upp! Ekki hika við að nota <b>og <i>í HTML5. <b>er ætlað að varpa ljósi á orð eða orðasambönd án þess að koma á framfæri auknu mikilvægi en <i>er aðallega fyrir rödd, tæknileg hugtök o.s.frv.
Jöfnunarflokkar
Auðveldlega endurstilltu texta við hluti með textajöfnunarflokkum.
Vinstrijafnaður texti.
Miðjastilltur texti.
Hægrijafnaður texti.
<p class="text-left">Vinstrijafnaður texti.</p> <p class="text-center">miðjastilltur texti.</p> <p class="text-right">Hægrijafnaður texti.</p>
Áherslutímar
Komdu merkingu til skila í gegnum liti með handfylli af áherslukennslutímum.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
Skammstafanir
Stílfærð útfærsla HTML <abbr>frumefnis fyrir skammstafanir og skammstafanir til að sýna stækkaða útgáfuna á sveimi. Skammstafanir með titleeigind eru með ljósum punktaðri neðri ramma og hjálparbendil þegar sveimur er til staðar, sem gefur aukið samhengi við sveima.
<abbr>
Til að fá stækkaðan texta þar sem þú sveimar lengi yfir skammstöfun skaltu láta titleeiginleikann fylgja með.
Skammstöfun á orðinu eiginleiki er attr .
<abbr title="attribute">attr</abbr>
<abbr class="initialism">
Bættu .initialismvið skammstöfun fyrir aðeins minni leturstærð.
HTML er það besta síðan sneið brauð.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Heimilisföng
Leggðu fram tengiliðaupplýsingar fyrir næsta forföður eða allt verkið.
<address>
Halda sniðinu með því að enda allar línur með <br>.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Fullt nafn
[email protected]
<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Sími">P:</abbr> (123) 456-7890 </address> <address> <strong>Fullt nafn</strong><br> <a href="mailto:#">[email protected]</a> </address>
Blockquotes
Til að vitna í blokkir af efni frá öðrum uppruna í skjalinu þínu.
Sjálfgefin blokkatilvitnun
Vefðu <blockquote>um hvaða HTML sem er sem tilvitnun. Fyrir beinar tilvitnanir mælum við með <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante.
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere erat a ante.</p> </blockquote>
Valmöguleikar með blokkatilvitnun
Stíl- og innihaldsbreytingar fyrir einföld afbrigði af venjulegu tilvitnun.
Að nefna heimild
Bættu við <small>merki til að bera kennsl á upprunann. Vefjið nafn frumverksins inn í <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante.
Einhver frægur í Source Title
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere erat a ante.</p> <small>Einhver frægur <cite title="Source Title">Heimildatitill</cite></small> </blockquote>
Aðrar skjáir
Notaðu .pull-rightfyrir fljótandi, hægri stillta blokkatilvitnun.
<blockquote class="pull-right"> ... </blockquote>
Listar
Óraðað
Listi yfir atriði þar sem röðin skiptir ekki beinlínis máli.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Heiltala molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat kl
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul> <li>...</li> </ul>
Pantaði
Listi yfir atriði þar sem röðin skiptir beinlínis máli.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Heiltala molestie lorem at 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>
Óstíll
Fjarlægðu sjálfgefna list-styleog vinstri bólstrun á listahlutum (aðeins börn).
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Heiltala molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat kl
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="unstyled"> <li>...</li> </ul>
Í línu
Settu öll listaatriði á eina línu með inline-blockog smá bólstrun.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="inline"> <li>...</li> </ul>
Lýsing
Listi yfir hugtök með tilheyrandi lýsingum.
- Lýsingarlistar
- Lýsingarlisti er fullkominn til að skilgreina hugtök.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl> <dt>...</dt> <dd>...</dd> </dl>
Lárétt lýsing
Gerðu skilmála og lýsingar í <dl>röð hlið við hlið.
- Lýsingarlistar
- Lýsingarlisti er fullkominn til að skilgreina hugtök.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at 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, út fermentum massa justo sit amet risus.
<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>
Höfuð upp! Láréttir lýsingarlistar munu stytta hugtök sem eru of löng til að passa inn í vinstri dálkleiðréttingu text-overflow. Í þrengri útsýnisgluggum munu þær breytast í sjálfgefið staflað útlit.
Kóði
Í línu
Vefjið innbyggða kóðabúta með <code>.
<section>ætti að pakka inn sem inline.
Til dæmis ætti <code><section></code> að vera innbyggður.
Grunnblokk
Notaðu <pre>fyrir margar línur af kóða. Vertu viss um að sleppa við allar hornklofa í kóðanum fyrir rétta flutning.
<p>Dæmi um texta hér...</p>
<pre> <p>Dæmi um texta hér...</p> </pre>
Höfuð upp! Vertu viss um að hafa kóða innan <pre>merkja eins nálægt vinstri og mögulegt er; það mun gera alla flipa.
Þú getur valfrjálst bætt við .pre-scrollablebekknum sem mun setja hámarkshæðina 350px og bjóða upp á y-ás skrunstiku.
Töflur
Sjálfgefin stíll
Fyrir grunnstíl - létta bólstrun og aðeins lárétt skilrúm - bættu grunnflokknum .tablevið hvaða <table>.
| # | Fyrsta nafn | Eftirnafn | Notendanafn |
|---|---|---|---|
| 1 | Mark | Ottó | @mdo |
| 2 | Jakob | Thornton | @feiti |
| 3 | Larry | fuglinn |
<table class="table"> … </table>
Valfrjálsir flokkar
Bættu einhverjum af eftirfarandi flokkum við .tablegrunnflokkinn.
.table-striped
Bætir sebra-rönd við hvaða töfluröð sem er í <tbody>gegnum :nth-childCSS valinn (ekki fáanlegt í IE7-8).
| # | Fyrsta nafn | Eftirnafn | Notendanafn |
|---|---|---|---|
| 1 | Mark | Ottó | @mdo |
| 2 | Jakob | Thornton | @feiti |
| 3 | Larry | fuglinn |
<table class="table table-striped"> … </table>
.table-bordered
Bættu ramma og ávölum hornum við borðið.
| # | Fyrsta nafn | Eftirnafn | Notendanafn |
|---|---|---|---|
| 1 | Mark | Ottó | @mdo |
| Mark | Ottó | @getbootstrap | |
| 2 | Jakob | Thornton | @feiti |
| 3 | Larry fuglinn | ||
<table class="table table-bordered"> … </table>
.table-hover
Virkjaðu sveimastöðu á töflulínum innan <tbody>.
| # | Fyrsta nafn | Eftirnafn | Notendanafn |
|---|---|---|---|
| 1 | Mark | Ottó | @mdo |
| 2 | Jakob | Thornton | @feiti |
| 3 | Larry fuglinn | ||
<table class="table table-hover"> … </table>
.table-condensed
Gerir borð þéttari með því að klippa klefafyllingu í tvennt.
| # | Fyrsta nafn | Eftirnafn | Notendanafn |
|---|---|---|---|
| 1 | Mark | Ottó | @mdo |
| 2 | Jakob | Thornton | @feiti |
| 3 | Larry fuglinn | ||
<table class="table table-condensed"> … </table>
Valfrjáls röð flokkar
Notaðu samhengisflokka til að lita töflulínur.
| bekk | Lýsing |
|---|---|
.success |
Gefur til kynna árangursríka eða jákvæða aðgerð. |
.error |
Gefur til kynna hættulega eða hugsanlega neikvæða aðgerð. |
.warning |
Gefur til kynna viðvörun sem gæti þurft athygli. |
.info |
Notað sem valkostur við sjálfgefna stíla. |
| # | Vara | Greiðsla tekin | Staða |
|---|---|---|---|
| 1 | TB - Mánaðarlega | 01.04.2012 | Samþykkt |
| 2 | TB - Mánaðarlega | 02.04.2012 | Afþakkaði |
| 3 | TB - Mánaðarlega | 03.04.2012 | Í bið |
| 4 | TB - Mánaðarlega | 04.04.2012 | Hringdu til að staðfesta |
...
<tr class="success">
<td>1</td>
<td>TB - mánaðarlega</td>
<td>01/04/2012</td>
<td>Samþykkt</td>
</tr>
...
Stuðningur töflumerkingar
Listi yfir studda HTML þætti í töflu og hvernig ætti að nota þá.
| Merkja | Lýsing |
|---|---|
<table> |
Umbúðir til að sýna gögn á töfluformi |
<thead> |
Gámaeining fyrir töfluhauslínur ( <tr>) til að merkja töfludálka |
<tbody> |
Gámaeining fyrir töflulínur ( <tr>) í meginmáli töflunnar |
<tr> |
Gámaeining fyrir mengi töfluhólfa ( <td>eða <th>) sem birtist í einni línu |
<td> |
Sjálfgefin töflureitur |
<th> |
Sérstakur töflureitur fyrir dálka (eða röð, allt eftir umfangi og staðsetningu) merki |
<caption> |
Lýsing eða samantekt á því sem taflan geymir, sérstaklega gagnleg fyrir skjálesendur |
<borð>
<caption>...</caption>
<haus>
<tr>
<þ>...</th>
<þ>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
Eyðublöð
Sjálfgefin stíll
Einstakar formstýringar fá útlit, en án nokkurs nauðsynlegs grunnflokks á <form>eða stórum breytingum á álagningu. Leiðir til staflaðra, vinstrijafnaðra merkimiða ofan á formstýringum.
<form>
<fieldset>
<legend>Legend</legend>
<label>Nafn merkimiða</label>
<input type="text" placeholder="Sláðu inn eitthvað…">
<span class="help-block">Dæmi um hjálpartexta á blokkarstigi hér.</span>
<label class="checkbox">
<input type="checkbox"> Skoðaðu mig
</label>
<button type="submit" class="btn">Senda</button>
</fieldset>
</form>
Valfrjálst skipulag
Innifalið með Bootstrap eru þrjú valfrjáls formútlit fyrir algeng notkunartilvik.
Leitarform
Bættu .form-searchvið eyðublaðið og .search-querytil að <input>fá aukalega ávöl textainnslátt.
<form class="form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Leita</button> </form>
Innbyggt form
Bættu við .form-inlinefyrir vinstrijafna merkimiða og innbyggða blokkastýringu fyrir þétt útlit.
<form class="form-inline">
<input type="text" class="input-small" placeholder="Tölvupóstur">
<input type="password" class="input-small" placeholder="Lykilorð">
<label class="checkbox">
<input type="checkbox"> Mundu eftir mér
</label>
<button type="submit" class="btn">Skráðu þig inn</button>
</form>
Lárétt form
Hægrijafnaðu merkimiða og fleyta þeim til vinstri til að láta þau birtast á sömu línu og stýringar. Krefst flestra álagningarbreytinga frá sjálfgefnu eyðublaði:
- Bættu
.form-horizontalvið eyðublaðið - Vefjið merkimiða og stýringar inn
.control-group - Bættu
.control-labelvið merkimiðann - Vefjið öllum tengdum stjórntækjum inn
.controlstil að rétta röðun
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Tölvupóstur</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Lykilorð</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Lykilorð">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Mundu eftir mér
</label>
<button type="submit" class="btn">Skráðu þig inn</button>
</div>
</div>
</form>
Styður formstýringar
Dæmi um staðlaðar eyðublaðastýringar sem studdar eru í eyðublaðsútliti.
Inntak
Algengustu formstýringin, textatengdir innsláttarreitir. Inniheldur stuðning fyrir allar HTML5 tegundir: texta, lykilorð, datetime, datetime-local, dagsetning, mánuður, tími, viku, númer, tölvupóstur, slóð, leit, sími og litur.
Krefst notkun tilgreinds typeá hverjum tíma.
<input type="text" placeholder="Textiinnsláttur">
Textasvæði
Formstýring sem styður margar línur af texta. Breyttu rowseigindinni eftir þörfum.
<textarea rows="3"></textarea>
Gátreitir og útvarp
Gátreitir eru til að velja einn eða fleiri valkosti á lista á meðan útvarpstæki eru til að velja einn valmöguleika af mörgum.
Sjálfgefið (staflað)
<label class="checkbox"> <input type="checkbox" value=""> Valkostur eitt er þetta og hitt - vertu viss um að láta fylgja með hvers vegna það er frábært </label> <label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" hakað> Valkostur eitt er þetta og hitt - vertu viss um að láta fylgja með hvers vegna það er frábært </label> <label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Valkostur tvö getur verið eitthvað annað og ef hann velur verður valkostur einn afmerktur </label>
Innbyggðir gátreiti
Bættu .inlinebekknum við röð gátreita eða útvarpstæki fyrir stýringar birtast á sömu línu.
<label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> <label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label>
Velur
Notaðu sjálfgefna valmöguleikann eða tilgreindu a multiple="multiple"til að sýna marga valkosti í einu.
<velja> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </velja> <select multiple="multiple"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </velja>
Útvíkkun formstýringar
Bootstrap bætir ofan á núverandi vafrastýringu og inniheldur aðra gagnlega formhluta.
Innskot og bætt við inntak
Bættu við texta eða hnöppum fyrir eða eftir hvaða textainnslátt sem er. Athugaðu að selectþættir eru ekki studdir hér.
Sjálfgefnir valkostir
Vefðu inn .add-onog einn inputmeð einum af tveimur flokkum til að setja texta fyrir eða bæta við inntak.
<div class="input-prepend"> <span class="add-on">@</span> <input class="span2" id="prependedInput" type="text" placeholder="Notandanafn"> </div> <div class="input-append"> <input class="span2" id="appendedInput" type="text"> <span class="add-on">.00</span> </div>
Samsett
Notaðu bæði flokka og tvö tilvik af .add-ontil að setja inn og bæta við inntaki.
<div class="input-prepend input-append"> <span class="add-on">$</span> <input class="span2" id="appendedPrependedInput" type="text"> <span class="add-on">.00</span> </div>
Hnappar í stað texta
Í staðinn fyrir <span>texta, notaðu a .btntil að tengja hnapp (eða tvo) við inntak.
<div class="input-append"> <input class="span2" id="appendedInputButton" type="text"> <button class="btn" type="button">Áfram!</button> </div>
<div class="input-append"> <input class="span2" id="appendedInputButtons" type="text"> <button class="btn" type="button">Leita</button> <button class="btn" type="button">Valkostir</button> </div>
Fellilistar fyrir hnappa
<div class="input-append">
<input class="span2" id="appendedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Aðgerð
<span class="caret"></span>
</hnappur>
<ul class="dropdown-menu">
...
</ul>
</div>
</div>
<div class="input-prepend">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Aðgerð
<span class="caret"></span>
</hnappur>
<ul class="dropdown-menu">
...
</ul>
</div>
<input class="span2" id="prependedDropdownButton" type="text">
</div>
<div class="input-prepend input-append">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Aðgerð
<span class="caret"></span>
</hnappur>
<ul class="dropdown-menu">
...
</ul>
</div>
<input class="span2" id="appendedPrependedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Aðgerð
<span class="caret"></span>
</hnappur>
<ul class="dropdown-menu">
...
</ul>
</div>
</div>
Skiptir fellilistahópar
<form>
<div class="input-prepend">
<div class="btn-group">...</div>
<input type="text">
</div>
<div class="input-append">
<input type="text">
<div class="btn-group">...</div>
</div>
</form>
Leitarform
<form class="form-search">
<div class="input-append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">Leita</button>
</div>
<div class="input-prepend">
<button type="submit" class="btn">Leita</button>
<input type="text" class="span2 search-query">
</div>
</form>
Stjórna stærð
Notaðu hlutfallslega stærðarflokka eins og .input-largeeða passaðu inntakið þitt við dálkastærðir ristarinnar með því að nota .span*flokka.
Loka stig inntak
Láttu eitthvert <input>eða <textarea>frumefni haga sér eins og blokkarstig.
<input class="input-block-level" type="text" placeholder=".input-block-level">
Hlutfallsleg stærð
<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">
Höfuð upp! Í framtíðarútgáfum munum við breyta notkun þessara hlutfallslegu inntaksflokka til að passa við hnappastærðir okkar. Til dæmis .input-largemun auka fyllingu og leturstærð inntaks.
Stærð rist
Notaðu .span1til .span12fyrir inntak sem passa við sömu stærðir á ristardálkunum.
<input class="span1" type="text" placeholder=".span1"> <input class="span2" type="text" placeholder=".span2"> <input class="span3" type="text" placeholder=".span3"> <select class="span1"> ... </velja> <select class="span2"> ... </velja> <select class="span3"> ... </velja>
Fyrir mörg netinntak í hverri línu, notaðu .controls-rowbreytingaflokkinn fyrir rétt bil . Það flýtur inntakunum til að hrynja hvítt rými, setur rétta spássíuna og hreinsar flotið.
<div class="controls"> <input class="span5" type="text" placeholder=".span5"> </div> <div class="controls controls-row"> <input class="span4" type="text" placeholder=".span4"> <input class="span1" type="text" placeholder=".span1"> </div> ...
Óbreytanleg inntak
Settu fram gögn á eyðublaði sem ekki er hægt að breyta án þess að nota raunverulega eyðublaðsmerkingu.
<span class="input-xlarge uneditable-input">Nokkur gildi hér</span>
Mynda aðgerðir
Ljúktu eyðublaði með hópi aðgerða (hnappa). Þegar þeir eru settir í .form-actionshnappinn dragast hnapparnir sjálfkrafa inn til að vera í takt við eyðublaðstýringarnar.
<div class="form-actions"> <button type="submit" class="btn btn-primary">Vista breytingar</button> <button type="button" class="btn">Hætta við</button> </div>
Hjálpartexti
Stuðningur á innbyggðu og blokkastigi fyrir hjálpartexta sem birtist í kringum eyðublaðastýringar.
Innbyggð hjálp
<input type="text"><span class="help-inline">Inline hjálpartexti</span>
Lokaðu hjálp
<input type="text"><span class="help-block">Lengri blokk af hjálpartexta sem brotnar inn á nýja línu og gæti náð yfir eina línu.</span>
Formstýringarríki
Gefðu notendum eða gestum endurgjöf með grunnviðbrögðum á eyðublaðastýringum og merkimiðum.
Inntaksfókus
Við fjarlægjum sjálfgefna outlinestíla á sumum formstýringum og notum a box-shadowí staðinn fyrir :focus.
<input class="input-xlarge" id="focusedInput" type="text" value="Þetta er einbeitt...">
Ógild inntak
Stílinntak með sjálfgefnum vafravirkni með :invalid. Tilgreindu type, bættu við requiredeigindinni ef reiturinn er ekki valfrjáls og (ef við á) tilgreindu pattern.
Þetta er ekki fáanlegt í útgáfum af Internet Explorer 7-9 vegna skorts á stuðningi við CSS gervivalda.
<input class="span3" type="email" krafist>
Óvirkt inntak
Bættu disabledeigindinni við inntak til að koma í veg fyrir inntak notenda og kalla fram aðeins öðruvísi útlit.
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Inntak óvirkt hér..." óvirkt>
Staðfesting segir
Bootstrap inniheldur staðfestingarstíl fyrir villu-, viðvörunar-, upplýsingar- og árangursskilaboð. Til að nota skaltu bæta viðeigandi flokki við umhverfið .control-group.
<div class="control-group warning">
<label class="control-label" for="inputWarning">Inntak með viðvörun</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Eitthvað gæti hafa farið úrskeiðis</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">Inntak með villu</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Vinsamlegast leiðréttu villuna</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="inputInfo">Inntak með upplýsingum</label>
<div class="controls">
<input type="text" id="inputInfo">
<span class="help-inline">Notandanafn er þegar tekið</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Inntak með árangri</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Úff!</span>
</div>
</div>
Myndir
Bættu flokkum við <img>frumefni til að stilla myndir auðveldlega í hvaða verkefni sem er.
<img src="..." class="img-rounded"> <img src="..." class="img-circle"> <img src="..." class="img-polaroid">
Höfuð upp! .img-roundedog .img-circlevirka ekki í IE7-8 vegna skorts á border-radiusstuðningi.
Tákn eftir Glyphicons
Táknmyndir
140 tákn í sprite formi, fáanleg í dökkgráu (sjálfgefið) og hvítu, veitt af Glyphicons .
Eignun Glyphicons
Glyphicons Halflings eru venjulega ekki fáanlegar ókeypis, en samkomulag milli Bootstrap og Glyphicons höfundanna hefur gert þetta mögulegt fyrir þig sem þróunaraðila að kostnaðarlausu. Sem þakklæti biðjum við þig um að láta fylgja með valfrjálsan hlekk til baka á Glyphicons hvenær sem það er mögulegt.
Hvernig skal nota
Öll tákn þurfa <i>merki með einstökum flokki, með forskeytinu icon-. Til að nota skaltu setja eftirfarandi kóða nánast hvar sem er:
<i class="icon-search"></i>
Það eru líka stíll í boði fyrir öfug (hvít) tákn, gerð tilbúin með einum aukaflokki. Við munum sérstaklega framfylgja þessum flokki á sveima og virkum stöðum fyrir nav og fellivaltengla.
<i class="icon-search icon-white"></i>
Höfuð upp! Þegar þú notar við hliðina á textastrengjum, eins og í hnöppum eða nav-tenglum, vertu viss um að skilja eftir bil á eftir <i>merkinu fyrir rétt bil.
Dæmi um táknmyndir
Notaðu þá í hnöppum, hnappahópum fyrir tækjastiku, flakk eða innsláttarform.
Hnappar
Hnappahópur á hnappastiku
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><i class="icon-align-left"></i></a>
<a class="btn" href="#"><i class="icon-align-center"></i></a>
<a class="btn" href="#"><i class="icon-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
</div>
Fellilisti í hnappahóp
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> Notandi</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Breyta</a></li>
<li><a href="#"><i class="icon-trash"></i> Eyða</a></li>
<li><a href="#"><i class="icon-ban-circle"></i> Bann</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Gerðu stjórnanda</a></li>
</ul>
</div>
Hnappastærðir
<a class="btn btn-large" href="#"><i class="icon-star"></i> Stjarna</a> <a class="btn btn-small" href="#"><i class="icon-star"></i> Stjarna</a> <a class="btn btn-mini" href="#"><i class="icon-star"></i> Stjarna</a>
Leiðsögn
<ul class="nav nav-list"> <li class="active"><a href="#"><i class="icon-home icon-white"></i> Heim</a></li> <li><a href="#"><i class="icon-book"></i> Bókasafn</a></li> <li><a href="#"><i class="icon-pencil"></i> Forrit</a></li> <li><a href="#"><i class="i"></i> Ýmislegt</a></li> </ul>
Formreitir
<div class="control-group">
<label class="control-label" for="inputIcon">Netfang</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span>
<input class="span2" id="inputIcon" type="text">
</div>
</div>
</div>