Bootstrap

Grunn CSS

Grundvallar HTML þættir stílaðir og endurbættir með stækkanlegum flokkum.

Höfuð upp! Þessi skjöl eru fyrir v2.3.2, sem er ekki lengur opinberlega studd. Skoðaðu nýjustu útgáfuna af Bootstrap!

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 = "leiða" > ... </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> <lítil> Þ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> sýndur 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> sýndur 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.

  1. <p class = "text-left" > Vinstrijafnaður texti. </p> 
  2. <p class = "text-center" > Miðjaður texti. </p> 
  3. <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.

  1. <p class = "þögguð" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "text-viðvörun" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-villa" > 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 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 = "eiginleiki" > 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 = "frumhyggja" > 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>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Fullt nafn
[email protected] 
  1. <address>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Sími" > P: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <address>
  9.   <strong> Fullt nafn </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </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.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante. </p>
  3. </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 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante. </p>
  3.   <small> Einhver frægur <cite title = "Heimildatitill" > Heimildatitill </cite></small> 
  4. </blockquote>

Aðrar skjáir

Notaðu .pull-rightfyrir fljótandi, hægri stillta blokkatilvitnun.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante.

Einhver frægur í Source Title 
  1. <blockquote class = "draga til hægri" > 
  2.   ...
  3. </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
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Pantaði

Listi yfir atriði þar sem röðin skiptir beinlínis máli.

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

Ó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
  1. <ul class = "óstílað" > 
  2.   <li> ... </li>
  3. </ul>

Í línu

Settu öll listaatriði á eina línu með inline-blockog smá bólstrun.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </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. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </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. 
  1. <dl class = "dl-horisontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </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>.

Til dæmis <section>ætti að pakka inn sem inline. 
  1. Til dæmis , <kóði> & lt ; kafla & gt ;</ code > ætti 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>
  1. <pre>
  2.   <p>Dæmi um texta hér...</p>
  3. </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 @twitter 
  1. <table class = "tafla" > 
  2.   …
  3. </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 @twitter 
  1. <table class = "borð borðröndótt" > 
  2.   …
  3. </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 @twitter 
  1. <table class = "borð með borði" > 
  2.   …
  3. </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 @twitter 
  1. <table class = "table table-sveima" > 
  2.   …
  3. </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 @twitter 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </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 
  1. ...
  2.   < tr class = "árangur" >
  3.     <td> 1 < /td>
  4.     <td>TB - mánaðarlega</ td >
  5.     < td > 01/04/2012 < / td >
  6.     <td>Samþykkt</ td >
  7.   </ tr >
  8. ...

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 
  1. <borð>
  2.   <caption> ... </caption>
  3.   <haus>
  4.     <tr>
  5.       <þ> ... </th>
  6.       <þ> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </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.

Goðsögn Dæmi um hjálpartexta á blokkarstigi hér. 
  1. <form>
  2.   <fieldset>
  3.     <legend> Legend </legend>
  4.     <label> Heiti merkimiða </label>
  5.     <input type = "text" placeholder = "Sláðu inn eitthvað…" >  
  6.     <span class = "help-block" > Dæmi um hjálpartexta á blokkarstigi hér. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Skoðaðu mig 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Senda </button>  
  11.   </fieldset>
  12. </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.

  1. <form class = "form-leit" > 
  2.   <input type = "text" class = "inntak-miðils leitarfyrirspurn" >  
  3.   <button type = "submit" class = "btn" > Leita </button>  
  4. </form>

Innbyggt form

