Mga grupo sa butones

Gamita ang mga grupo sa butones aron mahiusa ang daghang butones isip usa ka composite component. Pagtukod kanila uban sa usa ka serye sa <a>o <button>mga elemento.

Mahimo usab nimong isagol ang mga set sa <div class="btn-group">usa ka <div class="btn-toolbar">alang sa labi ka komplikado nga mga proyekto.

Pananglitan nga markup

Ania kung giunsa pagpangita sa HTML ang usa ka sagad nga grupo sa buton nga gihimo nga adunay mga buton sa tag nga anchor:

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

Ug uban sa usa ka toolbar alang sa daghang mga grupo:

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

Mga lami sa checkbox ug radyo

Ang mga grupo sa buton mahimo usab nga molihok isip mga radyo, diin usa ra ka butones ang mahimong aktibo, o mga checkbox, diin bisan unsang gidaghanon sa mga buton mahimong aktibo. Tan -awa ang Javascript docs alang niana.

Kuhaa ang javascript »

Ipataas ang ulo

Ang CSS para sa butones nga mga grupo kay naa sa bulag nga file, button-groups.less.

Mga dropdown sa buton

Gamita ang bisan unsang buton aron ma-trigger ang usa ka dropdown menu pinaagi sa pagbutang niini sa sulod sa usa .btn-groupug paghatag sa tukma nga marka sa menu.

Pananglitan nga markup

Susama sa usa ka butones nga grupo, ang among markup naggamit ug regular nga butones nga markup, apan adunay pipila ka mga pagdugang aron mapino ang istilo ug suportahan ang dropdown jQuery plugin sa Bootstrap.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Aksyon
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Split button dropdowns

Pagtukod sa mga estilo sa grupo sa buton ug markup, dali ra kaming makahimo og split button. Ang mga split button adunay standard nga aksyon sa wala ug usa ka dropdown toggle sa tuo nga adunay mga link sa konteksto.

Pananglitan nga markup

Gipalapdan namon ang normal nga mga dropdown sa buton aron mahatagan ang ikaduha nga aksyon sa butones nga naglihok ingon usa ka bulag nga trigger sa dropdown.

<div class = "btn-group" > 
  <a class = "btn" href = "#" > Aksyon </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Gamhanan nga base nga klase

Ang tanan nga sangkap sa nav dinhi—mga tab, pildoras, ug mga lista—nag- ambit sa parehas nga base nga marka ug mga istilo sa .navklase.

Nganong tab ug pills

Ang mga tab ug mga pildoras sa Bootstrap gitukod sa usa <ul>nga adunay parehas nga kinauyokan nga HTML, usa ka lista sa mga link. Pagbaylo tali sa mga tab o pildoras nga adunay klase lang.

Ang duha nga mga kapilian maayo alang sa mga sub-section sa sulud o pag-navigate tali sa mga panid nga adunay kalabotan nga sulud.

Panguna nga mga tab

Pagkuha ug regular <ul>nga mga link ug idugang .nav-tabs:

• Balay
• Profile
• Mga mensahe

<ul class = "nav nav-tabs" > 
  <li class = "aktibo" > 
    <a href = "#" > Panimalay </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Panguna nga mga pildoras

Kuhaa kanang parehas nga HTML, apan gamita .nav-pillshinuon:

• Balay
• Profile
• Mga mensahe

<ul class = "nav nav-pills" > 
  <li class = "aktibo" > 
    <a href = "#" > Panimalay </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Unsaon pag-stack 'em

Ingon nga ang mga tab ug mga pildoras pinahigda pinaagi sa default, idugang lang ang usa ka ikaduha nga klase, .nav-stacked, aron kini makita nga vertically stacked.

Mga tab nga gitapok

• Balay
• Profile
• Mga mensahe

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

Gipatong nga mga pildoras

• Balay
• Profile
• Mga mensahe

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

Ang dato nga mga menu gihimo nga dali

Ang mga dropdown nga menu sa mga tab sa Bootstrap ug mga pildoras sayon ​​​​kaayo ug nagkinahanglan lamang ug gamay nga ekstrang HTML ug usa ka gaan nga jQuery nga plugin.

Pangadto sa panid sa Javascript aron mabasa ang mga dokumento sa pagsugod sa mga dropdown sa Bootstrap.

Mga tab nga adunay mga dropdown

• Balay
• Profile
• Dropdown
  • Aksyon
  • Laing aksyon
  • Laing butang dinhi
  • Gibulag nga sumpay

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- mga sumpay -->
    </ul>
  </li>
</ul>

Mga pildoras nga adunay mga dropdown

• Balay
• Profile
• Dropdown
  • Aksyon
  • Laing aksyon
  • Laing butang dinhi
  • Gibulag nga sumpay

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- mga sumpay -->
    </ul>
  </li>
