Amatsinda ya buto

Koresha amatsinda ya buto kugirango uhuze buto nyinshi hamwe nkigice kimwe. Kububaka hamwe nurukurikirane <a>cyangwa <button>ibintu.

Urashobora kandi guhuza <div class="btn-group">ibice bya a <div class="btn-toolbar">kubikorwa byinshi bigoye.

Urugero

Dore uko HTML ishakisha itsinda rya buto risanzwe ryubatswe hamwe na buto ya tagi ya labour:

<div class = "btn-itsinda" > 
  <a class = "btn" href = "#"> 1 </a> _  
  <a class = "btn" href = "#"> 2 </a> _  
  <a class = "btn" href = "#"> 3 </a> _  
</div>

Kandi hamwe nigikoresho cyibikoresho kumatsinda menshi:

<div class = "btn-toolbar" > 
  <div class = "btn-itsinda" > 
    ...
  </div>
</div>

Kugenzura agasanduku na radiyo nziza

Amatsinda ya buto arashobora kandi gukora nka radio, aho buto imwe yonyine ishobora kuba ikora, cyangwa agasanduku, aho umubare uwo ariwo wose wa buto ushobora kuba ukora. Reba inyandiko ya Javascript kubyo.

Shaka javascript »

Umutwe

CSS kumatsinda ya buto iri muri dosiye itandukanye, buto-matsinda.nta.

Ibitonyanga

Koresha buto iyariyo yose kugirango utere menu yamanutse uyishyire muri a .btn-grouphanyuma utange menu ikwiye.

Urugero

Bisa na buto itsinda, marike yacu ikoresha buto isanzwe, ariko hamwe nintoki zongeweho kugirango tunonosore imiterere kandi dushyigikire Bootstrap yamanutse jQuery plugin.

<div class = "btn-itsinda" > 
  <a class = "btn guta-toggle" data-toggle = "dropdown" href = "#">   
    Igikorwa
    <span class = "caret" > </span> 
  </a>
  <ul class = "ibitonyanga-menu" > 
    <! - Ibitonyanga byamanutse bihuza ->
  </ul>
</div>

Gutandukanya buto yamanutse

Kubaka kuri buto yitsinda ryimiterere na marike, turashobora gukora byoroshye buto yo gutandukana. Gutandukanya utubuto tugaragaza ibikorwa bisanzwe ibumoso hamwe no kumanura iburyo iburyo hamwe nibihuza.

Urugero

Twagutse kuri bouton isanzwe yamanutse kugirango dutange buto ya kabiri igikorwa ikora nkigitonyanga gitandukanye.

<div class = "btn-itsinda" > 
  <a class = "btn" href = "#"> Igikorwa </a> _  
  <a class = "btn guta-toggle" data-toggle = "dropdown" href = "#">   
    <span class = "caret" > </span> 
  </a>
  <ul class = "ibitonyanga-menu" > 
    <! - Ibitonyanga byamanutse bihuza ->
  </ul>
</div>

Icyiciro cyibanze gikomeye

Ibice byose bya nav hano - tabs, ibinini, na lisiti - dusangire ikimenyetso kimwe shingiro hamwe nuburyo binyuze mumasomo .nav.

Impamvu ibinini n'ibinini

Utubuto n'ibinini muri Bootstrap byubatswe kuri <ul>hamwe na HTML imwe yibanze, urutonde rwihuza. Hinduranya hagati ya tabs cyangwa ibinini hamwe nishuri gusa.

Amahitamo yombi ni meza kubice bigize ibice cyangwa kugendagenda hagati yimpapuro zibirimo.

Ibanze

Fata imiyoboro isanzwe <ul>hanyuma wongereho .nav-tabs:

• Murugo
• Umwirondoro
• Ubutumwa

<ul class = "nav nav-tabs" > 
  <li urwego = "rukora" > 
    <a href = "#"> Urugo </a> _ 
  </li>
  <li> <a href = "#"> ... </a> </li> 
  <li> <a href = "#"> ... </a> </li> 
</ul>

Ibinini by'ibanze

Fata iyo HTML imwe, ariko ukoreshe .nav-pillsaho:

• Murugo
• Umwirondoro
• Ubutumwa

<ul class = "nav nav-ibinini" > 
  <li urwego = "rukora" > 
    <a href = "#"> Urugo </a> _ 
  </li>
  <li> <a href = "#"> ... </a> </li> 
  <li> <a href = "#"> ... </a> </li> 
</ul>

Uburyo bwo gutondeka 'em

