Bootstrap

Base CSS

Yakakosha HTML zvinhu zvakashongedzwa uye zvakagadziridzwa nemakirasi akawedzera.

Musoro! Mapepa aya ndee v2.3.2, iyo isingachatsigirwi zviri pamutemo. Tarisa uone yazvino vhezheni yeBootstrap!

Typography

Misoro

Yese misoro yeHTML, <h1>kuburikidza <h6>iripo.

h1. Musoro 1

h2. Musoro 2

h3. Musoro 3

h4. Musoro wechi4

h5. Musoro 5
h6. Musoro 6

Body copy

Bootstrap's global default font-sizendeye 14px , ine line-heightye20px . Izvi zvinoshandiswa kune <body>uye ndima dzese. Uye zvakare, <p>(ndima) inogamuchira yepasi muganho wehafu yavo mutsara-urefu (10px nekusarudzika).

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>

Mutungamiri kopi yemuviri

Ita kuti ndima ibude pachena nekuwedzera .lead.

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

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

Yakavakwa neZvishoma

Chikero chetaipa chinobva pazvikamu zviviri ZVINOTAURWA mune zvinoshanduka.zvishoma : @baseFontSizeuye @baseLineHeight. Yekutanga ndiyo base font-saizi inoshandiswa mukati mese uye yechipiri ndiyo base mutsetse-urefu. Isu tinoshandisa iwo akasiyana uye mamwe masvomhu akareruka kugadzira miganho, padding, uye mutsara-urefu hwemhando yedu yese nezvimwe. Gadzirisa ivo uye Bootstrap inogadzirisa.

Kusimbisa

Shandisa HTML's default emphasis tag ane huremu zvitaera.

<small>

Kuti usasimbise mukati kana mabhuroko ezvinyorwa, shandisa diki tag.

Mutsara wechinyorwa uyu unoitirwa kubatwa sechinyorwa chakanaka.

<p> <small> Uyu mutsara wemavara unoitirwa kubatwa seakadhindwa zvakanaka. </ diki> </ p>

Bold

Zvekusimbisa chidimbu chemavara ane huremu hwefonti-huremu.

Chidimbu chinotevera chemavara chinoshandurwa semavara matema .

<strong> yakashandurwa semavara matema </strong>

Kutsveyamisa mabhii

Zvekusimbisa chidimbu chemavara nemavara akatsveyama.

Chidimbu chinotevera chemavara chinoshandurwa semavara akatsveyamiswa .

<em> yakanyorwa semavara akatsveyamiswa </em>

Musoro!Inzwa wakasununguka kushandisa <b>uye <i>muHTML5. <b>inoitirwa kuratidza mazwi kana mitsara pasina kuendesa kukosha kwekuwedzera asi <i>kazhinji iri yezwi, tekinoroji mazwi, nezvimwe.

Alignment makirasi

Gadzirisa zvinyorwa kune zvikamu zvine makirasi ekugadzirisa zvinyorwa.

Mashoko akarocherwa kuruboshwe.

Mavara akarongedzerwa nepakati.

Mavara anoenderana nekurudyi.

  1. <p class = "text-left" > Mavara anoenderana nekuruboshwe. </ p> 
  2. <p class = "text-center" > Mavara anoenderana nepakati. </ p> 
  3. <p kirasi = "mavara-kurudyi" > Mavara anoenderana nekurudyi. </ p>

Makirasi ekusimbisa

Taurira zvinorehwa kuburikidza neruvara uine mashoma emakirasi ekusimbisa ekushandisa.

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, tor 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>

Madimburiko

Kuitwa kwakamisikidzwa kweHTML's <abbr>element yekupfupisa uye acronyms kuratidza yakawedzera vhezheni pane hover. Madimburiko ane titlehunhu ane mwenje wepasi pebhodha uye yekubatsira cursor pane hover, ichipa mamwe mamiriro pane hover.

<abbr>

Kuti uwane mavara akawedzerwa pahovha refu yechidimbu, sanganisira titlehunhu.

Muchidimbu chezwi rokuti attr .

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

<abbr class="initialism">

Wedzera .initialismkuchidimbu chemavara madiki zvishoma.

HTML ndicho chinhu chakanakisa kubva pachingwa chakachekwa.

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

Kero

Ipa ruzivo rwekufonera kumadzitateguru ari pedyo kana boka rose rebasa.