Bættu við .form-inlinefyrir vinstrijafna merkimiða og innbyggða blokkastýringu fyrir þétt útlit.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" staðgengill = "Tölvupóstur" >   
  3.   <inntakstegund = " lykilorð" flokkur =   "input-small" staðgengill = "Lykilorð" > 
  4.   <merki class = "checkbox" >
  5.     <inntak  type = "checkbox" > Mundu eftir mér
  6.   </label>
  7.   <button type = "senda" flokkur   = "btn" > Skráðu þig inn </button>
  8. </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
  1. <form class = "form-horisontal" > 
  2.   <div class = "stjórnhópur" > 
  3.     <label class = "control-label" for = "inputEmail" > Tölvupóstur </label>  
  4.     <div class = "stýrir" > 
  5.       <input type = "text" id = "inputEmail" staðgengill = "Tölvupóstur" >   
  6.     </div>
  7.   </div>
  8.   <div class = "stjórnhópur" > 
  9.     <label class = "control-label" for = "inputPassword" > Lykilorð </label>  
  10.     <div class = "stýrir" > 
  11.       <input type = "password" id = "inputPassword" staðgengill = "Lykilorð" >   
  12.     </div>
  13.   </div>
  14.   <div class = "stjórnhópur" > 
  15.     <div class = "stýrir" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Mundu eftir mér 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Skráðu þig inn </button>  
  20.     </div>
  21.   </div>
  22. </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.

  1. <input type = "text" placeholder = "Textiinnsláttur" >

Textasvæði

Formstýring sem styður margar línur af texta. Breyttu rowseigindinni eftir þörfum.

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


  1. <label class = "checkbox" > 
  2.   <inntakstegund = " checkbox" gildi = "" >  
  3.   Valkostur eitt er þetta og hitt - vertu viss um að láta fylgja með hvers vegna það er frábært
  4. </label>
  5.  
  6. <label class = "útvarp" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" gildi = "valkostur1" hakað >     
  8.   Valkostur eitt er þetta og hitt - vertu viss um að láta fylgja með hvers vegna það er frábært
  9. </label>
  10. <label class = "útvarp" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" gildi = "valkostur2" >    
  12.   Valkostur tvö getur verið eitthvað annað og ef hann velur verður valkostur einn afmerktur
  13. </label>

Innbyggðir gátreiti

Bættu .inlinebekknum við röð gátreita eða útvarpstæki fyrir stýringar birtast á sömu línu.

  1. <label class = "checkbox inline" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" gildi = "valkostur1" > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" gildi = "valkostur2" > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" gildi = "valkostur3" > 3   
  9. </label>

Velur

Notaðu sjálfgefna valmöguleikann eða tilgreindu a multiple="multiple"til að sýna marga valkosti í einu.


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

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" staðgengill = "Notendanafn" >    
  4. </div>
  5. <div class = "inntak-viðbæta" > 
  6.   <input class = "span2" id = "appendedInput " type = "texti" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

Samsett

Notaðu bæði flokka og tvö tilvik af .add-ontil að setja inn og bæta við inntaki.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "viðbót" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "texti" >   
  4.   <span class = "add-on" > .00 </span> 
  5. </div>

Hnappar í stað texta

Í staðinn fyrir <span>texta, notaðu a .btntil að tengja hnapp (eða tvo) við inntak.

  1. <div class = "inntak-viðbæta" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "texti" >   
  3.   <button class = "btn" type = "button" > Farðu! </hnappur>  
  4. </div>
  1. <div class = "inntak-viðbæta" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "texti" >   
  3.   <button class = "btn" type = "button" > Leita </button>  
  4.   <button class = "btn" type = "button" > Valkostir </button>  
  5. </div>

Fellilistar fyrir hnappa

  1. <div class = "inntak-viðbæta" > 
  2.   <input class = "span2" id = "appdedDropdownButton " type = "texti" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       Aðgerð
  6.       <span class = "caret" ></span> 
  7.     </hnappur>
  8.     <ul class = "fellivalmynd" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Aðgerð
  5.       <span class = "caret" ></span> 
  6.     </hnappur>
  7.     <ul class = "fellivalmynd" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "texti" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Aðgerð
  5.       <span class = "caret" ></span> 
  6.     </hnappur>
  7.     <ul class = "fellivalmynd" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " type = "texti" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       Aðgerð
  15.       <span class = "caret" ></span> 
  16.     </hnappur>
  17.     <ul class = "fellivalmynd" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Skiptir fellilistahópar

  1. <form>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <inntakstegund = " texti" > 
  5.   </div>
  6.   <div class = "inntak-viðbæta" > 
  7.     <inntakstegund = " texti" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Leitarform

  1. <form class = "form-leit" > 
  2.   <div class = "inntak-viðbæta" > 
  3.     <input type = "text" class = "span2 leitarfyrirspurn" >  
  4.     <button type = "submit" class = "btn" > Leita </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Leita </button>  
  8.     <input type = "text" class = "span2 leitarfyrirspurn" >  
  9.   </div>
  10. </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.

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