</ul>

Pag-navigate sa estilo sa aplikasyon

Ang mga lista sa Nav naghatag ug yano ug sayon ​​nga paagi sa paghimo og mga grupo sa mga link sa nav nga adunay opsyonal nga mga ulohan. Kini labing maayo nga gigamit sa mga sidebar sama sa Finder sa OS X.

Sa istruktura, kini gitukod sa parehas nga mga istilo sa core nav sama sa mga tab ug mga pildoras, busa ang paggamit ug pag-customize diretso.

Uban sa mga icon

Ang mga lista sa nav dali usab nga masangkapan sa mga icon. Idugang ang tukma nga <i>tag sa klase ug ikaw nakatakda na.

Pananglitan nav list

Pagkuha ug lista sa mga link ug idugang class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Ulohan sa lista
  </li>
  <li class = "aktibo" > 
    <a href = "#" > Panimalay </a> 
  </li>
  <li>
    <a href = "#" > Library </a> 
  </li>
  ...
</ul>

Pananglitan nga adunay mga icon

Parehas nga pananglitan, apan adunay <i>mga tag alang sa mga icon.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Library
    </a>
  </li>
  ...
</ul>

Unsa ang gilakip

Dad-a ang imong mga tab sa kinabuhi sa usa ka yano nga plugin sa toggle sa taliwala sa sulod pinaagi sa tabs. Ang Bootstrap nag-apil sa mga tab nga tab sa upat ka mga estilo: ibabaw (default), tuo, ubos, ug wala.

Ang pagbag-o sa taliwala nila dali ug kinahanglan ra ang pagbag-o sa gamay nga marka.

Tabable nga pananglitan

Aron mahimo ang mga tab nga tabable, ibutang ang .nav-tabssa lain nga div nga adunay class .tabbable.

Custom nga jQuery plugin

Ang tanan nga mga tab nga tab gipaandar sa among gaan nga jQuery plugin. Basaha ang dugang bahin sa kung giunsa ang pagdala sa mga tab nga tab sa kinabuhi sa panid sa javascript docs.

Kuhaa ang javascript →

Mga tab sa ubos

I-flip ang han-ay sa HTML ug idugang ang usa ka klase aron ibutang ang mga tab sa ubos.

<div class = "tabbable tabs-sa ubos" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Mga tab sa wala

Ibaylo ang klase aron ibutang ang mga tab sa wala.

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Mga tab sa tuo

Ibaylo ang klase aron ibutang ang mga tab sa tuo.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Navbar scaffolding

Ang navbar nagkinahanglan lamang ug pipila ka divs aron maayo ang pagkahan-ay niini para sa static o fixed display.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "sudlanan" > 
      ...
    </div>
  </div>
</div>

Aron mapaayo ang navbar sa ibabaw sa viewport, idugang .navbar-fixed-topang pinakagawas nga div, .navbar. Sa imong CSS, kinahanglan nimo usab nga i-account ang overlap nga gipahinabo niini pinaagi sa pagdugang padding-top: 40px;sa imong <body>.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

Brand ngalan

Ang usa ka yano nga link aron ipakita ang imong brand o ngalan sa proyekto nanginahanglan lamang usa ka tag sa angkla.

<a class = "brand" href = "#" >  
  Ngalan sa proyekto
</a>

Pagpangita nga porma

Ang mga porma sa pagpangita makadawat mga kostumbre nga istilo sa navbar kauban ang .navbar-searchklase. Ilakip .pull-lefto .pull-rightsa formaron ipahiangay kini.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Pagpangita" >   
</porma>

Opsyonal nga responsive nga kalainan

Depende sa gidaghanon sa sulod sa imong topbar, mahimo nimong ipatuman ang responsive nga mga kapilian. Aron mahimo kini, ibutang ang imong nav content sa usa ka adunay sulod nga div, .nav-collapse.collapse, ug idugang ang navbar toggle button, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "sudlanan" > 
 
      <!-- .btn-navbar gigamit isip toggle para sa nahugno nga navbar content -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Siguroha nga biyaan ang brand didto kung gusto nimo kini ipakita -->
      <a class = "brand" href = "#" > Ngalan sa proyekto </a>  
 
      <!-- Tanan nga gusto nimo itago sa 940px o mas ubos, ibutang dinhi -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Mga link sa Nav

Ang mga butang sa nav kay yano ra nga idugang pinaagi sa dili han-ay nga mga lista.

<ul class = "nav" > 
  <li class = "aktibo" > 
    <a href = "#" > Panimalay </a> 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

Pagdugang mga dropdown

Ang pagdugang ug mga dropdown sa nav kay yano ra kaayo, pero gikinahanglan ang paggamit sa among javascript plugin .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          class = "dropdown-toggle"
          data-toggle = "dropdown" >
          Account
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Kuhaa ang javascript →

