Halimbawa

Toggleable, contextual na menu para sa pagpapakita ng mga listahan ng mga link. Ginawang interactive gamit ang dropdown na JavaScript plugin .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Pagkilos </a></li>  
  <li><a tabindex = "-1" href = "#" > Isa pang aksyon </a></li>  
  <li><a tabindex = "-1" href = "#" > May iba dito </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > Nakahiwalay na link </a></li>  
</ul>

Markup

Sa pagtingin lang sa dropdown na menu, narito ang kinakailangang HTML. Kailangan mong i-wrap ang trigger ng dropdown at ang dropdown na menu sa loob ng .dropdown, o isa pang elemento na nagdedeklara ng position: relative;. Pagkatapos ay lumikha lamang ng menu.

<div class = "dropdown" > 
  <!-- Link o button para i-toggle ang dropdown -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Pagkilos </a></li>  
    <li><a tabindex = "-1" href = "#" > Isa pang aksyon </a></li>  
    <li><a tabindex = "-1" href = "#" > May iba dito </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > Nakahiwalay na link </a></li>  
  </ul>
</div>

Mga pagpipilian

I-align ang mga menu sa kanan at magdagdag ng mga karagdagang antas ng dropdown.

Pag-align ng mga menu

Idagdag .pull-rightsa isang .dropdown-menui-align sa kanan ang dropdown na menu.

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

Mga opsyon sa menu na hindi pinagana

Idagdag .disabledsa a <li>sa dropdown para i-disable ang link.

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

Mga sub menu sa mga dropdown

Magdagdag ng karagdagang antas ng mga dropdown na menu, na lumalabas sa hover tulad ng sa OS X, na may ilang simpleng pagdaragdag ng markup. Idagdag .dropdown-submenusa alinman lisa isang kasalukuyang dropdown na menu para sa awtomatikong pag-istilo.

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

Mga halimbawa

Dalawang pangunahing opsyon, kasama ang dalawa pang partikular na variation.

Isang grupo ng pindutan

I-wrap ang isang serye ng mga button na may .btnin .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Kaliwa </button> 
  <button class = "btn" > Gitna </button> 
  <button class = "btn" > Kanan </button> 
</div>

Maramihang mga pangkat ng pindutan

Pagsamahin ang mga set ng sa <div class="btn-group">isang <div class="btn-toolbar">para sa mas kumplikadong mga bahagi.

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

Mga pangkat ng patayong button

Gawing patayong nakasalansan ang isang hanay ng mga button sa halip na pahalang.

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

Mga lasa ng checkbox at radyo

Ang mga grupo ng button ay maaari ding gumana bilang mga radyo, kung saan isang button lang ang maaaring maging aktibo, o mga checkbox, kung saan maaaring maging aktibo ang anumang bilang ng mga button. Tingnan ang JavaScript docs para diyan.

Mga dropdown sa mga pangkat ng button

Heads up!Ang mga button na may mga dropdown ay dapat na isa-isang nakabalot sa kanilang sarili sa .btn-grouploob ng isang .btn-toolbarpara sa wastong pag-render.

Pangkalahatang-ideya at mga halimbawa

Gumamit ng anumang button upang mag-trigger ng dropdown na menu sa pamamagitan ng paglalagay nito sa loob ng isang .btn-groupat pagbibigay ng wastong markup ng 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>

Gumagana sa lahat ng laki ng button

Gumagana ang mga dropdown ng button sa anumang laki: .btn-large, .btn-small, o .btn-mini.

Nangangailangan ng JavaScript

Ang mga dropdown ng button ay nangangailangan ng Bootstrap dropdown plugin upang gumana.

Sa ilang mga kaso—tulad ng mobile—ang mga dropdown na menu ay lalawak sa labas ng viewport. Kailangan mong lutasin ang pagkakahanay nang manu-mano o gamit ang custom na JavaScript.

Mga split button na dropdown

