Mga sangkap

Daghang magamit nga mga sangkap ang gitukod sa Bootstrap aron mahatagan ang nabigasyon, mga alerto, mga popover, ug daghan pa.

Mga grupo sa butones

Gamita ang mga grupo sa butones aron mahiusa ang daghang butones isip usa ka composite component. Pagtukod kanila uban sa usa ka serye sa <a>o <button>mga elemento.

Labing maayo nga mga gawi

Among girekomendar ang mosunod nga mga giya sa paggamit sa mga grupo sa buton ug mga toolbar:

  • Kanunay gamita ang parehas nga elemento sa usa ka grupo sa buton, <a>o <button>.
  • Ayaw isagol ang mga butones nga lainlain ang kolor sa parehas nga grupo sa butones.
  • Paggamit og mga icon dugang sa o imbes nga teksto, apan siguroha nga ilakip ang alt ug titulo nga teksto kung angay.

Ang mga Related Button nga mga grupo nga adunay mga dropdown (tan-awa sa ubos) kinahanglan nga tawagan nga gilain ug kanunay nga maglakip sa usa ka dropdown caret aron ipakita ang gituyo nga pamatasan.

Default nga pananglitan

Ania kung giunsa pagpangita sa HTML ang usa ka sagad nga grupo sa buton nga gihimo nga adunay mga buton sa tag nga anchor:

  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>

Pananglitan sa Toolbar

Combine sets sa <div class="btn-group">ngadto sa usa ka <div class="btn-toolbar">alang sa mas komplikado nga mga sangkap.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Mga lami sa checkbox ug radyo

Ang mga grupo sa buton mahimo usab nga molihok isip mga radyo, diin usa ra ka butones ang mahimong aktibo, o mga checkbox, diin bisan unsang gidaghanon sa mga buton mahimong aktibo. Tan -awa ang Javascript docs alang niana.

Kuhaa ang javascript »

Mga dropdown sa mga grupo sa butones

Taas ang ulo! Ang mga butones nga adunay mga dropdown kinahanglan nga tagsa-tagsa nga giputos sa ilang kaugalingon .btn-groupsulod sa usa .btn-toolbaralang sa husto nga paghubad.

Mga dropdown sa buton

Overview ug mga pananglitan

Gamita ang bisan unsang buton aron ma-trigger ang usa ka dropdown menu pinaagi sa pagbutang niini sa sulod sa usa .btn-groupug paghatag sa tukma nga marka sa menu.

Pananglitan nga markup

Susama sa usa ka butones nga grupo, ang among markup naggamit ug regular nga butones nga markup, apan adunay pipila ka mga pagdugang aron mapino ang istilo ug suportahan ang dropdown jQuery plugin sa 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>

Nagtrabaho sa tanan nga gidak-on sa buton

Ang mga dropdown sa buton molihok sa bisan unsang gidak-on. ang gidak-on sa imong butones ngadto sa .btn-large, .btn-small, o .btn-mini.

Nagkinahanglan og javascript

Ang mga dropdown sa buton nagkinahanglan sa Bootstrap dropdown plugin aron molihok.

Sa pipila ka mga kaso-sama sa mobile-dropdown nga mga menu molugway sa gawas sa viewport. Kinahanglan nimo nga sulbaron ang pag-align sa mano-mano o gamit ang naandan nga javascript.


Split button dropdowns

Overview ug mga pananglitan

Pagtukod sa mga estilo sa grupo sa buton ug markup, dali ra kaming makahimo og split button. Ang mga split button adunay standard nga aksyon sa wala ug usa ka dropdown toggle sa tuo nga adunay mga link sa konteksto.

Mga gidak-on

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

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

Pananglitan nga markup

Gipalapdan namon ang normal nga mga dropdown sa buton aron mahatagan ang ikaduha nga aksyon sa butones nga naglihok ingon usa ka bulag nga trigger sa dropdown.

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

Ang mga dropdown menu mahimo usab nga i-toggle gikan sa ubos pataas pinaagi sa pagdugang og usa ka klase sa diha-diha nga ginikanan sa .dropdown-menu. I-flip niini ang direksyon sa .caretug i-reposition ang menu mismo aron mobalhin gikan sa ubos pataas imbes sa taas paubos.

  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-panid nga pagination

Kanus-a gamiton

Ultra simplistic ug minimally style pagination inspirado sa Rdio, maayo alang sa mga app ug mga resulta sa pagpangita. Ang dako nga bloke lisud makalimtan, dali nga masukod, ug naghatag daghang mga lugar sa pag-klik.

Stateful nga mga link sa panid

Ang mga link napasibo ug magamit sa daghang mga kahimtang nga adunay husto nga klase. .disabledalang sa dili ma-click nga mga link ug .activealang sa kasamtangan nga panid.

Flexible nga paglinya

Idugang ang bisan hain sa duha ka opsyonal nga mga klase aron mausab ang paglinya sa mga link sa pagination: .pagination-centeredug .pagination-right.

Mga pananglitan

Ang default pagination component kay flexible ug naglihok sa daghang mga variation.

