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.

Labing maayo nga mga gawi

Among girekomendar ang mosunod nga mga giya sa paggamit sa mga grupo sa buton ug mga toolbar:

• Kanunay gamita ang parehas nga elemento sa usa ka grupo sa buton, <a>o <button>.
• Ayaw isagol ang mga butones nga lainlain ang kolor sa parehas nga grupo sa butones.
• Paggamit og mga icon dugang sa o imbes nga teksto, apan siguroha nga ilakip ang alt ug titulo nga teksto kung angay.

Ang mga Related Button nga mga grupo nga adunay mga dropdown (tan-awa sa ubos) kinahanglan nga tawagan nga gilain ug kanunay nga maglakip sa usa ka dropdown caret aron ipakita ang gituyo nga pamatasan.

Default nga pananglitan

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" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Pananglitan sa Toolbar

Combine sets sa <div class="btn-group">ngadto sa usa ka <div class="btn-toolbar">alang sa mas komplikado nga mga sangkap.

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

Mga dropdown sa mga grupo sa butones

Taas ang ulo! Ang mga butones nga adunay mga dropdown kinahanglan nga tagsa-tagsa nga giputos sa ilang kaugalingon .btn-groupsulod sa usa .btn-toolbaralang sa husto nga paghubad.

Overview ug mga pananglitan

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>

Nagtrabaho sa tanan nga gidak-on sa buton

Ang mga dropdown sa buton molihok sa bisan unsang gidak-on. ang gidak-on sa imong butones ngadto sa .btn-large, .btn-small, o .btn-mini.

Nagkinahanglan og javascript

Ang mga dropdown sa buton nagkinahanglan sa Bootstrap dropdown plugin aron molihok.

Sa pipila ka mga kaso-sama sa mobile-dropdown nga mga menu molugway sa gawas sa viewport. Kinahanglan nimo nga sulbaron ang pag-align sa mano-mano o gamit ang naandan nga javascript.

Overview ug mga pananglitan

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.

Mga gidak-on

Gamita ang dugang nga butones nga mga klase .btn-mini, .btn-small, o .btn-largepara sa pagsukod.

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- dropdown menu links -->
  </ul>
</div>

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" > 
  <button class = "btn" > Aksyon </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- dropdown menu links -->
  </ul>
</div>

Mga dropup nga menu

Ang mga dropdown menu mahimo usab nga i-toggle gikan sa ubos pataas pinaagi sa pagdugang og usa ka klase sa diha-diha nga ginikanan sa .dropdown-menu. I-flip niini ang direksyon sa .caretug i-reposition ang menu mismo aron mobalhin gikan sa ubos pataas imbes sa taas paubos.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <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.

Kanus-a gamiton

Ang mga tab ug mga pildoras maayo alang sa mga seksyon sa sulud o pag-navigate tali sa mga panid nga adunay kalabotan nga sulud.

Pag-align sa mga sangkap

Aron ipahiangay ang mga link sa nav, gamita ang .pull-lefto .pull-rightmga klase sa utility. Ang duha ka klase magdugang ug CSS float sa espesipikong direksyon.

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
• Tabang
• 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
• Tabang
• 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.

Horizontal nga mga divider

Pagdugang usa ka pinahigda nga divider pinaagi sa paghimo og usa ka walay sulod nga listahan nga butang uban sa klase .divider, sama niini:

<ul class = "nav nav-list" > 
  ...
  <li class = "divider" ></li> 
  ...
</ul>

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.

Fade sa mga tab

Aron mawala ang mga tab, idugang .fadeang matag usa .tab-pane.

Nagkinahanglan og jQuery plugin

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

Kuhaa ang javascript →

Tabable nga pananglitan

Aron mahimo ang mga tab nga tabable, paghimo og usa ka .tab-panetalagsaon nga ID alang sa matag tab ug ibutang kini sa .tab-content.

Para sa tuo o wala nga nakalinya nga mga tab, iputos ang .nav-tabsug .tab-contentsa .tabbable.

Diretso nga markup

Ang paggamit sa mga tab nga tabs nanginahanglan usa ka wrapping div, usa ka set sa mga tab, ug usa ka set sa tabbable nga mga pane sa sulud.

<div class = "tabbable" > <!-- Kinahanglan lang sa wala/tuo nga tabs -->  
  <ul class = "nav nav-tabs" > 
    <li class = "aktibo" ><a href = "#tab1" data-toggle = "tab" > Seksyon 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Seksyon 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Naa ko sa Seksyon 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Kumusta , naa ko sa Seksyon 2. </p>
    </div>
  </div>
</div>

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>

Giayo nga navbar

