Bootstrap

Bażi CSS

Elementi HTML fundamentali stilati u msaħħa bi klassijiet estensibbli.

Irjus up! Dawn id-dokumenti huma għal v2.3.2, li m'għadux appoġġjat uffiċjalment. Iċċekkja l-aħħar verżjoni ta 'Bootstrap!

Tipografija

Intestaturi

L-intestaturi HTML kollha, <h1>permezz <h6>huma disponibbli.

h1. Intestatura 1

h2. Intestatura 2

h3. Intestatura 3

h4. Intestatura 4

h5. Intestatura 5
h6. Intestatura 6

Kopja tal-korp

Id-default globali ta' Bootstrap font-sizehuwa 14px , b'20px . Dan huwa applikat għall- u l-paragrafi kollha. Barra minn hekk, (il-paragrafi) jirċievu marġini t'isfel ta' nofs l-għoli tal-linja tagħhom (10px b'mod awtomatiku).line-height<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Kopja tal-korp taċ-ċomb

Agħmel paragrafu jispikkaw billi żżid .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class = "ċomb" > ... </p>

Mibnija b'Inqas

L-iskala tipografika hija bbażata fuq żewġ varjabbli LESS f'variables.less : @baseFontSizeu @baseLineHeight. L-ewwel hija d-daqs tat-tipa bażi użata matul u t-tieni hija l-għoli tal-linja bażi. Aħna nużaw dawk il-varjabbli u xi matematika sempliċi biex noħolqu l-marġini, paddings, u line-heights tat-tip kollu tagħna u aktar. Ippersonalizzahom u Bootstrap jadatta.

Enfasi

Agħmel użu mit-tags ta' enfasi default ta' HTML bi stili ħfief.

<small>

Biex tneħħi l-enfasi fuq inline jew blokki ta 'test, uża t-tikketta żgħira.

Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala stampar fini.

<p> <żgħir> Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala stampata żgħira. </small> </p>

Bold

Għall-enfasi ta' snippet ta' test b'tipa-piż itqal.

Is-snippet tat-test li ġej hija mogħtija bħala test b'tipa grassa .

<strong> mogħtija bħala test grassett </strong>

Korsiv

Għall-enfasi ta' snippet ta' test bil-korsiv.

Is-snippet tat-test li ġej huwa mogħti bħala test korsiv .

<em> mogħtija bħala test korsiv </em>

Irjus up!Ħossok liberu li tuża <b>u <i>fl-HTML5. <b>huwa maħsub biex jenfasizza kliem jew frażijiet mingħajr ma jwassal importanza addizzjonali filwaqt li <i>huwa l-aktar għal vuċi, termini tekniċi, eċċ.

Klassijiet ta' allinjament

Allinja mill-ġdid it-test faċilment għal komponenti bi klassijiet ta 'allinjament tat-test.

Test allinjat max-xellug.

Test allinjat fiċ-ċentru.

Test allinjat mal-lemin.

  1. <p class = "text-left" > Test allinjat max-xellug. </p> 
  2. <p class = "text-center" > Test allinjat fiċ-ċentru. </p> 
  3. <p class = "text-right" > Test allinjat mal-lemin. </p>

Klassijiet ta' enfasi

Iwassal tifsira permezz tal-kulur b'numru żgħir ta 'klassijiet ta' utilità ta 'enfasi.

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 = "muted" > Fusce dapibus, tellus ac cursus commodo, torttor mauris nibh. </p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "test-error" > 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>

Abbrevjazzjonijiet

Implimentazzjoni stilizzata tal- <abbr>element tal-HTML għall-abbrevjazzjonijiet u l-akronimi biex turi l-verżjoni estiża fuq il-post. L-abbrevjazzjonijiet titleb'attribut għandhom bordura ta' taħt ħafif bit-tikek u cursor ta' għajnuna fuq id-depożitu, li jipprovdi kuntest addizzjonali meta jdur.

<abbr>

Għal test estiż fuq it-tul ta' abbrevjazzjoni, inkludi l- titleattribut.

Abbrevjazzjoni tal-kelma attribut hija attr .

<abbr title = "attribut" > attr </abbr>

<abbr class="initialism">

Żid .initialismma' abbrevjazzjoni għal font-size kemmxejn iżgħar.

HTML huwa l-aħjar ħaġa peress ħobż imqatta '.

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

Indirizzi

Ippreżenta informazzjoni ta 'kuntatt għall-eqreb antenat jew il-korp kollu tax-xogħol.

<address>

Ippreserva l-ifformattjar billi tispiċċa l-linji kollha b' <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Isem sħiħ
[email protected] 
  1. <indirizz>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   San Francisco, CA 94107 <br>
  5.   <abbr title = "Telefon" > P: </abbr> (123) 456-7890 
  6. </indirizz>
  7.  
  8. <indirizz>
  9.   <strong> Isem sħiħ </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </indirizz>

Blockquotes

Biex tikkwota blokki ta' kontenut minn sors ieħor fid-dokument tiegħek.

Blockquote default

Kebbeb <blockquote>madwar kwalunkwe HTML bħala l-kwotazzjoni. Għal kwotazzjonijiet dritti nirrakkomandaw <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3. </blockquote>

Għażliet ta 'blockquote

Bidliet fl-istil u l-kontenut għal varjazzjonijiet sempliċi fuq kwotazzjoni standard standard.

Ismijiet sors

Żid <small>tag biex tidentifika s-sors. Kebbeb l-isem tax-xogħol tas-sors fi <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Xi ħadd famuż fit- Titolu Sors 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3.   <small> Xi ħadd famuż <cite title = "Source Title" > Sors Titolu </cite></small> 
  4. </blockquote>

Wirjiet alternattivi

Uża .pull-rightgħal kwotazzjoni imblukkata floated, allinjata mal-lemin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Xi ħadd famuż fit- Titolu Sors 
  1. <blockquote class = "pull-lemin" > 
  2.   ...
  3. </blockquote>

Listi

Mhux ordnat

Lista ta' oġġetti li fihom l-ordni ma jimpurtax b'mod espliċitu.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer 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 at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Ordnat

Lista ta' oġġetti li fihom l-ordni espliċitament importanti.

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

Unstyled

Neħħi l- list-stylepadding default u tax-xellug fuq oġġetti tal-lista (tfal immedjati biss).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer 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 at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "mhux stil" > 
  2.   <li> ... </li>
  3. </ul>

F'konformità

Poġġi l-oġġetti kollha tal-lista fuq linja waħda bi inline-blocku ftit padding ħafif.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </ul>

Deskrizzjoni

Lista ta' termini bid-deskrizzjonijiet assoċjati tagħhom.

Listi ta' deskrizzjoni
Lista ta 'deskrizzjoni hija perfetta għad-definizzjoni tat-termini.
Euismod
Vestibulum id ligula porta felis euismod sempre 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>

Deskrizzjoni orizzontali

Agħmel termini u deskrizzjonijiet <dl>f'linja maġenb xulxin.

Listi ta' deskrizzjoni
Lista ta 'deskrizzjoni hija perfetta għad-definizzjoni tat-termini.
Euismod
Vestibulum id ligula porta felis euismod sempre 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 sempre eget lacinia
Fusce dapibus, tellus ac cursus commodo, torttor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-orizzontali" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Irjus up!Il-listi ta' deskrizzjoni orizzontali se jaqtgħu termini li huma twal wisq biex jidħlu fil-kolonna tax-xellug text-overflow. F'viewports idjaq, se jinbidlu għat-tqassim default stacked.

Kodiċi

F'konformità

Kebbeb snippets inline tal-kodiċi b' <code>.

Per eżempju, <section>għandhom ikunu mgeżwra bħala inline. 
  1. Per eżempju , <code> & lt ; sezzjoni & gt ;</ code > għandha tkun imgeżwer bħala inline .

Blokk bażiku

Uża <pre>għal linji multipli ta 'kodiċi. Kun żgur li taħrab kwalunkwe parentesi angolari fil-kodiċi għal rendering xieraq.

<p>Kampjun ta' test hawn...</p>
  1. <pre>
  2.   <p>Test tal-kampjun hawn...</p>
  3. </pre>

Irjus up!Kun żgur li żżomm il-kodiċi fi ħdan <pre>it-tikketti kemm jista 'jkun qrib ix-xellug; se tirrendi t-tabs kollha.

Tista' b'għażla żżid il- .pre-scrollableklassi li se tistabbilixxi għoli massimu ta' 350px u tipprovdi scrollbar tal-assi y.

Tabelli

Stili default

Għal stil bażiku—ikkuttunar ħafif u diviżuri orizzontali biss—żid il-klassi bażi .tablema' kwalunkwe <table>.

# Isem Kunjom Isem tal-utent
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-ghasfur @twitter 
  1. <table class = "mejda" > 
  2.   …
  3. </mejda>

Klassijiet fakultattivi

Żid xi waħda mill-klassijiet li ġejjin mal- .tableklassi bażi.

.table-striped

Iżżid zebra-striping ma' kwalunkwe ringiela tal-mejda fi ħdan is -selettur tas <tbody>- :nth-childCSS (mhux disponibbli f'IE7-8).

