Bootstrap

Msingi wa CSS

Vipengele vya msingi vya HTML vilivyowekwa mtindo na kuimarishwa kwa madarasa ya kupanuka.

Uchapaji

Vichwa

Vichwa vyote vya HTML, <h1>kupitia <h6>vinapatikana.

h1. Kichwa 1

h2. Kichwa cha 2

h3. Kichwa cha 3

h4. Kichwa cha 4

h5. Kichwa cha 5
h6. Kichwa cha 6

Nakala ya mwili

Chaguo-msingi la kimataifa la Bootstrap font-sizeni 14px , line-heightna 20px . Hii inatumika kwa <body>aya na aya zote. Kwa kuongeza, <p>(aya) hupokea ukingo wa chini wa nusu ya urefu wa mstari (10px kwa chaguo-msingi).

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>

Nakala ya mwili inayoongoza

Fanya aya isimame kwa kuongeza .lead.

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

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

Imejengwa kwa Chini

Kiwango cha uchapaji kinatokana na vigeu viwili LESS katika vigeuzo.less : @baseFontSizena @baseLineHeight. Ya kwanza ni saizi ya msingi ya fonti inayotumika kote na ya pili ni urefu wa mstari wa msingi. Tunatumia vigeu hivyo na hesabu fulani rahisi kuunda kando, pedi, na urefu wa mstari wa aina zetu zote na zaidi. Zibinafsishe na ubadilishe Bootstrap.

Mkazo

Tumia lebo za mkazo chaguomsingi za HTML na mitindo nyepesi.

<small>

Ili kuondoa msisitizo ndani ya mstari au vizuizi vya maandishi, tumia lebo ndogo.

Mstari huu wa maandishi unakusudiwa kuzingatiwa kama chapa nzuri.

<p> <small> Mstari huu wa maandishi unakusudiwa kuzingatiwa kama chapa bora. </ ndogo> </p>

Ujasiri

Kwa kusisitiza kijisehemu cha maandishi chenye uzito mkubwa wa fonti.

Kijisehemu kifuatacho cha maandishi kinatolewa kama maandishi mazito .

<strong> inayotolewa kama maandishi mazito </strong>

Italiki

Kwa kusisitiza kijisehemu cha maandishi chenye italiki.

Kijisehemu kifuatacho cha maandishi kinatolewa kama maandishi ya italiki .

<em> inayotolewa kama maandishi ya italiki </em>

Vichwa juu!Jisikie huru kutumia <b>na <i>katika HTML5. <b>inakusudiwa kuangazia maneno au vifungu vya maneno bila kuwasilisha umuhimu wa ziada ilhali <i>mara nyingi ni kwa sauti, maneno ya kiufundi, n.k.

Madarasa ya upatanishi

Pangilia maandishi upya kwa vipengele kwa urahisi na madarasa ya upatanishi wa maandishi.

Maandishi yaliyopangiliwa kushoto.

Maandishi yaliyopangiliwa katikati.

Maandishi yaliyopangiliwa kulia.

  1. <p class = "text-left" > Maandishi yaliyopangiliwa kushoto. </ p> 
  2. <p class = "text-center" > Maandishi yaliyopangiliwa katikati . </ p> 
  3. <p class = "text-right" > Maandishi yaliyopangiliwa kulia. </ p>

Madarasa ya kusisitiza

Onyesha maana kupitia rangi na madarasa machache ya matumizi ya mkazo.

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>

Vifupisho

Utekelezaji wa mtindo wa <abbr>kipengele cha HTML cha vifupisho na vifupisho ili kuonyesha toleo lililopanuliwa kwenye kielelezo. Vifupisho vyenye titlesifa vina mpaka wa chini wenye vitone vyepesi na kishale cha usaidizi kwenye kieleezaji, ukitoa muktadha wa ziada kwenye kuelea.

<abbr>

Kwa maandishi yaliyopanuliwa kwenye kielelezo kirefu cha kifupisho, jumuisha titlesifa.

Kifupi cha neno sifa ni attr .

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

<abbr class="initialism">

Ongeza .initialismkwa kifupi cha saizi ndogo ya fonti.

HTML ndio kitu bora zaidi tangu mkate uliokatwa.

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

Anwani

Wasilisha maelezo ya mawasiliano kwa babu wa karibu au kikundi kizima cha kazi.

<address>

Hifadhi umbizo kwa kumalizia mistari yote kwa <br>.

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

Nukuu za kuzuia

