Bootstrap

Base CSS

Ny singa HTML fototra novolavolaina sy nohatsaraina tamin'ny kilasy azo itarina.

Fampitandremana! Ireo doka ireo dia natao ho an'ny v2.3.2, izay tsy tohanana amin'ny fomba ofisialy intsony. Jereo ny kinova farany an'ny Bootstrap!

Typography

Lohateny

Ny lohateny HTML rehetra, <h1>amin'ny alàlan'ny <h6>dia misy.

h1. Lohateny 1

h2. Lohateny 2

h3. Lohateny 3

h4. Lohateny 4

h5. Lohahevitra 5
h6. Lohahevitra 6

Kopia vatana

Ny default manerantany an'ny Bootstrap font-sizedia 14px , miaraka line-heightamin'ny 20px . Izany dia mihatra amin'ny <body>and paragrafy rehetra. Ho fanampin'izany, <p>(fehintsoratra) dia mahazo sisiny ambany amin'ny antsasaky ny haavon'ny tsipika (10px amin'ny alàlan'ny default).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Tsy misy 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 and eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Dika mitovy amin'ny vatana

Manaova fehintsoratra miavaka amin'ny fanampiana .lead.

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

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

Namboarina tamin'ny Less

Ny mari-pamantarana typografika dia mifototra amin'ny fari-pitsipika LESS roa amin'ny variables.less : @baseFontSizeary @baseLineHeight. Ny voalohany dia ny haben'ny endri-tsoratra ampiasaina manerana ary ny faharoa dia ny haavon'ny tsipika fototra. Mampiasa ireo fari-pahalalana sy matematika tsotra ireo izahay mba hamoronana ny sisiny, ny padding, ary ny haavon'ny tsipika amin'ny karazan-tsika rehetra sy ny maro hafa. Amboary izy ireo ary mampifanaraka ny Bootstrap.

fanamafisana

Ampiasao ny mari-pamantarana manan-danja amin'ny HTML miaraka amin'ny fomba maivana.

<small>

Mba hanamafisana ny an-tsoratra na andian-tsoratra, ampiasao ny marika kely.

Ity andalana lahatsoratra ity dia natao ho raisina ho printy tsara.

<p> <kely> Ity andalana lahatsoratra ity dia natao ho raisina ho toy ny printy tsara. </small> </p>

Sahisahy

Mba hanamafisana sombin-tsoratra misy lanja mavesatra kokoa.

Nadika ho lahatsoratra mibaribary ity sombin-tsoratra manaraka ity .

<strong> nadika ho lahatsoratra matevina </strong>

nampiana

Mba hanamafisana sombin-tsoratra misy sora-mandry.

Nadika ho lahatsoratra miorim-paka ity sombin-tsoratra manaraka ity .

<em> nadika ho lahatsoratra miorim-paka </em>

Fampitandremana!Aza misalasala mampiasa <b>sy <i>amin'ny HTML5. <b>dia natao hanasongadinana teny na andian-teny nefa tsy mampita zava-dehibe fanampiny fa <i>indrindra amin'ny feo, teny teknika, sns.

Kilasy fampifanarahana

Ampifanaraho mora amin'ny singa miaraka amin'ny kilasy fampifanarahana lahatsoratra.

Lahatsoratra milahatra ankavia.

Lahatsoratra mirindra afovoany.

Lahatsoratra mirindra tsara.

  1. <p class = "text-left" > Lahatsoratra mirindra havia. </p> 
  2. <p class = "text-center" > lahatsoratra mirindra afovoany. </p> 
  3. <p class = "text-right" > Lahatsoratra mirindra tsara. </p>

Kilasy fanantitranterana

Ampidiro ny dikany amin'ny alàlan'ny loko miaraka amin'ny kilasy fampiasa amin'ny fanamafisana vitsivitsy.

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, izay tsy misy dikany, tsy misy porttitor ligula. </p>

fanafohezan-teny

Fampiharana ny <abbr>singa HTML ho an'ny fanafohezana sy fanafohezana mba hampisehoana ny dikan-teny miitatra amin'ny hover. Ny fanafohezana miaraka amin'ny titletoetra dia manana sisiny ambany misy teboka maivana ary kisendrasendra fanampiana amin'ny hover, manome contexte fanampiny amin'ny hover.

<abbr>

Ho an'ny lahatsoratra miitatra amin'ny fanafohezana lava dia ampidiro ny titletoetra.