# Isem Kunjom Isem tal-utent
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-ghasfur @twitter 
  1. <table class = "table table-striped" > 
  2.   …
  3. </mejda>

.table-bordered

Żid fruntieri u kantunieri fit-tond mal-mejda.

# Isem Kunjom Isem tal-utent
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Ġakobb Thornton @xaħam
3 Larry l-Għasfur @twitter 
  1. <table class = "tabella bil-bordijiet tal-mejda" > 
  2.   …
  3. </mejda>

.table-hover

Ippermetti stat ta' ċċaqlaq fuq ringieli tal-mejda fi ħdan <tbody>.

# Isem Kunjom Isem tal-utent
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-Għasfur @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </mejda>

.table-condensed

Jagħmel it-tabelli aktar kompatti billi taqta 'l-ikkuttunar taċ-ċelluli bin-nofs.

# Isem Kunjom Isem tal-utent
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-Għasfur @twitter 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </mejda>

Klassijiet ringieli fakultattivi

Uża klassijiet kuntestwali biex ikkulurit ringieli tat-tabella.

Klassi Deskrizzjoni
.success Tindika azzjoni ta' suċċess jew pożittiva.
.error Jindika azzjoni perikoluża jew potenzjalment negattiva.
.warning Tindika twissija li tista' teħtieġ attenzjoni.
.info Użat bħala alternattiva għall-istili default.
# Prodott Ħlas Meħud Status
1 TB - Kull xahar 01/04/2012 Approvat
2 TB - Kull xahar 02/04/2012 Naqas
3 TB - Kull xahar 03/04/2012 Pendenti
4 TB - Kull xahar 04/04/2012 Ċempel biex tikkonferma 
  1. ...
  2.   < tr class = "suċċess" >
  3.     <td> 1 < /td>
  4.     <td>TB - Kull Xahar</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Approvat</ td >
  7.   </ tr >
  8. ...