Kwa kunukuu vizuizi vya maudhui kutoka chanzo kingine ndani ya hati yako.

Nukuu chaguomsingi ya kuzuia

Funga HTML<blockquote> yoyote kama nukuu. Kwa nukuu moja kwa moja tunapendekeza a .<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante. </ p>
  3. </blockquote>

Chaguo za dondoo za kuzuia

Mtindo na mabadiliko ya yaliyomo kwa tofauti rahisi kwenye nukuu ya kawaida ya kuzuia.

Kutaja chanzo

Ongeza <small>lebo ili kutambua chanzo. Funga jina la kazi ya chanzo katika <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.

Mtu maarufu katika Mada ya Chanzo 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante. </ p>
  3.   <small> Mtu maarufu <cite title = "Chanzo Kichwa" > Kichwa Chanzo </cite></small> 
  4. </blockquote>

Maonyesho mbadala

Tumia .pull-rightkwa nukuu ya kuzuia iliyoelea, iliyopangiliwa kulia.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.

Mtu maarufu katika Mada ya Chanzo 
  1. <blockquote class = "pull-right" > 
  2.   ...
  3. </blockquote>

Orodha

Haijaagizwa

Orodha ya vitu ambavyo mpangilio haujalishi kwa uwazi.

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

Imeagizwa

Orodha ya vitu ambavyo agizo lina umuhimu wazi.

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

Isiyo na mtindo

Ondoa pedi chaguomsingi list-stylena kushoto kwenye vipengee vya orodha (watoto wa karibu pekee).

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

Katika mstari

Weka vitu vyote vya orodha kwenye mstari mmoja inline-blockna pedi nyepesi.

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

Maelezo

Orodha ya maneno na maelezo yanayohusiana nayo.

Orodha za maelezo
Orodha ya maelezo ni kamili kwa kufafanua maneno.
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>

Maelezo ya mlalo

Tengeneza masharti na maelezo kwa <dl>mstari kwa upande.

Orodha za maelezo
Orodha ya maelezo ni kamili kwa kufafanua maneno.
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, tor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl class = "dl-horizontal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </ dl>

Vichwa juu!Orodha za maelezo mlalo zitapunguza maneno ambayo ni marefu sana kutoshea katika kurekebisha safu wima ya kushoto text-overflow. Katika maeneo finyu ya kutazama, yatabadilika kuwa mpangilio chaguomsingi wa kura.

Kanuni

Katika mstari

Funga vijisehemu vya ndani vya msimbo kwa <code>.

Kwa mfano, <section>inapaswa kufungwa kama inline. 
  1. Kwa mfano , <code> & lt ; section & gt ;</ code > inapaswa kufungwa kama inline .

Kizuizi cha msingi

Tumia <pre>kwa mistari mingi ya msimbo. Hakikisha umeepuka mabano yoyote katika msimbo ili utoe sahihi.

<p>Mfano wa maandishi hapa...</p>
  1. <kabla>
  2.   <p>Mfano wa maandishi hapa...</p>
  3. </ pre>

Vichwa juu!Hakikisha kuweka msimbo ndani ya <pre>vitambulisho karibu na kushoto iwezekanavyo; itatoa tabo zote.

Unaweza kuongeza kwa hiari .pre-scrollabledarasa ambalo litaweka urefu wa juu wa 350px na kutoa upau wa kusogeza wa y-axis.

Majedwali

Mitindo chaguomsingi

Kwa mtindo wa kimsingi - pedi nyepesi na vigawanyiko vya mlalo pekee - ongeza darasa la msingi .tablekwa yoyote <table>.

# Jina la kwanza Jina la familia Jina la mtumiaji
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry ndege @twitter 
  1. <table class = "meza" > 
  2.   …
  3. </ meza>

Madarasa ya hiari

Ongeza darasa lolote kati ya zifuatazo kwa .tabledarasa la msingi.

.table-striped

Huongeza michirizi ya pundamilia kwenye safu mlalo yoyote ya jedwali ndani ya <tbody>kiteuzi cha :nth-childCSS (hakipatikani katika IE7-8).

# Jina la kwanza Jina la familia Jina la mtumiaji
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry ndege @twitter 
  1. <table class = "table table-striped" > 
  2.   …
  3. </ meza>

.table-bordered

Ongeza mipaka na pembe za mviringo kwenye meza.

