Bootstrap

Vipengele

Vipengee vingi vinavyoweza kutumika tena vimeundwa kwenye Bootstrap ili kutoa urambazaji, arifa, popover, na mengi zaidi.

Vikundi vya vitufe Vifungo vya Jiunge na utendakazi zaidi kama upau wa vidhibiti

Vikundi vya vifungo

Tumia vikundi vya vitufe ili kuunganisha vitufe vingi pamoja kama kijenzi kimoja. Wajenge kwa mfululizo wa <a>au <button>vipengele.

Mbinu bora

Tunapendekeza miongozo ifuatayo ya kutumia vikundi vya vitufe na upau wa vidhibiti:

  • Tumia kipengele sawa kila wakati katika kikundi cha kitufe kimoja, <a>au <button>.
  • Usichanganye vitufe vya rangi tofauti katika kikundi kimoja cha vitufe.
  • Tumia aikoni kwa kuongeza au badala ya maandishi, lakini hakikisha kuwa una maandishi ya alt na kichwa inapofaa.

Vikundi vya Vitufe Husika vilivyo na menyu kunjuzi (tazama hapa chini) vinapaswa kuitwa kando na kila mara vijumuishe orodha ya kunjuzi ili kuonyesha tabia inayokusudiwa.

Mfano chaguomsingi

Hivi ndivyo HTML inavyotafuta kikundi cha vitufe cha kawaida kilichojengwa na vifungo vya lebo ya nanga:

  1. <div class = "btn-group" > 
  2.   <button class = "btn" > 1 </button> 
  3.   <button class = "btn" > 2 </button> 
  4.   <button class = "btn" > 3 </button> 
  5. </ div>

Mfano wa upau wa vidhibiti

Changanya seti za <div class="btn-group">katika a <div class="btn-toolbar">kwa vipengele ngumu zaidi.

  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     ...
  4.   </ div>
  5. </ div>

Kisanduku cha kuteua na ladha za redio

Vikundi vya vitufe vinaweza pia kufanya kazi kama redio, ambapo kitufe kimoja pekee kinaweza kuwa amilifu, au visanduku vya kuteua, ambapo idadi yoyote ya vitufe vinaweza kuwa hai. Tazama hati za Javascript kwa hiyo.

Pata javascript »

Kunjuzi katika vikundi vya vitufe

Vichwa juu! Vifungo vilivyo na menyu kunjuzi lazima vifunikwe kivyake .btn-groupndani ya a .btn-toolbarkwa uwasilishaji unaofaa.

Menyu kunjuzi za vitufe Imeundwa kwenye vikundi vya vitufe ili kutoa menyu za muktadha

Vifungo kunjuzi

Muhtasari na mifano

Tumia kitufe chochote kuanzisha menyu kunjuzi kwa kuiweka ndani ya a .btn-groupna kutoa lebo sahihi ya menyu.

Alama ya mfano

Sawa na kikundi cha vitufe, lebo yetu hutumia alama za vitufe vya kawaida, lakini pamoja na nyongeza kadhaa ili kuboresha mtindo na kuauni programu-jalizi ya jQuery kunjuzi ya Bootstrap.

  1. <div class = "btn-group" > 
  2.   <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
  3.     Kitendo
  4.     <span class = "caret" ></span> 
  5.   </a>
  6.   <ul class = "dropdown-menu" > 
  7.     <!-- viungo vya menyu kunjuzi -->
  8.   </ul>
  9. </ div>

Inafanya kazi na saizi zote za vitufe

Vifungo kunjuzi hufanya kazi kwa ukubwa wowote. ukubwa wako wa vitufe hadi .btn-large, .btn-small, au .btn-mini.

Inahitaji javascript

Vituo kunjuzi vinahitaji programu- jalizi ya kunjuzi ya Bootstrap kufanya kazi.

Katika baadhi ya matukio—kama vile menyu kunjuzi ya simu ya mkononi itapanuliwa nje ya kituo cha kutazama. Unahitaji kutatua upangaji wewe mwenyewe au kwa Javascript maalum.


