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:

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

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.

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

Gumagana sa lahat ng laki ng button

Gumagana ang mga dropdown ng button sa anumang laki. ang laki ng iyong button sa .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.

Pangkalahatang-ideya at mga halimbawa

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.

Mga sukat

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

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

Halimbawang markup

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

Makapangyarihang base class

Ang lahat ng bahagi ng nav dito—mga tab, tabletas, 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:

• Bahay
• Profile
• Mga mensahe

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

• Bahay
• Profile
• Mga mensahe

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

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

• Bahay
• Profile
• Mga mensahe

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

Mga nakasalansan na tabletas

• Bahay
• Profile
• Mga mensahe

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

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

• Bahay
• Tulong
• Dropdown
  • Aksyon
  • Isa pang aksyon
  • Iba dito
  • Pinaghiwalay na link

<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

• Bahay
• Tulong
• Dropdown
  • Aksyon
  • Isa pang aksyon
  • Iba dito
  • Pinaghiwalay na link

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

Pag-navigate sa istilo ng application

Ang mga listahan ng Nav ay nagbibigay ng simple at madaling paraan upang bumuo ng mga pangkat 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 istilo 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.

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>

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>

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.

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 .

Kunin ang javascript →

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.

Para sa kanan o kaliwang naka-align na mga tab, balutin ang .nav-tabsat .tab-contentsa .tabbable.

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

Mga tab sa ibaba

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

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

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

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

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

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

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

Kapag inilagay mo ang navbar, tandaan na isaalang-alang ang nakatagong lugar sa ilalim. Magdagdag ng 40px o higit pang padding sa <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>

Mga form sa navbar

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" >  
</form>

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>

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>

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

Ang pagdaragdag ng mga dropdown at dropup 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 →

Text sa navbar

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

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.

• Bahay

• Home /
• Aklatan

• Home /
• Library /
• Data

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" > Data </li> 
</ul>

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>

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.

Opsyonal na estadong may kapansanan

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

Default na halimbawa

Bilang default, ang pager ay nakasentro sa mga link.

• Nakaraang
• Susunod

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

• ← Mas luma
• Mas bago →

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

Tungkol sa

Ang mga badge ay maliit, simpleng bahagi para sa pagpapakita ng indicator o bilang ng ilang uri. Karaniwang makikita ang mga ito sa mga email client tulad ng Mail.app o sa mga mobile app para sa mga push notification.

Magagamit na mga klase

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>

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

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

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

Heads up! Ang mga iOS device ay nangangailangan href="#"ng para sa pagtanggal ng mga alerto. Tiyaking isama ito at ang attribute ng data para sa mga icon ng anchor close. 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.

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.

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

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>

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 (walang IE).

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

Animated

Kinukuha ang guhit na halimbawa at binibigyang-buhay ito (walang IE).

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

Mga karagdagang kulay

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

Mga may guhit na bar

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

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

Hindi sinusuportahan ng Opera at IE ang mga animation sa ngayon.

Mga balon

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

<div class = "well" > 
  ...
</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 ng isang href="#" para sa mga kaganapan sa pag-click kung mas gusto mong gumamit ng anchor.

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