Markup tat-tabella appoġġjat

Lista ta' elementi HTML tat-tabella appoġġjati u kif għandhom jintużaw.

Tag Deskrizzjoni
<table> Element ta' tgeżwir għall-wiri ta' data f'format tabulari
<thead> Element tal-kontenitur għar-ringieli tal-header tat-tabella ( <tr>) biex jittikkettaw il-kolonni tat-tabella
<tbody> Element tal-kontenitur għar-ringieli tal-mejda ( <tr>) fil-korp tat-tabella
<tr> Element tal-kontenitur għal sett ta' ċelluli tat-tabella ( <td>jew <th>) li jidher fuq ringiela waħda
<td> Ċellula tat-tabella default
<th> Ċellula speċjali tat-tabella għal tikketti tal-kolonna (jew ringiela, skont l-ambitu u t-tqegħid).
<caption> Deskrizzjoni jew sommarju ta' dak li żżomm it-tabella, speċjalment utli għall-qarrejja tal-iskrin 
  1. <tabella>
  2.   <titlu> ... </caption>
  3.   <thead>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </mejda>

Formoli

Stili default

Kontrolli tal-forma individwali jirċievu stil, iżda mingħajr ebda klassi bażi meħtieġa fuq il- <form>jew bidliet kbar fil-markup. Jirriżulta f'tikketti f'munzelli, allinjati max-xellug fuq il-kontrolli tal-formola.

Leġġenda Eżempju ta' test ta' għajnuna fil-livell ta' blokk hawn. 
  1. <forma>
  2.   <fieldset>
  3.     <leġġenda> Leġġenda </leġġenda>
  4.     <label> Isem it-tikketta </label>
  5.     <input type = "text" placeholder = "Ittajpja xi ħaġa..." >  
  6.     <span class = "help-block" > Eżempju ta' test ta' għajnuna fil-livell ta' blokk hawn. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Iċċekkjani 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Ibgħat </button>  
  11.   </fieldset>
  12. </form>

Taqsim mhux obbligatorju

Inklużi ma 'Bootstrap hemm tliet layouts tal-forom fakultattivi għal każijiet ta' użu komuni.

Formola ta' tfittxija

Żid .form-searchmal-formola u .search-querymal- <input>għal input ta' test extra-tond.

  1. <form class = "form-search" > 
  2.   <input type = "test" class = "input-medium search-query" >  
  3.   <button type = "submit" class = "btn" > Fittex </button>  
  4. </form>

Formola inline