Hlutfallsleg stærð

  1. <input class = "input-mini" type = "text" staðgengill = ".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" staðgengill = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" staðgengill = ".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.

  1. <inntaksflokkur = "span1" type = " texti" staðgengill = ".span1" >   
  2. <inntaksflokkur = "span2" type = " texti" staðgengill = ".span2" >   
  3. <inntaksflokkur = "span3" type = " texti" staðgengill = ".span3" >   
  4. <velja flokk = "span1" > 
  5.   ...
  6. </velja>
  7. <velja flokk = "span2" > 
  8.   ...
  9. </velja>
  10. <velja flokk = "span3" > 
  11.   ...
  12. </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ð.

  1. <div class = "stýrir" > 
  2.   <inntaksflokkur = "span5" type = " texti" staðgengill = ".span5" >   
  3. </div>
  4. <div class = "stýrir stjórna-röð" > 
  5.   <inntaksflokkur = "span4" type = " texti" staðgengill = ".span4" >   
  6.   <inntaksflokkur = "span1" type = " texti" staðgengill = ".span1" >   
  7. </div>
  8. ...

Óbreytanleg inntak

Settu fram gögn á eyðublaði sem ekki er hægt að breyta án þess að nota raunverulega eyðublaðsmerkingu.

Eitthvað verðmæti hér 
  1. <span class = "input-xlarge uneditable-input" > Eitthvað 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.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Vista breytingar </button>  
  3.   <button type = "button" class = "btn" > Hætta við </button>  
  4. </div>

Hjálpartexti

Stuðningur á innbyggðu og blokkastigi fyrir hjálpartexta sem birtist í kringum eyðublaðastýringar.

Innbyggð hjálp

Innbyggður hjálpartexti 
  1. <input type = "text" ><span class = "help-inline" > Innbyggður hjálpartexti </span>

Lokaðu hjálp

Lengri blokk af hjálpartexta sem brotnar inn á nýja línu og getur teygt sig út fyrir eina línu. 
  1. <input type = "text" ><span class = "help-block" > Lengri blokk af hjálpartexta sem brotnar inn á nýja línu og getur teygt sig út fyrir 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.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" gildi = "Þetta er fókus..." >

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

  1. <inntaksflokkur = "span3" type = " tölvupóstur" krafist >

Óvirkt inntak

Bættu disabledeigindinni við inntak til að koma í veg fyrir inntak notenda og kalla fram aðeins öðruvísi útlit.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" staðgengill = "Slökkt á inntak 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.

Eitthvað gæti hafa farið úrskeiðis
Vinsamlegast leiðréttu villuna
Notandanafn er tekið
Úff! 
  1. <div class = "viðvörun stýrihóps" > 
  2.   <label class = "control-label" for = "inputWarning" > Inntak með viðvörun </label>  
  3.   <div class = "stýrir" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Eitthvað gæti hafa farið úrskeiðis </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "stjórnhópsvilla" > 
  10.   <label class = "control-label" for = "inputError" > Inntak með villu </label>  
  11.   <div class = "stýrir" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Vinsamlegast leiðréttu villuna </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "upplýsingar um stjórnhóp" > 
  18.   <label class = "control-label" for = "inputInfo" > Inntak með upplýsingum </label>  
  19.   <div class = "stýrir" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Notandanafn er þegar tekið </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "árangur stjórnunarhóps" > 
  26.   <label class = "control-label" for = "inputSuccess" > Inntak með árangri </label>  
  27.   <div class = "stýrir" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Hnappar

Sjálfgefin hnappar

Hægt er að nota hnappastíla á hvað sem er með .btnbekknum beitt. Hins vegar, venjulega, þú vilt nota þetta aðeins á <a>og <button>þætti fyrir bestu flutninginn.