Ny fanafohezana ny teny hoe attribute dia attr .

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

<abbr class="initialism">

Ampio .initialismamin'ny fanafohezana ny haben'ny endritsoratra kely kokoa.

HTML no zavatra tsara indrindra hatramin'ny mofo voatetika.

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

adiresy

Asehoy ny mombamomba ny fifandraisana ho an'ny razana akaiky indrindra na ny vondron'asa manontolo.

<address>

Tehirizo ny format amin'ny famaranana ny andalana rehetra amin'ny <br>.

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

Blockquotes

Raha mitanisa votoaty avy amin'ny loharano hafa ao anatin'ny antontan-taratasinao.

Default blockquote

Fenoy <blockquote>ny HTML rehetra ho toy ny teny nindramina. Ho an'ny teny fohy dia manoro hevitra izahay <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>

Safidy blockquote

Fiovana fomba sy votoaty ho an'ny fiovaovana tsotra amin'ny blockquote mahazatra.

Fanononana loharano

Ampio <small>tag hamantarana ny loharano. Fonosy amin'ny <cite>.

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

Olona malaza amin'ny Lohateny Loharano 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3.   <small> Olona malaza <cite title = "Source Title" > Source Lotre </cite></small> 
  4. </blockquote>

Fampisehoana mifandimby

Ampiasao .pull-rightho an'ny blockquote mitsinkafona sy mirindra tsara.

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

Olona malaza amin'ny Lohateny Loharano 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </blockquote>

Lisitra

Tsy voalamina

Lisitry ny singa izay tsy misy dikany mazava ny filaharana.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem sy 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>

baiko

Lisitry ny zavatra misy ny filaharana manan-danja mazava .

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

Esory ny list-stylepadding default sy havia amin'ny lisitra (ankizy avy hatrany ihany).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem sy 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 = "tsy misy endrika" > 
  2.   <li> ... </li>
  3. </ul>

Milahatra

Apetraho eo amin'ny tsipika tokana miaraka inline-blockamin'ny padding maivana ny singa rehetra.

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

Description

Lisitry ny teny miaraka amin'ny famaritana azy.

Lisitry ny famaritana
Ny lisitry ny famaritana dia tonga lafatra amin'ny famaritana ny teny.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida and eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Famaritana marindrano

Manaova teny sy famaritana amin'ny <dl>filaharana mifanila.

Lisitry ny famaritana
Ny lisitry ny famaritana dia tonga lafatra amin'ny famaritana ny teny.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida and 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>

Fampitandremana!Ny lisitry ny famaritana marindrano dia hanapaka ny teny lava loatra ka tsy ho tafiditra ao amin'ny fanamboarana tsanganana havia text-overflow. Amin'ny toerana fijerena tery kokoa dia hiova ho amin'ny fisehon'ny stacked default izy ireo.

fehezan-dalàna

Milahatra

Fonosy sombin-kaody an-tsipika miaraka amin'ny <code>.

Ohatra, <section>tokony hofonosina toy ny inline. 
  1. Ohatra , <code > & lt ; fizarana & gt ;</ code > tokony ho fonosina toy ny inline .

Boky fototra

Ampiasao <pre>amin'ny andalana maromaro maromaro. Aza hadino ny mandositra ny brackets amin'ny zoro amin'ny kaody mba handikana araka ny tokony ho izy.

<p>Santionany lahatsoratra eto...</p>
  1. <pre>
  2.   <p>Santionany lahatsoratra eto...</p>
  3. </pre>

Fampitandremana!Aza hadino ny mitazona ny kaody ao anatin'ny <pre>marika ho akaiky ny ankavia araka izay azo atao; izany dia hanome ny tabilao rehetra.

Azonao atao ihany koa ny manampy ny .pre-scrollablekilasy izay hametraka ny haavon'ny 350px ambony indrindra ary hanome scrollbar y-axis.

latabatra

Fomba mahazatra

Ho an'ny styling fototra — padding maivana ary mpizara marindrano fotsiny — ampio ny kilasy fototra .tableamin'ny <table>.

# Fanampin'anarana Anarana Anaran'ny mpampiasa
1 marika Otto @mdo
2 Jakoba Thornton @matavy
3 Larry ny Vorona @twitter 
  1. < kilasy latabatra = "table" > 
  2.   …
  3. </ table>

Kilasy azo atao

