Bootstrap

Base CSS

Zofunikira za HTML zosinthidwa ndikuwonjezeredwa ndi makalasi okulirapo.

Kujambula

Mitu

Mitu yonse ya HTML, <h1>kudzera <h6>ikupezeka.

h1 ndi. Mutu 1

h2 ndi. Mutu 2

h3 ndi. Mutu 3

h4 ndi. Mutu 4

h5 ndi. Mutu 5
h6 ndi. Mutu 6

Thupi kope

Kusakhazikika kwapadziko lonse kwa Bootstrap font-sizendi 14px , yokhala line-heightndi 20px . Izi zikugwiritsidwa ntchito ku <body>ndime zonse. Kuphatikiza apo, <p>(ndime) amalandila malire apansi a theka la kutalika kwa mzere wawo (10px mwachisawawa).

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. Ndife 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 ili si mi porta gravida ndi eget metus. Ndife mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

kope lotsogolera thupi

Pangani ndime kukhala yodziwika bwino powonjezera .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Chifukwa chake, si commodo luctus.

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

Zomangidwa ndi Zochepa

Sikelo ya typographic imachokera pamitundu iwiri ya LESS mu variables.less : @baseFontSizendi @baseLineHeight. Choyamba ndi kukula kwa font komwe kumagwiritsidwa ntchito ponsepo ndipo chachiwiri ndi kutalika kwa mzere woyambira. Timagwiritsa ntchito masinthidwe amenewo ndi masamu osavuta kupanga mizere, ma padding, ndi kutalika kwa mzere wamitundu yathu yonse ndi zina zambiri. Sinthani Mwamakonda Anu ndikusintha kwa Bootstrap.

Kutsindika

Gwiritsani ntchito ma tag otsindika a HTML okhala ndi masitayelo opepuka.

<small>

Kuti musatsindikitse mawu apakatikati kapena midadada, gwiritsani ntchito tagi yaying'ono.

Mzere wa mawu awa akuyenera kuwonedwa ngati kusindikizidwa bwino.

<p> <pang'ono> Mzerewu uyenera kuwonedwa ngati wosindikiza bwino. </ zazing'ono> </p>

Zolimba

Kuti mutsindike kachidutswa kakang'ono ka zilembo zolemera mafonti.

Kaduka kakang'ono kotsatira kamene kali ndi mawu akuda kwambiri .

<strong> omasuliridwa ngati mawu akuda kwambiri </strong>

Mawu Opendekeka

Potsindika kaduka kakang'ono ka mawu okhala ndi mawu opendekera.

Kaduka kakang'ono kotsatira kalembedwe ka mawu opendekera .

<em> omasuliridwa ngati mawu opendekera </em>

Mungodziwiratu!Khalani omasuka kugwiritsa ntchito <b>komanso <i>mu HTML5. <b>cholinga chake ndi kuwunikira mawu kapena ziganizo popanda kuwonetsa kufunikira kowonjezera pomwe <i>nthawi zambiri zimakhala za mawu, mawu aukadaulo, ndi zina.

Maphunziro otsindika

Fotokozerani tanthauzo kudzera mumitundu ndi makalasi ochepa otsindika.

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 lero quam. Pellentesque ornare sem lacinia quam venenatis.

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

Chidule cha mawu

Kukhazikitsa kosinthika kwa chinthu cha HTML <abbr>chofupikitsa ndi ma acronyms kuti awonetse mtundu wokulitsidwa pa hover. Mafupipafupi okhala ndi mawonekedwe titleali ndi malire a madontho opepuka pansi ndi cholozera chothandizira pa hover, zomwe zimapereka mawu owonjezera pa hover.

<abbr>

Pamawu owonjezera pa chidule cha chidule chake, phatikizani chizindikirocho title.

Chidule cha mawu akuti attr .

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

<abbr class="initialism">

Onjezani .initialismku chidule cha kukula kwa mawonekedwe ang'onoang'ono.

HTML ndiye chinthu chabwino kwambiri kuyambira mkate wodulidwa.

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

Maadiresi

Perekani zidziwitso za makolo apafupi kapena gulu lonse lantchito.

<address>

Sungani masanjidwe pomaliza mizere yonse ndi <br>.

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

