Komponentler

Nawigasiýa, duýduryşlar, popovers we başga-da köp zatlary üpjün etmek üçin Bootstrap-da onlarça gaýtadan ulanylýan komponent gurulýar.

Düwmeler toparlary

Bir düwme komponenti hökmünde birnäçe düwmäni birleşdirmek üçin düwme toparlaryny ulanyň. Olary bir topar <a>ýa-da <button>elementler bilen guruň.

Iň oňat tejribe

Düwme toparlaryny we gurallar panelini ulanmak üçin aşakdaky görkezmeleri maslahat berýäris:

  • Elmydama şol bir elementi bir düwme toparynda ulanyň, <a>ýa-da <button>.
  • Dürli reňkdäki düwmeleri bir düwme toparynda garyşdyrmaň.
  • Tekstlere goşmaça ýa-da ýerine nyşanlary ulanyň, ýöne gerek ýerinde alt we sözbaşy tekstini goşuň.

Açylýan düwmeler bilen baglanyşykly düwme toparlary (aşaga serediň) aýratyn çagyrylmaly we göz öňünde tutulan özüni alyp barşyny görkezmek üçin elmydama aşak düşýän kartet bolmaly.

Bellenen mysal

HTML, labyr bellik düwmeleri bilen gurlan adaty düwme toparyny gözleýär:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <düwme synpy = "btn" > 3 </button>
  5. </div>

Gurallar paneli

Toplumlary has çylşyrymly komponentler üçin <div class="btn-group">birleşdiriň .<div class="btn-toolbar">

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

Bellik gutusy we radio tagamlary

Düwmeler toparlary, şeýle hem, diňe bir düwmäniň işjeň bolup bilýän ýa-da islendik düwmäniň işjeň bolup bilýän bellik gutusy hökmünde radiolar bolup biler. Munuň üçin Javascript resminamalaryny görüň .

Javascript al »

Düwme toparlarynda aşak gaçmalar

Başlar! Açylýan düwmeler , dogry görkezmek üçin aýratynlykda öz-özünden .btn-groupörtülmelidir ..btn-toolbar

Düwmeleriň açylmagy

Mysal belligi

Düwme toparyna meňzeş ýaly, belligimizde yzygiderli düwme belligi ulanylýar, ýöne stili arassalamak we Bootstrap-dan çykýan jQuery pluginini goldamak üçin az sanly goşmaçalar bar.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">
  3. Hereket
  4. <span class = "caret" > </span>
  5. </a>
  6. <ul class = "drop-menu" >
  7. <! - açylýan menýu baglanyşyklary ->
  8. </ul>
  9. </div>

Buttonhli düwme ululyklary bilen işleýär

Düwmeleriň açylmagy islendik ululykda işleýär. düwmäniň ululyklary .btn-large, .btn-smallýa-da .btn-mini.

Javascript talap edýär

Düwmeleriň açylmagy Bootstrap açylýan pluginiň işlemegini talap edýär .

Käbir ýagdaýlarda, ykjam ýaly, aşak düşýän menýular görnüşiň daşynda uzalar. Düzedişi el bilen ýa-da adaty javascript bilen çözmeli.


Düwmeleriň açylan ýerlerini bölüň

Gysgaça syn we mysallar

Düwme toparynyň stillerine we belliklerine esaslanyp, bölmek düwmesini aňsatlyk bilen döredip bileris. Bölünmek düwmelerinde çep tarapda adaty bir hereket we sag tarapda kontekst baglanyşyklary bilen aşak açylýan açyklyk bar.

Ölçegler

Goşmaça düwme sapaklaryny ýa-da .btn-miniululyk üçin ulanyň..btn-small.btn-large

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "drop-menu pull-right" >
  4. <! - açylýan menýu baglanyşyklary ->
  5. </ul>
  6. </div>

Mysal belligi

Aýry-aýry açyş hereketlendirijisi hökmünde işleýän ikinji düwme hereketini üpjün etmek üçin adaty düwme açylýan ýerlerde giňelýäris.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Hereket </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </button>
  6. <ul class = "drop-menu" >
  7. <! - açylýan menýu baglanyşyklary ->
  8. </ul>
  9. </div>

Açylýan menýular