Ampio ny iray amin'ireto kilasy manaraka ireto amin'ny kilasy .tablefototra.

.table-striped

Manampy zebra-striping amin'ny andalana latabatra ao amin'ny <tbody>alalan'ny :nth-childCSS selector (tsy hita ao amin'ny IE7-8).

# Fanampin'anarana Anarana Anaran'ny mpampiasa
1 marika Otto @mdo
2 Jakoba Thornton @matavy
3 Larry ny Vorona @twitter 
  1. < table class = "table table-striped" > 
  2.   …
  3. </ table>

.table-bordered

Ampio sisin-tany sy zoro boribory eo amin'ny latabatra.

# Fanampin'anarana Anarana Anaran'ny mpampiasa
1 marika Otto @mdo
marika Otto @getbootstrap
2 Jakoba Thornton @matavy
3 Larry the Bird @twitter 
  1. <table class = "table table-bordered" > 
  2.   …
  3. </ table>

.table-hover

Alefaso ny toetry ny hover amin'ny andalana latabatra ao anatin'ny <tbody>.

# Fanampin'anarana Anarana Anaran'ny mpampiasa
1 marika Otto @mdo
2 Jakoba Thornton @matavy
3 Larry the Bird @twitter 
  1. < table class = "table table-hover" > 
  2.   …
  3. </ table>

.table-condensed

Manatsara ny latabatra amin'ny alàlan'ny fanapahana antsasany ny padding sela.

# Fanampin'anarana Anarana Anaran'ny mpampiasa
1 marika Otto @mdo
2 Jakoba Thornton @matavy
3 Larry the Bird @twitter 
  1. < table class = "table table-condensed" > 
  2.   …
  3. </ table>

Kilasy andalana azo atao

Mampiasà kilasy contextual handokoana ny andalana latabatra.

KILASY Description
.success Manondro hetsika mahomby na tsara.
.error Manondro hetsika mampidi-doza na mety ho ratsy.
.warning Manondro fampitandremana mety mila fitandremana.
.info Ampiasaina ho solon'ny fomba mahazatra.
# vokatra Nalaina ny fandoavam-bola sata
1 TB - Isam-bolana 01/04/2012 nankatoavina
2 TB - Isam-bolana 02/04/2012 tsy nety
3 TB - Isam-bolana 03/04/2012 mbola miandry
4 TB - Isam-bolana 04/04/2012 Antsoy hanamarina 
  1. ...
  2.   < tr class = "fahombiazana" >
  3.     <td> 1 < /td>
  4.     <td>TB - Isam-bolana</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Ekena</ td >
  7.   </ tr >
  8. ...

Fanamafisana latabatra tohanana

Lisitry ny singa HTML amin'ny latabatra tohanana sy ny fomba tokony hampiasana azy ireo.

tenifototra Description
<table> Singa famonosana hanehoana angona amin'ny endrika tabilao
<thead> Singa fitoeran'entana ho an'ny andalana lohatenin'ny latabatra ( <tr>) hanamarihana ny tsanganana latabatra
<tbody> Singa fitoeran'entana ho an'ny andalana latabatra ( <tr>) ao amin'ny vatan'ny latabatra
<tr> Singa fitoeran'entana ho an'ny selan'ny latabatra ( <td>na <th>) izay miseho amin'ny andalana tokana
<td> Default table cell
<th> Endriky ny latabatra manokana ho an'ny tsanganana (na andalana, miankina amin'ny velarana sy ny fametrahana) etikety
<caption> Famaritana na famintinana ny zavatra tazonin'ny latabatra, indrindra ho an'ny mpamaky efijery 
  1. <latabatra>
  2.   <caption> ... </caption>
  3.   <loha>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </head>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </ table>

teny

Fomba mahazatra

Ny fanaraha-maso ny endrika tsirairay dia mahazo styling, saingy tsy misy kilasy fototra ilaina amin'ny <form>fanovana lehibe na marika. Vokatry ny etikety mivondrona miankavia eo an-tampon'ny fifehezana endrika.

Maribolana Ohatra lahatsoratra fanampiana ambaratonga sakana eto. 
  1. <endrika>
  2.   <fieldset>
  3.     <legend> Angano < /legend>
  4.     <label> Anaran'ny marika </label>
  5.     < type input = "text" placeholder = "Type something…" >  
  6.     <span class = "help-block" > Ohatra lahatsoratra fanampiana ambaratonga sakana eto. </span> 
  7.     <label class = "checkbox" > 
  8.       < karazana fampidirana = "boaty" > Jereo aho 
  9.     </label>
  10.     < btn type = "submit" class = "btn" > Alefaso </button>  
  11.   </fieldset>
  12. </form>