Kunjuzi za vitufe vya kugawanyika

Muhtasari na mifano

Kujenga juu ya mitindo ya vikundi vya vifungo na lebo, tunaweza kuunda kifungo cha mgawanyiko kwa urahisi. Vifungo vya kugawanya huangazia kitendo cha kawaida upande wa kushoto na kugeuza kunjuzi upande wa kulia kwa kutumia viungo vya muktadha.

Ukubwa

Tumia madarasa ya vitufe vya ziada .btn-mini, .btn-small, au .btn-largekwa ukubwa.

  1. <div class = "btn-group" > 
  2.   ...
  3.   <ul class = "dropdown-menu pull-right" > 
  4.     <!-- viungo vya menyu kunjuzi -->
  5.   </ul>
  6. </ div>

Alama ya mfano

Tunapanua menyu kunjuzi ya vitufe vya kawaida ili kutoa kitendo cha kitufe cha pili ambacho hufanya kazi kama kichochezi tofauti cha kunjuzi.

  1. <div class = "btn-group" > 
  2.   <button class = "btn" > Kitendo </button> 
  3.   <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.     <span class = "caret" ></span> 
  5.   </kifungo>
  6.   <ul class = "dropdown-menu" > 
  7.     <!-- viungo vya menyu kunjuzi -->
  8.   </ul>
  9. </ div>

Menyu za kudondosha

Menyu kunjuzi pia zinaweza kugeuzwa kutoka chini kwenda juu kwa kuongeza darasa moja kwa mzazi wa karibu wa .dropdown-menu. Itageuza uelekeo wa .caretna kuweka upya menyu yenyewe ili kusonga kutoka chini kwenda juu badala ya juu kwenda chini.

  1. <div class = "btn-group dropup" > 
  2.   <button class = "btn" > Drop </button> 
  3.   <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.     <span class = "caret" ></span> 
  5.   </kifungo>
  6.   <ul class = "dropdown-menu" > 
  7.     <!-- viungo vya menyu kunjuzi -->
  8.   </ul>
  9. </ div>

Pagination Chaguzi mbili kwa paging kupitia maudhui

Uundaji wa kurasa nyingi

Wakati wa kutumia

Uundaji wa kurasa uliorahisishwa sana na wenye mtindo mdogo unaotokana na Rdio, mzuri kwa programu na matokeo ya utafutaji. Kizuizi kikubwa ni ngumu kukosa, kinaweza kuongezwa kwa urahisi, na hutoa maeneo makubwa ya kubofya.

Viungo vya ukurasa wa hali

Viungo vinaweza kubinafsishwa na hufanya kazi katika hali kadhaa na darasa linalofaa. .disabledkwa viungo visivyobofya na .activekwa ukurasa wa sasa.

Mpangilio unaonyumbulika

Ongeza mojawapo ya madarasa mawili ya hiari ili kubadilisha upatanishi wa viungo vya uandishi: .pagination-centeredna .pagination-right.

Mifano

Kipengele cha pagination chaguo-msingi kinaweza kunyumbulika na hufanya kazi katika idadi ya tofauti.

Alama

Imefungwa katika <div>, pagination ni tu <ul>.

  1. <div class = "pagination" > 
  2.   <ul>
  3.     <li><a href = "#" > Iliyotangulia </a></li> 
  4.     <li class = "active" > 
  5.       <a href = "#" > 1 </a> 
  6.     </li>
  7.     <li><a href = "#" > 2 </a></li> 
  8.     <li><a href = "#" > 3 </a></li> 
  9.     <li><a href = "#" > 4 ​​</a></li> 
  10.     <li><a href = "#" > Inayofuata </a></li> 
  11.   </ul>
  12. </ div>

Pager Kwa viungo vya haraka vilivyotangulia na vifuatavyo

Kuhusu paja