# Jina la kwanza Jina la familia Jina la mtumiaji
1 Weka alama Otto @mdo
Weka alama Otto @getbootstrap
2 Yakobo Thornton @mafuta
3 Larry Ndege @twitter 
  1. <table class = "table-bordered" > 
  2.   …
  3. </ meza>

.table-hover

Washa hali ya kuelea kwenye safu mlalo za jedwali ndani ya <tbody>.

# Jina la kwanza Jina la familia Jina la mtumiaji
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @twitter 
  1. <table class = "table table-hover" > 
  2.   …
  3. </ meza>

.table-condensed

Hufanya jedwali kushikana zaidi kwa kukata pedi za seli katikati.

# Jina la kwanza Jina la familia Jina la mtumiaji
1 Weka alama Otto @mdo
2 Yakobo Thornton @mafuta
3 Larry Ndege @twitter 
  1. <table class = "table-condensed table" > 
  2.   …
  3. </ meza>

Madarasa ya safu mlalo ya hiari

Tumia madarasa ya muktadha kupaka safu za jedwali rangi.

Darasa Maelezo
.success Inaonyesha hatua iliyofanikiwa au chanya.
.error Huonyesha kitendo hatari au kinachoweza kuwa hasi.
.warning Inaonyesha onyo ambalo linaweza kuhitaji kuzingatiwa.
.info Inatumika kama mbadala kwa mitindo chaguo-msingi.
# Bidhaa Malipo Yamechukuliwa Hali
1 TB - Kila mwezi 01/04/2012 Imeidhinishwa
2 TB - Kila mwezi 02/04/2012 Imekataliwa
3 TB - Kila mwezi 03/04/2012 Inasubiri
4 TB - Kila mwezi 04/04/2012 Piga simu ili kuthibitisha 
  1. ...
  2.   < tr class = "success" >
  3.     <td> 1 < /td>
  4.     <td>TB - Kila Mwezi</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Imeidhinishwa</ td >
  7.   </ tr >
  8. ...

Alama ya jedwali inayotumika

Orodha ya vipengele vya HTML vya jedwali vinavyotumika na jinsi vinapaswa kutumiwa.

Lebo Maelezo
<table> Kipengele cha kufunga kwa ajili ya kuonyesha data katika umbizo la jedwali
<thead> Kipengele cha chombo cha safu mlalo za vichwa vya jedwali ( <tr>) kuweka lebo kwenye safu wima za jedwali
<tbody> Kipengele cha chombo cha safu za jedwali ( <tr>) kwenye mwili wa jedwali
<tr> Kipengele cha chombo cha seti ya seli za jedwali ( <td>au <th>) zinazoonekana kwenye safu mlalo moja
<td> Seli chaguomsingi ya jedwali
<th> Seli maalum ya jedwali kwa safu wima (au safu mlalo, kulingana na upeo na uwekaji) lebo
<caption> Maelezo au muhtasari wa kile ambacho jedwali inashikilia, muhimu sana kwa visoma skrini 
  1. <meza>
  2.   <caption> ... </caption>
  3.   <kichwa>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </ tr>
  8.   </ kichwa>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </ tr>
  14.   </tbody>
  15. </ meza>

Fomu

Mitindo chaguomsingi

Vidhibiti vya aina ya mtu binafsi hupokea mitindo, lakini bila darasa la msingi linalohitajika kwenye <form>au mabadiliko makubwa katika tabo. Matokeo katika lebo zilizopangwa kwa rafu, zilizopangiliwa kushoto juu ya vidhibiti vya fomu.

Hadithi Mfano wa maandishi ya usaidizi wa kiwango cha kuzuia hapa. 
  1. <fomu>
  2.   <seti ya uwanja>
  3.     <legend> Legend </legend>
  4.     <label> Jina la lebo </label>
  5.     <input type = "text" placeholder = "Andika kitu..." >  
  6.     <span class = "help-block" > Mfano wa maandishi ya usaidizi wa kiwango cha kuzuia hapa. </span> 
  7.     <label class = "checkbox" > 
  8.       <input type = "checkbox" > Niangalie 
  9.     </lebo>
  10.     <button type = "submit" class = "btn" > Wasilisha </button>  
  11.   </fieldset>
  12. </ fomu>

Mipangilio ya hiari

Iliyojumuishwa na Bootstrap ni miundo mitatu ya hiari ya fomu kwa kesi za matumizi ya kawaida.

Tafuta fomu

Ongeza .form-searchkwenye fomu na .search-querykwa <input>ingizo la maandishi ya ziada.

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