<address>

Chengetedza fomati nekugumisa mitsetse yese ne <br>.

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

Blockquotes

Zvekutora zvivharo zvemukati kubva kune imwe sosi mukati megwaro rako.

Default blockquote

Putira <blockquote>kutenderedza chero HTML se quote. Kuti uwane mazwi akatwasuka tinokurudzira a <p>.

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

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

Blockquote sarudzo

Chimiro uye zvemukati zvinoshanduka kune nyore kusiyanisa pane yakajairwa blockquote.

Kudoma kwakabva

Wedzera <small>tag yekuziva kwakabva. Peta zita rekwakabva basa mu <cite>.

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

Mumwe ane mukurumbira muna Source Title 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante. </ p>
  3.   <small> Mumwe munhu ane mukurumbira <cite title = "Source Title" > Source Title </cite></small> 
  4. </blockquote>

Alternate displays

Shandisa .pull-rightkune yakayangarara, yakanangana-kurudyi blockquote.

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

Mumwe ane mukurumbira muna Source Title 
  1. <blockquote kirasi = "dhonza-kurudyi" > 
  2.   ...
  3. </blockquote>

Lists

Zvisina kurairwa

Rondedzero yezvinhu umo kurongeka kusina basa zvakajeka.

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

Ordered

Rondedzero yezvinhu umo kurongeka kunokosha zvakajeka.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis mu 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

Bvisa iyo yakasarudzika list-styleuye yekusiya padding pane rondedzero zvinhu (pakarepo vana chete).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis mu 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 = "isina kunyorwa" > 
  2.   <li> ... </li>
  3. </ul>

Inline

Isa zvinhu zvese zvakarongwa pamutsara mumwe une inline-blockuye mamwe mapedhi akareruka.

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

Tsanangudzo

Rondedzero yematemu ane tsananguro dzawo.

Tsanangudzo mazita
Rondedzero yerondedzero yakakwana pakutsanangura mazwi.
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>

Tsanangudzo yakachinjika

Ita mazwi uye tsananguro mumutsara <dl>wakatarisana-ne-parutivi.

Tsanangudzo mazita
Rondedzero yerondedzero yakakwana pakutsanangura mazwi.
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>

Musoro!Tsanangudzo dzakachinjika dzinozodimburira mazwi akareba zvekusakwana muchikamu chekuruboshwe gadzirisa text-overflow. Munzvimbo dzakatetepa dzekutarisa, ivo vanozochinja kune default stacked marongero.

Code

Inline

Putira zvidimbu zvemukati zvekodhi ne <code>.

Semuenzaniso, <section>inofanira kuputirwa se inline. 
  1. Semuenzaniso , < code> & lt ; chikamu & gt ;</ kodhi > inofanira kuputirwa semukati .

Basic block

Shandisa <pre>kune akawanda mitsara yekodhi. Ita shuwa kutiza mabhuraketi chero emakona ari mukodhi kuti ukwanise kuburitsa.

<p>Eyemuenzaniso mavara pano...</p>
  1. <pre>
  2.   <p>Eyemuenzaniso mavara pano...</p>
  3. </pre>

Musoro!Iva nechokwadi chekuchengeta kodhi mukati <pre>memategi padyo nekuruboshwe sezvinobvira; ichapa ma tabo ese.

Iwe unogona kusarudza kuwedzera .pre-scrollablekirasi iyo inoisa max-urefu hwe350px uye inopa y-axis scrollbar.

Matafura

Default styles

Kune ekutanga masitaera - mwenje padding uye chete yakachinjika dividers - wedzera base kirasi .tablekune chero <table>.

# Zita rokutanga Zita rokupedzisa Username
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry Shiri @twitter 
  1. <tafura yekirasi = "tafura" > 
  2.   …
  3. </ table>

Optional makirasi

Wedzera chero anotevera makirasi .tablekukirasi yekutanga.

.table-striped

Inowedzera zebra-striping kune chero tafura mutsara mukati meiyo <tbody>kuburikidza :nth-childneCSS selector (isipo muIE7-8).

# Zita rokutanga Zita rokupedzisa Username
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry Shiri @twitter 
  1. <tafura yekirasi = "tafura tafura-mitsetse" > 
  2.   …
  3. </ table>

.table-bordered

Wedzera miganhu uye makona akakomberedzwa patafura.

