Mga bahagi

Dose-dosenang mga bahaging magagamit muli ang binuo sa Bootstrap upang magbigay ng nabigasyon, mga alerto, mga popover, at marami pang iba.

Mga pangkat ng pindutan

Gumamit ng mga grupo ng button para pagsamahin ang maraming button bilang isang composite component. Buuin ang mga ito gamit ang isang serye ng <a>o mga <button>elemento.

Pinakamahusay na kasanayan

Inirerekomenda namin ang mga sumusunod na alituntunin para sa paggamit ng mga pangkat ng button at toolbar:

Palaging gamitin ang parehong elemento sa isang grupo ng button, <a>o <button>.
Huwag paghaluin ang mga button na may iba't ibang kulay sa parehong grupo ng button.
Gumamit ng mga icon bilang karagdagan sa o sa halip na text, ngunit tiyaking isama ang alt at title text kung saan naaangkop.

Ang mga kaugnay na grupo ng Button na may mga dropdown (tingnan sa ibaba) ay dapat tawagin nang hiwalay at palaging may kasamang dropdown caret upang ipahiwatig ang nilalayong gawi.

Default na halimbawa

Narito kung paano hinahanap ng HTML ang isang karaniwang pangkat ng button na binuo gamit ang mga button ng anchor tag:

Kaliwa Gitna Tama

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

Halimbawa ng toolbar

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 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 mga doc ng Javascript para doon.

Kunin ang javascript »

Heads up

Ang CSS para sa mga grupo ng button ay nasa isang hiwalay na file, button-groups.less.

Mga dropdown ng button

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.

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

Halimbawang markup

Katulad ng isang grupo ng button, ang aming markup ay gumagamit ng regular na button markup, ngunit may kaunting mga karagdagan upang pinuhin ang istilo at suportahan ang dropdown na plugin ng jQuery ng 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>

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.

Halimbawang markup

Pinapalawak namin ang mga normal na dropdown ng button upang magbigay ng pangalawang pagkilos na button na gumagana bilang isang hiwalay na dropdown na trigger.

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

Mga magaan na default Parehong markup, magkaibang klase

Makapangyarihang base class

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

Kailan gagamitin

Ang mga tab at tableta ay mahusay para sa mga seksyon ng nilalaman o pag-navigate sa pagitan ng mga pahina ng kaugnay na nilalaman.

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.

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

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

Stackable Gawing patayo ang mga tab o tabletas

Paano i-stack ang mga ito

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 Para sa mga advanced na bahagi ng nav

Pinadali ang mga rich menu

Ang mga dropdown na menu sa mga tab at tableta ng Bootstrap ay napakadali at nangangailangan lamang ng kaunting dagdag na HTML at isang magaan na jQuery plugin.

Tumungo sa pahina ng Javascript upang basahin ang mga doc sa pagsisimula ng mga dropdown sa Bootstrap.

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 Bumuo ng mga simpleng stacked nav, mahusay para sa mga sidebar

Pag-navigate sa istilo ng application

Ang mga listahan ng Nav ay nagbibigay ng simple at madaling paraan upang bumuo ng mga grupo ng mga link ng nav na may mga opsyonal na header. Pinakamahusay na ginagamit ang mga ito sa mga sidebar tulad ng Finder sa OS X.

Sa istruktura, ang mga ito ay binuo sa parehong mga pangunahing estilo ng nav gaya ng mga tab at tableta, kaya ang paggamit at pag-customize ay diretso.

May mga icon

Ang mga listahan ng Nav ay madali ding lagyan ng mga icon. Idagdag ang tamang <i>tag sa klase at handa ka na.

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 = "aktibo" > 
    <a href = "#" > Tahanan </a> 
  </li>
  <li>
    <a href = "#" > Library </a> 
  </li>
  ...
</ul>

Halimbawa na may mga icon

Parehong halimbawa, ngunit may <i>mga tag para sa mga icon.

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

Tabbable nav Buhayin ang mga tab sa pamamagitan ng javascript

Ano ang kasama

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.

Ang pagbabago sa pagitan ng mga ito ay madali at nangangailangan lamang ng pagbabago ng napakakaunting markup.

Halimbawa ng tabable