Ang pagbuo sa mga istilo ng pangkat ng button at markup, madali kaming makakagawa ng split button. Nagtatampok ang mga split button ng karaniwang pagkilos sa kaliwa at isang dropdown na toggle sa kanan na may mga contextual na link.

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

Gamitin ang mga karagdagang klase ng button .btn-mini, .btn-small, o .btn-largepara sa pagpapalaki.

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

Ang mga dropdown na menu ay maaari ding i-toggle mula sa ibaba pataas sa pamamagitan ng pagdaragdag ng isang klase sa agarang magulang ng .dropdown-menu. I-flip nito ang direksyon ng .caretat muling iposisyon ang menu mismo upang ilipat mula sa ibaba pataas sa halip na itaas pababa.

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

Mga magaan na default Parehong markup, magkaibang klase

Ang lahat ng bahagi ng nav dito—mga tab, tabletas, at listahan—ay nagbabahagi ng parehong base markup at mga istilo sa buong .navklase.

Mga pangunahing tab

Kumuha ng regular <ul>na mga link at idagdag ang .nav-tabs:

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

Mga pangunahing tabletas

Kunin ang parehong HTML, ngunit gamitin .nav-pillssa halip:

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

Estadong may kapansanan

Para sa anumang bahagi ng nav (mga tab, tableta, o listahan), magdagdag .disabledpara sa mga gray na link at walang hover effect . Ang mga link ay mananatiling naki-click, gayunpaman, maliban kung aalisin mo ang hrefkatangian. Bilang kahalili, maaari mong ipatupad ang custom na JavaScript upang maiwasan ang mga pag-click na iyon.

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

Pag-align ng bahagi

Upang ihanay ang mga nav link, gamitin ang .pull-lefto mga .pull-rightutility class. Ang parehong mga klase ay magdaragdag ng CSS float sa tinukoy na direksyon.

Stackable

Dahil ang mga tab at tableta ay pahalang bilang default, magdagdag lamang ng pangalawang klase, .nav-stacked, upang ipakita ang mga ito na patayong nakasalansan.

Mga nakasalansan na tab

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

Mga nakasalansan na tabletas

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

Mga dropdown

Magdagdag ng mga dropdown na menu na may kaunting dagdag na HTML at ang dropdown na JavaScript plugin .

Mga tab na may 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 link -->
    </ul>
  </li>
</ul>

Mga tabletang may 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 link -->
    </ul>
  </li>
</ul>

Mga listahan ng Nav

Isang simple at madaling paraan upang bumuo ng mga pangkat ng mga nav link na may mga opsyonal na header. Pinakamahusay na ginagamit ang mga ito sa mga sidebar tulad ng Finder sa OS X.

Halimbawang listahan ng nav

Kumuha ng listahan ng mga link at idagdag ang class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Header ng listahan </li> 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Library </a></li> 
  ...
</ul>

TandaanPara sa nesting sa loob ng isang nav list, isama class="nav nav-list"sa anumang nested <ul>.

Mga pahalang na divider

Magdagdag ng pahalang na divider sa pamamagitan ng paglikha ng isang walang laman na item sa listahan kasama ang klase .divider, tulad nito:

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

Tabable nav

Buhayin ang iyong mga tab gamit ang isang simpleng plugin upang magpalipat-lipat sa pagitan ng nilalaman sa pamamagitan ng mga tab. Pinagsasama ng Bootstrap ang mga tab na tab sa apat na istilo: itaas (default), kanan, ibaba, at kaliwa.

Halimbawa ng tabable

Upang gawing tabable ang mga tab, gumawa ng .tab-panemay natatanging ID para sa bawat tab at ibalot ang mga ito sa .tab-content.

<div class = "tabable" > <!-- Kailangan lang para sa kaliwa/kanang mga tab -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><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> Ako ay nasa Seksyon 1. </p>
    </div>
    <div  class = "tab-pane" id = "tab2" > 
      <p> Kamusta, nasa Section 2 ako. </p>
    </div>
  </div>
</div>

Fade sa mga tab

Upang mag-fade in ang mga tab, idagdag .fadesa bawat isa .tab-pane.