Sehemu ya pager ni seti ya viungo vya utekelezaji rahisi wa pagination na alama nyepesi na hata mitindo nyepesi. Ni nzuri kwa tovuti rahisi kama blogu au majarida.

Hali ya hiari ya walemavu

Viungo vya Pager pia hutumia .disableddarasa la jumla kutoka kwa pagination.

Mfano chaguomsingi

Kwa chaguo-msingi, paja huweka viungo.

  1. <ul class = "pager" > 
  2.   <li>
  3.     <a href = "#" > Iliyotangulia </a> 
  4.   </li>
  5.   <li>
  6.     <a href = "#" > Inayofuata </a> 
  7.   </li>
  8. </ul>

Viungo vilivyopangiliwa

Vinginevyo, unaweza kusawazisha kila kiunga kwa pande:

  1. <ul class = "pager" > 
  2.   <li class = "previous" > 
  3.     <a href = "#" > ← Mzee </a> 
  4.   </li>
  5.   <li class = "next" > 
  6.     <a href = "#" > Mpya zaidi → </a> 
  7.   </li>
  8. </ul>

Lebo za mstari Weka lebo na maandishi ya ufafanuzi

Lebo Alama
Chaguomsingi <span class="label">Default</span>
Mafanikio <span class="label label-success">Success</span>
Onyo <span class="label label-warning">Warning</span>
Muhimu <span class="label label-important">Important</span>
Habari <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>

Beji Viashiria na hesabu ambazo hazijasomwa

Kuhusu

Beji ni vipengele vidogo, rahisi vya kuonyesha kiashiria au hesabu ya aina fulani. Mara nyingi hupatikana katika wateja wa barua pepe kama vile Mail.app au kwenye programu za simu kwa arifa zinazotumwa na programu hata wakati huitumii.

Madarasa yanayopatikana

Jina Mfano Alama
Chaguomsingi 1 <span class="badge">1</span>
Mafanikio 2 <span class="badge badge-success">2</span>
Onyo 4 <span class="badge badge-warning">4</span>
Muhimu 6 <span class="badge badge-important">6</span>
Habari 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

Vipengele vya uchapaji Kichwa cha ukurasa na kitengo cha shujaa cha kugawa maudhui

Kitengo cha shujaa

Bootstrap hutoa sehemu nyepesi, inayonyumbulika inayoitwa kitengo cha shujaa ili kuonyesha maudhui kwenye tovuti yako. Inafanya kazi vizuri kwenye tovuti za uuzaji na maudhui mazito.

Alama

Funga maudhui yako divkama hivi:

  1. <div class = "hero-unit" > 
  2.   <h1> Kichwa </ h1>
  3.   <p> Mstari wa tagi </p>
  4.   <p>
  5.     <a class = "btn btn-primary btn-large" > 
  6.       Jifunze zaidi
  7.     </a>
  8.   </ p>
  9. </ div>

Salamu, Dunia!

Hiki ni kitengo rahisi cha shujaa, kijenzi rahisi cha mtindo wa jumbotron cha kutoa umakini wa ziada kwa maudhui au maelezo yaliyoangaziwa.

Jifunze zaidi

Kijajuu cha ukurasa

Gamba rahisi la h1kuweka nafasi ipasavyo na kuweka sehemu za yaliyomo kwenye ukurasa. Inaweza kutumia h1chaguo-msingi small, kipengele pamoja na vipengele vingine vingi (na mitindo ya ziada).

Mfano wa kichwa cha ukurasa Matini ndogo ya kichwa

  1. <div class = "page-header" > 
  2.   <h1> Mfano wa kichwa cha ukurasa </h1>
  3. </ div>

Vijipicha Gridi za picha, video, maandishi na zaidi

Vijipicha chaguomsingi

Kwa chaguo-msingi, vijipicha vya Bootstrap vimeundwa ili kuonyesha picha zilizounganishwa na alama ndogo zinazohitajika.

Inayoweza kubinafsishwa sana

