Bootstrap

Base nga CSS

Ang sukaranan nga mga elemento sa HTML gi-istilo ug gipauswag sa mga mapadako nga klase.

Tipograpiya

Mga ulohan

Ang tanan nga mga ulohan sa HTML, <h1>pinaagi <h6>sa magamit.

h1. Ulohan 1

h2. Ulohan 2

h3. Ulohan 3

h4. Ulohan 4

h5. Ulohan 5
h6. Ulohan 6

Kopya sa lawas

Ang global default sa Bootstrap font-sizemao ang 14px , nga line-heightadunay 20px . Kini gipadapat sa <body>ug sa tanang paragraph. Dugang pa, <p>(mga paragraph) makadawat ug ubos nga margin nga katunga sa ilang line-height (10px sa default).

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 ug eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Panguna nga kopya sa lawas

Paghimo og usa ka parapo nga talagsaon pinaagi sa pagdugang .lead.

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

<p class = "tingga" > ... </p>

Gitukod uban sa Gamay

Ang typographic nga sukdanan gibase sa duha ka LABING baryable sa variables.less : @baseFontSizeug @baseLineHeight. Ang una mao ang base nga gidak-on sa font nga gigamit sa tibuok ug ang ikaduha mao ang base-line-gitas-on. Gigamit namo ang mga variable ug pipila ka yano nga matematika aron mahimo ang mga margin, padding, ug taas nga linya sa tanan namon nga tipo ug daghan pa. Ipasibo kini ug ang Bootstrap mopahiangay.

Pagpasiugda

Gamita ang default nga emphasis nga tag sa HTML nga adunay gaan nga mga estilo.

<small>

Para sa de-emphasizing inline o blocks sa text, gamita ang gamay nga tag.

Kini nga linya sa teksto gituyo nga isipon nga maayong pag-imprinta.

<p> <gamay> Kini nga linya sa teksto gituyo nga isipon nga maayo nga pag-imprinta. </gamay> </p>

Maisogon

Alang sa paghatag og gibug-aton sa usa ka snippet sa teksto nga adunay mas bug-at nga font-weight.

Ang mosunod nga snippet sa teksto gihubad nga bold nga teksto .

<strong> gihubad isip bold nga teksto </strong>

Mga italiko

Alang sa paghatag gibug-aton sa usa ka snippet sa teksto nga adunay mga italiko.

Ang mosunod nga snippet sa teksto gihubad ingon nga italicized nga teksto .

<em> gihubad isip italicized nga teksto </em>

Taas ang ulo!Mobati nga gawasnon sa paggamit <b>ug <i>sa HTML5. <b>gituyo aron ipasiugda ang mga pulong o hugpong sa mga pulong nga wala maghatag dugang nga importansya samtang <i>kadaghanan alang sa tingog, teknikal nga mga termino, ug uban pa.

Mga klase sa pag-align

Dali nga i-realign ang teksto sa mga sangkap nga adunay mga klase sa pag-align sa teksto.

Nakalinya sa wala nga teksto.

Gi-align sa tunga nga teksto.

Gi-align sa tuo nga teksto.

  1. <p class = "text-left" > Gi-align sa wala nga teksto. </p> 
  2. <p class = "text-center" > Gi-align sa tunga nga teksto. </p> 
  3. <p class = "text-right" > Right aligned nga teksto. </p>

Mga klase sa paghatag gibug-aton

Ipahayag ang kahulogan pinaagi sa kolor uban sa pipila ka empasis utility classes.

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. Espesye sa tanom nga bulak ang 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, tortor mauris nibh. </p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Espesye sa tanom nga bulak ang Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, kay dili commodo luctus, walay erat porttitor ligula. </p>

Mga minubo

Gi-istilo nga pagpatuman sa <abbr>elemento sa HTML para sa mga abbreviation ug acronym aron ipakita ang gipalapdan nga bersyon sa hover. Ang mga pinamubo nga adunay usa ka titleattribute adunay usa ka light dotted bottom border ug usa ka help cursor sa hover, nga naghatag og dugang nga konteksto sa hover.

