Pananglitan

Ma-toggle, contextual nga menu para sa pagpakita sa mga lista sa mga link. Gihimo nga interactive sa dropdown JavaScript plugin .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Aksyon </a></li>  
  <li><a tabindex = "-1" href = "#" > Lain nga aksyon </a></li>  
  <li><a tabindex = "-1" href = "#" > Lain pa dinhi </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > Gibulag nga link </a></li>  
</ul>

Markup

Sa pagtan-aw lang sa dropdown menu, ania ang gikinahanglan nga HTML. Kinahanglan nimong ibalot ang trigger sa dropdown ug ang dropdown menu sulod sa .dropdown, o laing elemento nga nagpahayag position: relative;. Unya paghimo lang sa menu.

<div class = "dropdown" > 
  <!-- Link o buton para i-toggle ang dropdown -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Aksyon </a></li>  
    <li><a tabindex = "-1" href = "#" > Lain nga aksyon </a></li>  
    <li><a tabindex = "-1" href = "#" > Lain pa dinhi </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > Gibulag nga link </a></li>  
  </ul>
</div>

Mga kapilian

I-align ang mga menu sa tuo ug idugang ang dugang nga lebel sa mga dropdown.

Pag-align sa mga menu

Idugang .pull-rightsa usa .dropdown-menungadto sa tuo nga i-align ang dropdown menu.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Mga kapilian sa menu nga gibalda

Idugang .disabledsa usa <li>sa dropdown aron ma-disable ang link.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Regular nga link </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Disabled link </a></li>   
  <li><a tabindex = "-1" href = "#" > Lain nga link </a></li>  
</ul>

Mga sub menu sa mga dropdown

Pagdugang og dugang nga lebel sa mga dropdown menu, nga makita sa hover sama sa OS X, nga adunay pipila ka yano nga mga pagdugang sa markup. Idugang .dropdown-submenusa bisan unsa lisa usa ka kasamtangan nga dropdown menu para sa awtomatik nga estilo.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > Dugang mga opsyon </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Mga pananglitan

Duha ka sukaranan nga mga kapilian, kauban ang duha nga labi ka piho nga mga kalainan.

Usa ka butones nga grupo

I-wrap ang usa ka serye sa mga buton gamit ang .btnin .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Wala </button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Tuo </button> 
</div>

Daghang mga grupo sa butones

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 grupo sa vertikal nga butones

Himoa nga ang usa ka hugpong sa mga buton makita nga patindog nga gipatong kay sa pinahigda.

<div class = "btn-group btn-group-vertical" > 
  ...
</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.

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.

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

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.

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

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Aksyon </button> 
  <button class = "btn btn-mini 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>

Ang mga lightweight nga default Parehas nga marka, lainlaing mga 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.

Panguna nga mga tab

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

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

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

Baldado nga estado

Alang sa bisan unsang bahin sa nav (mga tab, pildoras, o lista), idugang .disabledang mga gray nga link ug walay mga epekto sa hover . Ang mga link magpabilin nga ma-click, bisan pa, gawas kung imong kuhaon ang hrefhiyas. Sa laing paagi, mahimo nimong ipatuman ang custom nga JavaScript aron mapugngan ang mga pag-klik.

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

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.

Ma-stackable

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

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

Gipatong nga mga pildoras

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

Mga dropdown

Idugang ang mga dropdown menu nga adunay gamay nga ekstra nga HTML ug ang dropdown JavaScript plugin .

Mga tab nga adunay mga dropdown

<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

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

Mga lista sa Nav

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

Pananglitan nav list

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

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

NotaPara sa nesting sulod sa nav list, iapil class="nav nav-list"sa bisan unsang nested <ul>.

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>

Tabable nav

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.

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.

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

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 .

Tabbable sa bisan unsang direksyon

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>

Panguna nga navbar

Sa pagsugod, ang mga navbar kay static (dili pirmi sa ibabaw) ug naglakip sa suporta para sa ngalan sa proyekto ug batakang nabigasyon. Ibutang ang usa bisan asa sulod sa usa ka .container, nga nagtakda sa gilapdon sa imong site ug sulod.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Titulo </a>  
    <ul class = "nav" > 
      <li class = "aktibo" ><a href = "#" > Panimalay </a></li>  
      <li><a href = "#" > Link </a></li> 
      <li><a href = "#" > Link </a></li> 
    </ul>
  </div>
