Bootstrap

Grunn CSS

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

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æð (9 px 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>

<strong>

Til að leggja áherslu á textabrot með mikilvægum

Eftirfarandi textabútur er birtur sem feitletraður texti .

<strong> sýndur sem feitletraður texti </strong>

<em>

Fyrir að leggja áherslu á textabrot með streitu

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.

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 = "attribute" class = "initialism" > attr </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 blockqoute

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

Listi yfir hluti með enga list-styleeða viðbótar vinstri bólstrun.

  • 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ý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 æ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>
  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 í boði í IE7-IE8).

# 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ð.
.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ð 
  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öð, fer eftir umfangi og staðsetningu) merki
Verður að nota innan a<thead>
<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.   <legend> Legend </legend>
  3.   <label> Heiti merkimiða </label>
  4.   <input type = "text" placeholder = "Sláðu inn eitthvað…" >  
  5.   <span class = "help-block" > Dæmi um hjálpartexta á blokkarstigi hér. </span> 
  6.   <label class = "checkbox" > 
  7.     <input type = "checkbox" > Skoðaðu mig 
  8.   </label>
  9.   <button type = "submit" class = "btn" > Senda </button>  
  10. </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.   <input type = "password" class = "input-small" staðgengill = "Lykilorð" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Mundu eftir mér 
  6.   </label>
  7.   <button type = "submit" class = "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
Goðsögn 
  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 roweigindinni 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><input class = "span2" id = "prependedInput" size = "16" type = "text" placeholder = "Notendanafn" >      
  3. </div>
  4. <div class = "inntak-viðbæta" > 
  5.   <input class = "span2" id = "appendedInput " size = "16" type = "text" ><span class = "add-on" > .00 </span>     
  6. </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 = "add-on" > $ </span><input class = "span2" id = "appendedPrependedInput " size = "16" type = "text" ><span class = "add-on" > .00 </span>      
  3. </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 " size = "16" type = "text" ><button class = "btn" type = "button" > Farðu! </hnappur>      
  3. </div>
  4.  
  5. <div class = "inntak-viðbæta" > 
  6.   <input class = "span2" id = "appendedInputButtons " size = "16" type = "text" ><button class = "btn" type = "button" > Leita </button><button class = "btn" type = "hnappur" > Valkostir </button>        
  7. </div>

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.

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 framlegð 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-horizontalhnappinn 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..." >

Ó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- 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
Ú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. <div class = "stjórnhópsvilla" > 
  9.   <label class = "control-label" for = "inputError" > Inntak með villu </label>  
  10.   <div class = "stýrir" > 
  11.     <input type = "text" id = "inputError" >  
  12.     <span class = "help-inline" > Vinsamlegast leiðréttu villuna </span> 
  13.   </div>
  14. </div>
  15. <div class = "árangur stjórnunarhóps" > 
  16.   <label class = "control-label" for = "inputSuccess" > Inntak með árangri </label>  
  17.   <div class = "stýrir" > 
  18.     <input type = "text" id = "inputSuccess" >  
  19.     <span class = "help-inline" > Woohoo! </span> 
  20.   </div>
  21. </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.

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.

  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 höfunda Glyphicons hefur gert þetta mögulegt án kostnaðar fyrir þig sem þróunaraðila. 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.  
  4.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  7.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  8.   </div>
  9. </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>
Lítill takki
  1. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i></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><input class = "span2" id = "inputIcon" type = "texti" >     
  6.   </div>
  7. </div>