Mawu a blockquotes

Kuti mugwire mawu midadada kuchokera kugwero lina mkati mwazolemba zanu.

Ma blockquote osasinthika

Manga <blockquote>mozungulira HTML iliyonse ngati mawu. Pamawu olunjika timalimbikitsa a <p>.

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

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

Zosankha za blockquote

Kusintha kwa kalembedwe ndi zomwe zili pakusintha kosavuta pa blockquote wamba.

Kutchula gwero

Onjezani <small>tag kuti muzindikire kochokera. Manga dzina la gwero la ntchitoyo mu <cite>.

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

Wina wotchuka mu Source Title 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere ndi ante. </p>
  3.   <wamng'ono> Wina wotchuka <cite title = "Source Title" > Mutu Wachitsime </cite></small> 
  4. </blockquote>

Mawonekedwe osiyanasiyana

Gwiritsani .pull-rightntchito blockquote yoyandama, yolunjika kumanja.

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

Wina wotchuka mu Source Title 
  1. <blockquote class = "kukoka-kumanja" > 
  2.   ...
  3. </blockquote>

Mndandanda

Osalamulidwa

Mndandanda wazinthu zomwe dongosololi lilibe kanthu .

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem ndi massa
  • Facilisis mu pretium nisl aliquet
  • Chotsatira cha 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>

Adalamulidwa

Mndandanda wazinthu zomwe dongosololi limafunikira .

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem ndi massa
  4. Facilisis mu pretium nisl aliquet
  5. Chotsatira cha 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>

Osatchulidwa

Chotsani zosunga zobwezeretsera list-stylendi kumanzere pazomwe zili pamndandanda (ana apompopompo okha).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem ndi massa
  • Facilisis mu pretium nisl aliquet
  • Chotsatira cha 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 = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

Motsatana

Ikani zinthu zonse pamndandanda umodzi wokhala inline-blockndi zotchingira zowala.

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

Kufotokozera

Mndandanda wa mawu omwe ali ndi mafotokozedwe ogwirizana nawo.

Mndandanda wamafotokozedwe
Mndandanda wamafotokozedwe ndi abwino kufotokozera mawu.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id ili si mi porta gravida ndi eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Kufotokozera kopingasa

Pangani mawu ndi mafotokozedwe <dl>motsatira mbali ndi mbali.

Mndandanda wamafotokozedwe
Mndandanda wamafotokozedwe ndi abwino kufotokozera mawu.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id ili si mi porta gravida ndi eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Mungodziwiratu!Mafotokozedwe opingasa adzafupikitsa mawu omwe ndi aatali kwambiri kuti agwirizane ndi kukonza ndime yakumanzere text-overflow. Pamalo ocheperako, asintha kukhala mawonekedwe osakhazikika.

Kodi

Motsatana

Manga zilembo zam'munsi zamakhodi ndi <code>.

Mwachitsanzo, <section>iyenera kukulungidwa ngati inline. 
  1. Mwachitsanzo , <code > <section> </ code > ikuyenera kukulungidwa ngati mzere .

Choyambirira block

Gwiritsani <pre>ntchito mizere ingapo yamakhodi. Onetsetsani kuti mwathawa m'mabokosi aliwonse mu code kuti mumasulire bwino.

<p>Zitsanzo zalemba apa...</p>
  1. <pre>
  2.   <p>Zitsanzo za mawu apa...</p>
  3. </ pre>

Mungodziwiratu!Onetsetsani kuti mwasunga ma code mkati mwa <pre>ma tag pafupi ndi kumanzere momwe mungathere; idzapereka ma tabo onse.

Mutha kuwonjezera .pre-scrollablekalasi yomwe ingakhazikitse kutalika kwa 350px ndikupereka y-axis scrollbar.

Matebulo

Masitayilo ofikira

Pamakongoletsedwe oyambira - zotchingira zopepuka komanso zogawa zopingasa zokha - onjezerani kalasi yoyambira .tableku chilichonse <table>.

# Dzina loyamba Dzina lomaliza Dzina lolowera
1 Mark Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter 
  1. <table class = "table" > 
  2.   …
  3. </table>

Maphunziro osankha

Onjezani magulu otsatirawa ku .tablekalasi yoyambira.