</div>

Mga sangkap sa Navbar

Brand

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

Mga porma

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" >  
  <button type = "submit" class = "btn" > Isumite </button>  
</porma>

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

Pag-align sa mga sangkap

I-align ang mga link sa 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.

Paggamit sa mga dropdown

Idugang ang mga dropdown ug dropup sa nav nga adunay gamay nga markup ug ang dropdown 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>

Bisitaha ang JavaScript dropdowns documentation para sa dugang nga markup ug impormasyon sa pagtawag sa dropdowns.

Text

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

Opsyonal nga mga kalainan sa pagpakita

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

Giayo sa ibabaw

Idugang .navbar-fixed-topug hinumdomi nga i-account ang natago nga lugar sa ilawom niini pinaagi sa pagdugang labing menos 40px paddingsa <body>. Siguruha nga idugang kini pagkahuman sa kinauyokan nga Bootstrap CSS ug sa wala pa ang opsyonal nga responsive CSS.

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

Giayo hangtod sa ilawom

Idugang .navbar-fixed-bottomhinuon.

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

Static ibabaw nga navbar

Paghimo og full-width navbar nga mag-scroll palayo sa panid pinaagi sa pagdugang .navbar-static-top. Dili sama sa .navbar-fixed-topklase, dili nimo kinahanglan nga usbon ang bisan unsang padding sa body.

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

Matubag nga navbar

Aron ipatuman ang usa ka nahugno nga responsive navbar, iputos ang imong navbar 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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Baliktad nga pagkalainlain

Usba ang hitsura sa navbar pinaagi sa pagdugang .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Mga pananglitan

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

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

Standard nga pagination

Yano nga pagination nga giinspirar 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.

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

Mga kapilian

Baldado ug aktibo nga estado

Ang mga link napasibo alang sa lainlaing mga kahimtang. Gigamit .disabledalang sa dili ma-klik nga mga link ug .activearon ipakita ang kasamtangan nga panid.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "aktibo" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Mahimo nimo nga opsyonal nga ibaylo ang aktibo o baldado nga mga angkla alang sa mga span aron matangtang ang pag-andar sa pag-klik samtang gipadayon ang gituyo nga mga istilo.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li class = "aktibo" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Mga gidak-on

Gusto nga mas dako o mas gamay nga pagination? Idugang .pagination-largeang , .pagination-small, o .pagination-minipara sa dugang nga mga gidak-on.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Pag-align

Pagdugang og usa sa duha ka opsyonal nga mga klase aron mausab ang pag-align sa mga link sa pagination: .pagination-centeredug .pagination-right.

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

Pager

Dali nga nangagi ug sunod nga mga link alang sa yano nga pag-implementar sa pagination nga adunay light markup ug 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.

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

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

Opsyonal nga baldado nga estado

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

<ul class = "pager" > 
  <li class = "kaniadto disabled" > 
    <a href = "#" > ← Mas tigulang </a> 
  </li>
  ...
</ul>

Mga label

Mga badge

Dali nga ma-collaps

Alang sa dali nga pagpatuman, ang mga label ug mga badge mahugno lang (pinaagi sa :emptytigpili sa CSS) kung wala’y sulud sa sulod.

Hero unit

Usa ka gaan, flexible nga sangkap aron ipakita ang hinungdanon nga sulud sa imong site. Maayo kini sa pagpamaligya ug mga site nga bug-at sa sulud.

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

Ulohan sa panid

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 <small> Subtext para sa ulohan </small></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.

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.

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 = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img data-src = "holder.js/300x200" 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 = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Thumbnail label </h3>
      <p> Thumbnail caption... </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.

Default nga alerto

I-wrap ang bisan unsang teksto ug usa ka opsyonal nga dismiss nga buton .alertalang sa usa ka sukaranan nga mensahe sa alerto sa pasidaan.

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

Isalikway ang mga buton

Ang mga browser sa Mobile Safari ug Mobile Opera, dugang sa data-dismiss="alert"hiyas, nanginahanglan og href="#"alang sa pagtangtang sa mga alerto kung mogamit usa ka <a>tag.