Markup

Giputos sa usa ka <div>, ang pagination kay usa lang ka <ul>.

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > Prev </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 = "#" > Sunod </a></li>
  11. </ul>
  12. </div>

Pager Para sa dali nga nangagi ug sunod nga mga link

Mahitungod sa pager

Ang sangkap sa pager usa ka hugpong sa mga link alang sa yano nga pag-implementar sa pagination nga adunay light markup ug mas gaan nga mga istilo. Maayo kini alang sa yano nga mga site sama sa mga blog o magasin.

Opsyonal nga baldado nga estado

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

Default nga pananglitan

Sa kasagaran, ang pager nagsentro sa mga link.

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

Nahiangay nga mga link

Sa laing paagi, mahimo nimong i-align ang matag link sa mga kilid:

  1. <ul class = "pager" >
  2. <li class = "kaniadto" >
  3. <a href = "#" > Mas tigulang </a>
  4. </li>
  5. <li class = "sunod" >
  6. <a href = "#" > Mas bag-o → </a>
  7. </li>
  8. </ul>
Mga label Markup
Default <span class="label">Default</span>
Kalampusan <span class="label label-success">Success</span>
Pasidaan <span class="label label-warning">Warning</span>
Importante <span class="label label-important">Important</span>
Impormasyon <span class="label label-info">Info</span>
Baliktad <span class="label label-inverse">Inverse</span>

Mahitungod sa

Ang mga badge gamay, yano nga mga sangkap alang sa pagpakita sa usa ka timailhan o ihap sa usa ka matang. Kini kasagarang makita sa mga email client sama sa Mail.app o sa mga mobile app para sa push notifications.

Anaa nga mga klase

Ngalan Pananglitan Markup
Default 1 <span class="badge">1</span>
Kalampusan 2 <span class="badge badge-success">2</span>
Pasidaan 4 <span class="badge badge-warning">4</span>
Importante 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

Naghatag ang Bootstrap og gaan, flexible nga component nga gitawag og hero unit aron ipakita ang content sa imong site. Maayo kini sa pagpamaligya ug mga site nga bug-at sa sulud.

Markup

I-wrap ang imong sulod sa divingon niini:

  1. <div class = "bayani-yunit" >
  2. <h1> Ulohan </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-dako" >
  6. Pagkat-on pa
  7. </a>
  8. </p>
  9. </div>

Hello, kalibutan!

Kini usa ka yano nga yunit sa bayani, usa ka yano nga sangkap nga istilo sa jumbotron alang sa pagtawag sa dugang nga atensyon sa gipakita nga sulud o kasayuran.

Pagkat-on pa

Ulohan sa panid

Usa ka yano nga kabhang alang sa usa ka h1tukma nga lugar ug bahin sa mga seksyon sa sulud sa usa ka panid. Mahimong gamiton niini ang h1default small, elemento ingon man ang kadaghanan sa ubang mga sangkap (nga adunay dugang nga mga istilo).

  1. <div class = "panid-ulo" >
  2. <h1> Panig-ingnan nga ulohan sa panid </h1>
  3. </div>

Default nga mga thumbnail

Sa default, ang mga thumbnail sa Bootstrap gidisenyo aron ipakita ang mga nalambigit nga mga imahe nga adunay gamay nga kinahanglan nga marka.

Napasibo kaayo

Uban sa gamay nga dugang nga marka, posible nga idugang ang bisan unsang klase sa sulud sa HTML sama sa mga ulohan, parapo, o butones sa mga thumbnail.

  • Label sa thumbnail

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

    Aksyon Aksyon

  • Label sa thumbnail

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

    Aksyon Aksyon

Nganong mogamit ug thumbnail

Ang mga thumbnail (kaniadto .media-gridhangtod sa v1.4) maayo alang sa mga grid sa mga litrato o video, mga resulta sa pagpangita sa imahe, mga produkto sa tingi, mga portfolio, ug daghan pa. Mahimo kini nga mga link o static nga sulud.

Yano, flexible nga markup

Simple ra ang markup sa thumbnail—nga uladunay bisan unsang gidaghanon sa limga elemento mao ra ang gikinahanglan. Kini usab super flexible, nagtugot alang sa bisan unsa nga matang sa sulod uban sa usa ka gamay nga dugang nga markup sa pagputos sa imong mga sulod.

Gigamit ang mga gidak-on sa kolum sa grid

Katapusan, ang component sa thumbnail naggamit sa kasamtangan nga mga klase sa grid system—sama .span2o .span3—para sa pagkontrolar sa mga dimensyon sa thumbnail.

Ang markup

Sama sa nahisgotan na, ang gikinahanglan nga markup para sa mga thumbnail gaan ug prangka. Ania ang usa ka pagtan-aw sa default setup alang sa nalambigit nga mga hulagway :

  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>

Alang sa naandan nga HTML nga sulod sa mga thumbnail, ang markup nausab gamay. Aron tugutan ang sulud sa lebel sa block bisan asa, gibaylo namo ang <a>sama <div>sa:

  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 dinhi mismo... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Dugang nga mga pananglitan