Ukiwa na lebo ya ziada, inawezekana kuongeza aina yoyote ya maudhui ya HTML kama vile vichwa, aya, au vitufe kwenye vijipicha.

  • Lebo ya kijipicha

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Kitendo Kitendo

  • Lebo ya kijipicha

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Kitendo Kitendo

Kwa nini utumie vijipicha

Vijipicha (hapo awali .media-gridhadi v1.4) ni vyema kwa gridi za picha au video, matokeo ya utafutaji wa picha, bidhaa za rejareja, portfolios, na mengi zaidi. Wanaweza kuwa viungo au maudhui tuli.

Rahisi, markup rahisi

Alama ya kijipicha ni rahisi—a ulyenye idadi yoyote ya livipengele ndiyo tu inayohitajika. Pia ni rahisi kunyumbulika, ikiruhusu aina yoyote ya maudhui yenye alamisho kidogo zaidi ili kufunga maudhui yako.

Hutumia ukubwa wa safu wima ya gridi

Hatimaye, sehemu ya vijipicha hutumia aina zilizopo za mfumo wa gridi—kama .span2au .span3—kwa udhibiti wa vipimo vya kijipicha.

Alama

Kama ilivyotajwa hapo awali, alama inayohitajika ya vijipicha ni nyepesi na moja kwa moja. Hapa angalia usanidi chaguo-msingi wa picha zilizounganishwa :

  1. <ul class = "thumbnails" > 
  2.   <li class = "span3" > 
  3.     <a href = "#" class = "kijipicha" >  
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.     </a>
  6.   </li>
  7.   ...
  8. </ul>

Kwa maudhui maalum ya HTML katika vijipicha, alama hubadilika kidogo. Ili kuruhusu maudhui ya kiwango cha kuzuia mahali popote, tunabadilishana <a>kama <div>vile:

  1. <ul class = "thumbnails" > 
  2.   <li class = "span3" > 
  3.     <div class = "thumbnail" > 
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.       <h5> Lebo ya kijipicha </h5>
  6.       <p> Manukuu ya kijipicha hapa hapa... </p>
  7.     </ div>
  8.   </li>
  9.   ...
  10. </ul>

Mifano zaidi

Chunguza chaguo zako zote ukitumia aina mbalimbali za gridi zinazopatikana kwako. Unaweza pia kuchanganya na kuchanganya ukubwa tofauti.

Mitindo ya Arifa za mafanikio, onyo na ujumbe wa makosa

Chaguo-msingi nyepesi

Darasa la msingi lililoandikwa upya

Kwa Bootstrap 2, tumerahisisha darasa la msingi: .alertbadala ya .alert-message. Pia tumepunguza kiwango cha chini kabisa kinachohitajika—hapana <p>inahitajika kwa chaguo-msingi, ya nje tu <div>.

Ujumbe mmoja wa tahadhari

Kwa kipengele kinachodumu zaidi chenye msimbo mdogo, tumeondoa mwonekano wa kutofautisha wa arifa za kuzuia, ujumbe unaokuja na pedi nyingi na maandishi zaidi. Darasa pia limebadilika kuwa .alert-block.

Inakwenda vizuri na javascript

Bootstrap inakuja na programu-jalizi nzuri ya jQuery inayoauni ujumbe wa arifa, na kufanya kuziondoa haraka na kwa urahisi.

Pata programu-jalizi »

Arifa za mfano

Funga ujumbe wako na ikoni ya hiari ya kufunga kwenye div na darasa rahisi.

Onyo! Bora jiangalie mwenyewe, huonekani kuwa mzuri sana. 
  1. <div class = "alert" > 
  2.   <button class = "close" data-dismiss = "alert" > × </button>  
  3.   <strong> Onyo! </strong> Bora jiangalie mwenyewe, huonekani kuwa mzuri sana.
  4. </ div>

Vichwa juu! Vifaa vya iOS vinahitaji href="#"uondoaji wa arifa. Hakikisha umeijumuisha na sifa ya data ya ikoni za kufunga za nanga. Vinginevyo, unaweza kutumia <button>kipengele chenye sifa ya data, ambacho tumechagua kufanya kwa hati zetu. Unapotumia <button>, ni lazima ujumuishe type="button"au fomu zako zisiwasilishe.