Takki class="" Lýsing
btn Venjulegur grár hnappur með halla
btn btn-primary Veitir aukna sjónræna þyngd og auðkennir aðalaðgerðina í setti af hnöppum
btn btn-info Notað sem valkostur við sjálfgefna stíla
btn btn-success Gefur til kynna árangursríka eða jákvæða aðgerð
btn btn-warning Gefur til kynna að fara ætti varlega með þessa aðgerð
btn btn-danger Gefur til kynna hættulega eða hugsanlega neikvæða aðgerð
btn btn-inverse Dökkgrár hnappur til vara, ekki tengdur merkingaraðgerð eða notkun
btn btn-link Leggðu áherslu á hnapp með því að láta hann líta út eins og hlekk á meðan þú heldur hegðun hnappsins

Samhæfni í gegnum vafra

IE9 klippir ekki bakgrunnshalla á ávöl horn, svo við fjarlægjum það. Tengt, IE9 eyðir óvirkum buttonþáttum, gerir texta gráan með viðbjóðslegum textaskugga sem við getum ekki lagað.

Hnappastærðir

Langar þig í stærri eða minni hnappa? Bættu við .btn-large, .btn-small, eða .btn-minifyrir fleiri stærðir.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Stór hnappur </button>  
  3.   <button class = "btn btn-large" type = "button" > Stór hnappur </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Sjálfgefinn hnappur </button>  
  7.   <button class = "btn" type = "button" > Sjálfgefinn hnappur </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Lítill hnappur </button>  
  11.   <button class = "btn btn-small" type = "button" > Lítill hnappur </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Smáhnappur </button>  
  15.   <button class = "btn btn-mini" type = "button" > Lítill hnappur </button>  
  16. </p>

Búðu til blokkarhnappa - þá sem spanna alla breidd foreldris - með því að bæta við .btn-block.

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

Óvirkt ástand

Láttu hnappa líta út fyrir að vera ósmellanlegir með því að hverfa þá aftur um 50%.

Akkeri þáttur

Bættu .disabledbekknum við <a>hnappa.

Aðal hlekkur Tengill 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Aðaltengill </a>  
  2. <a href = "#" class = "btn btn-large óvirkur" > Tengill </a>

Höfuð upp!Við notum .disabledsem gagnaflokk hér, svipað og almenni .activeflokkurinn, þannig að ekki er krafist forskeyti. Einnig er þessi flokkur aðeins fyrir fagurfræði; þú verður að nota sérsniðið JavaScript til að slökkva á tenglum hér.

Hnappur þáttur

Bættu disabledeigindinni við <button>hnappa.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Aðalhnappur </button>   
  2. <button type = "button" class = "btn btn-large" óvirkt > Hnappur </button>

Einn flokkur, mörg merki

Notaðu .btnbekkinn á <a>, <button>, eða <input>frumefni.

Tengill 
  1. <a class = "btn" href = "" > Tengill </a>  
  2. <button class = "btn" type = "submit" > Hnappur </button>  
  3. <inntaksflokkur = "btn" type = " hnappur" gildi = "Inntak" >   
  4. <inntaksflokkur = "btn" type = " senda" gildi = "Senda" >

Sem besta starfsvenjan, reyndu að passa þáttinn fyrir samhengi þínu til að tryggja samsvarandi flutning í gegnum vafra. Ef þú ert með input, notaðu þá <input type="submit">fyrir hnappinn þinn.

Myndir

Bættu flokkum við <img>frumefni til að stilla myndir auðveldlega í hvaða verkefni sem er.

