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:

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </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.

Mga dropdown ng button

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.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Aksyon
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </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.


Mga split button na dropdown

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.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <!-- dropdown menu links -->
  5. </ul>
  6. </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.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Aksyon </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </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.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

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

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Nakaraan </a></li>
  4. <li class = "aktibo" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Susunod </a></li>
  11. </ul>
  12. </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.

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.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Nakaraang </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Susunod </a>
  7. </li>
  8. </ul>

Nakahanay na mga link

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

  1. <ul class = "pager" >
  2. <li class = "nakaraang" >
  3. <a href = "#" > Mas luma </a>
  4. </li>
  5. <li class = "susunod" >
  6. <a href = "#" > Mas bago → </a>
  7. </li>
  8. </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>
Baliktad <span class="label label-inverse">Inverse</span>

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

Pangalan Halimbawa Markup
Default 1 <span class="badge">1</span>
Tagumpay 2 <span class="badge badge-success">2</span>
Babala 4 <span class="badge badge-warning">4</span>
Mahalaga 6 <span class="badge badge-important">6</span>
Impormasyon 8 <span class="badge badge-info">8</span>
Baliktad 10 <span class="badge badge-inverse">10</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:

  1. <div class = "bayani-yunit" >
  2. <h1> Heading </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Matuto pa
  7. </a>
  8. </p>
  9. </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).

  1. <div class = "page-header" >
  2. <h1> Halimbawang header ng page </h1>
  3. </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 :

  1. <ul class = "mga thumbnail" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "mga thumbnail" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Thumbnail label </h5>
  6. <p> Thumbnail caption dito mismo... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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 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.

Babala! Best check yo self, hindi ka masyadong maganda.
  1. <div class = "alerto" >
  2. <button class = "close" data-dismiss = "alerto" > × </button>
  3. <strong> Babala! </strong> Tingnan mo ang sarili mo, hindi ka masyadong maganda.
  4. </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.

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.

  1. <div class = "alerto alert-block" >
  2. <a class = "close" data-dismiss = "alerto" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Babala! </h4>
  4. Best check mo sarili mo, hindi ka...
  5. </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.
  1. <div class = "alerto-error sa alerto" >
  2. ...
  3. </div>

Tagumpay

Magaling! Matagumpay mong nabasa ang mahalagang mensahe ng alerto na ito.
  1. <div class = "alerto alerto-tagumpay" >
  2. ...
  3. </div>

Impormasyon

Heads up! Kailangan ng alertong ito ang iyong atensyon, ngunit hindi ito sobrang mahalaga.
  1. <div class = "alerto-impormasyon ng alerto" >
  2. ...
  3. </div>

Mga halimbawa at markup

Basic

Default na progress bar na may vertical gradient.

  1. <div class = "pag-unlad" >
  2. <div class = "bar"
  3. style = " lapad : 60 %; " ></div>
  4. </div>

may guhit

Gumagamit ng gradient para gumawa ng striped effect (walang IE).

  1. <div class = "progress progress-striped" >
  2. <div class = "bar"
  3. style = " lapad : 20 %; " ></div>
  4. </div>

Animated

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

  1. <div class = "progress progress-striped
  2. aktibo" >
  3. <div class = "bar"
  4. style = " lapad : 40 %; " ></div>
  5. </div>

Mga opsyon at suporta sa browser

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.

Tingnan mo, nasa balon ako!
  1. <div class = "well" >
  2. ...
  3. </div>

Isara ang icon

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

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

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