Żid .form-inlinegħal tikketti allinjati max-xellug u kontrolli inline-block għal tqassim kompatt.

  1. <form class = "form-inline" > 
  2.   <input type = "test" class = "input-small" placeholder = "Email" >   
  3.   <input type = "password" class = "input-small" placeholder = "Password" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Ftakarni 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Idħol </button>  
  8. </form>

Forma orizzontali

Il-lemin tallinja t-tikketti u poġġihom f'wiċċ l-ilma lejn ix-xellug biex jidhru fuq l-istess linja bħall-kontrolli. Jeħtieġ l-aktar bidliet fil-markup minn formola awtomatika:

  • Żid .form-horizontalmal-formola
  • Kebbeb it-tikketti u l-kontrolli.control-group
  • Żid .control-labelmat-tikketta
  • Kebbeb kwalunkwe kontrolli assoċjati .controlsgħal allinjament xieraq
  1. <form class = "forma-orizzontali" > 
  2.   <div class = "grupp ta' kontroll" > 
  3.     <label class = "control-label" for = "inputEmail" > Email </label>  
  4.     <div class = "kontrolli" > 
  5.       <input type = "test" id = "inputEmail" placeholder = "Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "grupp ta' kontroll" > 
  9.     <label class = "control-label" for = "inputPassword" > Password </label>  
  10.     <div class = "kontrolli" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Password" >   
  12.     </div>
  13.   </div>
  14.   <div class = "grupp ta' kontroll" > 
  15.     <div class = "kontrolli" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Ftakarni 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Idħol </button>  
  20.     </div>
  21.   </div>
  22. </form>

Kontrolli tal-forma appoġġjati

Eżempji ta' kontrolli ta' formola standard appoġġjati f'format ta' formola eżempju.

Inputs

Il-kontroll tal-forma l-aktar komuni, oqsma ta' input ibbażati fuq it-test. Jinkludi appoġġ għat-tipi kollha HTML5: test, password, datetime, datetime-local, data, xahar, ħin, ġimgħa, numru, email, url, tfittxija, tel, u kulur.

Jeħtieġ l-użu ta 'speċifikat typef'kull ħin.

  1. <input type = "text" placeholder = "Input tat-test" >

Textarea

Kontroll tal-formola li jappoġġja linji multipli ta 'test. Ibdel l- rowsattribut kif meħtieġ.

  1. <textarea rows = " 3" ></textarea>

Checkboxes u radjijiet

Il-kaxxi ta' kontroll huma biex tagħżel għażla waħda jew diversi f'lista filwaqt li r-radjijiet huma biex tagħżel għażla waħda minn ħafna.

Default (munzelli)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" value = "" >  
  3.   L-ewwel għażla hija din u dik—kun żgur li tinkludi għaliex hija kbira
  4. </label>
  5.  
  6. <label class = "radju" > 
  7.   <input type = "radju" name = "optionsRadios" id = "optionsRadios1" value = "option1" iċċekkjata >     
  8.   L-ewwel għażla hija din u dik—kun żgur li tinkludi għaliex hija kbira
  9. </label>
  10. <label class = "radju" > 
  11.   <input type = "radju" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Għażla tnejn tista 'tkun xi ħaġa oħra u l-għażla tagħha se deselect għażla waħda
  13. </label>

Kaxxi ta' kontroll inline

Żid il- .inlineklassi ma 'serje ta' checkboxes jew radjijiet għall-kontrolli jidhru fuq l-istess linja.

  1. <label class = "checkbox inline" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </label>

Jagħżel

Uża l-għażla default jew speċifika a multiple="multiple"biex turi għażliet multipli f'daqqa.


  1. <select>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </select>
  8.  
  9. <select multiple = "multipli" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </select>

Estensjoni tal-kontrolli tal-formola

B'żieda mal-kontrolli eżistenti tal-browser, Bootstrap jinkludi komponenti oħra utli tal-forma.

Inputs prepended u anness

Żid test jew buttuni qabel jew wara kwalunkwe input ibbażat fuq it-test. Innota li l- selectelementi mhumiex appoġġjati hawn.

Għażliet default

Kebbeb .add-onu an inputb'waħda minn żewġ klassijiet biex tehmeż jew tehmeż test ma' input.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "test" placeholder = "Username" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput " type = "test" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

Magħquda

Uża ż-żewġ klassijiet u żewġ istanzi ta' .add-onbiex tipprependi u tehmeż input.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "test" >   
  4.   <span class = "add-on" > .00 </span> 
  5. </div>

Buttuni minflok test