<a href = "#" class = "close" data-dismiss = "alerto" > × </a>   

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.

<button type = "button" class = "close" data-dismiss = "alerto" > × </button>   

Isalikway ang mga alerto pinaagi sa JavaScript

Gamita ang mga alerto nga jQuery plugin para sa dali ug sayon ​​nga pagtangtang sa mga alerto.

Mga kapilian

Para sa mas taas nga mga mensahe, dugangi ang padding sa ibabaw ug ubos sa alert wrapper pinaagi sa pagdugang .alert-block.

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

Mga alternatibo sa konteksto

Idugang ang opsyonal nga mga klase aron mausab ang konotasyon sa alerto.

Sayop o peligro

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

Kalampusan

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

Impormasyon

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

Mga pananglitan ug markup

sukaranan

Default nga progress bar nga adunay bertikal nga gradient.

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

Kinudlisan

Naggamit og gradient aron makahimo og striped effect. Dili magamit sa IE7-8.

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

Animated

Idugang .activesa .progress-stripedaron ma-animate ang mga labud gikan sa tuo ngadto sa wala. Dili magamit sa tanang bersyon sa IE.

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

Gipatong

Ibutang ang daghang mga bar sa parehas .progressaron i-stack kini.

<div class = "pag-uswag" > 
  <div class = "bar bar-success" style = " gilapdon : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

Mga kapilian

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.

<div class = "progress progress-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "pag-uswag sa pag-uswag-kalampusan" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "pag-uswag-pagpasidaan sa pag-uswag" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "pag-uswag sa pag-uswag-kakuyaw" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Mga striped bar

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "pag-uswag sa pag-uswag-kalampusan nga pag-uswag-striped" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "pag-uswag sa pag-uswag-kakuyaw nga pag-uswag-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

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 mga bersyon nga mas sayo kay sa Internet Explorer 10 ug Opera 12 wala mosuporta sa mga animation.

Abstract nga mga estilo sa butang alang sa pagtukod sa lain-laing mga matang sa mga sangkap (sama sa blog comments, Tweets, etc) nga nagpakita sa usa ka wala-o-tuo-aligned nga larawan uban sa teksto nga sulod.

Default nga pananglitan

Gitugotan sa default nga media nga molutaw ang usa ka butang sa media (mga imahe, video, audio) sa wala o tuo sa usa ka bloke sa sulud.

Ulohan sa media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.

Ulohan sa media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.

Ulohan sa media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum sa vulputate ug, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Espesye sa tanom nga bulak ang Donec lacinia congue felis.

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Media heading </h4> 
    ...
 
    <!-- Nested media object -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Listahan sa media

Uban sa gamay nga dugang nga markup, mahimo nimong gamiton ang media sa sulod nga lista (mapuslanon alang sa mga thread sa komento o mga lista sa artikulo).

<ul class = "lista sa media" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Media heading </h4> 
      ...
 
      <!-- Nested media object -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

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>

Opsyonal nga mga klase

Kontrola ang padding ug mga rounded corner nga adunay duha ka opsyonal nga mga klase sa modifier.

<div class = "maayo kaayo-dako" > 
  ...
</div>

<div class = "maayo kaayo-gamay" > 
  ...
</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="#"para sa pag-klik nga mga panghitabo kung gusto nimo nga mogamit usa ka angkla.

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

Mga klase sa katabang

Yano, naka-focus nga mga klase alang sa gamay nga pagpakita o pag-tweak sa pamatasan.

.bira-wala

Lutaw ang usa ka elemento sa wala

klase = "pull-left"

. ibira - wala {
  lutaw : wala ;
}

.bira-tuo

Paglutaw sa usa ka elemento sa tuo

klase = "pagbira sa tuo"

. ibira - tuo {
  lutaw : tuo ;
}

.gihilom

Usba ang kolor sa usa ka elemento ngadto sa#999

klase = "gihilom"

. gipahilom {
  kolor : #999; 
}

.clearfix

Hawani ang floatbisan unsang elemento

klase = "clearfix"

. klaroha {
  * pag- zoom : 1 ; 
  &: kaniadto ,
  &: pagkahuman {
    display : lamesa ;
    sulod : "" ; 
  }
  &: pagkahuman {
    klaro : duha ;
  }
}