Fametrahana safidy

Miaraka amin'ny Bootstrap dia endrika endrika telo azo atao ho an'ny tranga fampiasa mahazatra.

Taratasy fikarohana

Ampio .form-searchamin'ny endrika sy .search-queryamin'ny <input>ho an'ny fampidirana lahatsoratra mihoatra ny boribory.

  1. <form class = "fikarohana endrika" > 
  2.   < karazana fampidirana = "text" class = "fanontaniana amin'ny fikarohana antonony" >  
  3.   <button type = "submit" class = "btn" > Search </button>  
  4. </form>

Endrika inline

Ampio .form-inlineho an'ny etikety mizotra ankavia sy fanaraha-maso sakana an-tsipika ho an'ny lamina mirindra.

  1. <form class = "form-inline" > 
  2.   < type input = "text" class = "input-small" placeholder = "Email" >   
  3.   < karazana fampidirana = "password" class = "fidirana-kely" placeholder = "Password" >   
  4.   <label class = "checkbox" > 
  5.     < karazana fidirana = "boasary" > Tsarovy aho 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Midira </button>  
  8. </form>

endrika marindrano

Ampifanaraho havanana ny etikety ary atsipazo miankavia izy ireo mba hiseho amin'ny tsipika mitovy amin'ny fanaraha-maso. Mitaky fanovana marika indrindra amin'ny endrika mahazatra:

  • Ampio .form-horizontalamin'ny endrika
  • Fenoy ny etikety sy ny fanaraha-maso.control-group
  • Ampio .control-labelamin'ny etikety
  • Ampifandraiso ireo fanaraha-maso mifandraika .controlsamin'ny fampifanarahana tsara
  1. <form class = "form-horizontal" > 
  2.   <div class = "vondrona fanaraha-maso" > 
  3.     <label class = "control-label" for = "inputEmail" > Email </label>  
  4.     <div class = "controls" > 
  5.       < type input = "text" id = "inputEmail" placeholder = " Email" >   
  6.     </div>
  7.   </div>
  8.   <div class = "vondrona fanaraha-maso" > 
  9.     <label class = "control-label" for = "inputPassword" > Password </label>  
  10.     <div class = "controls" > 
  11.       < karazana fampidirana = "password" id = "inputPassword" placeholder = " Password" >   
  12.     </div>
  13.   </div>
  14.   <div class = "vondrona fanaraha-maso" > 
  15.     <div class = "controls" > 
  16.       <label class = "checkbox" > 
  17.         < karazana fidirana = "boasary" > Tsarovy aho 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Midira </button>  
  20.     </div>
  21.   </div>
  22. </form>

Fanaraha-maso endrika tohana

Ohatra amin'ny fanaraha-mason'ny endrika manara-penitra tohanana amin'ny fandrindrana endrika ohatra.

Inputs

Fanaraha-maso endrika mahazatra indrindra, sehatra fampidirana mifototra amin'ny lahatsoratra. Ahitana fanohanana ny karazana HTML5 rehetra: lahatsoratra, tenimiafina, datetime, datetime-local, daty, volana, ora, herinandro, isa, mailaka, url, fikarohana, telefaonina ary loko.

Mitaky ny fampiasana voafaritra typeamin'ny fotoana rehetra.

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

Textarea

Fanaraha-maso endrika izay manohana andalana lahatsoratra maro. Ovay rowsny toetra raha ilaina.

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

Boxes sy radios

Ny boaty dia natao hisafidianana safidy iray na maromaro ao anaty lisitra raha ny radio kosa dia natao hisafidianana safidy iray amin'ny maro.

Default (mifantina)


  1. <label class = "checkbox" > 
  2.   < karazana fampidirana = "checkbox" sanda = "" >  
  3.   Ny safidy voalohany dia izao sy izao—azo antoka ny hampiditra ny antony maha-tsara azy
  4. </label>
  5.  
  6. <label class = "radio" > 
  7.   < karazana fampidirana = "radio" anarana = "optionsRadios" id = "optionsRadios1" sanda = "option1" voamarina >     
  8.   Ny safidy voalohany dia izao sy izao—azo antoka ny hampiditra ny antony maha-tsara azy
  9. </label>
  10. <label class = "radio" > 
  11.   < karazana fampidirana = "radio" anarana = "optionsRadios" id = "optionsRadios2" sanda = "option2" >    
  12.   Ny safidy roa dia mety ho zavatra hafa ary ny fisafidianana azy dia hanafoana ny safidy iray
  13. </label>

