Abubuwan da aka gyara

An gina yawancin abubuwan sake amfani da su a cikin Bootstrap don samar da kewayawa, faɗakarwa, popovers, da ƙari mai yawa.

Ƙungiyoyin maɓalli

Yi amfani da ƙungiyoyin maɓalli don haɗa maɓallan maɓalli da yawa tare azaman abun haɗaɗɗiya ɗaya. Gina su da jerin abubuwa <a>ko <button>abubuwa.

Mafi kyawun ayyuka

Muna ba da shawarar jagororin masu zuwa don amfani da ƙungiyoyin maɓalli da sanduna:

  • Yi amfani da kashi ɗaya koyaushe a cikin rukunin maɓalli ɗaya, <a>ko <button>.
  • Kar a haxa maɓallan launuka daban-daban a cikin rukunin maɓalli ɗaya.
  • Yi amfani da gumaka baya ga ko maimakon rubutu, amma tabbas sun haɗa da alt da rubutun take a inda ya dace.

Ƙungiyoyin maɓalli masu alaƙa tare da zazzagewa (duba ƙasa) yakamata a kira su daban kuma koyaushe suna haɗa da zazzagewa don nuna halayen da aka yi niyya.

Misali na asali

Ga yadda HTML ke neman daidaitaccen rukunin maɓalli da aka gina tare da maɓallan alamar anga:

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

Misalin Toolbar

Haɗa saiti na <div class="btn-group">cikin wani <div class="btn-toolbar">don ƙarin hadaddun abubuwa.

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

Akwatin akwati da dandanon rediyo

Ƙungiyoyin maɓalli kuma za su iya aiki azaman rediyo, inda maɓalli ɗaya kawai zai iya aiki, ko akwatunan rajista, inda kowane adadin maɓalli zai iya aiki. Duba takardun Javascript don haka.

Samu javascript »

Zazzagewa a cikin ƙungiyoyin maɓalli

A kula! .btn-groupMaɓallai masu zazzagewa dole ne a nannade su daban-daban a cikin nasu .btn-toolbardon daidaitawa.

Maballin zazzagewa

Misali alama

Hakazalika da ƙungiyar maɓalli, alamar mu tana amfani da alamar maɓalli na yau da kullun, amma tare da ɗimbin ƙari don daidaita salo da goyan bayan jigon jQuery plugin na Bootstrap.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "zazzagewar" href = "#" >
  3. Aiki
  4. <span class = "kulawa" > </span>
  5. </a>
  6. <ul class = "zazzage-menu" >
  7. <!-- menu na zazzage mahaɗan -->
  8. </ul>
  9. </div>

Yana aiki tare da duk girman maɓalli

Maɓallin zazzagewa yana aiki a kowane girman. Girman maɓallin ku zuwa .btn-large, .btn-small, ko .btn-mini.

Yana buƙatar javascript

Maɓallin zazzagewa yana buƙatar kayan aikin saukarwa na Bootstrap don aiki.

A wasu lokuta-kamar wayar hannu-manufofin zaɓuka za su shimfiɗa a waje da wurin kallo. Kuna buƙatar warware jeri da hannu ko tare da javascript na al'ada.


Zazzage maballin Raba

Overview da misalai

Gina kan salon rukunin maɓallin maɓallin da alama, za mu iya ƙirƙirar maɓallin tsaga cikin sauƙi. Maɓallai masu tsaga suna fasalta daidaitaccen aiki a hagu da jujjuyawar saukewa a dama tare da mahallin mahallin.

Girman girma

Yi amfani da ƙarin azuzuwan maɓalli .btn-mini, .btn-small, ko .btn-largedon ƙima.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "zaɓi-menu pull-right" >
  4. <!-- menu na zazzage mahaɗan -->
  5. </ul>
  6. </div>

Misali alama

Muna faɗaɗa maɓalli na al'ada don samar da aikin maɓalli na biyu wanda ke aiki azaman faɗakarwa daban.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Aiki </button>
  3. < class class = "btn dropdown-toggle" data-toggle = "saukarwa" >
  4. <span class = "kulawa" > </span>
  5. </button>
  6. <ul class = "zazzage-menu" >
  7. <!-- menu na zazzage mahaɗan -->
  8. </ul>
  9. </div>

Zazzage menu