Upang gawing tabable ang mga tab, balutin ang .nav-tabssa isa pang div gamit ang class .tabbable.

Nasa Section 1 ako.

Kamusta, nasa Section 2 ako.

Ano ba girl, ito ang Section 3.

Custom na jQuery plugin

Ang lahat ng mga 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.

Kunin ang javascript →

Direktang markup

Ang paggamit ng mga tab na tab ay nangangailangan ng isang wrapping div, isang hanay ng mga tab, at isang hanay ng mga tabable na pane ng nilalaman.

<div class = "tabbable" > 
  <ul class = "nav nav-tabs" > 
    <li class = "aktibo" ><a href = "#1" data-toggle = "tab" > Seksyon 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > Seksyon 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "1" >  
      <p> Ako ay nasa Seksyon 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Kamusta, nasa Section 2 ako. </p>
    </div>
  </div>
</div>

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.

Nasa Section A ako.

Kamusta, nasa Section B ako.

Ano ba girl, ito ang Section C.

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

Mga tab sa kaliwa

Pagpalitin ang klase upang maglagay ng mga tab sa kaliwa.

Nasa Section A ako.

Kamusta, nasa Section B ako.

Ano ba girl, ito ang Section C.

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

Nasa Section A ako.

Kamusta, nasa Section B ako.

Ano ba girl, ito ang Section C.

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

Halimbawa ng static navbar

Isang halimbawa ng isang static (hindi naayos sa itaas) navbar na may pangalan ng proyekto, nabigasyon, at form ng paghahanap.

Navbar scaffolding

Ang navbar ay nangangailangan lamang ng ilang mga div upang maayos itong buuin para sa static o fixed display.

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

Nakapirming navbar

Upang gawing maayos ang navbar sa tuktok ng viewport, idagdag .navbar-fixed-topsa pinakalabas na div, .navbar.

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

Sa iyong CSS, kakailanganin mo ring isaalang-alang ang overlap na dulot nito sa pamamagitan ng pagdaragdag ng 40px o higit pang padding sa iyong <body>. Tiyaking idagdag ito pagkatapos ng pangunahing Bootstrap CSS at bago ang opsyonal na tumutugon na CSS.

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>

Form ng paghahanap

Ang mga form sa paghahanap ay tumatanggap ng mga custom na istilo sa navbar kasama ng .navbar-searchklase. Isama .pull-lefto .pull-rightsa formpara ihanay ito.

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

Opsyonal na tumutugon na pagkakaiba-iba

Depende sa dami ng nilalaman sa iyong topbar, maaaring gusto mong ipatupad ang mga opsyong tumutugon. Upang gawin ito, balutin ang iyong nav content 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" > 
        <!-- .nav, .navbar-search, .navbar-form, atbp -->
      </div>
 
    </div>
  </div>
</div>

Heads up! Ang tumutugon na navbar ay nangangailangan ng collapse plugin .

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>

Pag-align ng bahagi

Upang ihanay ang isang nav, form sa paghahanap, o teksto, gamitin ang .pull-lefto mga .pull-rightklase ng utility. Ang parehong mga klase ay magdaragdag ng CSS float sa tinukoy na direksyon.

Pagdaragdag ng mga dropdown

Ang pagdaragdag ng mga dropdown sa nav ay sobrang simple, ngunit nangangailangan ng paggamit ng aming 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>

Kunin ang javascript →

Bakit gamitin ang mga ito

Ginagamit ang Breadcrumb navigation bilang isang paraan upang ipakita sa mga user kung nasaan sila sa loob ng isang app o isang site, ngunit hindi para sa pangunahing nabigasyon. Panatilihin ang kanilang paggamit na kalat-kalat at maikli upang maging pinaka-epektibo.

Mga halimbawa

Isang halimbawang ipinapakita bilang maaaring ipakita sa maraming pahina.

Markup

Ang HTML ay ang iyong karaniwang hindi nakaayos na listahan na may mga link.

<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" > 
    <a href = "#" > Data </a> 
  </li>
</ul>

Multicon-page pagination

Kailan gagamitin

Napakasimple at minimally istilong 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.

Stateful page links