Nangangailangan ng jQuery plugin

Ang lahat ng tab na tab ay pinapagana ng aming magaan na jQuery plugin. Magbasa nang higit pa tungkol sa kung paano buhayin ang mga tab na tab sa pahina ng JavaScript docs .

Tabbable sa anumang direksyon

Mga tab sa ibaba

I-flip ang pagkakasunud-sunod ng HTML at magdagdag ng klase upang ilagay ang mga tab sa ibaba.

<div class = "mga tab na tab-sa ibaba"  >
  <div class = "tab-content" >
    ...
  </div>
  <ul klase = "nav nav-tabs" >
    ...
  </ul>
</div>

Mga tab sa kaliwa

Pagpalitin ang klase upang maglagay ng mga tab sa kaliwa.

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

Mga tab sa kanan

Pagpalitin ang klase upang maglagay ng mga tab sa kanan.

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

Pangunahing navbar

Upang magsimula, ang mga navbar ay static (hindi naayos sa itaas) at may kasamang suporta para sa isang pangalan ng proyekto at pangunahing nabigasyon. Maglagay ng isa kahit saan sa loob ng .container, na nagtatakda ng lapad ng iyong site at nilalaman.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Pamagat </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Home </a></li>  
      <li><a href = "#" > Link </a></li> 
      <li><a href = "#" > Link </a></li> 
    </ul>
  </div>
</div>

Mga bahagi ng Navbar

Tatak

Ang isang simpleng link upang ipakita ang iyong brand o pangalan ng proyekto ay nangangailangan lamang ng isang anchor tag.

<a class = "brand" href = "#" > Pangalan ng proyekto </a>  

Mga link sa Nav

Ang mga nav item ay simpleng idagdag sa pamamagitan ng mga hindi nakaayos na listahan.

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

Madali kang makakapagdagdag ng mga divider sa iyong nav link gamit ang isang walang laman na item sa listahan at isang simpleng klase. Idagdag lang ito sa pagitan ng mga link:

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

Mga porma

Upang maayos na i-istilo at iposisyon ang isang form sa loob ng navbar, idagdag ang naaangkop na mga klase tulad ng ipinapakita sa ibaba. Para sa isang default na form, isama ang .navbar-format alinman .pull-lefto .pull-rightupang maayos itong ihanay.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Submit </button>  
</form>

Form ng paghahanap

Para sa mas naka-customize na form sa paghahanap, idagdag .navbar-searchsa format .search-querysa input para sa mga espesyal na istilo sa navbar.

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

Pag-align ng bahagi

I-align ang mga nav link, form sa paghahanap, o text, gamitin ang .pull-leftor.pull-right mga utility class. Ang parehong mga klase ay magdaragdag ng CSS float sa tinukoy na direksyon.

Paggamit ng mga dropdown

Magdagdag ng mga dropdown at dropup sa nav na may kaunting markup at ang dropdown na 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>

Bisitahin ang dokumentasyon ng mga dropdown ng JavaScript para sa higit pang markup at impormasyon sa mga dropdown sa pagtawag.

Text

I-wrap ang mga string ng text sa isang elemento na may .navbar-text, kadalasan sa isang <p>tag para sa wastong pangunguna at kulay.

Opsyonal na mga pagkakaiba-iba ng display

Ayusin ang navbar sa itaas o ibaba ng viewport na may karagdagang klase sa pinakalabas na div, .navbar.

Naayos sa itaas

Magdagdag .navbar-fixed-topat tandaan na isaalang-alang ang nakatagong lugar sa ilalim nito sa pamamagitan ng pagdaragdag ng hindi bababa sa 40px paddingsa <body>. Tiyaking idagdag ito pagkatapos ng pangunahing Bootstrap CSS at bago ang opsyonal na tumutugon na CSS.

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

Naayos hanggang sa ibaba

Idagdag .navbar-fixed-bottomsa halip.

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

Static na navbar sa itaas