Hakanan za'a iya jujjuya menu na saukarwa daga ƙasa zuwa sama ta ƙara aji ɗaya ga iyayen .dropdown-menu. Zai jujjuya alkiblar .caretkuma ya sake sanya menu ɗin kansa don motsawa daga ƙasa zuwa sama maimakon sama zuwa ƙasa.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Sauke </button>
  3. < class class = "btn dropdown-toggle" data-toggle = "saukarwa" >
  4. <span class = "kulawa" > </span>
  5. </button>
  6. <ul class = "zazzage-menu" >
  7. <!-- menu na zazzage mahaɗan -->
  8. </ul>
  9. </div>

Multicon-page pagination

Lokacin amfani

Mafi sauƙaƙa da ƙaramin salo mai salo wanda aka yi wahayi daga Rdio, mai girma ga ƙa'idodi da sakamakon bincike. Babban toshe yana da wuya a rasa, sauƙin daidaitawa, kuma yana ba da manyan wuraren dannawa.

Hanyoyin haɗin yanar gizo na jihohi

Ana iya daidaita hanyoyin haɗin gwiwa kuma suna aiki a cikin yanayi da yawa tare da ajin da ya dace. .disableddon hanyoyin haɗin da ba za a iya dannawa ba kuma .activedon shafin na yanzu.

daidaitawa mai sassauƙa

Ƙara ko wanne daga cikin azuzuwan zaɓi biyu don canza daidaita hanyoyin haɗin yanar gizo: .pagination-centeredda .pagination-right.

Misalai

Sashin rubutun tsoho yana da sassauƙa kuma yana aiki cikin bambance-bambance masu yawa.

Alamar alama

An nade a cikin wani <div>, pagination ne kawai <ul>.

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Prev </a></li>
  4. <li class = "aiki" >
  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 = "#" > Gaba </a></li>
  11. </ul>
  12. </div>

Pager Domin saurin hanyoyin haɗin da suka gabata da na gaba

Game da pager

Bangaren pager shine saitin hanyoyin haɗin gwiwa don aiwatar da fage mai sauƙi tare da alamar haske har ma da salo masu sauƙi. Yana da kyau ga shafuka masu sauƙi kamar blogs ko mujallu.

Yanayin naƙasasshen zaɓi

Hanyoyin haɗin yanar gizon Pager kuma suna amfani da .disabledaji na gaba ɗaya daga pagination.

Misali na asali

Ta hanyar tsoho, shafin yanar gizon yana haɗin haɗin kai.

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

Hanyoyin haɗin kai masu daidaitawa

A madadin, zaku iya daidaita kowace hanyar haɗin gwiwa zuwa ɓangarorin:

  1. <ul class = "pager" >
  2. <li class = "na baya" >
  3. <a href = "#" > Tsoho </a>
  4. </li>
  5. <li class = "na gaba" >
  6. <a href = "#" > Sabo → </a>
  7. </li>
  8. </ul>
Lakabi Alamar alama
Tsohuwar <span class="label">Default</span>
Nasara <span class="label label-success">Success</span>
Gargadi <span class="label label-warning">Warning</span>
Muhimmanci <span class="label label-important">Important</span>
Bayani <span class="label label-info">Info</span>
Juyawa <span class="label label-inverse">Inverse</span>

Game da

Baji ƙanana ne, sassauƙan abubuwa don nuna alama ko ƙidaya wani nau'i. Ana yawan samun su a cikin abokan cinikin imel kamar Mail.app ko akan aikace-aikacen hannu don sanarwar turawa.

Akwai azuzuwan

Suna Misali Alamar alama
Tsohuwar 1 <span class="badge">1</span>
Nasara 2 <span class="badge badge-success">2</span>
Gargadi 4 <span class="badge badge-warning">4</span>
Muhimmanci 6 <span class="badge badge-important">6</span>
Bayani 8 <span class="badge badge-info">8</span>
Juyawa 10 <span class="badge badge-inverse">10</span>

Jarumi naúrar

Bootstrap yana ba da sassauƙa mai sauƙi, sassauƙa da ake kira rukunin jaruma don nuna abun ciki akan rukunin yanar gizon ku. Yana aiki da kyau akan tallace-tallace da shafuka masu nauyi.

Alamar alama