Panua kwa urahisi ujumbe wa kawaida wa arifa kwa madarasa mawili ya hiari: .alert-blockkwa vidhibiti zaidi vya kuweka na kuweka maandishi na .alert-headingkwa kichwa kinacholingana.

Onyo!

Bora jiangalie mwenyewe, huonekani kuwa mzuri sana. Nulla vitae elit libero, pharetra augue. Karibu commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" > 
  2.   <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  3.   <h4 class = "alert-heading" > Onyo! </ h4> 
  4.   Bora ujichunguze, wewe si...
  5. </ div>

Mibadala ya muktadha Ongeza madarasa ya hiari ili kubadilisha maana ya arifa

Hitilafu au hatari

Oh snap! Badilisha mambo machache na ujaribu kuwasilisha tena. 
  1. <div class = "alert alert-error" > 
  2.   ...
  3. </ div>

Mafanikio

Umefanya vizuri! Umefaulu kusoma ujumbe huu muhimu wa tahadhari. 
  1. <div class = "alert alert-success" > 
  2.   ...
  3. </ div>

Habari

Vichwa juu! Tahadhari hii inahitaji umakini wako, lakini sio muhimu sana. 
  1. <div class = "tahadhari ya taarifa" > 
  2.   ...
  3. </ div>

Pau za maendeleo Kwa kupakia, kuelekeza kwingine, au hali ya kitendo

Mifano na markup

Msingi

Upau chaguo-msingi wa maendeleo na upinde rangi wima.

  1. <div class = "progress" > 
  2.   <div class = "bar" 
  3.        style = " upana : 60 %; " ></div> 
  4. </ div>

Milia

Hutumia upinde rangi kuunda athari yenye milia (hakuna IE).

  1. <div class = "progress progress-striped" > 
  2.   <div class = "bar" 
  3.        style = " upana : 20 %; " ></div> 
  4. </ div>

Imehuishwa

Huchukua mfano wa mistari na kuuhuisha (hakuna IE).

  1. <div class = "progress progress-striped 
  2.      hai" >
  3.   <div class = "bar" 
  4.        style = " upana : 40 %; " ></div> 
  5. </ div>

Chaguzi na usaidizi wa kivinjari

Rangi za ziada

Pau za maendeleo hutumia baadhi ya vitufe sawa na madarasa ya tahadhari kwa mitindo thabiti.

Paa zilizopigwa

Sawa na rangi dhabiti, tuna pau tofauti za maendeleo zenye mistari.

Tabia

Pau za maendeleo hutumia mabadiliko ya CSS3, kwa hivyo ukirekebisha upana kwa njia ya javascript, itabadilisha ukubwa vizuri.

Ukitumia .activedarasa, .progress-stripedpau zako za maendeleo zitahuisha milia kutoka kushoto kwenda kulia.

Usaidizi wa kivinjari

Pau za maendeleo hutumia gradient za CSS3, mipito, na uhuishaji kufikia athari zao zote. Vipengele hivi havitumiki katika IE7-9 au matoleo ya awali ya Firefox.

Opera na IE hazitumii uhuishaji kwa wakati huu.

Vipengee Nyinginezo vya uzani mwepesi

Visima

Tumia kisima kama athari rahisi kwenye kipengele ili kukipa athari ya kuingiza.

Tazama, niko kisimani! 
  1. <div class = "vizuri" > 
  2.   ...
  3. </ div>

Funga ikoni

Tumia aikoni ya jumla ya kufunga kwa kuondoa maudhui kama vile miundo na arifa.

  1. <button class = "close" > × </kifungo>

Vifaa vya iOS vinahitaji href="#" kwa matukio ya kubofya ikiwa ungependa kutumia nanga.

  1. <a class = "close" href = "#" > × </a>