Ayuhon ang navbar sa ibabaw o ubos sa viewport nga adunay dugang nga klase sa pinakagawas nga div, .navbar.

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

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

Kung imong idikit ang navbar, hinumdomi nga i-account ang natago nga lugar sa ilawom. Idugang ang 40px o labaw pa nga padding sa <body>. Siguruha nga idugang kini pagkahuman sa kinauyokan nga Bootstrap CSS ug sa wala pa ang opsyonal nga responsive CSS.

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>

Mga porma sa navbar

Aron sa husto nga estilo ug posisyon ang usa ka porma sulod sa navbar, idugang ang angay nga mga klase sama sa gipakita sa ubos. Alang sa usa ka default nga porma, ilakip ang .navbar-formug bisan .pull-lefto .pull-rightaron ipahiangay kini sa husto.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</porma>

Para sa mas pinasadya nga porma sa pagpangita, idugang .navbar-searchsa formug .search-querysa input para sa espesyal nga mga estilo sa navbar.

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

Dali ka makadugang og mga divider sa imong nav link nga adunay walay sulod nga listahan nga butang ug usa ka yano nga klase. Idugang lang kini tali sa mga link:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

Pag-align sa mga sangkap

Aron ipahiangay ang usa ka nav, porma sa pagpangita, o teksto, gamita ang .pull-lefto .pull-rightmga klase sa utility. Ang duha ka klase magdugang ug CSS float sa espesipikong direksyon.

Pagdugang mga dropdown menu

Ang pagdugang ug mga dropdown ug dropups sa nav kay simple 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 →

Text sa navbar

I-wrap ang mga string sa teksto sa usa ka <.navbar-text>, kasagaran sa usa ka <p>tag alang sa husto nga pagpangulo ug kolor.

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" > Data </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.

Opsyonal nga baldado nga estado

Ang mga link sa pager naggamit usab sa kinatibuk-ang .disabledklase gikan sa pagination.

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>

Mahitungod sa

Ang mga badge gamay, yano nga mga sangkap alang sa pagpakita sa usa ka timailhan o ihap sa usa ka matang. Kini kasagarang makita sa mga email client sama sa Mail.app o sa mga mobile app para sa push notifications.

Anaa nga mga klase

Naghatag ang Bootstrap og gaan, flexible nga component nga gitawag og hero unit aron ipakita ang content sa imong site. Maayo kini sa pagpamaligya ug mga site nga bug-at sa sulud.

Markup

I-wrap ang imong sulod sa divingon niini:

<div class = "bayani-yunit" > 
  <h1> Ulohan </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-dako" > 
      Pagkat-on pa
    </a>
  </p>
</div>

Usa ka yano nga kabhang alang sa usa ka h1tukma nga lugar ug bahin sa mga seksyon sa sulud sa usa ka panid. Mahimong gamiton niini ang h1default small, elemento ingon man ang kadaghanan sa ubang mga sangkap (nga adunay dugang nga mga istilo).

<div class = "panid-ulo" > 
  <h1> Panig-ingnan nga ulohan sa panid </h1>
</div>

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 gawas lang nga <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" > 
  <button class = "close" data-dismiss = "alerto" > × </button>  
  <strong> Pasidaan! </strong> Labing maayo nga susiha ang imong kaugalingon, dili ka kaayo maayo.
</div>

Taas ang ulo! Ang mga aparato sa iOS nanginahanglan usa href="#"alang sa pagtangtang sa mga alerto. Siguroha nga iapil kini ug ang data attribute para sa anchor close nga mga icon. Sa laing paagi, mahimo nimong gamiton ang usa ka <button>elemento nga adunay attribute sa datos, nga among gipili nga buhaton para sa among mga doc. Kung gamiton ang <button>, kinahanglan nimong iapil type="button"o ang imong mga porma mahimong dili isumite.

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" data-dismiss = "alerto" href = "#" > × </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 makamugna og striped effect (walay IE).

<div class = "progress progress-striped" > 
  <div class = "bar" 
       style = " gilapdon : 20 %; " ></div> 
</div>

Animated

Gikuha ang mga striped nga pananglitan ug gi-animate kini (walay IE).

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

Dugang nga mga kolor

Ang mga progress bar naggamit sa pipila sa parehas nga buton ug alerto nga mga klase alang sa makanunayon nga mga istilo.

Mga striped bar

Sama sa solid nga mga kolor, kami adunay lainlain nga mga striped progress bar.

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-9 o mas karaan nga mga bersyon sa Firefox.

Ang Opera ug IE dili mosuporta 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>

Close icon

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

×

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

Ang mga aparato sa iOS nanginahanglan usa ka href="#" alang sa mga panghitabo sa pag-klik kung gusto nimo mogamit usa ka angkla.

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