.table-striped

Imawonjezera kukwapula kwa mbidzi pamzere uliwonse wa tebulo mkati <tbody>mwa :nth-childchosankha cha CSS (chosapezeka mu IE7-IE8).

# Dzina loyamba Dzina lomaliza Dzina lolowera
1 Mark Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter 
  1. <table class = "table table-mizere" > 
  2.   …
  3. </table>

.table-bordered

Onjezani malire ndi ngodya zozungulira patebulo.

# Dzina loyamba Dzina lomaliza Dzina lolowera
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter 
  1. <table class = "table-bordered" > 
  2.   …
  3. </table>

.table-hover

Yambitsani hover state pamizere ya tebulo mkati mwa <tbody>.

# Dzina loyamba Dzina lomaliza Dzina lolowera
1 Mark Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter 
  1. <table class = "table-hover" > 
  2.   …
  3. </table>

.table-condensed

Imapangitsa matebulo kukhala ophatikizika kwambiri podula ma cell padding pakati.

# Dzina loyamba Dzina lomaliza Dzina lolowera
1 Mark Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Mbalame @twitter 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </table>

Makalasi amizere osasankha

Gwiritsani ntchito makalasi okhazikika kuti musankhe mizere ya tebulo.

Kalasi Kufotokozera
.success Imawonetsa kuchita bwino kapena koyenera.
.error Imawonetsa zochitika zowopsa kapena zoyipa.
.warning Limasonyeza chenjezo limene lingafunike chisamaliro.
.info Amagwiritsidwa ntchito ngati njira yosinthira masitayelo osakhazikika.
# Zogulitsa Malipiro Atengedwa Mkhalidwe
1 TB - pamwezi 01/04/2012 Zavomerezedwa
2 TB - pamwezi 02/04/2012 Zakana
3 TB - pamwezi 03/04/2012 Ikuyembekezera
4 TB - pamwezi 04/04/2012 Imbani kuti mutsimikizire 
  1. ...
  2.   < tr class = "kupambana" >
  3.     <td> 1 < /td>
  4.     <td>TB - Mwezi uliwonse</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Zavomerezedwa</ td >
  7.   </ tr >
  8. ...

Zothandizira patebulo

Mndandanda wazinthu zothandizira patebulo la HTML ndi momwe ziyenera kugwiritsidwira ntchito.

Tagi Kufotokozera
<table> Kukulunga chinthu chowonetsera deta mumtundu wa tabular
<thead> Chotengera chamizere yapamutu patebulo ( <tr>) kuti mulembe mizati yatebulo
<tbody> Chotengera cha mizere ya tebulo ( <tr>) mu thupi la tebulo
<tr> Chotengera chamagulu amagulu a tebulo ( <td>kapena <th>) omwe amawonekera pamzere umodzi
<td> Selo ya tebulo lofikira
<th> Selo lapadera la tebulo lazambiri (kapena mzere, kutengera kukula ndi kuyika) zilembo
Ayenera kugwiritsidwa ntchito mkati mwa<thead>
<caption> Kufotokozera kapena chidule cha zomwe tebulo ili, makamaka zothandiza kwa owerenga zenera 
  1. <tebulo>
  2.   <caption> ... </ caption>
  3.   <mutu>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </ mutu>
  9.   <chinthu>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </ thupi>
  15. </table>

Mafomu

Masitayilo ofikira

Kuwongolera mawonekedwe amunthu payekha kumalandira masitayelo, koma popanda gulu lililonse lofunikira pakusintha <form>kwakukulu kapena kusintha kwakukulu. Zotsatira muzolemba zosanjikizana, zolowera kumanzere pamwamba pazowongolera mawonekedwe.

Nthano Chitsanzo chothandizira pamlingo wa block apa. 
  1. <form>
  2.   <munda>
  3.     <legend> Nthano </legend>
  4.     <label> Dzina lalemba </ label>
  5.     <input type = "text" placeholder = "Lembani chinachake ..." >  
  6.     <span class = "help-block" > Maupangiri othandizira apa. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Ndifufuzeni 
  9.     </ label>
  10.     <button type = "submit" class = "btn" > Tumizani </ batani>  
  11.   </fieldset>
  12. </ fomu>

Zosankha zosafunikira