Nka tabs n'ibinini bitambitse kubisanzwe, gusa ongeraho icyiciro cya kabiri .nav-stacked,, kugirango bigaragare bihagaritse.

Utubuto

• Murugo
• Umwirondoro
• Ubutumwa

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Ibinini byegeranye

• Murugo
• Umwirondoro
• Ubutumwa

<ul class = "nav nav-ibinini nav-stacked" > 
  ...
</ul>

Ibikubiyemo bikize byoroshye

Ibitonyanga byamanutse muri Bootstrap tabs hamwe nibinini biroroshye cyane kandi bisaba gusa HTML yinyongera gusa na plugin yoroheje ya jQuery.

Jya kuri page ya Javascript kugirango usome docs mugutangiza ibitonyanga muri Bootstrap.

Tab hamwe nibitonyanga

• Murugo
• Umwirondoro
• Kumanuka
  • Igikorwa
  • Ikindi gikorwa
  • Ikindi kintu hano
  • Ihuza ritandukanye

<ul class = "nav nav-tabs" > 
  <li urwego = "kumanuka" > 
    < icyiciro = "guta-guhindagura" 
       data-toggle = "igitonyanga"
       href = "#" >
        Kumanuka
        <b urwego = "caret" > </b> 
      </a>
    <ul class = "ibitonyanga-menu" > 
      <! - amahuza ->
    </ul>
  </li>
</ul>

Ibinini hamwe nibitonyanga

• Murugo
• Umwirondoro
• Kumanuka
  • Igikorwa
  • Ikindi gikorwa
  • Ikindi kintu hano
  • Ihuza ritandukanye

<ul class = "nav nav-ibinini" > 
  <li urwego = "kumanuka" > 
    < icyiciro = "guta-guhindagura" 
       data-toggle = "igitonyanga"
       href = "#" >
        Kumanuka
        <b urwego = "caret" > </b> 
      </a>
    <ul class = "ibitonyanga-menu" > 
      <! - amahuza ->
    </ul>
  </li>
</ul>

Porogaramu-yuburyo bwo kuyobora

Urutonde rwa Nav rutanga inzira yoroshye kandi yoroshye yo kubaka amatsinda ya nav ihuza imitwe idahwitse. Bakoreshwa neza kuruhande nka Finder muri OS X.

Mu buryo bwubaka, zubatswe kumurongo umwe wa nav yuburyo bwa tabs n'ibinini, bityo imikoreshereze no kuyitunganya biroroshye.

Nibishushanyo

Urutonde rwa Nav narwo rworoshe gutunganya hamwe nudushushondanga. Ongeraho <i>tagi ikwiye hamwe nishuri hanyuma urashiraho.

Urugero nav

Fata urutonde rwihuza hanyuma wongereho class="nav nav-list":

<ul class = "nav nav-urutonde" > 
  <li urwego = "nav-umutwe" > 
    Andika umutwe
  </li>
  <li urwego = "rukora" > 
    <a href = "#"> Urugo </a> _ 
  </li>
  <li>
    <a href = "#"> Isomero </a> _ 
  </li>
  ...
</ul>

Urugero hamwe namashusho

Urugero rumwe, ariko hamwe na <i>tagi kumashusho.

<ul class = "nav nav-urutonde" > 
  ...
  <li>
    <a href = "#"> _ 
      <i urwego = "igishushanyo-igitabo" > </i> 
      Isomero
    </a>
  </li>
  ...
</ul>

Harimo iki

Zana tabs yawe mubuzima hamwe na plugin yoroshye yo guhinduranya hagati yibirimo ukoresheje tabs. Bootstrap ihuza tabs muburyo butandukanye: hejuru (isanzwe), iburyo, hepfo, n'ibumoso.

Guhindura hagati yabo biroroshye kandi bisaba gusa guhindura ibimenyetso bike cyane.

Urugero

Kugirango ukore tabs, uzenguruke .nav-tabsmuyindi div hamwe nishuri .tabbable.

Gucomeka jQuery

Amababi yose ya tabbable akoreshwa na plugin yacu yoroheje ya jQuery. Soma byinshi kubyerekeranye no kuzana tabbable mubuzima kurupapuro rwa javascript.

Shaka javascript →

Utubuto hepfo

Kuramo urutonde rwa HTML hanyuma wongere urwego rwo gushyira tabs hepfo.

<div class = "tabs ya tabs-munsi" > 
  <div class = "tab-ibirimo" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Utubuto ibumoso

Hindura icyiciro kugirango ushyire tabs ibumoso.

<div class = "tabs ya tabs-ibumoso" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-ibirimo" > 
    ...
  </div>