# Zita rokutanga Zita rokupedzisa Username
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter 
  1. <tafura yekirasi = "tafura tafura-yakaganhurwa" > 
  2.   …
  3. </ table>

.table-hover

Ita kuti hover state pamitsetse yetafura mukati me <tbody>.

# Zita rokutanga Zita rokupedzisa Username
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter 
  1. <tafura yekirasi = "tafura tafura-hover" > 
  2.   …
  3. </ table>

.table-condensed

Inoita kuti matafura awedzere kuwirirana nekucheka cell padding nepakati.

# Zita rokutanga Zita rokupedzisa Username
1 Mark Otto @mdo
2 Jacob Thornton @mafuta
3 Larry the Shiri @twitter 
  1. <tafura yekirasi = "tafura yetafura-yakaderedzwa" > 
  2.   …
  3. </ table>

Optional row makirasi

Shandisa makirasi emamiriro ekunze kupendesa mitsara yematafura.

Kirasi Tsanangudzo
.success Zvinoratidza chiito chakabudirira kana chakanaka.
.error Zvinoratidza chiitiko chine njodzi kana chingangove chakaipa.
.warning Inoratidza yambiro ingada kutariswa.
.info Inoshandiswa seimwe nzira kune yakasarudzika masitaera.
# Product Payment Yatorwa Status
1 TB - Monthly 01/04/2012 Yakatenderwa
2 TB - Monthly 02/04/2012 Zvakaramba
3 TB - Monthly 03/04/2012 Pending
4 TB - Monthly 04/04/2012 Fona kuti usimbise 
  1. ...
  2.   < tr class = "kubudirira" >
  3.     <td> 1 < /td>
  4.     <td>TB - Monthly</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Yatenderwa</ td >
  7.   </ tr >
  8. ...

Inotsigirwa tafura markup

Rondedzero yetafura inotsigirwa HTML zvinhu uye mashandisirwo avanofanira kuita.

Tag Tsanangudzo
<table> Kupeta chinhu chekuratidza data mune tabular fomati
<thead> Chinhu chemudziyo wemitsara yemusoro wetafura ( <tr>) kuisa mitsara yetafura
<tbody> Container element yetafura mitsetse ( <tr>) mumutumbi wetafura
<tr> Container element yeseti yematafura maseru ( <td>kana <th>) anooneka pamutsara mumwe
<td> Default table cell
<th> Yakakosha tafura sero yekoramu (kana mutsara, zvichienderana nekukura uye kuiswa) mavara
<caption> Tsananguro kana pfupiso yezvakabatwa netafura, kunyanya inobatsira kuvaverengi vescreen 
  1. <tafura>
  2.   <caption> ... </caption>
  3.   <musoro>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </ tr>
  8.   </ musoro>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </ tr>
  14.   </ tbody>
  15. </ table>

Mafomu

Default styles

Ega ega mafomu ekudzora anogashira styling, asi pasina chero inodiwa base kirasi pane <form>kana yakakura shanduko mumarkup. Mibairo yakaturikidzana, yakatarisana nekuruboshwe pamusoro pezvidzoro zvefomu.

Legend Muenzaniso we block-level mavara ekubatsira pano. 
  1. <form>
  2.   <fieldset>
  3.     <legend> Ngano </legend>
  4.     <label> Zita rezita </ ​​label>
  5.     <input type = "text" placeholder = "Taipa chimwe chinhu ..." >  
  6.     <span class = "help-block" > Muenzaniso block-level rubatsiro runyorwa pano. </ span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Nditarise 
  9.     </ label>
  10.     <button type = "submit" class = "btn" > Tumira </button>  
  11.   </fieldset>
  12. </ fomu>

Optional marongero

Inosanganisirwa neBootstrap matatu esarudzo mafomu marongero emakesi ekushandisa akajairika.

Tsvaga fomu

Wedzera .form-searchkufomu uye .search-querykune <input>yekuwedzera-yakatenderedzwa mavara ekuisa.

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

Inline fomu

Wedzera .form-inlinekune mavara akarongedzerwa kuruboshwe uye inline-block zvidhiraivho kune compact marongero.

  1. <fomu kirasi = "fomu-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" > Ndirangarirewo 
  6.   </ label>
  7.   <button type = "submit" class = "btn" > Pinda </button>  
  8. </ fomu>