Kunna abubuwan ku divkamar haka:

  1. <div class = "jarumin jarumta" >
  2. <h1> Jagora </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Ƙara koyo
  7. </a>
  8. </p>
  9. </div>

Sannu Duniya!

Wannan rukunin jarumai ne mai sauƙi, sassauƙan salon jumbotron don kiran ƙarin hankali ga fitaccen abun ciki ko bayanai.

Ƙara koyo

taken shafi

Sauƙaƙan harsashi don h1fitar da sarari yadda ya kamata da yanki sassan abun ciki a shafi. Yana iya amfani da h1tsohowar small, element da sauran sauran abubuwan haɗin gwiwa (tare da ƙarin salo).

  1. <div class = "shafi-header" >
  2. <h1> Misalin taken shafi </h1>
  3. </div>

Tsoffin hotuna

Ta hanyar tsoho, an tsara thumbnails na Bootstrap don nuna hotunan da aka haɗe tare da ƙarancin alamar da ake buƙata.

Mai iya daidaitawa sosai

Tare da ɗan ƙarin alamar alama, yana yiwuwa a ƙara kowane nau'in abun ciki na HTML kamar kanun labarai, sakin layi, ko maɓalli a cikin ƙananan hotuna.

  • Alamar thumbnail

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

    Aiki Aiki

  • Alamar thumbnail

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

    Aiki Aiki

Me yasa ake amfani da thumbnails

Tambayoyi (a baya .media-gridhar zuwa v1.4) suna da kyau don grid na hotuna ko bidiyo, sakamakon binciken hoto, samfuran tallace-tallace, fayiloli, da ƙari mai yawa. Suna iya zama mahaɗi ko abun ciki na tsaye.

Sauƙaƙe, alama mai sassauƙa

Alamar thumbnail abu ne mai sauƙi - ultare da kowane adadin liabubuwa shine duk abin da ake buƙata. Hakanan yana da sauƙin sassauƙa, yana ba da damar kowane nau'in abun ciki tare da ɗan ƙara alama don naɗe abubuwan ku.

Yana amfani da girman ginshiƙin grid

A ƙarshe, ɓangaren thumbnails yana amfani da azuzuwan tsarin grid-kamar .span2ko .span3-don sarrafa girman ɗan yatsa.

Alamar alama

Kamar yadda aka ambata a baya, alamar da ake buƙata don thumbnails yana da haske kuma mai sauƙi. Anan kalli saitunan tsoho don hotuna masu alaƙa :

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

Don abun ciki na HTML na al'ada a cikin ƙananan hotuna, alamar tana canzawa kaɗan. Don ba da izinin toshe abun ciki a ko'ina, muna musanya shi <a>don <div>kamar haka:

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Alamar ɗan yatsa </h5>
  6. <p> Taken thumbnail a nan... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Karin misalai

Bincika duk zaɓuɓɓukanku tare da nau'ikan grid iri-iri da ke akwai a gare ku. Hakanan zaka iya haɗawa da daidaita girma dabam dabam.

Matsaloli masu nauyi

Ajin da aka sake rubutawa

Tare da Bootstrap 2, mun sauƙaƙe ajin tushe: .alertmaimakon .alert-message. Mun kuma rage mafi ƙarancin alamar da ake buƙata-babu <p>ana buƙata ta tsohuwa, kawai na waje<div> .

Saƙon faɗakarwa guda ɗaya

Don ƙarin abin ɗorewa tare da ƙasan lamba, mun cire bambance-bambancen neman faɗakarwar toshewa, saƙonnin da suka zo tare da ƙarin padding da yawanci ƙarin rubutu. Ajin kuma ya canza zuwa .alert-block.


Yana da kyau tare da javascript

Bootstrap ya zo tare da babban kayan aikin jQuery wanda ke goyan bayan saƙonnin faɗakarwa, yin watsi da su cikin sauri da sauƙi.

Sami plugin ɗin »

Misali faɗakarwa

Rufe saƙon ku da gunkin kusa na zaɓi a cikin div tare da aji mai sauƙi.

Gargadi! Mafi kyawun duba kanku, ba ku da kyau sosai.
  1. <div class = "jijjiga" >
  2. < class class = "rufe" data-dismiss = "jijjiga" > × </button>
  3. <strong> Gargadi! Mafi kyawun duba yo kai, ba ka da kyau sosai.
  4. </div>