Gumawa ng full-width navbar na nag-i-scroll palayo sa pahina sa pamamagitan ng pagdaragdag ng .navbar-static-top. Hindi tulad ng .navbar-fixed-topklase, hindi mo kailangang baguhin ang anumang padding sa body.

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

Tumutugon navbar

Upang ipatupad ang isang bumabagsak na tumutugon na navbar, balutin ang iyong navbar na nilalaman sa isang naglalaman ng div, .nav-collapse.collapse, at idagdag ang navbar toggle button, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "lalagyan" > 
 
      <!-- Ginagamit ang .btn-navbar bilang toggle para sa na-collapse na nilalaman ng navbar -->
      <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>
 
      <!-- Tiyaking iwanan ang tatak doon kung gusto mong ipakita ito -->
      <a class = "brand" href = "#" > Pangalan ng proyekto </a>  
 
      <!-- Lahat ng gusto mong itago sa 940px o mas mababa, ilagay dito -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, atbp -->
      </div>
 
    </div>
  </div>
</div>

Baliktad na pagkakaiba-iba

Baguhin ang hitsura ng navbar sa pamamagitan ng pagdaragdag ng .navbar-inverse.

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

Mga halimbawa

Isang halimbawang ipinapakita bilang maaaring ipakita sa maraming pahina.

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

Karaniwang pagination

Simpleng pagination na inspirasyon ng Rdio, mahusay para sa mga app at resulta ng paghahanap. Ang malaking bloke ay mahirap makaligtaan, madaling masusukat, at nagbibigay ng malalaking lugar ng pag-click.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Nakaraan </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 = "#" > Susunod </a></li> 
  </ul>
</div>

Mga pagpipilian

Hindi pinagana at aktibong estado

Nako-customize ang mga link para sa iba't ibang pagkakataon. Gamitin .disabledpara sa mga hindi naki-click na link at .activeupang ipahiwatig ang kasalukuyang pahina.

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

Maaari mong opsyonal na palitan ang aktibo o hindi pinaganang mga anchor para sa mga span upang maalis ang functionality ng pag-click habang pinapanatili ang mga nilalayon na istilo.

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

Mga sukat

Gusto mo ba ng mas malaki o mas maliit na pagination? Magdagdag ng .pagination-large, .pagination-small, o .pagination-minipara sa mga karagdagang laki.

<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

Magdagdag ng isa sa dalawang opsyonal na klase upang baguhin ang pagkakahanay ng mga link ng pagination: .pagination-centeredat .pagination-right.

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

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

Pager

Mabilis na nakaraan at susunod na mga link para sa mga simpleng pagpapatupad ng pagination na may magaan na markup at mga istilo. Ito ay mahusay para sa mga simpleng site tulad ng mga blog o magazine.

Default na halimbawa

Bilang default, ang pager ay nakasentro sa mga link.

<ul class = "pager" > 
  <li><a href = "#" > Nakaraang </a></li> 
  <li><a href = "#" > Susunod </a></li> 
</ul>

Nakahanay na mga link

Bilang kahalili, maaari mong ihanay ang bawat link sa mga gilid:

<ul class = "pager" > 
  <li class = "nakaraang" > 
    <a href = "#" > ← Mas luma </a> 
  </li>
  <li class = "susunod" > 
    <a href = "#" > Mas bago → </a> 
  </li>
</ul>

Opsyonal na estadong may kapansanan

Ginagamit din ng mga link ng pager ang pangkalahatang .disabledklase ng utility mula sa pagination.

<ul class = "pager" > 
  <li class = "nakaraang hindi pinagana" > 
    <a href = "#" > ← Mas luma </a> 
  </li>
  ...
</ul>

Mga label

Mga badge

Madaling ma-collapse

Para sa madaling pagpapatupad, babagsak lang ang mga label at badge (sa pamamagitan ng :emptytagapili ng CSS) kapag walang nilalaman sa loob.

Hero unit

Isang magaan, flexible na bahagi upang ipakita ang pangunahing nilalaman sa iyong site. Ito ay mahusay na gumagana sa marketing at content-heavy sites.