Açylýan menýular ýakyn ene-atasyna ýekeje synp goşmak bilen aşakdan ýokara üýtgedilip bilner .dropdown-menu. Ol ugry ugrukdyrar .caretwe menýudan ýokaryk däl-de, aşakdan ýokaryk hereket eder.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Çykmak </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </button>
  6. <ul class = "drop-menu" >
  7. <! - açylýan menýu baglanyşyklary ->
  8. </ul>
  9. </div>

Köp sahypaly sahypa

Haçan ulanmaly

Rdio tarapyndan ylhamlanan ultra ýönekeý we minimal görnüşli sahypa, programmalar we gözleg netijeleri üçin ajaýyp. Uly bloky sypdyrmak kyn, aňsatlyk bilen ulalýar we uly basmak meýdançalaryny üpjün edýär.

Döwlet sahypa baglanyşyklary

Salgylar düzülip bilner we dogry synp bilen birnäçe ýagdaýda işleýär. .disabledaçylmaýan baglanyşyklar we .activehäzirki sahypa üçin.

Çeýe deňleşdirme

Sahypa baglanyşyklarynyň deňleşmesini üýtgetmek üçin iki sany goşmaça synpyň birini goşuň: .pagination-centeredwe .pagination-right.

Mysallar

Adaty sahypa sahypasy çeýe we birnäçe üýtgeşiklikde işleýär.

Bellik

A bilen örtülen <div>, sahypa diňe a <ul>.

  1. < div class = "sahypa"
  2. <ul>
  3. <li> <a href = "#"> Öňki </a> </li>
  4. <li class = "işjeň" >
  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 = "#"> Indiki </a> </li>
  11. </ul>
  12. </div>

Pager Öňki we indiki baglanyşyklar üçin

Peýjer hakda

“Peýjer” komponenti, ýönekeý bellik we hatda has ýeňil stil bilen ýönekeý sahypany durmuşa geçirmek üçin baglanyşyklar toplumydyr. Blog ýa-da magazinesurnal ýaly ýönekeý saýtlar üçin ajaýyp.

Meýletin maýyp ýagdaý

Peýjer baglanyşyklary, sahypadan umumy .disabledsynpy hem ulanýar.

Bellenen mysal

Düzgüne görä, peýjer merkezleri baglanyşýar.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#"> Öňki </a> _
  4. </li>
  5. <li>
  6. <a href = "#"> Indiki </a> _
  7. </li>
  8. </ul>

Deňdirilen baglanyşyklar

Ativea-da bolmasa, her baglanyşygy gapdallara deňleşdirip bilersiňiz:

  1. <ul class = "pager" >
  2. <li class = "öňki" >
  3. <a href = "#"> & larr ; Köne </a>
  4. </li>
  5. <li class = "indiki" >
  6. <a href = "#"> Has täze & rarr ; </a>
  7. </li>
  8. </ul>
Bellikler Bellik
Bellenen <span class="label">Default</span>
Üstünlik <span class="label label-success">Success</span>
Duýduryş <span class="label label-warning">Warning</span>
Möhüm <span class="label label-important">Important</span>
Maglumat <span class="label label-info">Info</span>
Ters <span class="label label-inverse">Inverse</span>

Takmynan

Nyşanlar görkezijini ýa-da haýsydyr bir görnüşi görkezmek üçin kiçi, ýönekeý komponentler. Adatça Mail.app ýaly e-poçta müşderilerinde ýa-da basma habarnamalary üçin ykjam programmalarda bolýar.

Elýeterli sapaklar

Ady Mysal Bellik
Bellenen 1 <span class="badge">1</span>
Üstünlik 2 <span class="badge badge-success">2</span>
Duýduryş 4 <span class="badge badge-warning">4</span>
Möhüm 6 <span class="badge badge-important">6</span>
Maglumat 8 <span class="badge badge-info">8</span>
Ters 10 <span class="badge badge-inverse">10</span>

Gahryman bölümi

Bootstrap, sahypaňyzdaky mazmuny görkezmek üçin gahryman bölümi diýilýän ýeňil, çeýe komponenti üpjün edýär. Marketing we mazmunly saýtlarda gowy işleýär.

Bellik

Mazmunyňyzy divşuňa meňzeş görnüşde örtüň:

  1. <div class = "gahryman-birlik" >
  2. <h1> sözbaşy </h1>
  3. <p> Bellik </p>
  4. <p>
  5. <a class = "btn btn- başlangyç btn-large">
  6. Köpräk oka
  7. </a>
  8. </p>
  9. </div>

Salam, dünýä!