Fomu ya ndani

Ongeza .form-inlinekwa lebo zilizopangiliwa kushoto na vidhibiti vya uzuiaji wa ndani kwa mpangilio shikamanifu.

  1. <form class = "form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "Email" >   
  3.   <input type = "password" class = "input-small" placeholder = "Nenosiri" >   
  4.   <label class = "checkbox" > 
  5.     <input type = "checkbox" > Nikumbuke 
  6.   </lebo>
  7.   <button type = "submit" class = "btn" > Ingia </button>  
  8. </ fomu>

Fomu ya usawa

Pangilia lebo kulia na uzielee upande wa kushoto ili kuzifanya zionekane kwenye mstari sawa na vidhibiti. Inahitaji mabadiliko mengi zaidi kutoka kwa fomu chaguo-msingi:

  • Ongeza .form-horizontalkwenye fomu
  • Funga lebo na vidhibiti.control-group
  • Ongeza .control-labelkwenye lebo
  • Funga vidhibiti vyovyote vinavyohusishwa .controlskwa upangaji sahihi
  1. <form class = "form-horizontal" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" for = "inputEmail" > Barua pepe </label>  
  4.     <div class = "vidhibiti" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "Barua pepe" >   
  6.     </ div>
  7.   </ div>
  8.   <div class = "control-group" > 
  9.     <label class = "control-label" kwa = "inputPassword" > Nenosiri </label>  
  10.     <div class = "vidhibiti" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Nenosiri" >   
  12.     </ div>
  13.   </ div>
  14.   <div class = "control-group" > 
  15.     <div class = "vidhibiti" > 
  16.       <label class = "checkbox" > 
  17.         <input type = "checkbox" > Nikumbuke 
  18.       </lebo>
  19.       <button type = "submit" class = "btn" > Ingia </button>  
  20.     </ div>
  21.   </ div>
  22. </ fomu>

Vidhibiti vya fomu vinavyotumika

Mifano ya vidhibiti vya kawaida vya fomu vinavyotumika katika muundo wa muundo wa mfano.

Ingizo

Udhibiti wa kawaida wa fomu, uga zinazotegemea maandishi. Inajumuisha usaidizi wa aina zote za HTML5: maandishi, nenosiri, saa, tarehe-ndani, tarehe, mwezi, saa, wiki, nambari, barua pepe, url, utafutaji, simu na rangi.

Inahitaji matumizi ya maalum typewakati wote.

  1. <input type = "text" placeholder = "Ingizo la maandishi" >

Eneo la maandishi

Udhibiti wa fomu ambao unaauni mistari mingi ya maandishi. Badilisha rowssifa inapohitajika.

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

Visanduku vya kuteua na redio

Vikasha tiki ni vya kuchagua chaguo moja au kadhaa katika orodha huku redio ni za kuchagua chaguo moja kutoka nyingi.

Chaguomsingi (imerundikwa)


  1. <label class = "checkbox" > 
  2.   <input type = "checkbox" value = "" >  
  3.   Chaguo la kwanza ni hili na lile—hakikisha umejumuisha kwa nini ni nzuri
  4. </lebo>
  5.  
  6. <label class = "radio" > 
  7.   <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" imechaguliwa >     
  8.   Chaguo la kwanza ni hili na lile—hakikisha umejumuisha kwa nini ni nzuri
  9. </lebo>
  10. <label class = "radio" > 
  11.   <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  12.   Chaguo la pili linaweza kuwa jambo lingine na kulichagua kutaondoa chaguo la kwanza
  13. </lebo>

Visanduku vya kuteua vya ndani

Ongeza .inlinedarasa kwenye mfululizo wa visanduku vya kuteua au redio kwa ajili ya vidhibiti kuonekana kwenye mstari mmoja.

  1. <label class = "checkbox inline" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </lebo>
  4. <label class = "checkbox inline" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </lebo>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </lebo>

Inachagua

Tumia chaguo-msingi au bainisha a multiple="multiple"ili kuonyesha chaguo nyingi kwa wakati mmoja.


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

Kupanua vidhibiti vya fomu

Kuongeza juu ya vidhibiti vilivyopo vya kivinjari, Bootstrap inajumuisha vipengele vingine muhimu vya fomu.

Pembejeo zilizotanguliwa na kuongezwa

Ongeza maandishi au vitufe kabla au baada ya ingizo lolote linalotegemea maandishi. Kumbuka kuwa selectvipengele havitumiki hapa.