Boaty an-tsoratra

Ampio ny .inlinekilasy amin'ny andian-tsarimihetsika na radio ho an'ny fanaraha-maso miseho amin'ny andalana iray ihany.

  1. <label class = "checkbox inline" > 
  2.   < karazana fampidirana = "checkbox" id = "inlineCheckbox1" sanda = "safidy1" > 1   
  3. </label>
  4. <label class = "checkbox inline" > 
  5.   < karazana fampidirana = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </label>
  7. <label class = "checkbox inline" > 
  8.   < karazana fampidirana = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </label>

Mifantina

Ampiasao ny safidy default na manendry a multiple="multiple"mba hampisehoana safidy maromaro indray mandeha.


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

Manitatra ny fifehezana endrika

Manampy an-tampon'ny fanaraha-maso navigateur efa misy, ny Bootstrap dia ahitana singa endrika mahasoa hafa.

Ampidiro mialoha sy ampiana

Manampia lahatsoratra na bokotra alohan'ny na aorian'izay fidirana mifototra amin'ny lahatsoratra. Mariho fa ny selectsinga dia tsy tohanana eto.

Safidy default

Fenoy ny iray .add-onsy ny iray inputamin'ny iray amin'ireo kilasy roa mba hanomanana na hampidirana lahatsoratra amin'ny fampidirana.

@

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

atambatra

Ampiasao ireo kilasy roa sy ohatra roa .add-onmba hanomanana sy hanisy fampidirana.

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

Bokotra fa tsy lahatsoratra

Raha tokony a <span>miaraka amin'ny lahatsoratra dia ampiasao ny a .btnhametahana bokotra (na roa) amin'ny fampidirana.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "button" > Mandehana! </bokotra>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Fikarohana </button>  
  4.   <button class = "btn" type = "button" > Options </button>  
  5. </div>

Bokotra midina

  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.       Action
  6.       <span class = "caret" ></span> 
  7.     </bokotra>
  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.       Action
  5.       <span class = "caret" ></span> 
  6.     </bokotra>
  7.     <ul class = "menu dropdown" > 
  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.       Action
  5.       <span class = "caret" ></span> 
  6.     </bokotra>
  7.     <ul class = "menu dropdown" > 
  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.       Action
  15.       <span class = "caret" ></span> 
  16.     </bokotra>
  17.     <ul class = "menu dropdown" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Vondrona midina voazarazara

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

Taratasy fikarohana

  1. <form class = "fikarohana endrika" > 
  2.   <div class = "input-append" > 
  3.     < type input = "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.     < type input = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Fanaraha-maso ny habeny

Mampiasà kilasy habe mifanandrify toy ny .input-largena ampifanaraho amin'ny haben'ny tsanganana grid mampiasa .span*kilasy.

Fampidirana ambaratonga sakana

Ataovy toy ny singa ambaratonga sakana ny singa <input>na singa iray.<textarea>

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

Relative habe

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

Fampitandremana!Amin'ny dikan-teny ho avy, dia hovanay ny fampiasana an'ireo kilasin'ny fampidirana ireo mba hifanaraka amin'ny haben'ny bokotra. Ohatra, .input-largehampitombo ny padding sy ny haben'ny endritsoratra amin'ny fampidirana.

Grid habe

Ampiasaina .span1ho .span12an'ny fampidirana mifanaraka amin'ny haben'ny tsanganana 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>

Ho an'ny fampidiran-dresaka maromaro isaky ny andalana, ampiasao ny .controls-rowkilasy modifier ho an'ny elanelana mety . Mampitsingevana ny fidirana izy io mba hirodana ny habaka fotsy, mametraka ny sisiny mety, ary manala ny mitsingevana.

  1. <div class = "controls" > 
  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. ...

Fampidirana tsy azo ovaina

Manehoa angona amin'ny endrika tsy azo ovaina raha tsy mampiasa mari-pamantarana tena izy.

Misy lanja eto 
  1. <span class = "input-xlarge uneditable-input" > Sanda kely eto </span>

Mamorona hetsika