Minflok <span>b'test, uża a .btnbiex tehmeż buttuna (jew tnejn) ma' input.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "test" >   
  3.   <button class = "btn" type = "button" > Mur! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "test" >   
  3.   < klassi tal- buttuna  = "btn" type = "button" > Fittex </button> 
  4.   < klassi tal- buttuna  = "btn" type = "button" > Għażliet </button> 
  5. </div>

Dropdowns tal-buttuni

  1. <div class = "input-append" >
  2.   <input class = "span2" id =   "appendedDropdownButton " type = "test" > 
  3.   <div  class = "btn-group" >
  4.     < klassi tal- buttuna  = "btn dropdown-toggle" data-toggle = "dropdown" > 
  5.       Azzjoni
  6.       <span  class = "caret" ></span>
  7.     </button>
  8.     <ul  class = "menu dropdown" >
  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.       Azzjoni
  5.       <span class = "caret" ></span>
  6.     </button>
  7.     <ul class = "menu dropdown" >
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" tip =    "test" >
  12. </div>
  1. <div class = "input-prepend input-append" >
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       Azzjoni
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "menu dropdown" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " type = "test" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       Azzjoni
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "menu dropdown" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Gruppi dropdown segmentati

  1. <forma>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <input type = "test" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <input type = "test" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Formola ta' tfittxija

  1. <form class = "form-search" > 
  2.   <div class = "input-append" > 
  3.     <input type = "test" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Fittex </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Fittex </button>  
  8.     <input type = "test" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Kontroll tad-daqs

Uża klassijiet ta' daqs relattiv bħal .input-largejew qabbel l-inputs tiegħek mad-daqsijiet tal-kolonna tal-grilja billi tuża .span*klassijiet.

Inputs fil-livell tal-blokk

Agħmel kwalunkwe <input>jew <textarea>element iġib ruħu bħal element fil-livell tal-blokk.

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

Daqs relattiv

  1. <input class = "input-mini" type = "test" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "test" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "test" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "test" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "test" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "test" placeholder = ".input-xxlarge" >

Irjus up!Fil-verżjonijiet futuri, aħna ser inkunu qed nibdlu l-użu ta 'dawn il-klassijiet ta' input relattivi biex jaqblu mad-daqsijiet tal-buttuni tagħna. Per eżempju, .input-largese żżid il-padding u d-daqs tat-tipa ta 'input.

Id-daqs tal-grilja

Uża .span1għal .span12għal inputs li jaqblu mal-istess daqsijiet tal-kolonni tal-grilja.

  1. <input class = "span1" type = "test" placeholder = ".span1" >   
  2. <input class = "span2" type = "test" placeholder = ".span2" >   
  3. <input class = "span3" type = "test" placeholder = ".span3" >   
  4. <select class = "span1" > 
  5.   ...
  6. </select>
  7. <select class = "span2" > 
  8.   ...
  9. </select>
  10. <select class = "span3" > 
  11.   ...
  12. </select>

Għal inputs ta' grilja multipli għal kull linja, uża l- .controls-rowklassi tal-modifikatur għal spazjar xieraq . Hija tpoġġi f'wiċċ l-ilma l-inputs biex tikkollassa l-ispazju abjad, tistabbilixxi l-marġini xierqa, u tneħħi l-float.

  1. <div class = "kontrolli" > 
  2.   <input class = "span5" type = "test" placeholder = ".span5" >   
  3. </div>
  4. <div class = "kontrolli kontrolli-ringiela" > 
  5.   <input class = "span4" type = "test" placeholder = ".span4" >   
  6.   <input class = "span1" type = "test" placeholder = ".span1" >   
  7. </div>
  8. ...

Inputs li ma jistgħux jiġu editjati

Ippreżenta d-dejta f'forma li mhix editjabbli mingħajr ma tuża l-markup attwali tal-formola.

Xi valur hawn 
  1. <span class = "input-xlarge uneditable-input" > Xi valur hawn </span>

Forma azzjonijiet

Tmiem formola bi grupp ta 'azzjonijiet (buttuni). Meta jitqiegħdu fi ħdan .form-actions, il-buttuni awtomatikament jagħmlu inċiż biex jallinjaw mal-kontrolli tal-formola.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Issejvja l-bidliet </button>  
  3.   <button type = "button" class = "btn" > Ikkanċella </button>  
  4. </div>

Test ta' għajnuna

Appoġġ fil-livell inline u blokk għal test ta 'għajnuna li jidher madwar il-kontrolli tal-formoli.

Għajnuna inline

Test ta' għajnuna inline 
  1. <input type = "test" ><span class = "help-inline" > Test ta' għajnuna inline </span>

Blokk għajnuna