Nganong gamiton sila

Ang Breadcrumb navigation gigamit isip usa ka paagi sa pagpakita sa mga tiggamit kung asa sila sulod sa usa ka app o usa ka site, apan dili alang sa nag-unang nabigasyon. Hupti ang ilang paggamit nga dili kaayo ug mubo aron mahimong labing epektibo.

Mga pananglitan

Usa ka pananglitan nga gipakita ingon nga kini mahimong ipakita sa daghang mga panid.

• Balay

• Panimalay /
• Library

• Panimalay /
• Library /
• Data

Markup

Ang HTML mao ang imong standard nga dili han-ay nga listahan nga adunay mga link.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Panimalay </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Library </a> <span class = "divider" > / </span>   
  </li>
  <li class = "aktibo" > 
    <a href = "#" > Data </a> 
  </li>
</ul>

Kanus-a gamiton

Ultra simplistic ug minimally style pagination inspirado sa Rdio, maayo alang sa mga app ug mga resulta sa pagpangita. Ang dako nga bloke lisud makalimtan, dali nga masukod, ug naghatag daghang mga lugar sa pag-klik.

Stateful nga mga link sa panid

Ang mga link napasibo ug magamit sa daghang mga kahimtang nga adunay husto nga klase. .disabledalang sa dili ma-click nga mga link ug .activealang sa kasamtangan nga panid.

Flexible nga paglinya

Idugang ang bisan hain sa duha ka opsyonal nga mga klase aron mausab ang paglinya sa mga link sa pagination: .pagination-centeredug .pagination-right.

Mga pananglitan

Ang default pagination component kay flexible ug naglihok sa daghang mga variation.

Markup

Giputos sa usa ka <div>, ang pagination kay usa lang ka <ul>.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Prev </a></li> 
    <li class = "aktibo" > 
      <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 = "#" > Sunod </a></li> 
  </ul>
</div>

Mahitungod sa pager

Ang sangkap sa pager usa ka hugpong sa mga link alang sa yano nga pag-implementar sa pagination nga adunay light markup ug mas gaan nga mga istilo. Maayo kini alang sa yano nga mga site sama sa mga blog o magasin.

Default nga pananglitan

Sa kasagaran, ang pager nagsentro sa mga link.

• Kaniadto
• Sunod

<ul class = "pager" > 
  <li>
    <a href = "#" > Kaniadto </a> 
  </li>
  <li>
    <a href = "#" > Sunod </a> 
  </li>
</ul>

Nahiangay nga mga link

Sa laing paagi, mahimo nimong i-align ang matag link sa mga kilid:

• ← Mas tigulang
• Bag-o →

<ul class = "pager" > 
  <li class = "kaniadto" > 
    <a href = "#" > ← Mas tigulang </a> 
  </li>
  <li class = "sunod" > 
    <a href = "#" > Mas bag-o → </a> 
  </li>
</ul>

Default nga mga thumbnail

Sa default, ang mga thumbnail sa Bootstrap gidisenyo aron ipakita ang mga nalambigit nga mga imahe nga adunay gamay nga kinahanglan nga marka.

Napasibo kaayo

Uban sa gamay nga dugang nga marka, posible nga idugang ang bisan unsang klase sa sulud sa HTML sama sa mga ulohan, parapo, o butones sa mga thumbnail.

• 

  Label sa thumbnail

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

  Aksyon Aksyon

• 

  Label sa thumbnail

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

  Aksyon Aksyon

Nganong mogamit ug thumbnail

Ang mga thumbnail (kaniadto .media-gridhangtod sa v1.4) maayo alang sa mga grid sa mga litrato o video, mga resulta sa pagpangita sa imahe, mga produkto sa tingi, mga portfolio, ug daghan pa. Mahimo kini nga mga link o static nga sulud.

Yano, flexible nga markup

Simple ra ang markup sa thumbnail—nga uladunay bisan unsang gidaghanon sa limga elemento mao ra ang gikinahanglan. Kini usab super flexible, nagtugot alang sa bisan unsa nga matang sa sulod uban sa usa ka gamay nga dugang nga markup sa pagputos sa imong mga sulod.

Gigamit ang mga gidak-on sa kolum sa grid

Katapusan, ang component sa thumbnail naggamit sa kasamtangan nga mga klase sa grid system—sama .span2o .span3—para sa pagkontrolar sa mga dimensyon sa thumbnail.

Ang markup

Sama sa nahisgotan na, ang gikinahanglan nga markup para sa mga thumbnail gaan ug prangka. Ania ang usa ka pagtan-aw sa default setup alang sa nalambigit nga mga hulagway :

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