Kuphatikizidwa ndi Bootstrap pali masanjidwe atatu amitundu omwe amagwiritsidwa ntchito wamba.

Fufuzani mawonekedwe

Onjezani .form-searchku fomu ndi .search-queryku <input>mawu owonjezera.

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

Fomu yapaintaneti

Onjezani .form-inlinezolemba zolowera kumanzere ndi zowongolera zamkati mwamabulogu kuti mumange masanjidwe ophatikizika.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "Imelo" >   
  3.   <input type = "password" class = "input-small" placeholder = "Password" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Ndikumbukireni 
  6.   </ label>
  7.   <button type = "submit" class = "btn" > Lowani </ batani>  
  8. </ fomu>

Chopingasa mawonekedwe

Sinthani zilembo kumanja ndikuziyandamitsa kumanzere kuti ziwonekere pamzere womwewo ngati zowongolera. Pamafunika zosintha zambiri kuchokera pa fomu yokhazikika:

  • Onjezani .form-horizontalku mawonekedwe
  • Manga zilembo ndi zowongolera mkati.control-group
  • Onjezani .control-labelku chizindikiro
  • Manga maulamuliro aliwonse ogwirizana nawo .controlskuti agwirizane bwino
  1. <form class = "form-horizontal" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" for = "inputEmail" > Imelo </label>  
  4.     <div class = "controls" > 
  5.       <input type = "text" id = "inputEmail" placeholder = " Imelo" >   
  6.     </div>
  7.   </div>
  8.   <div class = "control-group" > 
  9.     <label class = "control-label" for = "inputPassword" > Mawu achinsinsi </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" > Ndikumbukireni 
  18.       </ label>
  19.       <button type = "submit" class = "btn" > Lowani </ batani>  
  20.     </div>
  21.   </div>
  22. </ fomu>

Zowongolera mawonekedwe

Zitsanzo za maulamuliro amtundu wokhazikika omwe amathandizidwa mu mawonekedwe achitsanzo.

Zolowetsa

Nthawi zambiri mawonekedwe owongolera, magawo otengera zolemba. Mulinso chithandizo chamitundu yonse ya HTML5: mawu, mawu achinsinsi, nthawi, nthawi, tsiku, mwezi, nthawi, sabata, nambala, imelo, url, kusaka, foni, ndi mtundu.

Imafunika kugwiritsa ntchito typenthawi zonse.

  1. <input type = "text" placeholder = "Zolemba zolemba " >

Textarea

Kuwongolera mafomu komwe kumathandizira mizere ingapo yamalemba. Sinthani rowsmawonekedwe ngati pakufunika.

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

Mabokosi ndi mawailesi

Mabokosi amasankha chimodzi kapena zingapo pamndandanda pomwe mawayilesi ndi osankha njira imodzi kuchokera ambiri.

Zofikira (zosanjikiza)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Njira yoyamba ndi iyi ndi iyo-onetsetsani kuti mukuphatikiza chifukwa chake zili bwino
  4. </ label>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" chafufuzidwa >     
  8.   Njira yoyamba ndi iyi ndi iyo-onetsetsani kuti mukuphatikiza chifukwa chake zili bwino
  9. </ label>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Njira yachiwiri ikhoza kukhala china chake ndipo kuyisankha idzachotsa kusankha imodzi
  13. </ label>

Mabokosi apaintaneti

Onjezani .inlinekalasi pamabokosi angapo kapena mawayilesi kuti aziwongolera amawonekera pamzere womwewo.

  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>

Amasankha

Gwiritsani ntchito njira yosasinthika kapena tchulani a multiple="multiple"kuti muwonetse zosankha zingapo nthawi imodzi.


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

Kuwonjezera mawonekedwe a mawonekedwe

Kuphatikiza paziwongolero zomwe zilipo kale, Bootstrap imaphatikizanso zigawo zina zothandiza.

Zolemba zokonzedweratu ndi zowonjezera

Onjezani mawu kapena mabatani musanayambe kapena mutatha kulemba mawu aliwonse. Dziwani kuti selectzinthu sizikugwira ntchito pano.

Zosankha zofikira

Manga .add-onndi inputlimodzi mwa magulu awiri kuti mukonzekere kapena kuwonjezera mawu ku mawu.

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "zowonjezera" > @ </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>