Blokk itwal ta' test ta' għajnuna li jinqasam f'linja ġdida u jista' jestendi lil hinn minn linja waħda. 
  1. <input type = "test" ><span class = "help-block" > Blokk itwal ta' test ta' għajnuna li jinkiser fuq linja ġdida u jista' jestendi lil hinn minn linja waħda. </span>

Stati ta' kontroll tal-formola

Ipprovdi feedback lill-utenti jew lill-viżitaturi bi stati bażiċi ta 'feedback dwar il-kontrolli tal-formoli u t-tikketti.

Fokus tad-dħul

outlineAħna nneħħu l- istili default fuq xi kontrolli tal-formola u napplikaw a box-shadowminfloku għal :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Dan huwa ffukat..." >

Inputs mhux validi

Inputs tal-istil permezz tal-funzjonalità default tal-browser b' :invalid. Speċifika a type, żid l- requiredattribut jekk il-qasam mhuwiex fakultattiv, u (jekk applikabbli) speċifika a pattern.

Dan mhux disponibbli fil-verżjonijiet tal-Internet Explorer 7-9 minħabba nuqqas ta' appoġġ għall-psewdo seletturi CSS.

  1. <input class = "span3" type = "email" meħtieġa >

Inputs b'diżabilità

Żid l- disabledattribut fuq input biex tevita l-input tal-utent u tiskatta ħarsa kemmxejn differenti.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Input diżattivat hawn..." diżattivat >

Stati ta' validazzjoni

Bootstrap jinkludi stili ta' validazzjoni għal messaġġi ta' żball, twissija, informazzjoni u suċċess. Biex tuża, żid il-klassi xierqa mal-madwar .control-group.

Xi ħaġa setgħet marret ħażin
Jekk jogħġbok ikkoreġi l-iżball
Isem l-utent huwa meħud
Woohoo! 
  1. <div class = "twissija tal-grupp ta' kontroll" > 
  2.   <label class = "control-label" for = "inputWarning" > Input bi twissija </label>  
  3.   <div class = "kontrolli" > 
  4.     <input type = "test" id = "inputWarning" >  
  5.     <span class = "help-inline" > Xi ħaġa setgħet marret ħażin </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "żball tal-grupp ta' kontroll" > 
  10.   <label class = "control-label" for = "inputError" > Input bi żball </label>  
  11.   <div class = "kontrolli" > 
  12.     <input type = "test" id = "inputError" >  
  13.     <span class = "help-inline" > Jekk jogħġbok ikkoreġi l-iżball </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "info-grupp ta' kontroll" > 
  18.   <label class = "control-label" for = "inputInfo" > Input b'informazzjoni </label>  
  19.   <div class = "kontrolli" > 
  20.     <input type = "test" id = "inputInfo" >  
  21.     <span class = "help-inline" > L- isem tal-utent diġà ttieħed </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "suċċess tal-grupp ta' kontroll" > 
  26.   <label class = "control-label" for = "inputSuccess" > Input b'suċċess </label>  
  27.   <div class = "kontrolli" > 
  28.     <input type = "test" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Buttuni

Buttuni default

L-istili tal-buttuni jistgħu jiġu applikati għal kull ħaġa bil- .btnklassi applikata. Madankollu, tipikament tkun trid tapplika dawn biss għal <a>u <button>elementi għall-aħjar rendering.

Buttuna klassi="" Deskrizzjoni
btn Buttuna griża standard bi gradjent
btn btn-primary Jipprovdi piż viżwali żejjed u jidentifika l-azzjoni primarja f'sett ta 'buttuni
btn btn-info Użat bħala alternattiva għall-istili default
btn btn-success Tindika azzjoni ta' suċċess jew pożittiva
btn btn-warning Jindika li għandha tittieħed kawtela b'din l-azzjoni
btn btn-danger Jindika azzjoni perikoluża jew potenzjalment negattiva
btn btn-inverse Buttuna alternattiva griża skura, mhux marbuta ma' azzjoni jew użu semantiku
btn btn-link Tnaqqas l-enfasi fuq buttuna billi tagħmilha qisha rabta filwaqt li żżomm l-imġieba tal-buttuna

Kompatibilità cross browser

IE9 ma uċuħ gradjenti fl-isfond fuq kantunieri fit-tond, hekk aħna neħħiha. Relatati, IE9 jankifies buttonelementi b'diżabilità, tirrendi t-test griż b'test diżgustanti-dell li ma nistgħux nirranġaw.

Daqsijiet tal-buttuni