Chaguo-msingi

Funga .add-onna inputmoja ya madarasa mawili ili kutanguliza au kuambatanisha maandishi kwa ingizo.

@

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

Pamoja

Tumia aina zote mbili na mifano miwili ya .add-onkutayarisha na kuongezea ingizo.

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

Vifungo badala ya maandishi

Badala ya a <span>na maandishi, tumia a .btnkuambatisha kitufe (au mbili) kwa ingizo.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton" type = "text" >   
  3.   <button class = "btn" type = "button" > Nenda!  </kifungo>
  4. </ div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons" type = "text" >   
  3.   <button class = "btn" type = "button" > Tafuta </button>  
  4.   <button class = "btn" type = "button" > Chaguo </button>  
  5. </ div>

Vifungo kunjuzi

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

Vikundi vya kunjuzi vilivyogawanywa

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

Tafuta 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" > Tafuta </button>  
  5.   </ div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Tafuta </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </ div>
  10. </ fomu>

Kudhibiti ukubwa

Tumia madarasa ya ukubwa wa jamaa kama .input-largeau kulinganisha ingizo lako na saizi za safu wima ya gridi ukitumia.span* madarasa.

Ingiza kiwango cha kuzuia

Fanya kitu chochote <input>au <textarea>kipengee kiwe kama kipengele cha kiwango cha kuzuia.

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

Saizi ya jamaa

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

Vichwa juu!Katika matoleo yajayo, tutakuwa tukibadilisha matumizi ya madarasa haya ya kuingiza data kulingana na ukubwa wa vitufe vyetu. Kwa mfano, .input-largeitaongeza pedi na saizi ya fonti ya ingizo.

Ukubwa wa gridi

Tumia .span1kwa .span12ingizo zinazolingana na ukubwa sawa wa safu wima za gridi ya taifa.

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

Kwa pembejeo nyingi za gridi kwa kila mstari, tumia .controls-rowdarasa la kurekebisha kwa nafasi sahihi . Huelea pembejeo ili kukunja nafasi-nyeupe, huweka pambizo zinazofaa, na kusafisha kuelea.

  1. <div class = "vidhibiti" > 
  2.   <input class = "span5" type = "text" kishika nafasi = ".span5" >   
  3. </ div>
  4. <div class = "controls-rows-row" > 
  5.   <input class = "span4" type = "text" kishika nafasi = ".span4" >   
  6.   <input class = "span1" type = "text" kishika nafasi = ".span1" >   
  7. </ div>
  8. ...

Ingizo zisizoweza kuhaririwa

Wasilisha data katika fomu ambayo haiwezi kuhaririwa bila kutumia fomula halisi.

Thamani fulani hapa 
  1. <span class = "input-xlarge input-input" > Thamani fulani hapa </span>

Vitendo vya fomu

Maliza fomu na kikundi cha vitendo (vifungo). Inapowekwa ndani ya .form-actions, vitufe vitajipinda kiotomatiki ili kupatana na vidhibiti vya fomu.

  1. <div class = "form-actions" > 
  2.   <button type = "submit" class = "btn btn-primary" > Hifadhi mabadiliko </button>  
  3.   <button type = "button" class = "btn" > Ghairi </button>  
  4. </ div>

Nakala ya usaidizi

Usaidizi wa kiwango cha ndani na cha kuzuia kwa maandishi ya usaidizi yanayoonekana karibu na vidhibiti vya fomu.

Usaidizi wa ndani

Maandishi ya usaidizi ya ndani 
  1. <input type = "text" ><span class = "help-inline" > Maandishi ya usaidizi ya ndani </span>

Zuia usaidizi

Kizuizi kirefu cha maandishi ya usaidizi kinachoingia kwenye mstari mpya na kinaweza kuenea zaidi ya mstari mmoja. 
  1. <input type = "text" ><span class = "help-block" > Kizuizi kirefu cha matini ya usaidizi ambayo huingia kwenye mstari mpya na huenda ikavuka mstari mmoja. </span>

Majimbo ya udhibiti wa fomu

Toa maoni kwa watumiaji au wageni na hali za msingi za maoni kuhusu vidhibiti vya fomu na lebo.

Ingizo la kuzingatia

Tunaondoa outlinemitindo chaguo-msingi kwenye baadhi ya vidhibiti vya fomu na kuweka a box-shadowbadala yake kwa :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Hii imelenga..." >