</div>

Utubuto iburyo

Hindura icyiciro kugirango ushyire tabs iburyo.

<div class = "tabs ya tabs-iburyo" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-ibirimo" > 
    ...
  </div>
</div>

Navbar scafolding

Navbar isaba divi nkeya kugirango iyubake neza kugirango ihagarare cyangwa ihamye.

<div class = "navbar" > 
  <div class = "navbar-imbere" > 
    <div class = "kontineri" > 
      ...
    </div>
  </div>
</div>

Gukora navbar yashizwe hejuru hejuru yo kureba, ongera .navbar-fixed-topkuri divi yo hanze , .navbar. Muri CSS yawe, uzakenera kandi kubara kubireba bitera wongeyeho padding-top: 40px;ibyawe <body>.

<div class = "navbar navbar-ikosorwa-hejuru" > 
  ...
</div>

Izina ry'ikirango

Ihuza ryoroshye ryerekana ikirango cyawe cyangwa izina ryumushinga bisaba gusa ikirango.

<a class = "brand" href = "#"> _  
  Izina ry'umushinga
</a>

Ifishi yo gushakisha

Ifishi yo gushakisha yakira uburyo bwihariye muri navbar hamwe .navbar-searchnishuri. Shyiramo .pull-leftcyangwa .pull-rightkuri formkugirango uhuze.

<form class = "navbar-shakisha gukurura-ibumoso" > 
  <iyinjiza ubwoko = "inyandiko" urwego = "gushakisha-kubaza" umwanya = "Shakisha" >   
</form>

Guhitamo guhitamo

Ukurikije ingano yibirimo muri topbar yawe, urashobora gushyira mubikorwa amahitamo asubiza. Kubikora, funga ibikubiyemo byawe muri div irimo div .nav-collapse.collapse, hanyuma wongereho navbar toggle buto , .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-imbere" > 
    <div class = "kontineri" > 
 
      <! - .btn-navbar ikoreshwa nka guhindagura ibintu bya navbar yaguye ->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse">   
        <span class = "agashusho-bar" > </span> 
        <span class = "agashusho-bar" > </span> 
        <span class = "agashusho-bar" > </span> 
      </a>
 
      <! - Witondere gusiga ikirango hanze niba ushaka ko cyerekanwa ->
      <a class = "brand" href = "#"> Izina ryumushinga </a>  
 
      <! - Ikintu cyose ushaka cyihishe kuri 940px cyangwa munsi, shyira imbere hano ->
      <div class = "nav-gusenyuka" > 
        <! - .nav, .navbar-gushakisha, .navbar-form, nibindi ->
      </div>
 
    </div>
  </div>
</div>

Imiyoboro

Ibintu byoroheje biroroshye kongeramo ukoresheje urutonde rutagabanijwe.

<ul class = "nav" > 
  <li urwego = "rukora" > 
    <a href = "#"> Urugo </a> _ 
  </li>
  <li> <a href = "#"> Ihuza </a> </li> 
  <li> <a href = "#"> Ihuza </a> </li> 
</ul>

Ongeraho ibitonyanga

Ongeraho ibitonyanga kuri nav biroroshye cyane, ariko bisaba gukoresha plugin yacu ya javascript .

<ul class = "nav" > 
  <li urwego = "kumanuka" > 
    <a href = "#" 
          icyiciro = "guta-guhindagura"
          data-toggle = "guta" >
          Konti
          <b urwego = "caret" > </b> 
    </a>
    <ul class = "ibitonyanga-menu" > 
      ...
    </ul>
  </li>
</ul>

Shaka javascript →

Kuki kubikoresha

Kugenda kwa Breadcrumb ikoreshwa nkuburyo bwo kwereka abakoresha aho bari muri porogaramu cyangwa kurubuga, ariko ntabwo ari inzira yambere. Komeza gukoresha gake kandi byihuse kugirango bigire akamaro.

Ingero

Urugero rumwe rwerekanwe nkuko rushobora kwerekanwa kurupapuro rwinshi.

• Murugo

• Murugo /
• Isomero

• Murugo /
• Isomero /
• Amakuru

Markup

HTML nurutonde rwawe rusanzwe rudafite urutonde.

<ul class = "umutsima" > 
  <li>
    <a href = "#"> Urugo </a> <span class = " divider" > / </span>   
  </li>
  <li>
    <a href = "#"> Isomero </a> <span class = " divider" > / </span>   
  </li>
  <li urwego = "rukora" > 
    <a href = "#"> Amakuru </a> _ 
  </li>
</ul>