Fancy buttuni akbar jew iżgħar? Żid .btn-large, .btn-small, jew .btn-minigħal daqsijiet addizzjonali.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Buttuna kbira </button>  
  3.   <button class = "btn btn-large" type = "button" > Button kbir </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Buttuna default </button>  
  7.   <button class = "btn" type = "button" > Button default </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Buttuna żgħira </button>  
  11.   <button class = "btn btn-small" type = "button" > Button żgħir </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mini buttuna </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini buttuna </button>  
  16. </p>

Oħloq buttuni tal-livell tal-blokki—dawk li jkopru l-wisa’ sħiħa ta’ ġenitur— billi żżid .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Buttuna tal-livell tal-blokk </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Buttuna tal-livell tal-blokk </button>

Stat b'diżabilità

Agħmel li l-buttuni jidhru li ma jistgħux jiġu kklikkjati billi jonqsuhom lura 50%.

Element tal-ankra

Żid il- .disabledklassi mal- <a>buttuni.

Link primarju Link 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Rabta primarja </a>  
  2. <a href = "#" class = "btn btn-large disabled" > Link </a>

Irjus up!Aħna nużaw .disabledbħala klassi ta 'utilità hawn, simili għall- .activeklassi komuni, għalhekk l-ebda prefiss mhu meħtieġ. Ukoll, din il-klassi hija biss għall-estetika; trid tuża JavaScript personalizzat biex tiddiżattiva links hawn.

Element tal-buttuna

Żid l- disabledattribut mal - <button>buttuni.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Buttuna primarja </button>   
  2. <button type = "button" class = "btn btn-large" disabled > Button </button>

Klassi waħda, tikketti multipli

Uża l- .btnklassi fuq element <a>, <button>, jew <input>.

Link 
  1. <a class = "btn" href = "" > Link </a>  
  2. <button class = "btn" type = "submit " > Button </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = " submit" value = "Ibgħat" >

Bħala l-aħjar prattika, ipprova tqabbel l-element għall-kuntest tiegħek biex tiżgura t-tqabbil tar-rendi cross-browser. Jekk għandek input, uża <input type="submit">għall-buttuna tiegħek.

Stampi

Żid klassijiet ma ' <img>element biex faċilment stil immaġini fi kwalunkwe proġett.

140x140 140x140 140x140 
  1. <img src = "..." class = "img-tond" >  
  2. <img src = "..." class = "img-ċirku" >  
  3. <img src = "..." class = "img-polaroid" >

Irjus up! .img-roundedu .img-circlema jaħdmux f'IE7-8 minħabba nuqqas ta ' border-radiusappoġġ.

Ikoni minn Glyphicons

Glifi tal-ikoni

140 ikona f'forma sprite, disponibbli bil-griż skur (default) u abjad, ipprovduti minn Glyphicons .

  • ikona-ħġieġ
  • ikona-mużika
  • ikona-tfittxija
  • ikona-pakkett
  • ikona-qalb
  • ikona-istilla
  • icon-star-vojta
  • ikona-utent
  • ikona-film
  • ikona-th-kbar
  • ikona-th
  • ikona-th-lista
  • ikona-ok
  • ikona-tneħħija
  • ikona-zoom-in
  • icon-zoom-out
  • ikona mitfija
  • ikona-sinjal
  • ikona-cog
  • ikona-żibel
  • ikona-dar
  • ikona-fajl
  • ikona-ħin
  • ikona-triq
  • icon-download-alt
  • ikona-download
  • ikona-upload
  • icon-inbox
  • ikona-play-ċirku
  • ikona-repeti
  • ikona-aġġornament
  • ikona-lista-alt
  • icon-lock
  • ikona-bandiera
  • ikona-headphones
  • icon-volum-off
  • ikona-volum-isfel
  • ikona-volum up
  • ikona-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • ikona-ktieb
  • ikona-bookmark
  • ikona-istampar
  • ikona-kamera
  • ikona-font
  • ikona-tipa grassa
  • ikona-korsiv
  • ikona-test-għoli
  • icon-test-wisa'
  • icon-align-left
  • icon-align-center
  • icon-align-lemin
  • icon-align-justify
  • lista-ikona
  • ikona-inċiż-xellug
  • ikona-inċiż-lemin
  • icon-facetime-video
  • ikona-stampa
  • ikona-lapes
  • ikona-mappa-markatur
  • ikona-aġġustament
  • ikona-lewn
  • icon-edit
  • icon-share
  • ikona-kontroll
  • ikona-ċaqliq
  • ikona-pass-lura
  • ikona-veloċi-lura
  • ikona-lura
  • ikona-play
  • ikona-pawsa
  • ikona-waqfien
  • ikona-quddiem
  • icon-fast-forward
  • ikona-pass-quddiem
  • icon-eject
  • ikona-chevron-xellug
  • ikona-chevron-lemin
  • ikona-plus-sinjal
  • ikona-minus-sinjal
  • icon-neħħi-sinjal
  • ikona-ok-sinjal
  • ikona-mistoqsija-sinjal
  • ikona-informazzjoni-sinjal
  • ikona-screenshot
  • ikona-tneħħija-ċirku
  • ikona-ok-ċirku
  • ikona-projbizzjoni-ċirku
  • ikona-vleġġa-xellug
  • ikona-vleġġa-lemin
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-żgħir
  • icon-plus
  • ikona-minus
  • ikona-asterisk
  • icon-exclamation-sign
  • ikona-rigal
  • ikona-werqa
  • ikona-nar
  • ikona-għajn-miftuħa
  • icon-eye-close
  • ikona-sinjal-twissija
  • ikona-pjan
  • ikona-kalendarju
  • ikona-każwali
  • ikona-kumment
  • ikona-kalamita
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • ikona-folder-miftuħ
  • icon-resize-vertikali
  • icon-resize-orizzontali
  • ikona-hdd
  • ikona-bullhorn
  • ikona-qanpiena
  • ikona-ċertifikat
  • icon-thumbs-up
  • icon-thumbs-down
  • ikona-idejn-lemin
  • ikona-idejn-xellug
  • icon-hand-up
  • icon-hand-down
  • ikona-ċirku-vleġġa-lemin
  • ikona-ċirku-vleġġa-xellug
  • ikona-ċirku-vleġġa-up
  • ikona-ċirku-vleġġa-isfel
  • ikona-globu
  • icon-wrench
  • icon-kompiti
  • ikona-filtru
  • ikona-bagalja
  • ikona-fullscreen