Kuphatikiza

Gwiritsani ntchito makalasi onse awiri ndi zitsanzo ziwiri .add-onkuti mukonzekere ndikuwonjezera zolowa.

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

Mabatani m'malo molemba

M'malo mwa <span>mawu, gwiritsani ntchito a .btnkulumikiza batani (kapena ziwiri) pazolowetsa.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton" type = "text" >   
  3.   <button class = "btn" type = "batani" > Pitani! </ batani>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons" type = "text" >   
  3.   <button class = "btn" type = "batani" > Sakani </ batani>  
  4.   <button class = "btn" type = "batani" > Zosankha </ batani>  
  5. </div>

Zotsitsa za batani

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

Magulu otsika

  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>

Fufuzani mawonekedwe

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

Kuwongolera kukula

Gwiritsani ntchito makalasi achibale monga .input-largekapena kufananiza zolowa zanu ndi kukula kwa magawo a gridi pogwiritsa ntchito .span*makalasi.

Zolowetsa mulingo wa block

Pangani chilichonse <input>kapena <textarea>chinthu kukhala ngati gawo la block block.

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

Kukula kofananira

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

Mungodziwiratu!M'matembenuzidwe amtsogolo, tikhala tikusintha kugwiritsa ntchito makalasi olowera awa kuti agwirizane ndi kukula kwa mabatani athu. Mwachitsanzo, .input-largeidzawonjezera padding ndi kukula kwa font kwa zolowetsa.

Kukula kwa gridi

Gwiritsani ntchito .span1ku .span12zolowetsa zomwe zikufanana ndi makulidwe a gridi.

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

Pazolowetsa zamagulu angapo pamzere uliwonse, gwiritsani ntchito gulu .controls-rowlosinthira kuti mutalikirane bwino . Imayandama zolowera kuti zigwere danga loyera, imayika malire oyenera, ndikuchotsa zoyandama.

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

Zolowa zosasinthika

Perekani deta m'mawonekedwe omwe sangathe kusinthidwa popanda kugwiritsa ntchito mawonekedwe enieni.

Mtengo wina apa 
  1. <span class = "input-xlarge-input-input" > Mtengo wina apa </span>

Zochita za fomu

Malizitsani mawonekedwe ndi gulu la zochita (mabatani). Akayikidwa mkati mwa .form-horizontal, mabataniwo amangolowera kuti agwirizane ndi zowongolera mawonekedwe.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Sungani zosintha </button>  
  3.   <button type = "button" class = "btn" > Kuletsa </ batani>  
  4. </div>

Thandizani mawu

Thandizo lapaintaneti ndi block level pamawu othandizira omwe amawoneka mozungulira mawonekedwe.

Thandizo pa intaneti

Mawu othandizira pa intaneti 
  1. <input type = "text" ><span class = "help-inline" > Mawu othandizira pa intaneti </span>

Thandizo loletsa

Ndime yotalikirapo yothandizira yomwe imadutsa pamzere watsopano ndipo imatha kupitilira mzere umodzi. 
  1. <input type = "text" ><span class = "help-block" > Tsamba lalitali lothandizira lomwe limaduka pamzere watsopano ndipo limatha kupitilira mzere umodzi. </span>

Kuwongolera mawonekedwe

Perekani ndemanga kwa ogwiritsa ntchito kapena alendo omwe ali ndi mayankho ofunikira pakuwongolera mawonekedwe ndi zilembo.

Lowetsani chidwi

Timachotsa outlinemasitayelo okhazikika paziwongolero zamitundu box-shadowndikuyika a m'malo mwake :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Izi ndizokhazikika..." >

Zolemba zosalondola

Zolowetsa masitayelo pogwiritsa ntchito msakatuli wokhazikika ndi :invalid. Tchulani a typendi kuwonjezera requiredchikhalidwe.

  1. <input class = "span3" type = "imelo" yofunikira >

Zolowetsa zoyimitsidwa

Onjezani disabledmawonekedwe pazolowetsa kuti mupewe kuyika kwa ogwiritsa ntchito ndikuyambitsa mawonekedwe osiyana pang'ono.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Zoyimitsa zoyimitsidwa apa..." zilema >