Ingizo batili

Ingizo za mtindo kupitia utendakazi chaguomsingi wa kivinjari na :invalid. Bainisha type, ongeza requiredsifa ikiwa uga si wa hiari, na (ikiwa inatumika) bainisha pattern.

Hii haipatikani katika matoleo ya Internet Explorer 7-9 kwa sababu ya ukosefu wa usaidizi kwa viteuzi bandia vya CSS.

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

Ingizo zilizozimwa

Ongeza disabledsifa kwenye ingizo ili kuzuia ingizo la mtumiaji na uanzishe mwonekano tofauti kidogo.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" kishika nafasi = "Ingizo limezimwa hapa..." imezimwa >

Majimbo ya uthibitishaji

Bootstrap inajumuisha mitindo ya uthibitishaji kwa hitilafu, onyo, maelezo na ujumbe wa mafanikio. Ili kutumia, ongeza darasa linalofaa kwa jirani .control-group.

Huenda kuna kitu kimeenda vibaya
Tafadhali sahihisha hitilafu
Jina la mtumiaji limechukuliwa
Woohoo! 
  1. <div class = "control-group onyo" > 
  2.   <label class = "control-label" for = "inputWarning" > Ingizo lenye onyo </label>  
  3.   <div class = "vidhibiti" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Huenda kitu kimeenda vibaya </span> 
  6.   </ div>
  7. </ div>
  8.  
  9. <div class = "control-group error" > 
  10.   <label class = "control-label" for = "inputError" > Ingizo lenye hitilafu </label>  
  11.   <div class = "vidhibiti" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" > Tafadhali sahihisha hitilafu </span> 
  14.   </ div>
  15. </ div>
  16.  
  17. <div class = "control-group info" > 
  18.   <label class = "control-label" for = "inputInfo" > Ingizo lenye maelezo </label>  
  19.   <div class = "vidhibiti" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" > Jina la mtumiaji tayari limechukuliwa </span> 
  22.   </ div>
  23. </ div>
  24.  
  25. <div class = "control-group success" > 
  26.   <label class = "control-label" for = "inputSuccess" > Ingizo limefanikiwa </label>  
  27.   <div class = "vidhibiti" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" > Woohoo! </span> 
  30.   </ div>
  31. </ div>

Vifungo

Vifungo chaguo-msingi

Mitindo ya vifungo inaweza kutumika kwa kitu chochote na .btndarasa kutumika. Hata hivyo, kwa kawaida utataka kutumia hizi kwa pekee <a>na <button>vipengele kwa uwasilishaji bora zaidi.

Kitufe darasa="" Maelezo
btn Kitufe cha kawaida cha kijivu chenye gradient
btn btn-primary Hutoa uzito wa ziada wa kuona na kubainisha kitendo cha msingi katika seti ya vitufe
btn btn-info Inatumika kama mbadala kwa mitindo chaguo-msingi
btn btn-success Inaonyesha hatua iliyofanikiwa au chanya
btn btn-warning Inaonyesha tahadhari inapaswa kuchukuliwa na hatua hii
btn btn-danger Huonyesha kitendo hatari au kinachoweza kuwa hasi
btn btn-inverse Kitufe mbadala cha kijivu giza, kisichofungwa kwa kitendo cha kisemantiki au matumizi
btn btn-link Sisitiza kitufe kwa kukifanya kionekane kama kiungo huku ukidumisha tabia ya vitufe

Utangamano wa kivinjari

IE9 haipunguzi viwango vya chinichini kwenye pembe za mviringo, kwa hivyo tunaiondoa. Kuhusiana, IE9 inaharibu buttonvipengee vilivyozimwa, ikitoa maandishi ya kijivu na kivuli cha maandishi kibaya ambacho hatuwezi kurekebisha.

Ukubwa wa vifungo

Ungependa vitufe vikubwa au vidogo? Ongeza .btn-large, .btn-small, au .btn-minikwa saizi za ziada.

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Kitufe kikubwa </button>  
  3.   <button class = "btn btn-large" type = "button" > Kitufe kikubwa </button>  
  4. </ p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Kitufe chaguo -msingi </button>  
  7.   <button class = "btn" type = "button" > Kitufe chaguo -msingi </button>  
  8. </ p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Kitufe kidogo </button>  
  11.   <button class = "btn btn-small" type = "button" > Kitufe kidogo </button>  
  12. </ p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Kitufe kidogo </button>  
  15.   <button class = "btn btn-mini" type = "button" > Kitufe kidogo </button>  
  16. </ p>