Glyphicons attribuzzjoni

Glyphicons Halflings normalment mhumiex disponibbli b'xejn, iżda arranġament bejn Bootstrap u l-ħallieqa Glyphicons għamlu dan possibbli mingħajr ebda spiża għalik bħala żviluppaturi. Bħala grazzi, nitolbuk tinkludi link fakultattiva lura għal Glyphicons kull meta jkun prattiku.

Kif tuża

L-ikoni kollha jeħtieġu <i>tikketta bi klassi unika, prefissata bi icon-. Biex tuża, poġġi l-kodiċi li ġej kważi kullimkien:

  1. <i klassi = "icon-search" ></i>

Hemm ukoll stili disponibbli għal ikoni invertiti (abjad), lesti bi klassi waħda żejda. Aħna se ninfurzaw speċifikament din il-klassi fuq stati hover u attivi għal links nav u dropdown.

  1. <i klassi = "ikona-tfittxija ikona-abjad" ></i>

Irjus up!Meta tuża ħdejn strings ta 'test, bħal fil-buttuni jew nav links, kun żgur li tħalli spazju wara t- <i>tikketta għal spazjar xieraq.

Eżempji ta' ikoni

Użahom f'buttuni, gruppi ta 'buttuni għal toolbar, navigazzjoni, jew inputs ta' formola prepended.

Buttuni

Grupp tal-buttuni f'toolbar tal-buttuni
  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>
Dropdown fi grupp ta 'buttuni
Utent 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "ikona-utent ikona-abjad" ></i> Utent </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "menu dropdown" > 
  5.     <li><a href = "#" ><i class = "ikona-lapes" ></i> Editja </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Ħassar </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Projbizzjoni </a></li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Agħmel amministratur </a></li>  
  10.   </ul>
  11. </div>
Daqsijiet tal-buttuni
Stilla Stilla Stilla 
  1. <a class = "btn btn-large" href = "#" ><i class = "ikona-istilla" ></i> Star </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "ikona-istilla" ></i> Star </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "ikona-istilla" ></i> Star </a>

Navigazzjoni

  1. <ul class = "nav nav-list" > 
  2.   <li class = "attiv" ><a href = "#" ><i class = "ikona-dar ikona-abjad" ></i> Dar </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Librerija </a></li>  
  4.   <li><a href = "#" ><i class = "ikona-lapes" ></i> Applikazzjonijiet </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Misc </a></li>  
  6. </ul>

Form fields

  1. <div class = "grupp ta' kontroll" > 
  2.   <label class = "control-label" for = "inputIcon" > Indirizz elettroniku </label>  
  3.   <div class = "kontrolli" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "ikona-pakkett" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "test" >   
  7.     </div>
  8.   </div>
  9. </div>