Bootstrap

Base CSS

Ang mga pangunahing elemento ng HTML ay naka-istilo at pinahusay na may mga extensible na klase.

Heads up! Ang mga dokumentong ito ay para sa v2.3.2, na hindi na opisyal na sinusuportahan. Tingnan ang pinakabagong bersyon ng Bootstrap!

Typography

Mga pamagat

Lahat ng HTML heading, <h1>through <h6>ay available.

h1. Pamagat 1

h2. Pamagat 2

h3. Pamagat 3

h4. Pamagat 4

h5. Pamagat 5
h6. Pamagat 6

Kopya ng katawan

Ang global default ng Bootstrap font-sizeay 14pxline-height , na may 20px . Ito ay inilapat sa <body>at lahat ng mga talata. Bilang karagdagan, <p>ang (mga talata) ay tumatanggap ng mas mababang margin ng kalahati ng taas ng kanilang linya (10px bilang 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 at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Lead body copy

Gawing kakaiba ang isang talata sa pamamagitan ng pagdaragdag ng .lead.

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

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

Itinayo gamit ang Mas Kaunti

Ang typographic scale ay nakabatay sa dalawang LESS variable sa variables.less : @baseFontSizeat @baseLineHeight. Ang una ay ang base font-size na ginamit sa kabuuan at ang pangalawa ay ang base line-height. Ginagamit namin ang mga variable na iyon at ilang simpleng matematika para gawin ang mga margin, padding, at line-height ng lahat ng aming uri at higit pa. I-customize ang mga ito at ang Bootstrap ay umaangkop.

diin

Gamitin ang mga default na tag ng emphasis ng HTML na may mga magaan na istilo.

<small>

Para sa de-emphasizing inline o mga bloke ng text, gamitin ang maliit na tag.

Ang linya ng text na ito ay nilalayong ituring bilang fine print.

<p> <small> Ang linya ng text na ito ay nilalayong ituring bilang fine print. </small> </p>

Matapang

Para sa pagbibigay-diin sa isang snippet ng text na may mas mabigat na font-weight.

Ang sumusunod na snippet ng text ay nai-render bilang bold text .

<strong> na-render bilang bold text </strong>

Italiko

Para sa pagbibigay-diin sa isang snippet ng text na may italics.

Ang sumusunod na snippet ng text ay nai-render bilang italicized na text .

<em> nai-render bilang italicized na teksto </em>

Heads up!Huwag mag-atubiling gamitin <b>at <i>sa HTML5. <b>ay nilalayong i-highlight ang mga salita o parirala nang hindi nagbibigay ng karagdagang kahalagahan habang <i>kadalasan ay para sa boses, teknikal na termino, atbp.

Mga klase sa pagkakahanay

Madaling i-realign ang text sa mga bahagi na may mga klase ng text alignment.

Naka-align sa kaliwa ang text.

Naka-align sa gitnang text.

Naka-align sa kanan na teksto.

  1. <p class = "text-left" > Naka-align sa kaliwa na text. </p> 
  2. <p class = "text-center" > Naka-align sa gitnang text. </p> 
  3. <p class = "text-right" > Naka-align sa kanan na text. </p>

Mga klase ng diin

Ihatid ang kahulugan sa pamamagitan ng kulay na may kaunting diin sa mga klase ng utility.

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, 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. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Mga pagdadaglat

Naka-istilong pagpapatupad ng <abbr>elemento ng HTML para sa mga pagdadaglat at acronym upang ipakita ang pinalawak na bersyon sa hover. Ang mga abbreviation na may titleattribute ay may light dotted bottom border at help cursor sa hover, na nagbibigay ng karagdagang konteksto sa hover.

<abbr>

Para sa pinalawak na text sa mahabang hover ng isang pagdadaglat, isama ang titleattribute.

Ang pagdadaglat ng salitang attribute ay attr .

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

<abbr class="initialism">

Idagdag .initialismsa isang abbreviation para sa isang bahagyang mas maliit na laki ng font.

Ang HTML ay ang pinakamagandang bagay mula noong hiniwang tinapay.

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

Mga address

Ipakita ang impormasyon sa pakikipag-ugnayan para sa pinakamalapit na ninuno o sa buong katawan ng trabaho.

<address>

Panatilihin ang pag-format sa pamamagitan ng pagtatapos ng lahat ng mga linya sa <br>.

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

Blockquotes

Para sa pagsipi ng mga bloke ng nilalaman mula sa ibang pinagmulan sa loob ng iyong dokumento.

Default na blockquote

I- wrap sa <blockquote>paligid ng anumang HTML bilang ang quote. Para sa mga tuwid na panipi inirerekumenda namin ang isang <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 pagpipilian sa blockquote

Mga pagbabago sa istilo at nilalaman para sa mga simpleng variation sa isang karaniwang blockquote.

Pagpapangalan ng pinagmulan

Magdagdag <small>ng tag para sa pagtukoy sa pinagmulan. I-wrap ang pangalan ng source work sa <cite>.

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

Isang taong sikat sa Pamagat ng Pinagmulan 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3.   <small> Isang taong sikat <cite title = "Source Title" > Source Title </cite></small> 
  4. </blockquote>

Mga kahaliling display

Gamitin .pull-rightpara sa isang floated, right-aligned blockquote.

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

Isang taong sikat sa Pamagat ng Pinagmulan 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </blockquote>

Mga listahan

Hindi nakaayos

Isang listahan ng mga item kung saan ang pagkakasunud-sunod ay hindi tahasang mahalaga.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at masa
  • Facilisis sa 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 umupo amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Inutusan

Isang listahan ng mga item kung saan ang pagkakasunud-sunod ay tahasang mahalaga.

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

Walang istilo

Alisin ang default list-styleat kaliwang padding sa mga item sa listahan (mga agarang bata lang).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at masa
  • Facilisis sa 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 umupo amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

Nasa linya

Ilagay ang lahat ng mga item sa listahan sa isang linya na may inline-blockat ilang light padding.

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

Paglalarawan

Isang listahan ng mga termino kasama ng kanilang mga nauugnay na paglalarawan.

Mga listahan ng paglalarawan
Ang isang listahan ng paglalarawan ay perpekto para sa pagtukoy ng mga termino.
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>

Pahalang na paglalarawan

Gumawa ng mga termino at paglalarawan <dl>nang magkatabi.

Mga listahan ng paglalarawan
Ang isang listahan ng paglalarawan ay perpekto para sa pagtukoy ng mga termino.
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, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Heads up!Ang mga listahan ng pahalang na paglalarawan ay puputulin ang mga terminong masyadong mahaba upang magkasya sa kaliwang column fix text-overflow. Sa mas makitid na viewport, sila ay magbabago sa default na nakasalansan na layout.

Code

Nasa linya

I-wrap ang mga inline na snippet ng code gamit ang <code>.

Halimbawa, <section>dapat na balot bilang inline. 
  1. Halimbawa , < code> & lt ; seksyon & gt ;</ code > ay dapat na nakabalot bilang inline .

Pangunahing bloke

Gamitin <pre>para sa maraming linya ng code. Tiyaking takasan ang anumang mga anggulong bracket sa code para sa wastong pag-render.

<p>Sample text dito...</p>
  1. <pre>
  2.   <p>Sample ng text dito...</p>
  3. </pre>

Heads up!Tiyaking panatilihin ang code sa loob <pre>ng mga tag na malapit sa kaliwa hangga't maaari; ire-render nito ang lahat ng tab.

Maaari mong opsyonal na idagdag ang .pre-scrollableklase na magtatakda ng max-height na 350px at magbibigay ng y-axis scrollbar.

Mga mesa

Mga default na istilo

Para sa pangunahing pag-istilo—light padding at mga pahalang na divider lang—idagdag ang base class .tablesa alinmang <table>.

# Pangalan Huling pangalan Username
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry ang ibon @twitter 
  1. <table class = "table" > 
  2.   …
  3. </table>

Opsyonal na mga klase

Idagdag ang alinman sa mga sumusunod na klase sa .tablebase class.

.table-striped

Nagdaragdag ng zebra-striping sa anumang hilera ng talahanayan sa loob ng sa <tbody>pamamagitan ng :nth-childCSS selector (hindi available sa IE7-8).

# Pangalan Huling pangalan Username
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry ang ibon @twitter 
  1. <table class = "table table-striped" > 
  2.   …
  3. </table>

.table-bordered

Magdagdag ng mga hangganan at bilugan na sulok sa talahanayan.

# Pangalan Huling pangalan Username
1 marka Otto @mdo
marka Otto @getbootstrap
2 Jacob Thornton @mataba
3 Larry the Bird @twitter 
  1. <table class = "table table-bordered" > 
  2.   …
  3. </table>

.table-hover

Paganahin ang isang hover state sa mga row ng talahanayan sa loob ng isang <tbody>.

# Pangalan Huling pangalan Username
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry the Bird @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </table>

.table-condensed

Ginagawang mas compact ang mga talahanayan sa pamamagitan ng pagputol ng cell padding sa kalahati.

# Pangalan Huling pangalan Username
1 marka Otto @mdo
2 Jacob Thornton @mataba
3 Larry the Bird @twitter 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </table>

Opsyonal na mga row class

Gumamit ng mga klase sa konteksto upang kulayan ang mga hilera ng talahanayan.

Klase Paglalarawan
.success Nagsasaad ng matagumpay o positibong aksyon.
.error Nagsasaad ng mapanganib o potensyal na negatibong aksyon.
.warning Nagsasaad ng babala na maaaring nangangailangan ng pansin.
.info Ginamit bilang alternatibo sa mga default na istilo.
# produkto Kinuha ang Pagbabayad Katayuan
1 TB - Buwan-buwan 01/04/2012 Naaprubahan
2 TB - Buwan-buwan 02/04/2012 Tinanggihan
3 TB - Buwan-buwan 03/04/2012 Nakabinbin
4 TB - Buwan-buwan 04/04/2012 Tumawag para kumpirmahin 
  1. ...
  2.   < tr class = "tagumpay" >
  3.     <td> 1 < /td>
  4.     <td>TB - Buwan-buwan</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Inaprubahan</ td >
  7.   </ tr >
  8. ...

Sinusuportahang table markup

Listahan ng mga sinusuportahang elemento ng HTML ng talahanayan at kung paano dapat gamitin ang mga ito.

Tag Paglalarawan
<table> Wrapping element para sa pagpapakita ng data sa isang tabular na format
<thead> Elemento ng container para sa mga hilera ng header ng talahanayan ( <tr>) upang lagyan ng label ang mga column ng talahanayan
<tbody> Elemento ng lalagyan para sa mga hilera ng talahanayan ( <tr>) sa katawan ng talahanayan
<tr> Container element para sa isang set ng mga cell ng talahanayan ( <td>o <th>) na lumalabas sa isang row
<td> Default na cell ng talahanayan
<th> Espesyal na cell ng talahanayan para sa mga label ng column (o row, depende sa saklaw at pagkakalagay).
<caption> Paglalarawan o buod ng kung ano ang hawak ng talahanayan, lalo na kapaki-pakinabang para sa mga screen reader 
  1. <talahanayan>
  2.   <caption> ... </caption>
  3.   <ulo>
  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. </table>

Mga porma

Mga default na istilo

Ang mga indibidwal na kontrol sa form ay tumatanggap ng estilo, ngunit walang anumang kinakailangang base class sa <form>o malalaking pagbabago sa markup. Mga resulta sa stacked, left-aligned na mga label sa ibabaw ng mga kontrol ng form.

Alamat Halimbawa ng block-level na help text dito. 
  1. <form>
  2.   <fieldset>
  3.     <legend> Alamat </legend>
  4.     <label> Pangalan ng label </label>
  5.     <input type = "text" placeholder = "Type something…" >  
  6.     <span class = "help-block" > Halimbawa ng block-level na help text dito. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Tingnan ako 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Submit </button>  
  11.   </fieldset>
  12. </form>

Opsyonal na mga layout

Kasama sa Bootstrap ang tatlong opsyonal na mga layout ng form para sa mga karaniwang kaso ng paggamit.

Form ng paghahanap

Idagdag .form-searchsa form at .search-querysa <input>para sa isang extra-rounded text input.

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

Inline na form

Magdagdag .form-inlinepara sa mga label na nakahanay sa kaliwa at mga kontrol na inline-block para sa isang compact na layout.

  1. <form class = "form-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" > Tandaan ako 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Mag-sign in </button>  
  8. </form>

Pahalang na anyo

I-align sa kanan ang mga label at ilutang ang mga ito sa kaliwa para lumabas ang mga ito sa parehong linya ng mga kontrol. Nangangailangan ng pinakamaraming pagbabago sa markup mula sa isang default na form:

  • Idagdag .form-horizontalsa form
  • I-wrap ang mga label at kontrol.control-group
  • Idagdag .control-labelsa label
  • I-wrap ang anumang nauugnay na mga kontrol .controlspara sa wastong pagkakahanay
  1. <form class = "form-horizontal" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" for = "inputEmail" > Email </label>  
  4.     <div class = "mga kontrol" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "control-group" > 
  9.     <label class = "control-label" para sa = "inputPassword" > Password </label>  
  10.     <div class = "mga kontrol" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Password" >   
  12.     </div>
  13.   </div>
  14.   <div class = "control-group" > 
  15.     <div class = "mga kontrol" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Tandaan ako 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Mag-sign in </button>  
  20.     </div>
  21.   </div>
  22. </form>

Mga suportadong kontrol sa form

Mga halimbawa ng mga karaniwang kontrol ng form na sinusuportahan sa isang halimbawang layout ng form.

Mga input

Ang pinakakaraniwang kontrol sa form, mga field ng input na nakabatay sa text. May kasamang suporta para sa lahat ng uri ng HTML5: text, password, datetime, datetime-local, petsa, buwan, oras, linggo, numero, email, url, paghahanap, tel, at kulay.

Nangangailangan ng paggamit ng isang tinukoy typesa lahat ng oras.

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

Textarea

Kontrol ng form na sumusuporta sa maraming linya ng teksto. Baguhin rowsang katangian kung kinakailangan.

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

Mga checkbox at radyo

Ang mga checkbox ay para sa pagpili ng isa o ilang mga opsyon sa isang listahan habang ang mga radyo ay para sa pagpili ng isang opsyon mula sa marami.

Default (nakasalansan)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Ang opsyon isa ay ito at iyon—siguraduhing isama kung bakit ito mahusay
  4. </label>
  5.  
  6. <label class = "radyo" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked >     
  8.   Ang opsyon isa ay ito at iyon—siguraduhing isama kung bakit ito mahusay
  9. </label>
  10. <label class = "radyo" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Ang opsyon na dalawa ay maaaring ibang bagay at ang pagpili dito ay aalisin sa pagkakapili ng opsyon isa
  13. </label>

Mga inline na checkbox

Idagdag ang .inlineklase sa isang serye ng mga checkbox o radyo para sa mga kontrol na lalabas sa parehong 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>

Pinipili

Gamitin ang default na opsyon o tukuyin ang isang multiple="multiple"upang magpakita ng maraming opsyon nang sabay-sabay.


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

Pagpapalawak ng mga kontrol sa form

Sa pagdaragdag sa itaas ng mga kasalukuyang kontrol sa browser, kasama sa Bootstrap ang iba pang kapaki-pakinabang na bahagi ng form.

Prepended at idinagdag input

Magdagdag ng text o mga button bago o pagkatapos ng anumang text-based na input. Tandaan na ang selectmga elemento ay hindi suportado dito.

Default na mga opsyon

I-wrap ang an .add-onat an inputng isa sa dalawang klase para i-prepend o idagdag ang text sa isang 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>

pinagsama-sama

Gamitin ang parehong mga klase at dalawang instance ng .add-onpara prepend at magdagdag ng 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 pindutan sa halip na teksto

Sa halip na isang <span>may teksto, gumamit ng isang .btnupang ilakip ang isang pindutan (o dalawa) sa isang input.

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

Mga dropdown ng button

  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>

Mga naka-segment na dropdown na grupo

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

Form ng paghahanap

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

Kontrolin ang laki

Gumamit ng mga relatibong klase ng sizing tulad .input-largeng o itugma ang iyong mga input sa mga laki ng column ng grid gamit ang mga .span*klase.

I-block ang mga input sa antas

Gawin ang alinman <input>o <textarea>elemento na kumilos bilang isang elemento sa antas ng block.

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

Relatibong sukat

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

Heads up!Sa mga susunod na bersyon, babaguhin namin ang paggamit ng mga kaugnay na klase ng input na ito upang tumugma sa aming mga laki ng button. Halimbawa, .input-largetataas ang padding at laki ng font ng isang input.

Pagsusukat ng grid

Gamitin .span1sa .span12para sa mga input na tumutugma sa parehong laki ng mga column ng 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>

Para sa maramihang mga input ng grid bawat linya, gamitin ang .controls-rowklase ng modifier para sa wastong espasyo . Pinalutang nito ang mga input upang i-collapse ang white-space, itinatakda ang mga tamang margin, at i-clear ang float.

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

Mga hindi nae-edit na input

Ipakita ang data sa isang form na hindi mae-edit nang hindi gumagamit ng aktwal na markup ng form.

Ilang halaga dito 
  1. <span class = "input-xlarge uneditable-input" > Ilang value dito </span>

Bumuo ng mga aksyon

Tapusin ang isang form na may pangkat ng mga aksyon (mga pindutan). Kapag inilagay sa loob ng isang .form-actions, ang mga pindutan ay awtomatikong mag-indent upang ihanay sa mga kontrol ng form.

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

Text ng tulong

Suporta sa antas ng inline at block para sa text ng tulong na lumalabas sa paligid ng mga kontrol ng form.

Inline na tulong

Inline na text ng tulong 
  1. <input type = "text" ><span class = "help-inline" > Inline help text </span>

I-block ang tulong

Isang mas mahabang block ng text ng tulong na pumupunta sa isang bagong linya at maaaring lumampas sa isang linya. 
  1. <input type = "text" ><span class = "help-block" > Isang mas mahabang block ng text ng tulong na pumupunta sa isang bagong linya at maaaring lumampas sa isang linya. </span>

Mga estado ng kontrol ng form

Magbigay ng feedback sa mga user o bisita na may mga pangunahing estado ng feedback sa mga kontrol at label ng form.

Input focus

Inalis namin ang mga default na outlineistilo sa ilang mga kontrol ng form at naglalapat ng isang box-shadowbilang kapalit nito para sa :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Ito ay nakatutok..." >

Di-wastong mga input

Mga input ng istilo sa pamamagitan ng default na functionality ng browser na may :invalid. Tukuyin ang isang type, idagdag ang requiredkatangian kung ang field ay hindi opsyonal, at (kung naaangkop) tukuyin ang isang pattern.

Hindi ito available sa mga bersyon ng Internet Explorer 7-9 dahil sa kakulangan ng suporta para sa mga pseudo selector ng CSS.

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

Hindi pinagana ang mga input

Idagdag ang disabledattribute sa isang input para maiwasan ang input ng user at mag-trigger ng bahagyang kakaibang hitsura.

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

Mga estado ng pagpapatunay

Kasama sa Bootstrap ang mga istilo ng pagpapatunay para sa error, babala, impormasyon, at mga mensahe ng tagumpay. Upang magamit, idagdag ang naaangkop na klase sa nakapalibot na .control-group.

Maaaring may nangyaring mali
Pakitama ang error
Kinuha ang username
Woohoo! 
  1. <div class = "babala ng control-group" > 
  2.   <label class = "control-label" for = "inputWarning" > Input na may babala </label>  
  3.   <div class = "mga kontrol" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Maaaring may nangyaring mali </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "control-group error" > 
  10.   <label class = "control-label" for = "inputError" > Input na may error </label>  
  11.   <div class = "mga kontrol" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Pakitama ang error </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "impormasyon ng control-group" > 
  18.   <label class = "control-label" for = "inputInfo" > Input na may impormasyon </label>  
  19.   <div class = "mga kontrol" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Nakuha na ang username </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "control-group success" > 
  26.   <label class = "control-label" for = "inputSuccess" > Input na may tagumpay </label>  
  27.   <div class = "mga kontrol" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

Mga Pindutan

Mga default na pindutan

Maaaring ilapat ang mga istilo ng button sa anumang bagay na inilapat sa .btnklase. Gayunpaman, karaniwang gusto mong ilapat ang mga ito sa mga elemento lamang <a>para <button>sa pinakamahusay na pag-render.

Pindutan class="" Paglalarawan
btn Karaniwang grey na button na may gradient
btn btn-primary Nagbibigay ng dagdag na visual na timbang at kinikilala ang pangunahing aksyon sa isang hanay ng mga pindutan
btn btn-info Ginamit bilang alternatibo sa mga default na istilo
btn btn-success Nagsasaad ng matagumpay o positibong aksyon
btn btn-warning Isinasaad ang pag-iingat na dapat gawin sa pagkilos na ito
btn btn-danger Nagsasaad ng mapanganib o potensyal na negatibong pagkilos
btn btn-inverse Kahaliling dark grey na button, hindi nakatali sa isang semantic na aksyon o paggamit
btn btn-link I-deemphasize ang isang button sa pamamagitan ng paggawa nitong parang isang link habang pinapanatili ang gawi ng button

Cross browser compatibility

Hindi tina-crop ng IE9 ang mga gradient ng background sa mga bilugan na sulok, kaya inaalis namin ito. Kaugnay, ine-jankifie ng IE9 ang mga hindi pinaganang buttonelemento, na nagre-render ng text na kulay abo na may masamang text-shadow na hindi namin maaayos.

Mga laki ng pindutan

Gusto mo ba ng mas malaki o mas maliit na mga pindutan? Magdagdag ng .btn-large, .btn-small, o .btn-minipara sa mga karagdagang laki.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Malaking button </button>  
  3.   <button class = "btn btn-large" type = "button" > Malaking button </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Default na button </button>  
  7.   <button class = "btn" type = "button" > Default na button </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Maliit na button </button>  
  11.   <button class = "btn btn-small" type = "button" > Maliit na button </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>

Gumawa ng mga block level na button—yaong sumasaklaw sa buong lapad ng isang magulang—sa pamamagitan ng pagdaragdag ng .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>

Estadong may kapansanan

Gawing hindi ma-click ang mga button sa pamamagitan ng pag-fade ng mga ito pabalik ng 50%.

Elemento ng anchor

Idagdag ang .disabledklase sa mga <a>button.

Pangunahing link Link 

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

Heads up!Ginagamit namin .disabledbilang isang utility class dito, katulad ng karaniwang .activeklase, kaya walang prefix ang kinakailangan. Gayundin, ang klase na ito ay para lamang sa aesthetic; dapat kang gumamit ng custom na JavaScript upang huwag paganahin ang mga link dito.

Elemento ng pindutan

Idagdag ang disabledattribute sa mga <button>button.

  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>

Isang klase, maraming tag

Gamitin ang .btnklase sa isang <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" >

Bilang pinakamahusay na kasanayan, subukang itugma ang elemento para sa iyong konteksto upang matiyak na tumutugma ang cross-browser na pag-render. Kung mayroon kang input, gumamit <input type="submit">ng para sa iyong button.

Mga imahe

Magdagdag ng mga klase sa isang <img>elemento upang madaling mag-istilo ng mga larawan sa anumang proyekto.

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

Heads up! .img-roundedat .img-circlehindi gumana sa IE7-8 dahil sa kakulangan ng border-radiussuporta.

Mga icon ng Glyphicons

Mga icon na glyph

140 icon sa sprite form, available sa dark grey (default) at puti, na ibinigay ng Glyphicons .

  • icon-salamin
  • icon-musika
  • icon-search
  • icon-envelope
  • icon-puso
  • icon-star
  • icon-star-walang laman
  • icon-user
  • icon-pelikula
  • icon-ika-malaki
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-alis
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-basura
  • icon-bahay
  • icon-file
  • icon-time
  • icon-daan
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-ulitin
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphone
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • mga icon-tag
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-taas
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-kanan
  • icon-facetime-video
  • icon-larawan
  • icon-lapis
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-paatras
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-kaliwa
  • icon-chevron-kanan
  • icon-plus-sign
  • icon-minus-sign
  • icon-alis-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-alis-bilog
  • icon-ok-bilog
  • icon-ban-circle
  • icon-arrow-kaliwa
  • icon-arrow-kanan
  • icon-arrow-up
  • icon-arrow-pababa
  • icon-share-alt
  • icon-resize-full
  • icon-resize-maliit
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-regalo
  • icon-leaf
  • icon-apoy
  • icon-eye-open
  • icon-eye-close
  • icon-babala-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-bukas
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-kamay-kanan
  • icon-kamay-kaliwa
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-kanan
  • icon-circle-arrow-kaliwa
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-gawain
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Pagpapatungkol sa mga Glyphicon

Karaniwang hindi available nang libre ang Glyphicons Halflings, ngunit ginawang posible ito ng isang pag-aayos sa pagitan ng Bootstrap at ng mga tagalikha ng Glyphicons nang walang bayad sa iyo bilang mga developer. Bilang pasasalamat, hinihiling namin sa iyo na magsama ng opsyonal na link pabalik sa Glyphicons kapag praktikal.

Paano gamitin

Ang lahat ng mga icon ay nangangailangan <i>ng tag na may natatanging klase, na may prefix na icon-. Upang magamit, ilagay ang sumusunod na code sa halos kahit saan:

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

Mayroon ding mga istilong available para sa mga inverted (white) na icon, na ginawang handa sa isang dagdag na klase. Partikular naming ipapatupad ang klase na ito sa hover at aktibong mga estado para sa nav at dropdown na mga link.

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

Heads up!Kapag gumagamit ng katabi ng mga string ng text, tulad ng sa mga button o nav link, siguraduhing mag-iwan ng puwang pagkatapos ng <i>tag para sa wastong espasyo.

Mga halimbawa ng icon

Gamitin ang mga ito sa mga button, mga grupo ng button para sa isang toolbar, navigation, o mga naka-prepend na form input.

Mga Pindutan

Pangkat ng button sa isang toolbar ng button
  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 in a button group
User 
  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> Delete</a></li>
  7.     <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
  8.     <li class="divider"></li>
  9.     <li><a href="#"><i class="i"></i> Make admin</a></li>
  10.   </ul>
  11. </div>
Button sizes
Star Star Star 
  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>

Navigation

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

Form fields

  1. <div class="control-group">
  2.   <label class="control-label" for="inputIcon">Email address</label>
  3.   <div class="controls">
  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>