Zotsimikizira

Bootstrap imaphatikizapo masitayelo otsimikizira zolakwika, chenjezo, zambiri, ndi mauthenga opambana. Kuti mugwiritse ntchito, onjezani kalasi yoyenera pazozungulira .control-group.

Mwina china chake chalakwika
Chonde konzani cholakwikacho
Dzina lolowera latengedwa
Uwu! 
  1. <div class = "chenjezo la gulu lolamulira" > 
  2.   <label class = "control-label" for = "inputWarning" > Lowetsani ndi chenjezo </label>  
  3.   <div class = "controls" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Chinachake chalakwika </span> 
  6.   </div>
  7. </div>
  8. <div class = "control-group error" > 
  9.   <label class = "control-label" for = "inputError" > Zolowetsa ndi zolakwika </label>  
  10.   <div class = "controls" > 
  11.     <input type = "text" id = "inputError" >  
  12.     <span class = "help-inline" > Chonde konzani cholakwikacho </span> 
  13.   </div>
  14. </div>
  15. <div class = "control-group kupambana" > 
  16.   <label class = "control-label" for = "inputSuccess" > Kulowetsa mwachipambano </label>  
  17.   <div class = "controls" > 
  18.     <input type = "text" id = "inputSuccess" >  
  19.     <span class = "help-inline" > Woohoo! </span> 
  20.   </div>
  21. </div>

Mabatani

Mabatani ofikira

Mabatani a mabatani amatha kugwiritsidwa ntchito pa chilichonse chomwe .btnkalasi ikugwiritsidwa ntchito. Komabe, nthawi zambiri mudzafuna kugwiritsa ntchito izi kuzinthu zokhazo <a>kuti <button>mumasulire bwino kwambiri.

Batani kalasi="" Kufotokozera
btn Batani la imvi lokhazikika lokhala ndi gradient
btn btn-primary Amapereka kulemera kowonjezera kowonekera ndikuzindikiritsa zochita zoyambira mumagulu a mabatani
btn btn-info Amagwiritsidwa ntchito ngati njira yosinthira masitayelo osakhazikika
btn btn-success Imawonetsa kuchita bwino kapena koyenera
btn btn-warning Zikuwonetsa kusamala ziyenera kuchitidwa ndi izi
btn btn-danger Imawonetsa zochitika zowopsa kapena zoyipa
btn btn-inverse Batani lina la imvi lakuda, losamangirizidwa ku zochitika kapena kugwiritsa ntchito
btn btn-link Tsimikizirani batani popangitsa kuti iwoneke ngati ulalo pomwe mukusunga mabatani

Kugwirizana kwa msakatuli

IE9 simabzala ma gradients akumbuyo pamakona ozungulira, chifukwa chake timachotsa. Zogwirizana, IE9 imasokoneza buttonzinthu zolephereka, kupangitsa mawu kukhala imvi ndi chithunzi choyipa chomwe sitingathe kukonza.

Makulidwe a batani

Mukufuna mabatani akulu kapena ang'onoang'ono? Onjezani .btn-large, .btn-small, kapena .btn-minima size owonjezera.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "batani" > batani lalikulu </ batani>  
  3.   <button class = "btn btn-large" type = "batani" > Batani lalikulu </ batani>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "batani" > batani lofikira </ batani>  
  7.   <button class = "btn" type = "batani" > batani lokhazikika </ batani>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "batani" > batani laling'ono </ batani>  
  11.   <button class = "btn btn-small" type = "batani" > batani laling'ono </ batani>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "batani" > batani laling'ono </ batani>  
  15.   <button class = "btn btn-mini" type = "batani" > Mini batani </ batani>  
  16. </p>

Pangani mabatani a mulingo wa block—omwe amatambasula kukula kwa kholo lonse— powonjezera .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "batani" > batani lotchinga </ batani>  
  2. <button class = "btn btn-large btn-block" type = "batani" > batani la block level </ batani>

Dziko olumala

Pangani mabatani kuti awoneke ngati osatheka powatsitsimutsanso 50%.

Anchor element

Onjezani .disabledkalasi ku <a>mabatani.