Horizontal fomu

Kurudyi ronesa mavara uye woayangarara kuruboshwe kuti aoneke pamutsetse wakafanana nemadhirairi. Inoda shanduko dzakawanda kubva pafomu rekutanga:

  • Wedzera .form-horizontalkune fomu
  • Putira mavara uye zvidzoreso mukati.control-group
  • Wedzera .control-labelkune iyo label
  • Putira chero zvigadziriso zvinobatanidzwa mukati .controlskuti zvienzane
  1. <form class = "form-horizontal" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" ye = "inputEmail" > Email </label>  
  4.     <div class = "controls" > 
  5.       <input type = "text" id = "inputEmail" placeholder = " Email" >   
  6.     </ div>
  7.   </ div>
  8.   <div class = "control-group" > 
  9.     <label class = "control-label" ye = "inputPassword" > Password </label>  
  10.     <div class = "controls" > 
  11.       <input type = "password" id = "inputPassword" placeholder = " Password" >   
  12.     </ div>
  13.   </ div>
  14.   <div class = "control-group" > 
  15.     <div class = "controls" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Ndirangarirewo 
  18.       </ label>
  19.       <button type = "submit" class = "btn" > Pinda </button>  
  20.     </ div>
  21.   </ div>
  22. </ fomu>

Anotsigirwa fomu anodzora

Mienzaniso yezvidzoreso zvefomu zvakajairwa zvinotsigirwa muchimiro chechimiro chechimiro.

Inputs

Mazhinji mafomu ekutonga, mavara-akavakirwa ekuisa ndima. Inosanganisira tsigiro yemhando dzese dzeHTML5: mavara, password, datetime, datetime-yenzvimbo, zuva, mwedzi, nguva, vhiki, nhamba, email, url, tsvaga, tel, uye ruvara.

Inoda kushandiswa kweiyo yakatarwa typenguva dzese.

  1. <input type = "text" placeholder = "Mashoko ekupinza" >

Textarea

Form control inotsigira mitsetse yakawanda yemavara. Chinja rowshunhu sezvinodiwa.

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

Checkboxes nemaredhiyo

Mabhokisi ekutarisa ndeekusarudza imwe kana akati wandei sarudzo mune runyorwa nepo maredhiyo ari ekusarudza imwe sarudzo kubva kune akawanda.

Default (yakaturikidzana)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Sarudzo yekutanga ndeichi neicho-iva nechokwadi chekusanganisira kuti sei zvakanaka
  4. </ label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" yakatariswa >     
  8.   Sarudzo yekutanga ndeichi neicho-iva nechokwadi chekusanganisira kuti sei zvakanaka
  9. </ label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Sarudzo yechipiri inogona kuve chimwe chinhu uye kuisarudza kunobvisa sarudzo yekutanga
  13. </ label>

Inline checkboxes

Wedzera .inlinekirasi kunhevedzano yemabhokisi echeki kana maredhiyo ekudzora anoonekwa pamutsetse mumwe chete.

  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>

Anosarudza

Shandisa iyo yakasarudzika sarudzo kana tsanangura a multiple="multiple"kuratidza akawanda sarudzo kamwechete.


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

Kuwedzera kudzora fomu

Kuwedzera pamusoro pezvimiro zvebhurawuza zviripo, Bootstrap inosanganisira zvimwe zvinobatsira zvefomu.

Zvakafanorongwa uye zvakawedzerwa

Wedzera mavara kana mabhatani pamberi kana mushure mechero mavara-based ekuisa. Ziva kuti selectzvinhu hazvitsigirwe pano.

Default options

Peta .add-onneine inputimwe yemakirasi maviri kufanogadzirira kana kuisa mavara kune inopinza.

@

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

Yakasanganiswa

Shandisa ese makirasi uye maviri .add-onmaekisheni ekugadzirira nekuwedzera mapindiro.

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

Mabhatani pachinzvimbo chemavara

Panzvimbo peiyo <span>ine mavara, shandisa a .btnkuisa bhatani (kana maviri) kune yekuisa.

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

Mabhatani anodonhedza

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

Segmented dropdown groups

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

Tsvaga fomu

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

Kudzora saizi

Shandisa hukama saizi makirasi senge .input-largekana kufananidza zvaunopinza kune grid column saizi uchishandisa .span*makirasi.