Alang sa naandan nga HTML nga sulod sa mga thumbnail, ang markup nausab gamay. Aron tugutan ang sulud sa lebel sa block bisan asa, gibaylo namo ang <a>sama <div>sa:

<ul class = "mga thumbnail" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Thumbnail label </h5>
      <p> Thumbnail caption dinhi mismo... </p>
    </div>
  </li>
  ...
</ul>

Dugang nga mga pananglitan

Susihon ang tanan nimong mga kapilian sa lainlaing mga klase sa grid nga magamit nimo. Mahimo usab nimo isagol ug ipares ang lainlaing mga gidak-on.

Gisulat pag-usab base nga klase

Uban sa Bootstrap 2, among gipasimple ang base nga klase: .alertimbes nga .alert-message. Gipaubos usab namo ang minimum nga gikinahanglang markup—dili <p>ang gikinahanglan pinaagi sa default, ang outter lang <div>.

Usa ka mensahe sa alerto

Alang sa usa ka mas lig-on nga sangkap nga adunay gamay nga code, among gitangtang ang lainlain nga hitsura alang sa mga alerto sa block, mga mensahe nga adunay daghang padding ug kasagaran daghang teksto. Ang klase usab nausab ngadto sa .alert-block.

Nindot kaayo sa javascript

Ang Bootstrap adunay usa ka maayo nga jQuery nga plugin nga nagsuporta sa mga alerto nga mensahe, nga naghimo sa pagtangtang kanila nga dali ug dali.

Kuhaa ang plugin »

Pananglitan nga mga alerto

I-wrap ang imong mensahe ug usa ka opsyonal nga close icon sa usa ka div nga adunay yano nga klase.

<div class = "alerto" > 
  <a class = "close" > × </a> 
  <strong> Pasidaan! </strong> Labing maayo nga susiha ang imong kaugalingon, dili ka kaayo maayo.
</div>

Sayon nga i-extend ang standard alert message nga adunay duha ka opsyonal nga klase: .alert-blockpara sa dugang padding ug text controls ug .alert-headingpara sa usa ka matching heading.

<div class = "alerto alert-block" > 
  <a class = "close" > × </a> 
  <h4 class = "alerto-heading" > Pasidaan! </h4> 
  Labing maayo nga susihon ang imong kaugalingon, dili ka ...
</div>

Sayop o peligro

<div class = "alerto alert-error" > 
  ...
</div>

Kalampusan

<div class = "alerto alert-success" > 
  ...
</div>

Impormasyon

<div class = "alerto alert-info" > 
  ...
</div>

sukaranan

Default nga progress bar nga adunay bertikal nga gradient.

<div class = "pag-uswag" > 
  <div class = "bar" 
       style = " gilapdon : 60 %; " ></div> 
</div>

Kinudlisan

Naggamit og gradient aron makahimo og striped effect.

<div class = "pag-uswag sa pag-uswag-info 
     pag-uswag-guhit" >
  <div class = "bar" 
       style = " gilapdon : 20 %; " ></div> 
</div>

Animated

Gikuha ang mga striped nga pananglitan ug gipalihok kini.

<div class = "pag-uswag sa pag-uswag-kakuyaw 
     aktibo nga may pag-uswag" >
  <div class = "bar" 
       style = " gilapdon : 40 %; " ></div> 
</div>

Dugang nga mga kolor

Ang mga bar sa pag-uswag naggamit sa pipila ka parehas nga mga ngalan sa klase sama sa mga buton ug mga alerto alang sa parehas nga istilo.

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

Sa laing paagi, mahimo nimong ipasibo ang mga minus nga mga file ug i-roll ang imong kaugalingon nga mga kolor ug gidak-on.

Paggawi

Ang mga progress bar naggamit sa CSS3 nga mga transisyon, mao nga kung imong dinamikong i-adjust ang gilapdon pinaagi sa javascript, kini hapsay nga magbag-o.

Kon imong gamiton ang .activeklase, ang imong .progress-stripedprogress bar mo-animate sa mga stripes gikan sa wala ngadto sa tuo.

Suporta sa browser

Ang mga progress bar naggamit sa CSS3 gradients, transisyon, ug mga animation aron makab-ot ang tanan nilang mga epekto. Kini nga mga bahin wala gisuportahan sa IE7-8 o mas karaan nga mga bersyon sa Firefox.

Ang Opera wala nagsuporta sa mga animation karong panahona.

Mga atabay

Gamita ang atabay isip usa ka yano nga epekto sa usa ka elemento aron mahatagan kini og inset nga epekto.

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

Mga badge

Paggamit og badge sa usa ka elemento para sa wala pa mabasa nga ihap o isip usa ka yano nga timailhan.

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

Close icon

Gamita ang generic close icon para sa pagdismiss sa content sama sa modals ug alerts.

×

<a class = "close" > × </a>