Unda vitufe vya kiwango cha kuzuia—vile vinavyochukua upana kamili wa mzazi— kwa kuongeza .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Kitufe cha kuzuia kiwango </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Kitufe cha kuzuia kiwango </button>

Jimbo la walemavu

Fanya vitufe vionekane visivyobofya kwa kufifisha nyuma 50%.

Kipengele cha nanga

Ongeza .disableddarasa kwa <a>vifungo.

Kiungo cha msingi Kiungo 

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

Vichwa juu!Tunatumia .disabledkama darasa la matumizi hapa, sawa na .activedarasa la kawaida, kwa hivyo hakuna kiambishi awali kinachohitajika. Pia, darasa hili ni la uzuri tu; lazima utumie JavaScript maalum kuzima viungo hapa.

Kitufe kipengele

Ongeza disabledsifa kwa <button>vifungo.

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Kitufe cha msingi </button>   
  2. <button type = "button" class = "btn btn-large" imezimwa > Kitufe </button>

Darasa moja, vitambulisho vingi

Tumia .btndarasa kwenye <a>, <button>, au <input>kipengele.

Kiungo 
  1. <a class = "btn" href = ""> Kiungo </a> _  
  2. <button class = "btn" type = "submit" > Kitufe </button>  
  3. <input class = "btn" type = "button" value = "Ingizo" >   
  4. <input class = "btn" type = "submit" value = "Wasilisha" >

Kama mazoezi bora, jaribu kulinganisha kipengele cha muktadha wako ili kuhakikisha uwasilishaji unaolingana wa kivinjari. Ikiwa unayo input, tumia <input type="submit">kwa kitufe chako.

Picha

Ongeza madarasa kwenye <img>kipengele ili uunde kwa urahisi picha katika mradi wowote.

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

Vichwa juu! .img-roundedna .img-circleusifanye kazi katika IE7-8 kwa sababu ya ukosefu wa border-radiusmsaada.

Icons na Glyphicons

Aikoni za glyphs

Ikoni 140 katika umbo la sprite, zinapatikana katika kijivu giza (chaguo-msingi) na nyeupe, zinazotolewa na Glyphicons .

  • icon-kioo
  • icon-muziki
  • icon-tafuta
  • icon-bahasha
  • icon-moyo
  • ikoni-nyota
  • ikoni-nyota-tupu
  • icon-mtumiaji
  • icon-filamu
  • icon-th-kubwa
  • ikoni-th
  • icon-th-orodha
  • ikoni-sawa
  • icon-ondoa
  • ikoni-kuza-ndani
  • ikoni-kuza-nje
  • icon-off
  • ishara-ikoni
  • icon-cog
  • ikoni-takataka
  • ikoni-nyumbani
  • icon-faili
  • icon-wakati
  • icon-barabara
  • ikoni-kupakua-alt
  • ikoni-kupakua
  • icon-upload
  • ikoni-kikasha
  • icon-play-mduara
  • ikoni-rudia
  • icon-onyesha upya
  • ikoni-orodha-alt
  • icon-lock
  • icon-bendera
  • icon-headphones
  • ikoni-kiasi-kuzimwa
  • ikoni-kiasi-chini
  • icon-kiasi-up
  • ikoni-qrcode
  • icon-barcode
  • icon-tag
  • icon-tagi
  • icon-kitabu
  • ikoni-alamisho
  • icon-print
  • ikoni-kamera
  • ikoni-fonti
  • icon-bold
  • ikoni-italiki
  • icon-text-urefu
  • icon-text-upana
  • ikoni-panganisha-kushoto
  • ikoni-panganisha-katikati
  • ikoni-panganisha-kulia
  • icon-align-justify
  • icon-orodha
  • ikoni-indent-kushoto
  • ikoni-indent-kulia
  • icon-facetime-video
  • icon-picha
  • icon-penseli
  • icon-ramani-alama
  • ikoni-rekebisha
  • icon-tint
  • ikoni-hariri
  • icon-shiriki
  • icon-angalia
  • ikoni-sogeza
  • icon-hatua-nyuma
  • ikoni-haraka-nyuma
  • ikoni-nyuma
  • icon-play
  • icon-pause
  • icon-stop
  • ikoni-mbele
  • icon-haraka-mbele
  • icon-hatua-mbele
  • icon-toa
  • ikoni-chevron-kushoto
  • ikoni-chevron-kulia
  • icon-plus-saini
  • icon-minus-saini
  • ishara-ondoa-saini
  • ikoni-sawa-saini
  • icon-swali-ishara
  • ishara-maelezo-ishara
  • icon-screenshot
  • ikoni-ondoa-mduara
  • ikoni-sawa-mduara
  • ikoni-marufuku-duara
  • ikoni-mshale-kushoto
  • ikoni-mshale-kulia
  • ikoni-mshale-juu
  • icon-arrow-down
  • icon-share-alt
  • ikoni-resize-imejaa
  • ikoni-resize-ndogo
  • icon-plus
  • icon-minus
  • ikoni ya nyota
  • icon-mshangao-ishara
  • icon-zawadi
  • icon-jani
  • icon-moto
  • ikoni-jicho-wazi
  • icon-jicho-funga
  • icon-onyo-ishara
  • icon-ndege
  • icon-kalenda
  • icon-nasibu
  • icon-maoni
  • ikoni-sumaku
  • icon-chevron-up
  • ikoni-chevron-chini
  • icon-retweet
  • icon-shopping-cart
  • ikoni-folda-funga
  • icon-folda-wazi
  • ikoni-resize-wima
  • ikoni-resize-usawa
  • ikoni-hdd
  • icon-bullhorn
  • ikoni-kengele
  • icon-cheti
  • icon-gumba-up
  • icon-domba-chini
  • ikoni-mkono-kulia
  • ikoni-mkono-kushoto
  • icon-mkono-up
  • ikoni-chini
  • ikoni-mduara-mshale-kulia
  • ikoni-duara-mshale-kushoto
  • ikoni-mduara-mshale-juu
  • ikoni-mduara-mshale-chini
  • icon-globe
  • icon-wrench
  • icon-kazi
  • kichujio cha ikoni
  • icon-briefcase
  • ikoni ya skrini nzima