Farano miaraka amin'ny vondrona hetsika (bokotra). Rehefa apetraka ao anatin'ny .form-actions, ny bokotra dia hiditra ho azy mba hifanaraka amin'ny fanaraha-maso ny endrika.

  1. <div class = "form-actions" > 
  2.   < btn type = "submit" class = "btn btn-primary" > Save change </bt>  
  3.   <button type = "button" class = "btn" > Fanafoanana </button>  
  4. </div>

Lahatsoratra fanampiana

Fanohanana an-tserasera sy sakana ho an'ny lahatsoratra fanampiana izay miseho manodidina ny fifehezana endrika.

Fanampiana an-tserasera

Lahatsoratra fanampiana an-tserasera 
  1. < type input = "text" ><span class = "help-inline" > text help inline </span>

Sakanana ny fanampiana

Bongan-tsoratra fanampiana lava kokoa izay tapaka amin'ny tsipika vaovao ary mety hihoatra ny andalana iray. 
  1. <input type = "text" ><span class = "help-block" > Bongan-tsoratra fanampiana lava kokoa izay manapaka andalana vaovao ary mety hihoatra ny andalana iray. </span>

Fanjakana mifehy ny endrika

Manomeza valin-teny ho an'ny mpampiasa na mpitsidika miaraka amin'ny toe-javatra fototra momba ny fanaraha-maso sy ny etikety.

fifantohana fampidirana

Esorinay ny outlinefomba fanao mahazatra amin'ny fifehezana endrika sasany ary ampiharo box-shadowamin'ny toerany ny :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Ity dia mifantoka..." >

Fampidirana tsy mety

Fampidirana style amin'ny alàlan'ny fampiasa navigateur default miaraka amin'ny :invalid. Soraty ny type, ampio ny requiredtoetra raha toa ka tsy azo atao ny saha, ary (raha azo atao) dia asio pattern.

Ity dia tsy hita amin'ny dikan-tenin'ny Internet Explorer 7-9 noho ny tsy fahampian'ny fanohanana ny CSS pseudo selectors.

  1. <input class = "span3" type = "mailaka" ilaina >

Fampidirana kilemaina

Ampio ny disabledtoetra amin'ny fampidirana iray mba hisorohana ny fampidiran'ny mpampiasa ary hiteraka endrika hafa kely.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Ampidirina kilema eto ..." kilema >

Fanjakana fanamarinana

Ny Bootstrap dia misy fomba fanamarinana ho an'ny fahadisoana, fampitandremana, fampahalalana ary hafatra fahombiazana. Raha hampiasaina dia ampio ny kilasy mety amin'ny manodidina .control-group.

Mety nisy zavatra tsy nety
Ahitsio ny lesoka azafady
Noraisina ny anaran'ny mpampiasa
Woohoo! 
  1. <div class = "fampitandremana vondrona fanaraha-maso" > 
  2.   <label class = "control-label" for = "inputWarning" > Fampidirana misy fampitandremana </label>  
  3.   <div class = "controls" > 
  4.     < type input = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Mety nisy zavatra tsy nety </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "error groupe control" > 
  10.   <label class = "control-label" for = "inputError" > Fampidirana misy hadisoana </label>  
  11.   <div class = "controls" > 
  12.     < type input = "text" id = "inputError" >  
  13.     <span class = "help-inline" > ahitsio azafady ny lesoka </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "info-vondrona fanaraha-maso" > 
  18.   <label class = "control-label" for = "inputInfo" > Fampidirana misy fampahalalana </label>  
  19.   <div class = "controls" > 
  20.     < type input = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Anaran'ny mpampiasa dia efa noraisina </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "fahombiazan'ny vondrona fanaraha-maso" > 
  26.   <label class = "control-label" for = "inputSuccess" > Fampidirana misy fahombiazana </label>  
  27.   <div class = "controls" > 
  28.     < type input = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </div>
  31. </div>

bokotra

Bokotra Default

Ny fomba bokotra dia azo ampiharina amin'ny zavatra rehetra misy ny .btnkilasy ampiharina. Na izany aza, amin'ny ankapobeny dia tianao ny hampihatra ireo amin'ny singa <a>sy <button>singa ho an'ny fandikana tsara indrindra.