Block level inputs

Ita chero chinhu <input>kana <textarea>chinhu chiite senge block level element.

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

Relative saizi

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

Musoro!Mushanduro dzinotevera, tichange tichishandura mashandisirwo emakirasi ekuisa aya kuti aenderane nehukuru hwemabhatani edu. Semuenzaniso, .input-largeichawedzera padding uye font-saizi yekupinza.

Grid saizi

Shandisa .span1kuti .span12kune zvinopinda zvinoenderana nehukuru hwakafanana hwegidhi column.

  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. </sarudza>
  7. <select class = "span2" > 
  8.   ...
  9. </sarudza>
  10. <select class = "span3" > 
  11.   ...
  12. </sarudza>

Kune akawanda mapindiro egidhi pamutsetse, shandisa .controls-rowkirasi yekugadziridza kuitira nzvimbo yakakodzera . Inoyangarara zvinopinza kuti idonhe chena-nzvimbo, inoseta miganho yakakodzera, uye inobvisa iyo inoyangarara.

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

Uneditable inputs

Ipa data mune fomu risingagadzirike pasina kushandisa chaiyo fomu markup.

Zvimwe zvakakosha pano 
  1. <span class = "input-xlarge isingashanduki-input" > Kumwe kukosha pano </span>

Fomu zviito

Pedzisa fomu neboka rezviito (mabhatani). Kana yaiswa mukati me .form-actions, mabhatani anozozvipinza otomatiki kuti aenderane nemafomu ekudzora.

  1. <div kirasi = "fomu-zviito" > 
  2.   <button type = "submit" class = "btn btn-primary" > Chengetedza shanduko </button>  
  3.   <button type = "button" class = "btn" > Cancel </button>  
  4. </ div>

Batsira mameseji

Inline uye block level tsigiro yezvinyorwa zvekubatsira zvinoonekwa zvakatenderedza fomu zvidzoreso.

Inline rubatsiro

Rubatsiro rwemashoko emukati 
  1. <input type = "text" ><span class = "help-inline" > Rubatsiro rwemashoko mukati </span>

Block rubatsiro

Runyoro rurefu rwerubatsiro rwunotyora mutsetse mutsva uye runogona kudarika mutsara mumwe. 
  1. <input type = "text" ><span class = "help-block" > Chivharo chakareba chemashoko erubatsiro chinotyora pamutsetse mutsva uye chinogona kuwedzera kupfuura mutsetse mumwe. </ span>

Form control inoti

Ipa mhinduro kuvashandisi kana vashanyi vane mamiriro ekutanga emhinduro pamafomu ekudzora nemalebula.

Input focus

Isu tinobvisa masitaera ekutanga outlinepane mamwe mafomu ekutonga uye toisa a box-shadowpanzvimbo yayo ye :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Izvi zvakatariswa..." >

Zvekushandisa zvisirizvo

Maitiro ekuisa pachishandiswa default browser kushanda ne :invalid. Rondedzera a type, wedzera requiredhunhu kana munda usiri wekusarudza, uye (kana zvichibvira) tsanangura a pattern.

Izvi hazviwanikwe mumavhezheni eInternet Explorer 7-9 nekuda kwekushaikwa kwerutsigiro rweCSS pseudo selectors.

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

Zvakadzimwa

Wedzera disabledhunhu pane inopinza kudzivirira mushandisi kupinza uye kukonzeresa kutaridzika kwakasiyana zvishoma.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Yakaremara yekupinda pano..." yakadzimwa >

Validation inoti

Bootstrap inosanganisira yekusimbisa masitaera yekukanganisa, yambiro, ruzivo, uye mameseji ebudiriro. Kuti ushandise, wedzera kirasi yakakodzera kune yakatenderedza .control-group.