Maelezo ya Glyphicons

Glyphicons Halflings kwa kawaida haipatikani bila malipo, lakini mpangilio kati ya Bootstrap na waundaji wa Glyphicons umewezesha hili bila gharama yoyote kwako kama wasanidi. Kama shukrani, tunakuomba ujumuishe kiungo cha hiari cha kurudi kwenye Glyphicons wakati wowote inapowezekana.

Jinsi ya kutumia

Aikoni zote zinahitaji <i>lebo iliyo na darasa la kipekee, iliyoangaziwa na icon-. Ili kutumia, weka nambari ifuatayo karibu popote:

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

Pia kuna mitindo inayopatikana kwa ikoni zilizogeuzwa (nyeupe), zilizotengenezwa tayari na darasa moja la ziada. Tutatekeleza darasa hili la kuelea na hali amilifu kwa viungo vya nav na kunjuzi.

  1. <i class = "ikoni-ya utafutaji ikoni-nyeupe" ></i>

Vichwa juu!Unapotumia kando ya mifuatano ya maandishi, kama vile vitufe au viungo vya nav, hakikisha kuwa umeacha nafasi baada ya <i>lebo kwa nafasi ifaayo.

Mifano ya ikoni

Zitumie katika vitufe, vikundi vya vitufe kwa upau wa vidhibiti, usogezaji, au ingizo za fomu zilizotangulizwa.

Vifungo

Kikundi cha kitufe kwenye upau wa vidhibiti
  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>
Kunjuzi katika kikundi cha vitufe
Mtumiaji 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Mtumiaji </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-penseli" ></i> Hariri </a></li>  
  6.     <li><a href = "#" ><i class = "ikoni-takataka" ></i> Futa </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Piga marufuku </a></li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Weka msimamizi </a></li>  
  10.   </ul>
  11. </ div>
Ukubwa wa vifungo
Nyota Nyota Nyota 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Star </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Star </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Star </a>

Urambazaji

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Nyumbani </a></li>   
  3.   <li><a href = "#" ><i class = "ikoni-kitabu" ></i> Maktaba </a></li>  
  4.   <li><a href = "#" ><i class = "icon-penseli" ></i> Maombi </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> Misc </a></li>  
  6. </ul>

Viwanja vya fomu

  1. <div class = "control-group" > 
  2.   <label class = "control-label" for = "inputIcon" > Anwani ya barua pepe </label>  
  3.   <div class = "vidhibiti" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "ikoni-bahasha" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </ div>
  8.   </ div>
  9. </ div>