A kula! Na'urorin iOS suna buƙatar wani href="#"don korar faɗakarwa. Tabbatar kun haɗa shi da sifa ta bayanai don gumakan anka kusa. A madadin, zaku iya amfani da wani <button>abu mai sifa na bayanai, wanda muka zaɓi yi don takaddun mu. Lokacin amfani <button>, dole ne ka haɗatype="button" ko fom ɗin ku bazai ƙaddamar ba.

Sauƙaƙe miƙe daidaitaccen saƙon faɗakarwa tare da azuzuwan zaɓi guda biyu: .alert-blockdon ƙarin padding da sarrafa rubutu da kuma .alert-headingtaken da ya dace.

Gargadi!

Mafi kyawun duba kanku, ba ku da kyau sosai. Nulla vitae elit libero, a pharetra augue. Abubuwan da suka dace da cursus magna, velsselerisque nisl consectetur et.

  1. <div class = "jijjiga-block" >
  2. <a class = "close" data-dismiss = "jijjiga" href = "#" > × </a>
  3. <h4 class = "jigon faɗakarwa" > Gargadi! </h4> ku
  4. Mafi kyawun bincika kan ku, ba ku ...
  5. </div>

Madadin yanayi Ƙara azuzuwan zaɓi don canza ma'anar faɗakarwa

Kuskure ko haɗari

Oh karye! Canja wasu 'yan abubuwa sama kuma a sake gwada ƙaddamarwa.
  1. <div class = "kuskuren faɗakarwa" >
  2. ...
  3. </div>

Nasara

Sannu da aikatawa! Kun yi nasarar karanta wannan muhimmin saƙon faɗakarwa.
  1. <div class = "jijjiga faɗakarwa-nasara" >
  2. ...
  3. </div>

Bayani

A kula! Wannan faɗakarwar tana buƙatar kulawar ku, amma ba shi da mahimmanci sosai.
  1. <div class = "jijjiga-info" >
  2. ...
  3. </div>

Misalai da alama

Na asali

Tsohuwar mashaya ci gaba tare da gradient a tsaye.

  1. <div class = "ci gaba" >
  2. <div class = "bar"
  3. style = " nisa : 60 %; " </div>
  4. </div>

Tatsi

Yana amfani da gradient don ƙirƙirar tasirin tsiri (babu IE).

  1. <div class = "ci gaban ci gaba-raguwa" >
  2. <div class = "bar"
  3. style = " nisa : 20 %; " </div>
  4. </div>

Mai rairayi

Ɗauki misali mai laushi kuma yana raye shi (ba IE).

  1. <div class = "ci gaba-ci gaba
  2. aiki >
  3. <div class = "bar"
  4. style = " nisa : 40 %; " >> div>
  5. </div>

Zaɓuɓɓuka da tallafin burauza

Ƙarin launuka

Sandunan ci gaba suna amfani da wasu maɓalli iri ɗaya da azuzuwan faɗakarwa don daidaitattun salo.

Sanduna masu tsiri

Kama da m launuka, muna da bambance bambancen sanduna ci gaba.

Hali

Sandunan ci gaba suna amfani da sauye-sauye na CSS3, don haka idan kun daidaita faɗin ta hanyar javascript, zai sake girma cikin sauƙi.

Idan kuna amfani da .activeajin, .progress-stripedsandunan ci gaban ku za su rayar da ratsi daga hagu zuwa dama.

Tallafin mai lilo

Sandunan ci gaba suna amfani da gradients CSS3, canji, da rayarwa don cimma duk tasirin su. Ba a tallafawa waɗannan fasalulluka a cikin IE7-9 ko tsofaffin nau'ikan Firefox.

Opera da IE basa goyan bayan rayarwa a wannan lokacin.

Wells

Yi amfani da rijiyar azaman tasiri mai sauƙi akan wani abu don ba shi tasirin sa.

Duba, ina cikin rijiya!
  1. <div class = "lafiya" >
  2. ...
  3. </div>

Rufe gumaka

Yi amfani da madaidaicin gunkin kusa don korar abun ciki kamar tsari da faɗakarwa.

  1. < class class = "kusa" > × </button>

Na'urorin iOS suna buƙatar href = "#" don danna abubuwan da suka faru idan kuna amfani da anga.

  1. <a class = "close" href = "#" > & lokuta; </a>