bokotra class="" Description
btn Bokotra volondavenona mahazatra misy gradient
btn btn-primary Manome lanja hita maso fanampiny ary mamaritra ny hetsika voalohany amin'ny bokotra iray
btn btn-info Ampiasaina ho solon'ny fomba mahazatra
btn btn-success Manondro hetsika mahomby na tsara
btn btn-warning Midika izany fa tokony hotandremana amin'ity hetsika ity
btn btn-danger Manondro hetsika mampidi-doza na mety ho ratsy
btn btn-inverse Bokotra maitso matroka mifandimby, tsy mifamatotra amin'ny hetsika semantika na fampiasana
btn btn-link Atsaharo ny bokotra iray amin'ny fanaovana azy ho toy ny rohy nefa mitazona ny fihetsika bokotra

Mifanaraka amin'ny navigateur

IE9 dia tsy manapaka ny gradient ambadika amin'ny zoro boribory, ka esorinay izany. Mifandraika amin'izany, ny IE9 dia manafoana buttonireo singa kilemaina, manome loko maitso miaraka amin'ny alokaloka ratsy izay tsy azontsika amboarina.

Haben'ny bokotra

Mitady bokotra lehibe kokoa na kely kokoa? Ampio .btn-large, .btn-small, na .btn-minihabe fanampiny.

  1. <p>
  2.   < btn class = "btn btn-large btn-primary" type = "button" > bokotra lehibe </bt>  
  3.   <button class = "btn btn-large" type = "button" > bokotra lehibe </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > bokotra Default </button>  
  7.   <button class = "btn" type = "button" > bokotra Default </button>  
  8. </p>
  9. <p>
  10.   < btn class = "btn btn-small btn-primary" type = "button" > Button kely </bt>  
  11.   <button class = "btn btn-small" type = "button" > Button kely </button>  
  12. </p>
  13. <p>
  14.   < btn class = "btn btn-mini btn-primary" type = "button" > bokotra kely </bt>  
  15.   <button class = "btn btn-mini" type = "button" > Button kely </button>  
  16. </p>

Mamorona bokotra haavon'ny sakana — ireo izay mivelatra amin'ny sakan'ny ray aman-dreny iray — amin'ny alalan'ny fanampiana .btn-block.

  1. < btn class = "btn btn-large btn-block btn-primary" type = "button" > Bokotra avo lenta </bt>  
  2. <button class = "btn btn-large btn-block" type = "button" > Bokotra ambaratonga sakana </bt>

Fanjakana kilemaina

Ataovy toy ny tsy azo kitihina ny bokotra amin'ny alàlan'ny famelomana azy ireo hiverina 50%.

Singa vatofantsika

Ampio ny .disabledkilasy amin'ny <a>bokotra.

Rohy voalohany Rohy 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Rohy voalohany </a>  
  2. <a href = "#" class = "btn btn-lehibe sembana" > Rohy </a>

Fampitandremana!Ampiasainay .disabledho kilasy fampiasa eto, mitovy amin'ny .activekilasy mahazatra, ka tsy ilaina ny prefix. Ary koa, ity kilasy ity dia natao ho an'ny estetika ihany; tsy maintsy mampiasa JavaScript manokana ianao mba hanesorana ny rohy eto.

Button element

Ampio ny disabledtoetra amin'ny <button>bokotra.

  1. < btn type = "button" class = "btn btn-large btn-primary disabled" disabled = "kilemaina" > bokotra voalohany </bt>   
  2. < karazana bokotra = "bokotra" class = "btn btn-lehibe" kilema > bokotra </bt>

Kilasy iray, marika maromaro

Ampiasao ny .btnkilasy amin'ny singa <a>, <button>, na <input>.

Rohy 
  1. <a class = "btn" href = "" > Rohy </a>  
  2. <button class = "btn" type = "submit" > Button </button>  
  3. <input class = "btn" type = "button" value = "Input" >   
  4. <input class = "btn" type = "submit" value = "Alefaso" >

Amin'ny fomba fanao tsara indrindra, andramo ny hampifanaraka ny singa amin'ny teny manodidina anao mba hahazoana antoka fa mifanaraka amin'ny navigateur. Raha manana ianao dia inputampiasao <input type="submit">ny bokotra iray.

Sary

Manampia kilasy amin'ny <img>singa iray mba hamoronana sary mora amin'ny tetikasa rehetra.

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

Fampitandremana! .img-roundedary .img-circletsy miasa amin'ny IE7-8 noho ny tsy fahampian'ny border-radiusfanohanana.

Kisary avy amin'ny Glyphicons

Kisary glyphs