Bu ýönekeý gahryman bölümi, aýratyn mazmuna ýa-da maglumata goşmaça ünsi çekmek üçin ýönekeý jumbotron stilidir.

Köpräk oka

Sahypanyň sözbaşy

h1Sahypadaky mazmun bölümlerini ýerlikli ýerleşdirmek üçin ýönekeý gabyk . h1Dymmaklyk small, elementi we beýleki komponentleriň köpüsini (goşmaça stil bilen) ulanyp biler .

  1. <div class = "sahypa-sözbaşy" >
  2. <h1> Mysal sahypasynyň sözbaşy </h1>
  3. </div>

Bellenen kiçi suratlar

Düzgüne görä, “Bootstrap” -yň kiçi suratlary, iň az zerur bellik bilen baglanyşykly suratlary görkezmek üçin döredildi.

Lyokary düzülip bilner

Birneme goşmaça bellik bilen, kiçi sözbaşylara, abzaslara ýa-da düwmelere meňzeş HTML mazmunyny goşmak mümkin.

  • Surat eseri

    Cras justo odio, dapibus ac facilisis, egestas eget quam. Donec id elit metus-da mi porta gravida. Nullam id dolor id nibh ultricies ulag serişdesi.

    Hereket Hereket

  • Surat eseri

    Cras justo odio, dapibus ac facilisis, egestas eget quam. Donec id elit metus-da mi porta gravida. Nullam id dolor id nibh ultricies ulag serişdesi.

    Hereket Hereket

Näme üçin kiçi suratlary ulanyň

Suratlar (öň .media-gridv1.4-e çenli) suratlar ýa-da wideolar, surat gözleg netijeleri, bölek önümler, bukjalar we başgalar üçin ajaýyp. Olar baglanyşyk ýa-da statiki mazmun bolup biler.

Pleönekeý, çeýe bellik

Eskiz belligi ýönekeý - zerur elementleriň ulsany köp . liŞeýle hem, aşa çeýe bolup, mazmunyňyzy örtmek üçin birneme has köp bellikli mazmun görnüşine mümkinçilik berýär.

Panel sütüniniň ululyklaryny ulanýar

Iň soňunda bolsa, kiçijik bölek komponenti , kiçijik ölçeglerine gözegçilik etmek .span2üçin bar bolan gözenek ulgamy synplaryny ulanýar..span3

Bellik

Öň bellenip geçilişi ýaly, kiçijik suratlar üçin zerur bellik ýeňil we gönümel. Baglanan suratlar üçin deslapky gurnama serediň :

  1. <ul class = "suratlar" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail"> _
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Eskizlerdäki adaty HTML mazmuny üçin bellik biraz üýtgeýär. Islendik ýerde blok derejesindäki mazmuna rugsat bermek <a>üçin <div>şuňa meňzeş zatlary çalyşýarys:

  1. <ul class = "suratlar" >
  2. <li class = "span3" >
  3. <div class = "kiçijik" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> kiçijik bellik </h5>
  6. <p> Şu ýerdäki kiçijik ýazgy ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Has köp mysal

Elýeterli dürli gözenek synplary bilen ähli wariantlaryňyzy öwreniň. Şeýle hem dürli ululyklary garyşdyryp we deňeşdirip bilersiňiz.

Lighteňil

Esasy synp

“Bootstrap 2” bilen esasy synpy ýönekeýleşdirdik: .alertýerine .alert-message. Şeýle hem, iň az talap edilýän belligi azaltdyk - <p>aslynda daşky görnüşi talap edilmeýär<div> .

Singleekeje duýduryş habary

Az kodly has çydamly komponent üçin, blok duýduryşlaryny, has köp padding we adatça has köp tekst bilen gelýän habarlary tapawutlandyrýan görnüşi aýyrdyk. Synp hem üýtgedi .alert-block.


Javascript bilen ajaýyp gidýär

“Bootstrap” duýduryş habarlaryny goldaýan, olary işden çykarmagy çalt we aňsatlaşdyrýan ajaýyp jQuery plugin bilen gelýär.

Plagini alyň »

Mysal duýduryşlary

Habaryňyzy we islege bagly ýakyn nyşany ýönekeý synp bilen bölüň.

Duýduryş! Iň gowusy özüňizi barlaň, gaty gowy görünmeýärsiňiz.
  1. <div class = "duýduryş" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Duýduryş! </strong> Iň gowusy özüňizi barlaň, gaty gowy görünmeýärsiňiz.
  4. </div>