Igihe cyo gukoresha

Ultra yoroshye kandi yoroheje yerekana pagination yahumetswe na Rdio, nziza kuri porogaramu n'ibisubizo by'ishakisha. Inzitizi nini iragoye kubura, byoroshye kugereranywa, kandi itanga ahantu hanini ho gukanda.

Ipaji ya leta ihuza

Ihuza irashobora guhindurwa kandi ikora mubihe byinshi hamwe nicyiciro gikwiye. .disabledkumirongo idahinduka no .activekurupapuro rwubu.

Guhuza byoroshye

Ongeramo kimwe mubyiciro bibiri bidahwitse kugirango uhindure guhuza pagination ihuza: .pagination-centeredna .pagination-right.

Ingero

Mburabuzi pagination ibice biroroshye kandi ikora muburyo butandukanye.

Markup

Bipfunyitse muri a <div>, pagination ni a <ul>.

<div class = "pagination" > 
  <ul>
    <li> <a href = "#"> Ibanza </a> </li> 
    <li urwego = "rukora" > 
      <a href = "#"> 1 </a> _ 
    </li>
    <li> <a href = "#"> 2 </a> </li> 
    <li> <a href = "#"> 3 </a> </li> 
    <li> <a href = "#"> 4 </a> </li> 
    <li> <a href = "#"> Ibikurikira </a> </li> 
  </ul>
</div>

Ibyerekeye pager

Ipaji igizwe nuruhererekane rwihuza ryoroshye rya pagination hamwe nurumuri rworoshye ndetse nuburyo bworoshye. Nibyiza kurubuga rworoshye nka blog cyangwa ibinyamakuru.

Urugero rusanzwe

Mburabuzi, pager hagati ihuza.

• Mbere
• Ibikurikira

<ul class = "pager" > 
  <li>
    <a href = "#"> Mbere </a> _ 
  </li>
  <li>
    <a href = "#"> Ibikurikira </a> _ 
  </li>
</ul>

Guhuza

Ubundi, urashobora guhuza buri murongo kumpande:

• Er Umusaza
• Gishya →

<ul class = "pager" > 
  <li urwego = "ubanza" > 
    <a href = "#"> & larr ; Umusaza </a> 
  </li>
  <li urwego = "ubutaha" > 
    <a href = "#"> Gishya & rarr ; </a> 
  </li>
</ul>

Mburabuzi

Mburabuzi, Bootstrap's thumbnail yagenewe kwerekana amashusho ahujwe nibimenyetso bike bisabwa.

Birashoboka cyane

Hamwe na bike byongeweho, birashoboka kongeramo ubwoko ubwo aribwo bwose bwa HTML nkimitwe, paragarafu, cyangwa buto muri thumbnail.

• 

  Ikimenyetso cya Thumbnail

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

  Igikorwa Igikorwa

• 

  Ikimenyetso cya Thumbnail

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

  Igikorwa Igikorwa

Kuki ukoresha igikumwe

Thumbnail (mbere .media-gridkugeza kuri v1.4) nibyiza kuri gride yamafoto cyangwa videwo, ibisubizo byo gushakisha amashusho, ibicuruzwa bicuruzwa, portfolios, nibindi byinshi. Birashobora kuba amahuza cyangwa ibirimo bihamye.

Ikimenyetso cyoroshye, cyoroshye

Thumbnail marup iroroshye - a ulhamwe numubare uwo ariwo wose liwibintu byose bisabwa. Nibindi byoroshye guhinduka, kwemerera ubwoko bwibirimo byose hamwe nibimenyetso byinshi byo gupfunyika ibikubiyemo.

Koresha grid inkingi ingano

Ubwanyuma, igikumwe gikoresha sisitemu ya gride ya sisitemu isanzwe-nka .span2cyangwa .span3-kugenzura ibipimo bya thumbnail.

Ikimenyetso

Nkuko byavuzwe mbere, ibimenyetso bisabwa kuri thumbnail biroroshye kandi byoroshye. Hano reba uburyo busanzwe bwo gushiraho amashusho :

<ul class = "igikumwe" > 
  <li urwego = "span3" > 
    <a href = "#" class = "thumbnail"> _  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Kubisanzwe HTML yibirimo muri thumbnail, marike ihinduka gato. Kwemerera guhagarika urwego urwego aho ariho hose, twahinduye i <a>kubintu <div>nkibi:

<ul class = "igikumwe" > 
  <li urwego = "span3" > 
    <div class = "igikumwe" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Ikirango cya Thumbnail </h5>
      <p> Ibisobanuro bito hano hano ... </p>
    </div>
  </li>
  ...