Susihon ang tanan nimong mga kapilian sa lainlaing mga klase sa grid nga magamit nimo. Mahimo usab nimo isagol ug ipares ang lainlaing mga gidak-on.

Gaan nga mga default

Gisulat pag-usab base nga klase

Uban sa Bootstrap 2, among gipasimple ang base nga klase: .alertimbes nga .alert-message. Gipaubos usab namo ang minimum nga gikinahanglang markup—dili <p>ang gikinahanglan pinaagi sa default, ang gawas lang nga <div>.

Usa ka mensahe sa alerto

Alang sa usa ka mas lig-on nga sangkap nga adunay gamay nga code, among gitangtang ang lainlain nga hitsura alang sa mga alerto sa block, mga mensahe nga adunay daghang padding ug kasagaran daghang teksto. Ang klase usab nausab ngadto sa .alert-block.


Nindot kaayo sa javascript

Ang Bootstrap adunay usa ka maayo nga jQuery nga plugin nga nagsuporta sa mga alerto nga mensahe, nga naghimo sa pagtangtang kanila nga dali ug dali.

Kuhaa ang plugin »

Pananglitan nga mga alerto

I-wrap ang imong mensahe ug usa ka opsyonal nga close icon sa usa ka div nga adunay yano nga klase.

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

Taas ang ulo! Ang mga aparato sa iOS nanginahanglan usa href="#"alang sa pagtangtang sa mga alerto. Siguroha nga iapil kini ug ang data attribute para sa anchor close nga mga icon. Sa laing paagi, mahimo nimong gamiton ang usa ka <button>elemento nga adunay attribute sa datos, nga among gipili nga buhaton para sa among mga doc. Kung gamiton ang <button>, kinahanglan nimong iapil type="button"o ang imong mga porma mahimong dili isumite.

Sayon nga i-extend ang standard alert message nga adunay duha ka opsyonal nga klase: .alert-blockpara sa dugang padding ug text controls ug .alert-headingpara sa usa ka matching heading.

Pasidaan!

Labing maayo nga susihon ang imong kaugalingon, dili ka kaayo maayo. Nulla vitae elit libero, usa ka 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 = "alerto-heading" > Pasidaan! </h4>
  4. Labing maayo nga susihon ang imong kaugalingon, dili ka ...
  5. </div>

Mga alternatibo sa konteksto Pagdugang mga opsyonal nga klase aron mausab ang konotasyon sa alerto

Sayop o peligro

Oh kalit! Usba ang pipila ka mga butang ug sulayi pagsumite pag-usab.
  1. <div class = "alerto alert-error" >
  2. ...
  3. </div>

Kalampusan

Maayong pagkabuhat! Malampuson nimong nabasa kining importanteng mensahe sa alerto.
  1. <div class = "alerto alert-success" >
  2. ...
  3. </div>

Impormasyon

Taas ang ulo! Kini nga alerto nanginahanglan sa imong atensyon, apan dili kini labi ka hinungdanon.
  1. <div class = "alerto alert-info" >
  2. ...
  3. </div>

Mga pananglitan ug markup

sukaranan

Default nga progress bar nga adunay bertikal nga gradient.

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

Kinudlisan

Naggamit og gradient aron makamugna og striped effect (walay IE).

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

Animated

Gikuha ang mga striped nga pananglitan ug gi-animate kini (walay IE).

  1. <div class = "pag-uswag sa pag-uswag-striped
  2. aktibo" >
  3. <div class = "bar"
  4. style = " gilapdon : 40 %; " ></div>
  5. </div>

Mga kapilian ug suporta sa browser

Dugang nga mga kolor

Ang mga progress bar naggamit sa pipila sa parehas nga buton ug alerto nga mga klase alang sa makanunayon nga mga istilo.

Mga striped bar

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

Paggawi

Ang mga progress bar naggamit sa CSS3 nga mga transisyon, mao nga kung imong dinamikong i-adjust ang gilapdon pinaagi sa javascript, kini hapsay nga magbag-o.

Kon imong gamiton ang .activeklase, ang imong .progress-stripedprogress bar mo-animate sa mga stripes gikan sa wala ngadto sa tuo.

Suporta sa browser

Ang mga progress bar naggamit sa CSS3 gradients, transisyon, ug mga animation aron makab-ot ang tanan nilang mga epekto. Kini nga mga bahin wala gisuportahan sa IE7-9 o mas karaan nga mga bersyon sa Firefox.

Ang Opera ug IE dili mosuporta sa mga animation karong panahona.

Mga atabay

Gamita ang atabay isip usa ka yano nga epekto sa usa ka elemento aron mahatagan kini og inset nga epekto.

Tan-awa, naa ko sa atabay!
  1. <div class = "maayo" >
  2. ...
  3. </div>

Close icon

Gamita ang generic close icon para sa pagdismiss sa content sama sa modals ug alerts.

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

Ang mga aparato sa iOS nanginahanglan usa ka href="#" alang sa mga panghitabo sa pag-klik kung gusto nimo mogamit usa ka angkla.

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