Başlar! iOS enjamlary href="#"duýduryşlaryň ýatyrylmagyny talap edýär. Ony we labyr ýakyn nyşanlary üçin maglumat atributyny goşuň. <button>Ativea-da bolmasa, resminamalarymyz üçin etmegi saýlap alan maglumat atributy bolan bir elementi ulanyp bilersiňiz . Ulanylanda <button>, goşmaly type="button"ýa-da blankalaryňyzy tabşyryp bilmez.

Adaty duýduryş habaryny iki sany goşmaça synp bilen aňsatlyk bilen uzadyň: .alert-blockhas köp padding we tekst dolandyryşlary we .alert-headinggabat gelýän sözbaşy üçin.

Duýduryş!

Iň gowusy özüňizi barlaň, gaty gowy görünmeýärsiňiz. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur we ş.m.

  1. <div class = "duýduryş duýduryşy" >
  2. <a class = "close" data-dismiss = "alert" href = "#"> × </a> _
  3. <h4 class = "duýduryş-sözbaşy" > Duýduryş! </h4>
  4. Iň gowusy özüňizi barlaň, siz däl ...
  5. </div>

Kontekst alternatiwalary Duýduryşyň manysyny üýtgetmek üçin goşmaça sapaklary goşuň

Roralňyşlyk ýa-da howp

Aý, gysga! Birnäçe zady üýtgediň we täzeden tabşyrmaga synanyşyň.
  1. <div class = "duýduryş duýduryşy" >
  2. ...
  3. </div>

Üstünlik

Berekella! Bu möhüm duýduryş habaryny üstünlikli okadyňyz.
  1. <div class = "duýduryş duýduryşy-üstünlik" >
  2. ...
  3. </div>

Maglumat

Başlar! Bu duýduryş siziň ünsüňize mätäç, ýöne bu gaty möhüm däl.
  1. <div class = "duýduryş duýduryşy" >
  2. ...
  3. </div>

Mysallar we bellik

Esasy

Dik gradient bilen deslapky ösüş paneli.

  1. <div class = "öňegidişlik" >
  2. <div class = "bar"
  3. style = " ini : 60 %; " > </div>
  4. </div>

Zolakly

Zolakly effekt döretmek üçin gradient ulanýar (IE ýok).

  1. <div class = "öňegidişlik zolakly" >
  2. <div class = "bar"
  3. style = " ini : 20 %; " > </div>
  4. </div>

Animasiýa

Zolakly mysal alýar we janlandyrýar (IE ýok).

  1. <div class = "öňegidişlik zolakly
  2. işjeň " >
  3. <div class = "bar"
  4. style = " ini : 40 %; " > </div>
  5. </div>

Görnüşler we brauzer goldawy

Goşmaça reňkler

Ösüş panelleri yzygiderli stil üçin şol bir düwmäni we duýduryş sapaklaryny ulanýar.

Zolakly barlar

Gaty reňklere meňzeşlikde, dürli zolakly öňegidişlikler bar.

Özüňi alyp baryş

Ösüş barlary CSS3 geçişlerini ulanýarlar, şonuň üçin ini javascript arkaly dinamiki sazlasaňyz, göwrümi üýtgediler.

.activeSynpy ulansaňyz, .progress-stripedöňegidişlik setirleriňiz çepden saga zolaklary janlandyrar.

Brauzer goldawy

Ösüş barlary, ähli täsirlerine ýetmek üçin CSS3 gradiýentlerini, geçişlerini we animasiýalaryny ulanýarlar. Bu aýratynlyklar IE7-9 ýa-da Firefox-yň köne wersiýalarynda goldanylmaýar.

Opera we IE häzirki wagtda animasiýalary goldamaýar.

Guýular

Giriş effekti bermek üçin bir elemente ýönekeý täsir ýaly guýyny ulanyň.

Gör, men guýyda!
  1. <div class = "gowy" >
  2. ...
  3. </div>

Nyşan ýapyň

Modallar we duýduryşlar ýaly mazmuny ýatyrmak üçin umumy ýakyn nyşany ulanyň.

  1. <düwme synpy = "ýap" > & wagt; </button>

iOS enjamlary, eger labyr ulanýan bolsaňyz, basmak hadysalary üçin href = "#" talap edýär.

  1. <a class = "close" href = "#"> & times ; </a>