Pane chinhu chinogona kunge chisina kumira zvakanaka
Ndokumbira ugadzirise kukanganisa
Username yakatorwa
Woohoo! 
  1. <div class = "control-group yambiro" > 
  2.   <label class = "control-label" ye = "inputWarning" > Input with yambiro </label>  
  3.   <div class = "controls" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Chimwe chinhu chingave chakashata </span> 
  6.   </ div>
  7. </ div>
  8.  
  9. <div class = "control-group error" > 
  10.   <label class = "control-label" ye = "inputError" > Input ine kukanganisa </label>  
  11.   <div class = "controls" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Ndokumbira ugadzirise kukanganisa </span> 
  14.   </ div>
  15. </ div>
  16.  
  17. <div class = "control-group info" > 
  18.   <label class = "control-label" ye = "inputInfo" > Input ine ruzivo </label>  
  19.   <div class = "controls" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Zita rekushandisa rakatotorwa </span> 
  22.   </ div>
  23. </ div>
  24.  
  25. <div class = "control-group kubudirira" > 
  26.   <label class = "control-label" ye = "inputSuccess" > Input inobudirira </label>  
  27.   <div class = "controls" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "rubatsiro-inline" > Woohoo! </ span> 
  30.   </ div>
  31. </ div>

Mabhatani

Default mabhatani

Mabhatani masitayera anogona kuiswa kune chero chinhu chine .btnkirasi yakashandiswa. Nekudaro, kazhinji iwe unozoda kushandisa izvi kune chete <a>uye <button>zvinhu zvezvakanakisa kupa.

Bhatani kirasi="" Tsanangudzo
btn Bhatani regrey rakajairwa rine gradient
btn btn-primary Inopa humwe huremu hwekuona uye inoratidza chiitiko chekutanga museti yemabhatani
btn btn-info Inoshandiswa seimwe nzira kune yakasarudzika masitaera
btn btn-success Zvinoratidza chiito chakabudirira kana chakanaka
btn btn-warning Inoratidza kuchenjerera kunofanira kutorwa nechiito ichi
btn btn-danger Zvinoratidza chiitiko chine njodzi kana chingangove chakaipa
btn btn-inverse Rimwe bhatani rakasviba grey, risina kusungirirwa kune semantic chiito kana kushandiswa
btn btn-link Simbisa bhatani nekuita kuti riite senge chinongedzo uchichengeta mabhatani maitiro

Cross browser kuenderana

IE9 haichekere magradients pamakona akatenderedzwa, saka tinoibvisa. Zvinechekuita, IE9 inokanganisa buttonzvinhu zvakavharwa, ichipa mavara egrey ane akashata mavara-mumvuri watisingakwanise kugadzirisa.

Bhatani saizi

Unoda mabhatani makuru kana madiki? Wedzera .btn-large, .btn-small, kana .btn-minimamwe masaizi.

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

Gadzira mabhatani e block level — ayo anotambanudzira upamhi hwakazara hwemubereki — nekuwedzera .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > bhatani rezinga rekuvhara </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Bhatani rezinga rekuvhara </button>

Disabled state

Ita mabhatani aite seasingabatike nekuamisa kumashure 50%.

Anchor element

Wedzera .disabledkirasi <a>kumabhatani.

Primary link Link 

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

Musoro!Isu tinoshandisa .disabledsekirasi yekushandisa pano, yakafanana .activenekirasi yakajairika, saka hapana prefix inodiwa. Zvakare, iyi kirasi ndeyekunaka chete; unofanira kushandisa tsika JavaScript kudzima zvinongedzo pano.

Bhatani chinhu

Wedzera disabledhunhu <button>kumabhatani.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Bhatani repuraimari </button>   
  2. <button type = "button" class = "btn btn-large" yakaremara > Bhatani </button>

Kirasi imwe, ma tag akawanda

Shandisa .btnkirasi pane <a>, <button>, kana <input>chinhu.

Link 
  1. <a class = "btn" href = ""> Link </a> _  
  2. <button class = "btn" type = "submit" > Bhatani </button>  
  3. <input class = "btn" type = "bhatani" kukosha = "Input" >   
  4. <input class = "btn" type = "submit" value = "Submit" >

Sekuita kwakanakisa, edza kuenzanisa chinhu chechimiro chako kuti uve nechokwadi chekufananidza muchinjiko-browser rendering. Kana uine input, shandisa <input type="submit">bhatani rako.

Images

Wedzera makirasi kune <img>chinhu kuti zvive nyore kutaira mifananidzo mune chero chirongwa.

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

Musoro! .img-roundeduye .img-circleusashande muIE7-8 nekuda kwekushaya border-radiusrutsigiro.

Icons neGlyphicons _

Icon glyphs