</ul>

Ingero nyinshi

Shakisha amahitamo yawe yose hamwe nibyiciro bitandukanye bya gride ushobora kubona. Urashobora kandi kuvanga no guhuza ubunini butandukanye.

Icyiciro cyibanze

Hamwe na Bootstrap 2, tworoheje icyiciro shingiro: .alertaho .alert-message. Twagabanije kandi ibimenyetso byibuze bisabwa - oya <p>ntibisabwa byanze bikunze, hanze gusa <div>.

Ubutumwa bumwe bwo kumenyesha

Kubintu byinshi biramba hamwe na code nkeya, twakuyeho itandukaniro ryo kureba kubihagarika, ubutumwa buzana na padi nyinshi kandi mubisanzwe inyandiko nyinshi. Icyiciro nacyo cyahindutse kuri .alert-block.

Kugenda neza hamwe na javascript

Bootstrap izanye plugin nini ya jQuery ishyigikira ubutumwa bwitondewe, bigatuma kubirukana byihuse kandi byoroshye.

Shaka plugin »

Urugero

Kuzuza ubutumwa bwawe hamwe nigishushanyo cyo gufunga muri div hamwe nicyiciro cyoroshye.

<div class = "menyesha" > 
  <a class = "close"> × </a> _ 
  <strong> Iburira! </strong> Kugenzura neza yo wenyine, ntabwo ureba neza.
</div>

Byoroshe kwagura ubutumwa busanzwe bwo kumenyesha hamwe nibyiciro bibiri bidahitamo: .alert-blockkuri padi nyinshi hamwe ninyandiko igenzura hamwe no .alert-headingguhuza umutwe.

<div class = "kumenyesha integuza-guhagarika" > 
  <a class = "close"> × </a> _ 
  <h4 urwego = " kumenyesha-umutwe" > Kuburira! </h4> 
  Byiza kugenzura yo wenyine, ntabwo uri ...
</div>

Ikosa cyangwa akaga

<div class = "kumenyesha-kwibeshya" > 
  ...
</div>

Intsinzi

<div class = "kumenyesha-gutsinda" > 
  ...
</div>

Amakuru

<div class = "kumenyesha amakuru-amakuru" > 
  ...
</div>

Shingiro

Mburabuzi Iterambere umurongo hamwe na vertical gradient.

<div class = "iterambere" > 
  <div class = "akabari" 
       style = " ubugari : 60 %; " > </div> 
</div>

Yanditse

Koresha icyiciro kugirango ukore ingaruka.

<div class = "iterambere ryiterambere-amakuru 
     iterambere-ryambuwe " >
  <div class = "akabari" 
       style = " ubugari : 20 %; " > </div> 
</div>

Animated

Fata urugero rwakuweho hanyuma ukore animasiyo.

<div class = "iterambere ryiterambere-akaga 
     iterambere-ryibanze rikora " >
  <div class = "akabari" 
       style = " ubugari : 40 %; " > </div> 
</div>

Amabara yinyongera

Utubari twiterambere dukoresha amwe mumazina amwe yo murwego nka buto na integuza kubintu bisa.

• .progress-info
• .progress-success
• .progress-danger

Ubundi, urashobora guhitamo dosiye ZIKURIKIRA hanyuma ukazenguruka amabara yawe nubunini.

Imyitwarire

Utubari twiterambere dukoresha inzibacyuho ya CSS3, niba rero uhinduye muburyo bugari ukoresheje ubugari ukoresheje javascript, bizahinduka neza.

Niba ukoresheje .activeicyiciro, .progress-stripedutubari twawe twiterambere tuzahindura imirongo ibumoso iburyo.

Inkunga ya mushakisha

Utubari twiterambere dukoresha CSS3 gradients, inzibacyuho, na animasiyo kugirango ugere ku ngaruka zabo zose. Ibiranga ntabwo bishyigikiwe muri IE7-8 cyangwa verisiyo ishaje ya Firefox.

Opera ntabwo ishigikira animasiyo muriki gihe.

Iriba

Koresha neza nkibintu byoroshye kubintu kugirango utange inset.

<div class = "neza" > 
  ...
</div>

Ikarita

Koresha ikirango kubintu kugirango ubare udasomwe cyangwa nkikimenyetso cyoroshye.

<span class = "badge" > 3 </div> 

Funga agashusho

Koresha igishushanyo rusange cyo gufunga kugirango wirukane ibirimo nka moderi no kumenyesha.

×

<a class = "close"> & ibihe; </a>