<abbr>

Para sa gipalapdan nga teksto sa taas nga hover sa usa ka minubo, iapil ang titleattribute.

Ang minubo sa pulong nga attribute kay attr .

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

<abbr class="initialism">

Idugang .initialismsa abbreviation para sa mas gamay nga font-size.

Ang HTML mao ang labing maayo nga butang sukad sa hiniwa nga tinapay.

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

Mga adres

Ipresentar ang impormasyon sa pagkontak alang sa labing duol nga katigulangan o sa tibuok lawas sa trabaho.

<address>

Ipreserbar ang pag-format pinaagi sa pagtapos sa tanang linya sa <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Tibuok Ngalan
[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 = "Telepono" > P: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <address>
  9.   <strong> Tibuok Ngalan </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </address>

Blockquotes

Alang sa pagkutlo sa mga bloke sa sulod gikan sa laing tinubdan sulod sa imong dokumento.

Default nga blockquote

Ibutang <blockquote>ang bisan unsang HTML ingon nga kinutlo. Alang sa tul-id nga mga kinutlo among girekomendar ang usa ka <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>

Mga kapilian sa blockquote

Ang mga pagbag-o sa istilo ug sulud alang sa yano nga mga kalainan sa usa ka sagad nga blockquote.

Pagngalan ug tinubdan

Idugang <small>ang tag alang sa pag-ila sa tinubdan. I-wrap ang ngalan sa source work sa <cite>.

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

Usa ka tawo nga bantog sa Source Title 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3.   <small> Usa ka sikat nga <cite title = "Source Title" > Source Title </cite></small> 
  4. </blockquote>

Kapuli nga mga pagpakita

Gamita .pull-rightpara sa usa ka naglutaw, na-align sa tuo nga blockquote.

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

Usa ka tawo nga bantog sa Source Title 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </blockquote>

Mga lista

Wala ma-order

Usa ka lista sa mga butang diin ang han-ay dili klaro nga hinungdanon.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem ug masa
  • Facilisis sa pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Espesye sa tanom nga bulak ang Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat ug
  • Faucibus porta lacus fringilla vel
  • Aenean naglingkod amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Nagmando

Usa ka lista sa mga butang diin ang han - ay hinungdanon kaayo.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem ug masa
  4. Facilisis sa pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean naglingkod amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Dili istilo

Kuhaa ang default list-styleug wala nga padding sa mga butang sa lista (mga bata lang).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem ug masa
  • Facilisis sa pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Espesye sa tanom nga bulak ang Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat ug
  • Faucibus porta lacus fringilla vel
  • Aenean naglingkod amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "dili estilo" > 
  2.   <li> ... </li>
  3. </ul>

Inline

Ibutang ang tanan nga mga butang sa lista sa usa ka linya nga adunay inline-blockgamay nga padding.

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

Deskripsyon

Usa ka lista sa mga termino uban sa ilang kaubang mga paghulagway.

Mga lista sa paghulagway
Ang usa ka lista sa paghulagway perpekto alang sa pagtino sa mga termino.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida ug eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Horizontal nga paghulagway

Paghimo mga termino ug mga paghubit sa <dl>linya sa kilid.

Mga lista sa paghulagway
Ang usa ka lista sa paghulagway perpekto alang sa pagtino sa mga termino.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida ug eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Espesye sa tanom nga bulak ang Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Taas ang ulo!Ang pinahigda nga mga lista sa deskripsyon moputol sa mga termino nga taas kaayo aron mohaum sa wala nga kolum nga ayuhon text-overflow. Sa mas pig-ot nga viewports, sila mag-ilis sa default stacked layout.

Code

Inline

I-wrap ang inline nga mga snippet sa code gamit ang <code>.

Pananglitan, <section>kinahanglan nga giputos ingon inline. 
  1. Pananglitan , <code > & lt ; seksyon & gt ;</ code > kinahanglan nga giputos ingon inline .

Basic block

Gigamit <pre>alang sa daghang linya sa code. Siguruha nga makalikay sa bisan unsang mga anggulo nga bracket sa code alang sa husto nga paghubad.

<p>Sample nga teksto dinhi...</p>
  1. <pre>
  2.   <p>Sample nga teksto dinhi...</p>
  3. </pre>

Taas ang ulo!Siguroha nga ibutang ang code sulod sa <pre>mga tag nga duol sa wala kutob sa mahimo; kini maghatag sa tanan nga mga tab.

Mahimo nimong idugang ang .pre-scrollableklase nga magbutang usa ka taas nga gitas-on nga 350px ug maghatag usa ka y-axis scrollbar.

Mga lamesa

Default nga mga estilo

Para sa batakang pag-istilo—light padding ug mga horizontal divider lang—idugang ang base nga klase .tablesa bisan unsang <table>.

# Unang Ngalan Apelyido Username
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry Ang langgam @twitter 
  1. < klase sa lamesa = "lamesa" > 
  2.   …
  3. </table>

Opsyonal nga mga klase

Idugang ang bisan unsa sa mosunod nga mga klase sa .tablebase nga klase.

.table-striped

Nagdugang og zebra-striping sa bisan unsang laray sa lamesa sulod sa <tbody>pinaagi sa :nth-childCSS selector (dili magamit sa IE7-8).

# Unang Ngalan Apelyido Username
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry Ang langgam @twitter 
  1. <table class = "table table-striped" > 
  2.   …
  3. </table>

.table-bordered

Idugang ang mga utlanan ug lingin nga mga kanto sa lamesa.

# Unang Ngalan Apelyido Username
1 Mark Si Otto @mdo
Mark Si Otto @getbootstrap
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter 
  1. <table class = "table table-bordered" > 
  2.   …
  3. </table>

.table-hover

I-enable ang usa ka hover state sa mga laray sa lamesa sulod sa usa ka <tbody>.

# Unang Ngalan Apelyido Username
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

Naghimo sa mga lamesa nga mas compact pinaagi sa pagputol sa cell padding sa tunga.

# Unang Ngalan Apelyido Username
1 Mark Si Otto @mdo
2 Jacob Thornton @tambok
3 Larry ang Langgam @twitter 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </table>

Opsyonal nga mga klase sa laray

Gamita ang mga klase sa konteksto sa pagkolor sa mga laray sa lamesa.

Klase Deskripsyon
.success Nagpakita sa usa ka malampuson o positibo nga aksyon.
.error Nagpakita ug delikado o posibleng negatibo nga aksyon.
.warning Nagpakita og usa ka pasidaan nga tingali nagkinahanglan og pagtagad.
.info Gigamit isip alternatibo sa mga default nga estilo.
# Produkto Gikuha ang bayad Status
1 TB - Buwan 01/04/2012 Giaprobahan
2 TB - Buwan 02/04/2012 Gibalibaran
3 TB - Buwan 03/04/2012 Naghulat
4 TB - Buwan 04/04/2012 Tawag sa pagkumpirma 
  1. ...
  2.   < tr class = "kalampusan" >
  3.     <td> 1 < /td>
  4.     <td>TB - Bulanan</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Aprobahan</ td >
  7.   </ tr >
  8. ...

Gisuportahan nga marka sa lamesa

Listahan sa gisuportahan nga mga elemento sa HTML sa lamesa ug kung unsaon kini gamiton.

Tag Deskripsyon
<table> Pagputos nga elemento alang sa pagpakita sa datos sa usa ka tabular nga pormat
<thead> Elemento sa sudlanan alang sa mga laray sa header sa lamesa ( <tr>) aron markahan ang mga kolum sa lamesa
<tbody> Kontainer nga elemento para sa mga laray sa lamesa ( <tr>) sa lawas sa lamesa
<tr> Container element para sa set sa table cell ( <td>o <th>) nga makita sa usa ka laray
<td> Default nga selyula sa lamesa
<th> Espesyal nga table cell para sa column (o row, depende sa scope ug placement) nga mga label
<caption> Deskripsyon o summary sa kung unsa ang gihuptan sa lamesa, labi na mapuslanon alang sa mga magbabasa sa screen 
  1. <lamesa>
  2.   <caption> ... </caption>
  3.   <ulo>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </head>
  9.   <lawas>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </table>

Mga porma

Default nga mga estilo

Ang indibidwal nga mga kontrol sa porma makadawat og estilo, apan walay gikinahanglan nga base nga klase sa <form>o dagkong kausaban sa markup. Mga resulta sa stacked, left-aligned nga mga label sa ibabaw sa mga kontrol sa porma.

leyenda Pananglitan nga teksto sa tabang sa lebel sa block dinhi. 
  1. <porma>
  2.   <fieldset>
  3.     <legend> Legend </legend>
  4.     <label> Ngalan sa label </label>
  5.     <input type = "text" placeholder = "Type something..." >  
  6.     <span class = "help-block" > Pananglitan nga block-level help text dinhi. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Susiha ko 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Isumite </button>  
  11.   </fieldset>
  12. </porma>

Opsyonal nga mga layout

Lakip sa Bootstrap mao ang tulo ka opsyonal nga porma nga mga layout alang sa kasagarang mga kaso sa paggamit.

Pagpangita nga porma

Idugang .form-searchsa porma ug .search-querysa <input>para sa extra-rounded text input.

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

Inline nga porma

Idugang .form-inlinepara sa left-aligned nga mga label ug inline-block nga mga kontrol para sa usa ka compact layout.

  1. <form class = "porma-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "Email" >   
  3.   <input type = "password" class = "input-small" placeholder = "Password" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Hinumdumi ko 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Sign in </button>  
  8. </porma>

Horizontal nga porma

I-align sa tuo ang mga label ug ipalutaw kini sa wala aron makita kini sa parehas nga linya sa mga kontrol. Nagkinahanglan sa pinakadaghang kausaban sa markup gikan sa default nga porma:

  • Idugang .form-horizontalsa porma
  • I-wrap ang mga label ug mga kontrol.control-group
  • Idugang .control-labelsa label
  • I-wrap ang bisan unsang kaubang mga kontrol .controlspara sa hustong paglinya
  1. <porma nga klase  = "form-horizontal" >
  2.   <div nga klase  = "kontrol-grupo" >
  3.     <label class = "control-label" para sa = "inputEmail"   > Email </label>
  4.     <div nga klase  = "kontrol" >
  5.       <input type = "text" id = "inputEmail" placeholder    = "Email" >
  6.     </div>
  7.   </div>
  8.   <div class = "kontrol-grupo" >
  9.     <label class = "control-label" for = "inputPassword" > Password   </label>
  10.     <div class = "kontrol" >
  11.       <input type = "password" id = "inputPassword" placeholder = "Password" >   
  12.     </div>
  13.   </div>
  14.   <div class = "kontrol-grupo" > 
  15.     <div class = "kontrol" > 
  16.       <label class = "checkbox" >
  17.         <input type = "checkbox" > Hinumdumi ko 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Sign in </button>  
  20.     </div>
  21.   </div>
  22. </porma>

Gisuportahan nga mga kontrol sa porma

Mga pananglitan sa standard nga mga kontrol sa porma nga gisuportahan sa usa ka pananglitan nga layout sa porma.

Mga input

Labing kasagaran nga pagkontrol sa porma, mga natad sa input nga nakabase sa teksto. Naglakip sa suporta alang sa tanang matang sa HTML5: text, password, datetime, datetime-local, petsa, bulan, oras, semana, numero, email, url, search, tel, ug kolor.

Nagkinahanglan sa paggamit sa usa ka espesipiko typesa tanang panahon.

  1. <input type = "text" placeholder = "Text input" >

Textarea

Pagkontrol sa porma nga nagsuporta sa daghang linya sa teksto. Usba rowsang attribute kon gikinahanglan.

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

Mga checkbox ug radyo

Ang mga checkbox kay para sa pagpili og usa o ubay-ubay nga mga opsyon sa usa ka lista samtang ang mga radyo para sa pagpili og usa ka opsyon gikan sa daghan.

Default (stacked)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" value = ""   >
  3.   Ang kapilian usa mao kini ug kana—siguruha nga iapil kung ngano nga kini maayo
  4. </label>
  5.  
  6. <label class = "radyo" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" gisusi >     
  8.   Ang kapilian usa mao kini ug kana—siguruha nga iapil kung ngano nga kini maayo
  9. </label>
  10. <label class = "radyo" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Ang kapilian nga duha mahimong lain nga butang ug ang pagpili niini magtangtang sa kapilian nga usa
  13. </label>

Mga inline nga checkbox

Idugang ang .inlineklase sa sunod-sunod nga mga checkbox o radyo para sa mga kontrol makita sa samang linya.

  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>

Nagpili

Gamita ang default nga kapilian o ipiho ang usa multiple="multiple"aron ipakita ang daghang mga kapilian sa usa ka higayon.


  1. <pagpili>
  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 = "multiple" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </select>

Pagpalapad sa mga kontrol sa porma

Ang pagdugang sa ibabaw sa kasamtangan nga mga kontrol sa browser, ang Bootstrap naglakip sa uban pang mapuslanon nga mga sangkap sa porma.

Giandam ug gidugang nga mga input

Idugang ang teksto o mga buton sa wala pa o pagkahuman sa bisan unsang input nga gibase sa teksto. Hinumdomi nga ang selectmga elemento wala gisuportahan dinhi.

Default nga mga kapilian

I-wrap ang usa .add-onug usa inputsa usa sa duha ka klase aron i-prepend o idugang ang teksto sa usa ka input.

@

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

Gihiusa

Gamita ang duha ka klase ug duha ka higayon sa .add-onpag-prepend ug pagdugang og input.

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

Mga buton imbes nga teksto

Imbis nga <span>adunay teksto, gamita ang a .btnaron i-attach ang usa ka buton (o duha) sa usa ka input.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton" type = "text" >   
  3.   <button class = "btn" type = "button" > Lakaw! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons" type = "text" >   
  3.   <button class = "btn" type = "button" > Pangitaa </button>  
  4.   <button class = "btn" type = "button" > Opsyon </button>  
  5. </div>

Mga dropdown sa buton

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

Gibahin nga dropdown nga mga grupo

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

Pagpangita nga porma

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

Pagkontrol sa gidak-on

Gamita ang relatibong gidak-on nga mga klase sama sa .input-largeo pagpares sa imong mga input sa mga gidak-on sa kolum sa grid gamit ang .span*mga klase.

Pag-block sa lebel sa mga input

Himoa ang bisan unsa <input>o <textarea>elemento nga molihok sama sa usa ka block level nga elemento.

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

Relatibong gidak-on

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

Taas ang ulo!Sa umaabot nga mga bersyon, usbon namo ang paggamit niining mga relatibong klase sa input aron ipaangay ang among mga gidak-on sa buton. Pananglitan, .input-largemadugangan ang padding ug font-size sa usa ka input.

Pagsukod sa grid

Gamita .span1sa .span12para sa mga input nga motakdo sa parehas nga gidak-on sa mga kolum sa grid.

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

Alang sa daghang mga input sa grid matag linya, gamita ang .controls-rowklase sa modifier alang sa husto nga gilay-on . Gipalutaw niini ang mga input aron mahugno ang white-space, nagtakda sa tukma nga mga margin, ug nagtangtang sa float.

  1. <div class = "kontrol" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "nagkontrol sa control-row" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

Dili ma-edit nga mga input

Ipresentar ang datos sa porma nga dili ma-edit nga walay paggamit sa aktuwal nga markup sa porma.

Pipila ka bili dinhi 
  1. <span class = "input-xlarge uneditable-input" > Pipila ka bili dinhi </span>

Porma nga mga aksyon

Tapuson ang usa ka porma nga adunay grupo sa mga aksyon (mga buton). Kung ibutang sa sulod sa usa ka .form-actions, ang mga buton awtomatik nga mag-indent aron maglinya sa mga kontrol sa porma.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > I-save ang mga kausaban </button>  
  3.   <button type = "button" class = "btn" > Cancel </button>  
  4. </div>

Tabang text

Suporta sa lebel sa inline ug block para sa tabang nga teksto nga makita sa palibot sa mga kontrol sa porma.

Inline nga tabang

Inline nga teksto sa tabang 
  1. <input type = "text" ><span class = "help-inline" > Inline nga tabang nga text </span>

I-block ang tabang

Usa ka mas taas nga bloke sa teksto sa tabang nga maputol sa usa ka bag-ong linya ug mahimong molapas sa usa ka linya. 
  1. <input type = "text" ><span class = "help-block" > Usa ka mas taas nga block sa text sa tabang nga maputol ngadto sa bag-ong linya ug mahimong molapas sa usa ka linya. </span>

Mga estado sa pagkontrol sa porma

Paghatag og feedback sa mga tiggamit o bisita nga adunay sukaranan nga mga estado sa feedback sa mga kontrol sa porma ug mga label.

Input focus

Among tangtangon ang mga default outlinenga estilo sa pipila ka mga kontrol sa porma ug i-apply ang usa box-shadowsa dapit niini alang sa :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Kini naka-focus..." >

Dili balido nga mga input

Style inputs pinaagi sa default browser functionality uban sa :invalid. Ipiho ang usa ka type, idugang ang requiredhiyas kung ang uma dili opsyonal, ug (kon mahimo) ipiho ang usa ka pattern.

Dili kini magamit sa mga bersyon sa Internet Explorer 7-9 tungod sa kakulang sa suporta alang sa CSS pseudo selectors.

  1. <input class = "span3" type = "email" gikinahanglan >

Mga disabled nga input

Idugang ang disabledattribute sa usa ka input aron mapugngan ang user input ug mag-trigger og gamay nga lahi nga hitsura.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Disabled input dinhi..." disabled >

Mga estado sa validation

Ang Bootstrap naglakip sa mga estilo sa pag-validate alang sa sayup, pasidaan, impormasyon, ug mga mensahe sa kalampusan. Aron magamit, idugang ang angay nga klase sa palibot .control-group.

Tingali adunay nahitabo nga sayup
Palihog tul-ira ang sayop
Gikuha ang username
Woohoo! 
  1. <div class = "pahimangno sa control-group" > 
  2.   <label class = "control-label" for = "inputWarning" > Input nga may warning </label>  
  3.   <div class = "kontrol" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > May nasayop tingali </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "control-group error" > 
  10.   <label class = "control-label" for = "inputError" > Input nga adunay sayop </label>  
  11.   <div class = "kontrol" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Palihog tul-ira ang sayop </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "inpormasyon sa control-group" > 
  18.   <label class = "control-label" for = "inputInfo" > Input nga adunay impormasyon </label>  
  19.   <div class = "kontrol" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Gikuha na ang username </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "kontrol-grupo nga kalampusan" > 
  26.   <label class = "control-label" for = "inputSuccess" > Input nga adunay kalampusan </label>  
  27.   <div class = "kontrol" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Mga butones

Default nga mga buton

Ang mga istilo sa buton mahimong magamit sa bisan unsang butang nga gipadapat sa .btnklase. Bisan pa, kasagaran gusto nimo nga gamiton kini sa mga elemento lamang <a>ug <button>alang sa labing kaayo nga paghubad.

Butang klase="" Deskripsyon
btn Standard nga gray nga butones nga adunay gradient
btn btn-primary Naghatag dugang nga gibug-aton sa panan-aw ug nagpaila sa panguna nga aksyon sa usa ka hugpong sa mga buton
btn btn-info Gigamit isip alternatibo sa mga default nga estilo
btn btn-success Nagpakita sa usa ka malampuson o positibo nga aksyon
btn btn-warning Nagpakita nga kinahanglan nga mag-amping sa kini nga aksyon
btn btn-danger Nagpakita ug delikado o posibleng negatibo nga aksyon
btn btn-inverse Alternate dark gray nga butones, wala gihigot sa semantiko nga aksyon o paggamit
btn btn-link I-deemphasize ang usa ka buton pinaagi sa paghimo niini nga sama sa usa ka link samtang gipadayon ang pamatasan sa buton

Cross browser compatibility

Ang IE9 wala mag-crop sa mga gradient sa background sa mga lingin nga mga kanto, mao nga among tangtangon kini. Nalambigit, IE9 jankifies disabled buttonelemento, rendering teksto gray uban sa usa ka ngil-ad nga text-anino nga kita dili ayuhon.

Mga gidak-on sa butones

Gusto nga mas dako o mas gagmay nga mga buton? Idugang .btn-largeang , .btn-small, o .btn-minipara sa dugang nga mga gidak-on.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Dako nga buton </button>  
  3.   <button class = "btn btn-large" type = "button" > Dako nga buton </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Default nga buton </button>  
  7.   <button class = "btn" type = "button" > Default nga buton </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Gamay nga buton </button>  
  11.   <button class = "btn btn-small" type = "button" > Gamay nga buton </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Mini button </button>  
  15.   <button class = "btn btn-mini" type = "button" > Mini button </button>  
  16. </p>

Paghimo og block level nga mga buton—kadtong mosangkad sa tibuok gilapdon sa ginikanan—pinaagi sa pagdugang .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>

Baldado nga estado

Himoa nga ang mga buton tan-awon nga dili ma-click pinaagi sa pagwagtang niini balik sa 50%.

Angkla nga elemento

Idugang ang .disabledklase sa <a>mga buton.

Panguna nga link Link 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Panguna nga link </a>  
  2. <a href = "#" class = "btn btn-large disabled" > Link </a>

Taas ang ulo!Gigamit namon .disabledingon usa ka klase sa utility dinhi, parehas sa kasagaran nga .activeklase, busa wala’y prefix nga gikinahanglan. Usab, kini nga klase alang lamang sa aesthetic; kinahanglan nimong gamiton ang custom nga JavaScript aron ma-disable ang mga link dinhi.

Butang nga elemento

Idugang ang disabledattribute sa <button>mga buton.

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

Usa ka klase, daghang tag

Gamita ang .btnklase sa usa ka <a>, <button>, o <input>elemento.

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 = "Submit" >

Isip usa ka labing maayo nga praktis, sulayi nga ipares ang elemento alang sa imong konteksto aron masiguro nga magkatugma ang cross-browser nga paghubad. Kung naa kay input, gamita ang <input type="submit">para sa imong buton.

Mga larawan

Idugang ang mga klase sa usa ka <img>elemento aron dali nga ma-estilo ang mga imahe sa bisan unsang proyekto.

140x140 140x140 140x140 
  1. <img src = "..." class = "img-rounded" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." class = "img-polaroid" >

Taas ang ulo! .img-roundedug .img-circledili magtrabaho sa IE7-8 tungod sa kakulang sa border-radiussuporta.

Mga icon pinaagi sa Glyphicons

Mga glyph sa icon

140 nga mga icon sa sprite nga porma, magamit sa itom nga grey (default) ug puti, nga gihatag sa Glyphicons .

  • icon-bildo
  • icon-musika
  • icon-pagpangita
  • icon-sobre
  • icon-kasingkasing
  • icon-bituon
  • icon-star-walay sulod
  • icon-user
  • icon-film
  • icon-ika-dako
  • icon-ika
  • icon-ika-lista
  • icon-ok
  • icon-pagtangtang
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-basura
  • icon-balay
  • icon-file
  • icon-panahon
  • icon-dalan
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-lingin
  • icon-subli
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tag
  • icon-libro
  • icon-bookmark
  • icon-print
  • icon-kamera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-gitas-on
  • icon-text-lapad
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-listahan
  • icon-indent-left
  • icon-indent-tuo
  • icon-facetime-video
  • icon-larawan
  • icon- lapis
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • pagsusi sa icon
  • icon-lihok
  • icon-lakang-paatras
  • icon-fast-backward
  • icon-paatras
  • icon-play
  • icon-pause
  • icon-stop
  • icon-sa unahan
  • icon-fast-forward
  • icon-lakang-sa unahan
  • icon-eject
  • icon-chevron-wala
  • icon-chevron-tuo
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-pagtangtang-lingin
  • icon-ok-lingin
  • icon-ban-lingin
  • icon-arrow-wala
  • icon-arrow-tuo
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-puno
  • icon-resize-gamay
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-regalo
  • icon-dahon
  • icon-sunog
  • icon-mata-bukas
  • icon-eye-close
  • icon-warning-sign
  • icon-eroplano
  • icon-kalendaryo
  • icon-random
  • icon-komento
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-kampana
  • icon-sertipiko
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-kamot-tuo
  • icon-kamot-wala
  • icon-kamot
  • icon-hand-down
  • icon-circle-arrow-tuo
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-mga buluhaton
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Glyphicons attribution

Ang mga Halfling sa Glyphicons kasagaran dili magamit nga libre, apan ang usa ka kahikayan tali sa Bootstrap ug sa mga tiglalang sa Glyphicons nagpaposible niini nga wala’y bayad kanimo isip mga developer. Isip usa ka pasalamat, gihangyo ka namo nga ilakip ang usa ka opsyonal nga link balik sa Glyphicons kung praktikal.

Unsaon paggamit

Ang tanan nga mga icon nanginahanglan usa ka <i>tag nga adunay usa ka talagsaon nga klase, nga adunay prefix nga icon-. Aron magamit, ibutang ang mosunod nga code bisan asa:

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

Adunay usab mga istilo nga magamit alang sa balit-ad (puti) nga mga icon, nga andam sa usa ka dugang nga klase. Espesipiko namong ipatuman kini nga klase sa hover ug active states para sa nav ug dropdown links.

  1. <i class = "icon-search icon-white" ></i>

Taas ang ulo!Kung mogamit sa tupad sa mga kuwerdas sa teksto, sama sa mga buton o nav link, siguroha nga magbilin usa ka espasyo pagkahuman sa <i>tag alang sa husto nga gilay-on.

Mga pananglitan sa icon

Gamita kini sa mga buton, mga grupo sa butones para sa usa ka toolbar, nabigasyon, o mga prepended nga porma nga mga input.

Mga butones

Button nga grupo sa usa ka button toolbar
  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 sa usa ka butones nga grupo
Gumagamit 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> User </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "dropdown-menu" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Edit </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Pagtangtang </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Pagdili </a></li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Paghimo og admin </a></li>  
  10.   </ul>
  11. </div>
Mga gidak-on sa butones
Bituon Bituon Bituon 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Star </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Star </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Star </a>

Nabigasyon

  1. <ul class = "nav nav-list" > 
  2.   <li class = "aktibo" ><a href = "#" ><i class = "icon-home icon-white" ></i> Panimalay </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Library </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Aplikasyon </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Misc </a></li>  
  6. </ul>

Porma nga mga field

  1. <div class = "kontrol-grupo" > 
  2.   <label class = "control-label" for = "inputIcon" > Email address </label>  
  3.   <div class = "kontrol" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>