<div class = "bayani-yunit" > 
  <h1> Heading </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Matuto pa
    </a>
  </p>
</div>

Header ng page

Isang simpleng shell para sa isang h1naaangkop na espasyo at i-segment ang mga seksyon ng nilalaman sa isang pahina. Maaari nitong gamitin ang h1default small, elemento pati na rin ang karamihan sa iba pang mga bahagi (na may mga karagdagang istilo).

<div class = "page-header" > 
  <h1> Halimbawa ng header ng page <small> Subtext para sa header </small></h1>
</div>

Mga default na thumbnail

Bilang default, ang mga thumbnail ng Bootstrap ay idinisenyo upang ipakita ang mga naka-link na larawan na may kaunting kinakailangang markup.

Lubos na nako-customize

Sa kaunting dagdag na markup, posibleng magdagdag ng anumang uri ng nilalamang HTML tulad ng mga heading, talata, o mga button sa mga thumbnail.

Bakit gumamit ng mga thumbnail

Ang mga thumbnail (dati .media-gridhanggang v1.4) ay mahusay para sa mga grid ng mga larawan o video, mga resulta ng paghahanap ng larawan, mga retail na produkto, mga portfolio, at marami pa. Maaari silang maging mga link o static na nilalaman.

Simple, nababaluktot na markup

Ang markup ng thumbnail ay simple—a na ulmay anumang bilang ng mga lielemento ang kailangan lang. Ito ay sobrang flexible din, na nagbibigay-daan para sa anumang uri ng nilalaman na may kaunting markup na lamang upang ibalot ang iyong mga nilalaman.

Gumagamit ng mga laki ng hanay ng grid

Panghuli, ang bahagi ng thumbnail ay gumagamit ng mga kasalukuyang klase ng grid system—tulad ng .span2o.span3 para sa kontrol ng mga dimensyon ng thumbnail.

Markup

Gaya ng nabanggit dati, ang kinakailangang markup para sa mga thumbnail ay magaan at diretso. Narito ang isang pagtingin sa default na setup para sa mga naka-link na larawan :

<ul class = "mga thumbnail" > 
  <li class = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Para sa custom na HTML na nilalaman sa mga thumbnail, bahagyang nagbabago ang markup. Upang payagan ang nilalaman ng antas ng block kahit saan, pinapalitan namin ang <a>para sa isang <div>tulad nito:

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

Higit pang mga halimbawa

Galugarin ang lahat ng iyong mga opsyon gamit ang iba't ibang klase ng grid na magagamit mo. Maaari mo ring ihalo at itugma ang iba't ibang laki.

Default na alerto

I-wrap ang anumang text at isang opsyonal na button na i-dismiss .alertpara sa isang pangunahing mensahe ng alerto ng babala.

<div class = "alerto" > 
  <button type = "button" class = "close" data-dismiss = "alerto" > × </button>   
  <strong> Babala! </strong> Tingnan mo ang sarili mo, hindi ka masyadong maganda.
</div>

I-dismiss ang mga button

Ang mga browser ng Mobile Safari at Mobile Opera, bilang karagdagan sa data-dismiss="alert"katangian, ay nangangailangan href="#"ng para sa pagtanggal ng mga alerto kapag gumagamit ng <a>tag.

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

Bilang kahalili, maaari kang gumamit ng <button>elemento na may katangian ng data, na napili naming gawin para sa aming mga doc. Kapag ginagamit <button>ang , dapat mong isama type="button"o maaaring hindi isumite ang iyong mga form.

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

I-dismiss ang mga alerto sa pamamagitan ng JavaScript

Gamitin ang mga alerto jQuery plugin para sa mabilis at madaling pagtanggal ng mga alerto.

Mga pagpipilian

Para sa mas mahabang mensahe, dagdagan ang padding sa itaas at ibaba ng alert wrapper sa pamamagitan ng pagdaragdag ng .alert-block.