Ang mga link ay nako-customize at gumagana sa ilang pagkakataon na may tamang klase. .disabledpara sa mga hindi naki-click na link at .activepara sa kasalukuyang pahina.

Flexible na pagkakahanay

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

Mga halimbawa

Ang default na bahagi ng pagination ay nababaluktot at gumagana sa ilang mga pagkakaiba-iba.

Markup

Nakabalot sa isang <div>, ang pagination ay isang <ul>.

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

Pager Para sa mabilis na nakaraan at susunod na mga link

Tungkol sa pager

Ang bahagi ng pager ay isang hanay ng mga link para sa mga simpleng pagpapatupad ng pagination na may light markup at mas magaan na 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>

Mga label	Markup
Default	`<span class="label">Default</span>`
Tagumpay	`<span class="label label-success">Success</span>`
Babala	`<span class="label label-warning">Warning</span>`
Mahalaga	`<span class="label label-important">Important</span>`
Impormasyon	`<span class="label label-info">Info</span>`

Hero unit

Nagbibigay ang Bootstrap ng magaan, nababaluktot na bahagi na tinatawag na hero unit upang ipakita ang nilalaman sa iyong site. Ito ay mahusay na gumagana sa marketing at content-heavy sites.

Markup

I-wrap ang iyong nilalaman sa isang divkatulad nito:

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

Hello, mundo!

Ito ay isang simpleng yunit ng bayani, isang simpleng sangkap na istilo ng jumbotron para sa pagtawag ng karagdagang atensyon sa itinatampok na nilalaman o impormasyon.

Matuto pa

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-haeder" > 
  <h1> Halimbawang header ng page </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.

Label ng thumbnail

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

Aksyon Aksyon
Label ng thumbnail

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

Aksyon Aksyon

Bakit gumamit ng mga thumbnail