140 icons mune sprite fomu, inowanikwa mune yakasviba grey (default) uye chena, yakapihwa neGlyphicons .

  • icon-girazi
  • icon-music
  • icon-search
  • icon-envelope
  • icon-moyo
  • icon-star
  • icon-nyeredzi-isina
  • icon-mushandisi
  • icon-firimu
  • icon-th-guru
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-bvisa
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-marara
  • icon-kumba
  • icon-file
  • icon-nguva
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-denderedzwa
  • icon-kudzokorora
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-mureza
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-bhuku
  • icon-bookmark
  • icon-print
  • icon-kamera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-urefu
  • icon-text-width
  • icon-align-kuruboshwe
  • icon-align-center
  • icon-align-kurudyi
  • icon-align-justify
  • icon-list
  • icon-indent-kuruboshwe
  • icon-indent-kurudyi
  • icon-facetime-vhidhiyo
  • icon-picture
  • icon-penzura
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-nhanho-kumashure
  • icon-fast-backward
  • icon-kumashure
  • icon-play
  • icon-pause
  • icon-stop
  • icon-mberi
  • icon-nekukurumidza-mberi
  • icon-nhanho-mberi
  • icon-eject
  • icon-chevron-kuruboshwe
  • icon-chevron-kurudyi
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-mubvunzo-chiratidzo
  • icon-info-sign
  • icon-screenshot
  • icon-bvisa-denderedzwa
  • icon-ok-denderedzwa
  • icon-ban-denderedzwa
  • icon-museve-kuruboshwe
  • icon-museve-kurudyi
  • icon-museve-up
  • icon-museve-pasi
  • icon-share-alt
  • icon-resize-full
  • icon-resize-diki
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-chipo
  • icon-leaf
  • icon-moto
  • icon-ziso-yakavhurika
  • icon-ziso-kuvhara
  • icon-yambiro-chiratidzo
  • icon-ndege
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magineti
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-ngoro
  • icon-folder-close
  • icon-folder-yakazaruka
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-chigunwe-kumusoro
  • icon-zvigunwe-pasi
  • icon-ruoko-kurudyi
  • icon-ruoko-kuruboshwe
  • icon-ruoko-kumusoro
  • icon-ruoko-pasi
  • icon-denderedzwa-museve-kurudyi
  • icon-denderedzwa-museve-kuruboshwe
  • icon-denderedzwa-museve-kumusoro
  • icon-denderedzwa-museve-pasi
  • icon-globe
  • icon-wrench
  • icon-mabasa
  • icon-sefa
  • icon-briefcase
  • icon-yakazara skrini

Glyphicons attribution

Glyphicons Halflings haiwanzo kuwanikwa mahara, asi kurongeka pakati peBootstrap nevagadziri veGlyphicons vakaita kuti izvi zvigoneke pasina muripo kwauri sevagadziri. Sekutenda, tinokukumbira kuti ubatanidze chinongedzo chekudzokera kuGlyphicons pese pazvinoita.

Kushandisa sei

Yese ma icons anoda <i>tag ine yakasarudzika kirasi, prefixed ne icon-. Kuti ushandise, isa kodhi inotevera chero kupi zvako:

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

Kune zvakare masitaera anowanikwa kune inverted (chena) icons, akagadzirirwa nekirasi imwe yekuwedzera. Isu tichanyatso simbisa iyi kirasi pane hover uye inoshanda nyika kune nav uye yekudonha zvinongedzo.

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

Musoro!Paunenge uchishandisa parutivi tambo dzemavara, semabhatani kana nav zvinongedzo, ita shuwa yekusiya nzvimbo mushure me <i>tag yepakati yakakodzera.

Icon mienzaniso

Ashandise mumabhatani, mapoka emabhatani eturubhu, kufamba, kana mamepu akafanorongwa.

Mabhatani

Boka remabhatani mubhatani rekushandisa
  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 muboka remabhatani
Mushandisi 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Mushandisi </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-penzura" ></i> Rongedza </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Delete </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Kurambidzwa </a></li>  
  8.     <li kirasi = "divider" > </ li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Ita admin </a></li>  
  10.   </ul>
  11. </ div>
Bhatani saizi
Star Star Star 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Nyenyedzi </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Nyenyedzi </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Nyenyedzi </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-penzura" ></i> Zvishandiso </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Zvimwe </a> </li>  
  6. </ul>

Mafomu minda

  1. <div class = "control-group" > 
  2.   <label class = "control-label" ye = "inputIcon" > Kero yeemail </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>