Kisary 140 amin'ny endrika sprite, azo alaina amin'ny loko maizina (default) sy fotsy, nomen'ny Glyphicons .

  • fitaratra kisary
  • icon-mozika
  • icon-search
  • valopy kisary
  • icon-fo
  • kintana kisary
  • icon-star-empty
  • mpampiasa icon
  • sarimihetsika-kisary
  • icon-th-lehibe
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-esory
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • kisary-fako
  • icon-trano
  • icon-file
  • icon-time
  • kisary-dalana
  • icon-download-alt
  • kisary-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-avereno
  • icon-refresh
  • icon-list-alt
  • kisary-hiddy
  • saina kisary
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • kisary-tag
  • icon-tags
  • kisary-boky
  • kisary-boky
  • kisary-print
  • kisary-fakan-tsary
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-haavo
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • kisary-lisitra
  • icon-indent-ankavia
  • icon-indent-right
  • icon-facetime-video
  • sary kisary
  • icon-pensil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • kisary-mizara
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • kisary-mihemotra
  • kisary-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • kisary-dingana-mandroso
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • famantarana-fanontaniana
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • kisary-ok-circle
  • icon-ban-circle
  • icon-arrow-ankavia
  • icon-arrow-right
  • icon-arrow-up
  • kisary-tsipìka-midina
  • icon-share-alt
  • icon-resize-feno
  • kisary-manova-kely
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-fanomezana
  • kisary-ravina
  • kisary-afo
  • icon-maso-open
  • kisary-maso-akaiky
  • famantarana-fampitandremana
  • icon-plane
  • kalandrie kisary
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • kisary-retweet
  • sarety-miantsena
  • icon-folder-akatona
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • kisary-bullhorn
  • lakolosy kisary
  • icon-certificat
  • kisary-ankihibe
  • kisary-ankihibe-midina
  • kisary-tanana-kavanana
  • kisary-tanana-havia
  • kisary-tanana
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-ankavia
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • globe icon
  • kisary-wrench
  • icon-asa
  • kisary-sivana
  • kisary-kitapo
  • kisary-ecran feno

Glyphicons attribution

Ny Glyphicons Halflings dia matetika tsy misy maimaim-poana, fa ny fifandaminana eo amin'ny Bootstrap sy ny mpamorona Glyphicons dia nahatonga izany tsy misy vidiny ho anao amin'ny maha-mpamorona azy. Ho fisaorana anao dia mangataka aminao izahay mba hampiditra rohy azo atao miverina amin'ny Glyphicons isaky ny azo ampiharina.

Ny fomba fampiasana

Ny kisary rehetra dia mila <i>marika misy kilasy tokana, misy préfix amin'ny icon-. Raha hampiasaina dia apetraho na aiza na aiza ity kaody manaraka ity:

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

Misy ihany koa ny fomba azo alaina ho an'ny kisary mivadika (fotsy), namboarina miaraka amin'ny kilasy fanampiny. Hampihatra manokana ity kilasy ity amin'ny fanjakana mihantona sy mavitrika ho an'ny rohy nav sy midina.

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

Fampitandremana!Rehefa mampiasa anilan'ny tady lahatsoratra, toy ny amin'ny bokotra na rohy nav, dia aoka ho azo antoka ny hamela toerana iray aorian'ny <i>marika mba hahazoana elanelana mety.

Ohatra kisary

Ampiasao izy ireo amin'ny bokotra, vondrona bokotra ho an'ny fitaovana, fitetezana, na fampidirana endrika efa voaomana.

bokotra

Vondron'ny bokotra ao anaty bokotra fitaovana
  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>
Midira ao anaty vondrona bokotra
mpampiasa 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Mpampiasa </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 = "icon-pencil" ></i> Ahitsio </a></li>  
  6.     <li><a href = "#" ><i class = "icon-fako" ></i> Fafao </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Fandrarana </a></li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Ataovy admin </a></li>  
  10.   </ul>
  11. </div>
Haben'ny bokotra
Star Star Star 
  1. <a class = "btn btn-large" href = "#" ><i class = "kintana kisary" ></i> Kintana </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "kintana-kisary" ></i> Kintana </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Star </a>

Fikarohana

  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> Tranomboky </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>

Sahan'ny endrika

  1. <div class = "vondrona fanaraha-maso" > 
  2.   <label class = "control-label" for = "inputIcon" > Adiresy mailaka </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>