<div class = "alerto alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alerto" > × </button>   
  <h4> Babala! </h4>
  Best check mo sarili mo, hindi ka...
</div>

Mga alternatibo sa konteksto

Magdagdag ng mga opsyonal na klase upang baguhin ang konotasyon ng alerto.

Mali o panganib

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

Tagumpay

<div class = "alerto alerto-tagumpay" > 
  ...
</div>

Impormasyon

<div class = "alerto-impormasyon ng alerto" > 
  ...
</div>

Mga halimbawa at markup

Basic

Default na progress bar na may vertical gradient.

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

may guhit

Gumagamit ng gradient para gumawa ng striped effect. Hindi available sa IE7-8.

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

Animated

Idagdag .activesa .progress-stripedupang i-animate ang mga guhit mula kanan pakaliwa. Hindi available sa lahat ng bersyon ng IE.

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

Nakasalansan

Maglagay ng maramihang mga bar sa pareho .progressupang i-stack ang mga ito.

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

Mga pagpipilian

Mga karagdagang kulay

Gumagamit ang mga progress bar ng ilan sa parehong button at mga alertong klase para sa mga pare-parehong istilo.

<div class = "progress progress-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-success" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Mga may guhit na bar

Katulad ng mga solid na kulay, mayroon kaming iba't ibang mga striped progress bar.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-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 = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Suporta sa browser

Gumagamit ang mga progress bar ng CSS3 gradients, transition, at animation para makamit ang lahat ng epekto nito. Ang mga tampok na ito ay hindi suportado sa IE7-9 o mas lumang mga bersyon ng Firefox.

Ang mga bersyon na mas maaga kaysa sa Internet Explorer 10 at Opera 12 ay hindi sumusuporta sa mga animation.

Mga abstract na istilo ng object para sa pagbuo ng iba't ibang uri ng mga bahagi (tulad ng mga komento sa blog, Tweet, atbp) na nagtatampok ng kaliwa o kanang-align na larawan kasama ng textual na nilalaman.

Default na halimbawa

Ang default na media ay nagbibigay-daan sa pagpapalutang ng isang media object (mga larawan, video, audio) sa kaliwa o kanan ng isang bloke ng nilalaman.

Media heading

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

Media heading

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

Media heading

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

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

Sa kaunting dagdag na markup, maaari mong gamitin ang media sa loob ng listahan (kapaki-pakinabang para sa mga thread ng komento o listahan ng mga artikulo).

<ul class = "media-list" > 
  <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 balon

Gamitin ang balon bilang simpleng epekto sa isang elemento upang bigyan ito ng inset na epekto.

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

Opsyonal na mga klase

Kontrolin ang padding at mga bilugan na sulok na may dalawang opsyonal na klase ng modifier.

<div class = "well well-large" > 
  ...
</div>

<div class = "well well-small" > 
  ...
</div>

Isara ang icon

Gamitin ang generic na icon ng malapit para sa pag-dismiss ng content tulad ng mga modal at alerto.

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

Ang mga iOS device ay nangangailangan href="#"ng para sa pag-click na mga kaganapan kung mas gusto mong gumamit ng anchor.

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

Mga klase ng katulong

Mga simple at nakatuong klase para sa maliliit na pagpapakita o pag-aayos ng gawi.

.hila-kaliwa

Lutang ang isang elemento sa kaliwa

class = "pull-left"

. hilahin - kaliwa {
  lumutang : kaliwa ;
}

.hila-kanan

I-float nang tama ang isang elemento

class = "pull-right"

. hilahin - pakanan {
  lumutang : tama ;
}

.naka-mute

Baguhin ang kulay ng isang elemento sa#999

klase = "naka-mute"

. naka-mute {
  kulay : #999; 
}

.clearfix

I-clear ang floatsa anumang elemento

klase = "clearfix"

. clearfix {
  * zoom : 1 ; 
  &: dati ,
  &: pagkatapos ng {
    display : mesa ;
    nilalaman : "" ; 
  }
  &: pagkatapos ng {
    malinaw : pareho ;
  }
}