Ang mga thumbnail (dating .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 content na may kaunting markup lang para mabalot ang iyong mga content.

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— .span3para sa kontrol ng mga dimensyon ng thumbnail.

Ang 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 = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Thumbnail label </h5>
      <p> Thumbnail caption dito mismo... </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.

Mga magaan na default

Muling isinulat na base class

Sa Bootstrap 2, pinasimple namin ang base class: .alertsa halip na .alert-message. Binawasan din namin ang minimum na kinakailangang markup—hindi <p>ang kinakailangan bilang default, ang panlabas lang <div>.

Isang mensahe ng alerto

Para sa isang mas matibay na bahagi na may mas kaunting code, inalis namin ang pagkakaiba-iba ng hitsura para sa mga alerto sa pag-block, mga mensaheng may kasamang higit pang padding at karaniwang mas maraming text. Nagpalit din ang klase sa .alert-block.

Mahusay sa javascript

Ang Bootstrap ay may kasamang mahusay na jQuery plugin na sumusuporta sa mga alertong mensahe, na ginagawang mabilis at madali ang pag-dismiss sa mga ito.

Kunin ang plugin »

Mga halimbawang alerto

I-wrap ang iyong mensahe at isang opsyonal na icon na malapit sa isang div na may simpleng klase.

× Babala! Best check yo self, hindi ka masyadong maganda.

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

Madaling i-extend ang karaniwang mensahe ng alerto na may dalawang opsyonal na klase: .alert-blockpara sa higit pang padding at mga kontrol sa text at .alert-headingpara sa isang tumutugmang heading.

Babala!

Best check yo self, hindi ka masyadong maganda. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "alerto alert-block" > 
  <a class = "close" data-dismiss = "alerto" > × </a>  
  <h4 class = "alert-heading" > 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

× Ay snap! Baguhin ang ilang bagay at subukang isumite muli.

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

Tagumpay

× Magaling! Matagumpay mong nabasa ang mahalagang mensahe ng alerto na ito.

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

Impormasyon

× Heads up! Kailangan ng alertong ito ang iyong atensyon, ngunit hindi ito sobrang mahalaga.

<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 = " lapad : 60 %; " ></div> 
</div>

may guhit

Gumagamit ng gradient para gumawa ng striped effect.

<div class = "progress progress-info 
     may guhit sa pag-unlad" >
  <div class = "bar" 
       style = " lapad : 20 %; " ></div> 
</div>

Animated

Kinukuha ang guhit na halimbawa at binibigyang-buhay ito.

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

Mga opsyon at suporta sa browser

Mga karagdagang kulay

Ginagamit ng mga progress bar ang ilan sa mga parehong pangalan ng klase bilang mga button at alerto para sa katulad na istilo.

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

Bilang kahalili, maaari mong i-customize ang mas kaunting mga file at i-roll ang sarili mong mga kulay at laki.

Pag-uugali

Gumagamit ang mga progress bar ng mga transition ng CSS3, kaya kung dynamic mong ayusin ang lapad sa pamamagitan ng javascript, maayos itong magre-resize.

Kung gagamitin mo ang .activeklase, ang iyong mga .progress-stripedprogress bar ay magpapasigla sa mga guhit mula kaliwa pakanan.

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-8 o mas lumang mga bersyon ng Firefox.

Hindi sinusuportahan ng Opera ang mga animation sa ngayon.

Mga balon

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

Tingnan mo, nasa balon ako!

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

Mga badge

Gumamit ng badge sa isang elemento para sa hindi pa nababasang bilang o bilang isang simpleng indicator.

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

Isara ang icon

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

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

Mga pangkat ng pindutan Sumali sa mga pindutan para sa higit pang paggana na tulad ng toolbar

Mga pangkat ng pindutan

Pinakamahusay na kasanayan

Default na halimbawa

Halimbawa ng toolbar

Mga lasa ng checkbox at radyo

Heads up

Mga dropdown ng button Mga dropdown na menu ayon sa konteksto na binuo sa mga pangkat ng button

Mga dropdown ng button

Halimbawang markup

Mga split button na dropdown

Halimbawang markup

Nav, mga tab, at mga tabletas Lubos na nako-customize na list-style navigation

Mga magaan na default Parehong markup, magkaibang klase

Makapangyarihang base class

Kailan gagamitin

Pag-align ng bahagi

Mga pangunahing tab

Mga pangunahing tabletas

Stackable Gawing patayo ang mga tab o tabletas

Paano i-stack ang mga ito

Mga nakasalansan na tab

Mga nakasalansan na tabletas

Mga Dropdown Para sa mga advanced na bahagi ng nav

Pinadali ang mga rich menu

Mga tab na may mga dropdown

Mga tabletang may dropdown

Mga listahan ng Nav Bumuo ng mga simpleng stacked nav, mahusay para sa mga sidebar

Pag-navigate sa istilo ng application

May mga icon

Halimbawang listahan ng nav

Halimbawa na may mga icon

Tabbable nav Buhayin ang mga tab sa pamamagitan ng javascript

Ano ang kasama

Halimbawa ng tabable

Custom na jQuery plugin

Direktang markup

Tabbable sa anumang direksyon

Mga tab sa ibaba

Mga tab sa kaliwa

Mga tab sa kanan

Navbar

Halimbawa ng static navbar

Navbar scaffolding

Nakapirming navbar

Tatak

Form ng paghahanap

Opsyonal na tumutugon na pagkakaiba-iba

Mga link sa Nav

Pag-align ng bahagi

Pagdaragdag ng mga dropdown

Mga mumo ng tinapay

Bakit gamitin ang mga ito

Mga halimbawa

Markup

Pagination Dalawang pagpipilian para sa paging sa pamamagitan ng nilalaman

Multicon-page pagination

Kailan gagamitin

Stateful page links

Flexible na pagkakahanay

Mga halimbawa

Markup

Pager Para sa mabilis na nakaraan at susunod na mga link

Tungkol sa pager

Default na halimbawa

Nakahanay na mga link

Mga inline na label Label at i-annotate ang text

Mga typographic na bahagi Header ng page at hero unit para sa pagse-segment ng content

Hero unit

Markup

Hello, mundo!

Header ng page

Mga Thumbnail Grid ng mga larawan, video, text, at higit pa

Mga default na thumbnail

Lubos na nako-customize

Label ng thumbnail

Label ng thumbnail

Bakit gumamit ng mga thumbnail

Simple, nababaluktot na markup

Gumagamit ng mga laki ng hanay ng grid