Chiyanjano choyambirira Lumikizani 

  1. <a href = "#" class = "btn btn-large btn-primary disabled"> Ulalo woyamba </a>  
  2. <a href = "#" class = "btn btn-large disabled"> Ulalo </a>

Mungodziwiratu!Timagwiritsa ntchito .disabledngati gulu lothandizira pano, lofanana ndi gulu wamba .active, kotero palibe mawu oyamba omwe amafunikira. Komanso, kalasi iyi ndi yokongola; muyenera kugwiritsa ntchito JavaScript kuti mulepheretse maulalo apa.

Chinthu cha batani

Onjezani mawonekedwe disabledku <button>mabatani.

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

Kalasi imodzi, ma tag angapo

Gwiritsani ntchito .btnkalasi pa <a>, <button>, kapena <input>element.

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

Monga njira yabwino, yesani kufananiza zomwe zili patsamba lanu kuti muwonetsetse kuti zikugwirizana ndi msakatuli. Ngati muli ndi input, gwiritsani ntchito <input type="submit">batani lanu.

Zithunzi

Onjezani makalasi kuzinthu kuti <img>musinthe mosavuta zithunzi zamapulojekiti aliwonse.

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

Mungodziwiratu! .img-roundedndipo .img-circleosagwira ntchito mu IE7-8 chifukwa chosowa border-radiusthandizo.

Zithunzi za Glyphicons

Zithunzi za glyphs

Zithunzi 140 zamtundu wa sprite, zopezeka mu imvi (zosasinthika) ndi zoyera, zoperekedwa ndi Glyphicons .

  • chithunzi-galasi
  • chizindikiro - nyimbo
  • kusaka-zithunzi
  • chizindikiro-envelopu
  • icon-mtima
  • chizindikiro-nyenyezi
  • chizindikiro-nyenyezi-chopanda
  • wogwiritsa ntchito chizindikiro
  • chithunzi-filimu
  • chithunzi-th-chachikulu
  • chizindikiro-th
  • icon-th-list
  • chithunzi-chabwino
  • chizindikiro-chotsani
  • chithunzi-kulitsa-mu
  • chithunzi-kulitsa-kunja
  • icon-off
  • chizindikiro - chizindikiro
  • icon-cog
  • icon-zinyalala
  • icon-nyumba
  • icon-fayilo
  • chizindikiro-nthawi
  • icon-njira
  • icon-kutsitsa-alt
  • icon-kutsitsa
  • icon-kukweza
  • icon-mabokosi
  • chithunzi-sewero-bwalo
  • chithunzi-kubwereza
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • chizindikiro - mbendera
  • ma icon - mahedifoni
  • icon-volume-off
  • icon-volume-pansi
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • chizindikiro-tag
  • chizindikiro-ma tag
  • chizindikiro-buku
  • chizindikiro-bookmark
  • chizindikiro-kusindikiza
  • chithunzi-kamera
  • chizindikiro-fonti
  • chithunzi-bold
  • chithunzi-italic
  • chizindikiro-mawu-utali
  • chizindikiro-mawu-m'lifupi
  • icon-align-kumanzere
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • chizindikiro-mndandanda
  • chizindikiro-kumanzere
  • chizindikiro-kumanja-kumanja
  • icon-facetime-kanema
  • chithunzi-chithunzi
  • icon-pensulo
  • chizindikiro-mapu-chizindikiro
  • icon-sintha
  • chizindikiro-tint
  • icon-edit
  • chithunzi-gawo
  • chizindikiro-fufuzani
  • icon-kusuntha
  • chithunzi - sitepe-kumbuyo
  • chithunzi-chachangu-chambuyo
  • icon-kumbuyo
  • sewero la zithunzi
  • chithunzi-kuyimitsa
  • icon-stop
  • chizindikiro-patsogolo
  • chithunzi-mwachangu-patsogolo
  • icon-patsogolo-patsogolo
  • icon-eject
  • chithunzi-chevron-kumanzere
  • icon-chevron-right
  • chizindikiro-plus-sign
  • chizindikiro-chotsa-chizindikiro
  • chizindikiro-chotsani-chizindikiro
  • chizindikiro-chabwino
  • chizindikiro-funso-chizindikiro
  • chizindikiro-chidziwitso-chizindikiro
  • chithunzi-skrini
  • chizindikiro-chotsani-bwalo
  • chizindikiro-ok-mzere
  • chizindikiro-kuletsa-bwalo
  • chizindikiro-muvi-kumanzere
  • chizindikiro-muvi-kumanja
  • chizindikiro-muvi-mmwamba
  • chizindikiro-muvi-pansi
  • icon-share-alt
  • icon-resize-zadzaza
  • chithunzi-kusintha-kung'ono-zing'ono
  • icon-plus
  • icon-kuchotsa
  • chizindikiro cha nyenyezi
  • chizindikiro-chidziwitso-chizindikiro
  • chizindikiro-mphatso
  • chizindikiro-tsamba
  • chizindikiro-moto
  • icon-diso-otseguka
  • chizindikiro-diso-tseka
  • chizindikiro-chenjezo
  • chizindikiro-ndege
  • chizindikiro-kalendala
  • chithunzi - mwachisawawa
  • chithunzi - ndemanga
  • chizindikiro-maginito
  • icon-chevron-up
  • icon-chevron-pansi
  • chithunzi-retweet
  • ngolo yogulira zithunzi
  • chithunzi-foda-tseka
  • chikwatu-chotseguka
  • chizindikiro-kusintha kukula-kuima
  • icon-resize-horizontal
  • chithunzi-hdd
  • chizindikiro-bullhorn
  • chizindikiro-belu
  • chizindikiro-satifiketi
  • icon-thumb-mmwamba
  • chithunzi-chala-pansi
  • chizindikiro-dzanja-lamanja
  • chizindikiro-dzanja-kumanzere
  • chizindikiro-mmwamba
  • chizindikiro-pansi
  • chithunzi-zozungulira-muvi-kumanja
  • chithunzi-zozungulira-muvi-kumanzere
  • chizindikiro-chizungulire-muvi-mmwamba
  • chizindikiro-chizungulire-muvi-pansi
  • icon-globe
  • icon-wrench
  • icon-ntchito
  • chithunzi-sefa
  • chithunzi -chikwama
  • chithunzi - fullscreen