140x140 140x140 140x140 
  1. <img src = "..." class = "img-hringað" >  
  2. <img src = "..." class = "img-hringur" >  
  3. <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 .

  • tákn-gler
  • tákn-tónlist
  • tákn-leit
  • tákn-umslag
  • tákn-hjarta
  • tákn-stjarna
  • tákn-stjörnu-tóm
  • tákn-notandi
  • táknmynd
  • tákn-þ-stór
  • tákn-þ
  • tákn-lista
  • tákn-ok
  • tákn-fjarlægja
  • tákn-aðdráttur
  • tákn-aðdráttur út
  • slökkt á tákni
  • táknmerki
  • tákn-kóg
  • tákn-rusl
  • tákn-heimili
  • tákn-skrá
  • tákn-tími
  • tákn-vegur
  • tákn-niðurhal-alt
  • tákn-niðurhal
  • tákn-upphleðslu
  • tákn-innhólf
  • tákn-spila-hring
  • tákn-endurtaka
  • tákn-hressa
  • icon-list-alt
  • tákn-lás
  • tákn-fáni
  • tákn-heyrnartól
  • icon-volume-off
  • tákn-hljóðstyrk
  • tákn-hljóðstyrkur
  • tákn-qrcode
  • tákn-strikamerkja
  • táknmerki
  • tákn-merki
  • tákn-bók
  • tákn-bókamerki
  • tákn-prentun
  • táknmyndavél
  • tákn-leturgerð
  • tákn-feitletrað
  • táknmynd-skáletrað
  • tákn-texta-hæð
  • tákn-texta-breidd
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • tákna-listi
  • tákn-inndráttur-vinstri
  • tákn-inndrátt-hægri
  • icon-facetime-video
  • táknmynd
  • tákn-blýantur
  • tákn-kortamerki
  • tákn-stilla
  • tákn-litur
  • icon-edit
  • tákn-deila
  • tákn-athugun
  • tákn-hreyfa
  • tákn-skref-aftur
  • tákn-hrað-aftur
  • táknið afturábak
  • tákn-spilun
  • tákn-hlé
  • tákn-stopp
  • tákn-áfram
  • tákn-spóla áfram
  • tákn-skref-áfram
  • icon-eject
  • icon-chevron-vinstri
  • icon-chevron-hægri
  • tákn-plús-merki
  • tákn-mínus-merki
  • tákn-fjarlægja-merki
  • tákn-ok-merki
  • tákn-spurningar-merki
  • tákn-upplýsingamerki
  • tákn-skjámynd
  • tákn-fjarlægja-hring
  • tákn-ok-hringur
  • tákn-bann-hringur
  • tákn-ör-vinstri
  • tákn-ör-hægri
  • tákn-ör upp
  • tákn-ör-niður
  • icon-share-alt
  • tákn-breyta stærð-full
  • tákn-breyta stærð-lítil
  • tákn-plús
  • tákn-mínus
  • tákn-stjörnu
  • tákn-upphrópunarmerki
  • tákn-gjöf
  • táknblað
  • tákn-eldur
  • tákn-auga-opið
  • tákn-auga-loka
  • tákn-viðvörunarmerki
  • tákn-flugvél
  • tákn-dagatal
  • tákn-handahófi
  • tákn-ummæli
  • tákn-segul
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • tákn-innkaupakörfu
  • tákn-möppu-loka
  • tákn-möppu-opin
  • tákn-breyta stærð-lóðrétt
  • tákn-breyta stærð-lárétt
  • tákn-hdd
  • tákn-nautahorn
  • tákn-bjalla
  • tákn-vottorð
  • icon-thumbs-up
  • icon-thumbs-down
  • tákn-hönd-hægri
  • tákn-hönd-vinstri
  • tákn-hönd upp
  • tákn-hand-down
  • tákn-hring-ör-hægri
  • tákn-hring-ör-vinstri
  • tákn-hring-ör-upp
  • tákn-hring-ör-niður
  • icon-globe
  • tákn- skiptilykill
  • tákn-verkefni
  • táknsía
  • tákn-skjalataska
  • táknmynd á öllum skjánum

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:

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

  1. <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
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  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>
Fellilisti í hnappahóp
Notandi 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Notandi </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "fellivalmynd" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Breyta </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Eyða </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Bann </a></li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Gerðu stjórnanda </a></li>  
  10.   </ul>
  11. </div>
Hnappastærðir
Stjarna Stjarna Stjarna 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Stjarna </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Stjarna </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Stjarna </a>

Leiðsögn

  1. <ul class = "nav nav-listi" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Heim </a></li>   
  3.   <li><a href = "#" ><i class = "táknbók" ></i> Bókasafn </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Forrit </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Ýmislegt </a></li>  
  6. </ul>

Formreitir

  1. <div class = "stjórnhópur" > 
  2.   <label class = "control-label" for = "inputIcon" > Netfang </label>  
  3.   <div class = "stýrir" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "texti" >   
  7.     </div>
  8.   </div>
  9. </div>