Kufotokozera kwa Glyphicons

Ma Glyphicons Halflings nthawi zambiri sapezeka kwaulere, koma makonzedwe apakati pa Bootstrap ndi opanga ma Glyphicons apangitsa kuti izi zitheke popanda mtengo kwa inu monga omanga. Monga zikomo, tikukupemphani kuti muphatikize ulalo wobwerera ku Glyphicons nthawi iliyonse yomwe ingatheke.

Momwe mungagwiritsire ntchito

Zithunzi zonse zimafunikira <i>chizindikiritso chokhala ndi kalasi yapadera, yokhala ndi icon-. Kuti mugwiritse ntchito, ikani khodi ili pafupi kulikonse:

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

Palinso masitaelo omwe amapezeka pazithunzi zopindika (zoyera), zokonzedwa ndi gulu limodzi lowonjezera. Tidzakakamiza kalasi iyi pa hover ndi mayiko omwe akugwira ntchito pa nav ndi dropdown link.

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

Mungodziwiratu!Mukamagwiritsa ntchito m'mbali mwa zingwe zamalemba, monga mabatani kapena maulalo a nav, onetsetsani kuti mwasiya malo pambuyo pa <i>tagi kuti mutalikirane bwino.

Zitsanzo zazithunzi

Agwiritseni ntchito m'mabatani, m'magulu a batani lazida, kusakatula, kapena zolowetsa mafomu omwe mwakonzedweratu.

Mabatani

Gulu la batani mu batani lazida
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.  
  4.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  7.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  8.   </div>
  9. </div>
Kutsika mu gulu la batani
Wogwiritsa 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Wogwiritsa </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-pensulo" ></i> Sinthani </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Chotsani </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> Pangani admin </a></li>  
  10.   </ul>
  11. </div>
Makulidwe a batani
Nyenyezi Nyenyezi Nyenyezi 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Nyenyezi </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Nyenyezi </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Nyenyezi </a>

Navigation

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

Minda ya fomu

  1. <div class = "control-group" > 
  2.   <label class = "control-label" for = "inputIcon" > Imelo adilesi </label>  
  3.   <div class = "controls" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-envelopu" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>