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:

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

Gurallar paneli

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

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</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

Gysgaça syn we mysallar

Açylýan menýuny açmak .btn-groupwe degişli menýu belligini üpjün etmek üçin islendik düwmäni ulanyň.

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.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    Hereket
    <span class = "caret" > </span> 
  </a>
  <ul class = "drop-menu" > 
    <! - açylýan menýu baglanyşyklary ->
  </ul>
</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.

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

<div class = "btn-group" > 
  ...
  <ul class = "drop-menu pull-right" > 
    <! - açylýan menýu baglanyşyklary ->
  </ul>
</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.

<div class = "btn-group" > 
  <button class = "btn" > Hereket </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </span> 
  </button>
  <ul class = "drop-menu" > 
    <! - açylýan menýu baglanyşyklary ->
  </ul>
</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.

<div class = "btn-group dropup" > 
  <button class = "btn" > Çykmak </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </span> 
  </button>
  <ul class = "drop-menu" > 
    <! - açylýan menýu baglanyşyklary ->
  </ul>
</div>

Güýçli esasy synp

Bu ýerdäki ähli deňiz bölekleri - tablar, dermanlar we sanawlar - synpda birmeňzeş esasy bellikleri we stilleri paýlaşýarlar.nav .

Haçan ulanmaly

Salgylar we dermanlar mazmun bölümleri ýa-da baglanyşykly mazmun sahypalarynyň arasynda gezmek üçin ajaýyp.

Komponentleriň deňleşdirilmegi

Deňiz baglanyşyklaryny deňlemek üçin .pull-leftýa-da .pull-rightpeýdaly synplary ulanyň. Iki synp hem görkezilen ugurda CSS ýüzüşini goşar.

Esasy goýmalar

Yzygiderli <ul>baglanyşyk alyň we goşuň .nav-tabs:

• Öý
• Profil
• Habarlar

<ul class = "nav nav-tabs" > 
  <li class = "işjeň" > 
    <a href = "#"> Baş sahypa </a> 
  </li>
  <li> <a href = "#"> ... </a> </li> 
  <li> <a href = "#"> ... </a> </li> 
</ul>

Esasy dermanlar

Şol HTML alyň, ýöne .nav-pillsýerine ulanyň:

• Öý
• Profil
• Habarlar

<ul class = "nav nav-pills" > 
  <li class = "işjeň" > 
    <a href = "#"> Baş sahypa </a> 
  </li>
  <li> <a href = "#"> ... </a> </li> 
  <li> <a href = "#"> ... </a> </li> 
</ul>

Nädip saklamaly

Salgylar we dermanlar adaty ýagdaýda keseligine bolansoň .nav-stacked, dikligine görnüşde görünmek üçin diňe ikinji synp goşuň.

Toplanan goýmalar

• Öý
• Profil
• Habarlar

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

Toplanan dermanlar

• Öý
• Profil
• Habarlar

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

Baý menýular aňsatlaşdyryldy

“Bootstrap” goýmalarynda we dermanlarda açylan menýular gaty aňsat we diňe biraz goşmaça HTML we ýeňil jQuery pluginini talap edýär.

“Bootstrap” -da açylyşlary başlamak baradaky resminamalary okamak üçin Javascript sahypasyna başlaň.

Açylýan bellikler

• Öý
• Kömek ediň
• Aşak
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = "aşak gaçmak" > 
    <a class = "aşak gaçmak" 
       data-toggle = "aşak gaçma"
       href = "#" >
        Aşak
        <b class = "caret" > </b> 
      </a>
    <ul class = "drop-menu" > 
      <! - baglanyşyklar ->
    </ul>
  </li>
</ul>

Açylýan dermanlar

• Öý
• Kömek ediň
• Aşak
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <li class = "aşak gaçmak" > 
    <a class = "aşak gaçmak" 
       data-toggle = "aşak gaçma"
       href = "#" >
        Aşak
        <b class = "caret" > </b> 
      </a>
    <ul class = "drop-menu" > 
      <! - baglanyşyklar ->
    </ul>
  </li>
</ul>

Programma görnüşindäki nawigasiýa

Nav sanawlary, goşmaça sözbaşylar bilen nav baglanyşyk toparlaryny gurmagyň ýönekeý we aňsat usulyny üpjün edýär. OS X-da Finder ýaly gapdal panellerde iň gowusy ulanylýar.

Gurluş taýdan, olar tablisalar we dermanlar bilen birmeňzeş ýadro stilinde gurlupdyr, şonuň üçin ulanmak we özleşdirmek gönümel.

Nyşanlar bilen

Deňiz sanawlary nyşanlary bilen enjamlaşdyrmak hem aňsat. Synp bilen degişli <i>belligi goşuň we düzüldiňiz.

Gorizontal bölüjiler

Synp bilen boş sanaw elementini döredip, keseligine bölüji goşuň .divider:

<ul class = "nav nav-list" > 
  ...
  <li class = "bölüji" > </li> 
  ...
</ul>

Mysal üçin nav sanawy

Salgylaryň sanawyny alyň we goşuň class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Sanawyň sözbaşy
  </li>
  <li class = "işjeň" > 
    <a href = "#"> Baş sahypa </a> 
  </li>
  <li>
    <a href = "#"> Kitaphana </a> _ 
  </li>
  ...
</ul>

Nyşanlar bilen mysal

Birmeňzeş mysal, ýöne <i>nyşanlaryň bellikleri bilen.

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

Näme girýär

Salgylar arkaly mazmunyň arasynda geçmek üçin ýönekeý bir plugin bilen tabulýasiýalaryňyzy durmuşa geçiriň. “Bootstrap” tablisa tablisalaryny dört stilde birleşdirýär: ýokarky (asyl), sag, aşaky we çep.

Aralarynda üýtgetmek aňsat we diňe az belligi üýtgetmegi talap edýär.

Salgylarda ýitýär

Salgylaryň ýitmegi .fadeüçin hersine goşuň .tab-pane.

JQuery pluginini talap edýär

Tabhli tablisa tablisalary ýeňil jQuery pluginimiz bilen işleýär. Javascript resminamalar sahypasynda tablisa tablisalaryny nädip durmuşa geçirip boljakdygy barada has giňişleýin okaň .

Javascript al

Tablisa mysaly

.tab-paneSalgylary tablisa düzmek üçin, her tab üçin özboluşly ID bilen dörediň we gaplaň .tab-content.

Sag ýa-da çep deňleşdirilen goýmalar üçin, içini .nav-tabsýapyň ..tab-content.tabbable

Göni bellik

Tablisa tablisalaryny ulanmak üçin gaplama diw, birgiden bellikler we mazmunly tablisalar toplumy gerek.

<div class = "tabbable" > <! - Diňe çep / sag bellikler üçin zerur ->  
  <ul class = "nav nav-tabs" > 
    <li class = "işjeň" > <a href = "#tab1" data-toggle = "tab"> 1-nji bölüm </a> </li >   
    <li> <a href = "#tab2" data-toggle = "tab"> 2-nji bölüm </a> </li >  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane işjeň" id = "tab1" >  
      <p> Men 1-nji bölümde. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Howdy, men 2-nji bölümde. </p>
    </div>
  </div>
</div>

Aşakdaky bellikler

HTML-iň tertibini süýşüriň we aşagyna goýmalar goýmak üçin synp goşuň.

<div class = "tablisa tablisalary-aşak" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Çep tarapdaky bellikler

Çep tarapda goýmalar goýmak üçin synpy çalyşyň.

<div class = "tablisa tablisalary-çep" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Sag tarapdaky bellikler

Sagda goýmalar goýmak üçin synpy çalyşyň.

<div class = "tablisa tablisalary-sag" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Gämi duralgasy

Deňiz paneli, statiki ýa-da üýtgewsiz displeý üçin gowy gurmak üçin diňe birnäçe diw talap edýär.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "konteýner" > 
      ...
    </div>
  </div>
</div>

Bellenen gämi paneli

Deňiz panelini daşarky diwda goşmaça synp bilen görnüşiň ýokarsyna ýa-da aşagyna düzüň , .navbar.

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

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

Deňiz paneli dakanyňyzda, aşagyndaky gizlin meýdany hasaba almagy ýatdan çykarmaň. 40px ýa-da ondan köp padding goşuň <body>. Muny “Bootstrap CSS” -den soň we islege bagly CSS-den öň goşuň.

Marka ady

Markaňyzy ýa-da taslama adyňyzy görkezmek üçin ýönekeý baglanyşyk diňe labyr belligini talap edýär.

<a class = "brand" href = "#"> _  
  Taslamanyň ady
</a>

Gämi duralgasyndaky görnüşler

Deňiz panelinde bir görnüşi dogry düzmek we ýerleşdirmek üçin aşakda görkezilişi ýaly degişli synplary goşuň. Bellenen görnüş üçin, goşuň .navbar-formýa .pull-left-da .pull-rightdogry sazlamak üçin.

<form class = "navbar-form pull-left" > 
  <giriş görnüşi = "tekst" synp = "span2" >  
</form>

Has özleşdirilen gözleg formasy .navbar-searchüçin , deňiz panelinde ýöriteleşdirilen stiller üçin giriş formwe goşma goşuň..search-query

<form class = "navbar-search pull-left" > 
  <giriş görnüşi = "text" class = "search-query" placeholder = "Gözleg" >   
</form>

Meýletin jogap üýtgeýşi

Topokarky paneldäki mazmunyň mukdaryna baglylykda, jogap beriş opsiýalaryny durmuşa geçirip bilersiňiz. Munuň üçin deňiz mazmunyňyzy öz içine alýan diw bilen örtüň .nav-collapse.collapsewe navbar üýtgetmek düwmesini goşuň , .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "konteýner" > 
 
      <! - .btn-navbar ýykylan navbar mazmunyny üýtgetmek üçin ulanylýar ->
      <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>
 
      <! - Görkezilmegini isleseňiz, markany şol ýerde goýuň ->
      <a class = "brand" href = "#"> Taslamanyň ady </a>  
 
      <! - 940px ýa-da ondanam az gizlenýän isleýän zadyňyzy şu ýere ýerleşdiriň ->
      <div class = "nav-collapse" > 
        <! - .nav, .navbar-gözleg, .navbar-form we ş.m. ->
      </div>
 
    </div>
  </div>
</div>

Deňiz baglanyşyklary

Nav elementleri tertipsiz sanawlar arkaly goşmak ýönekeý.

<ul class = "nav" > 
  <li class = "işjeň" > 
    <a href = "#"> Baş sahypa </a> 
  </li>
  <li> <a href = "#"> Baglanyşyk </a> </li> 
  <li> <a href = "#"> Baglanyşyk </a> </li> 
</ul>

Boş sanaw elementi we ýönekeý synp bilen deňiz baglanyşyklaryňyza bölüjileri aňsatlyk bilen goşup bilersiňiz. Muny diňe baglanyşyklaryň arasynda goşuň:

<ul class = "nav" > 
  ...
  <li class = "bölüji-dik" > </li> 
  ...
</ul>

Komponentleriň deňleşdirilmegi

Deňiz, gözleg görnüşini ýa-da teksti deňleşdirmek üçin .pull-leftýa-da .pull-rightpeýdaly synplary ulanyň. Iki synp hem görkezilen ugurda CSS ýüzüşini goşar.

Açylýan menýulary goşmak

Deňiz gämisine açylanlary we açylanlary goşmak gaty ýönekeý, ýöne javascript plaginimizi ulanmagy talap edýär .

<ul class = "nav" > 
  <li class = "aşak gaçmak" > 
    <a href = "#" 
          class = "aşak gaçmak"
          data-toggle = "dropdown" >
          Hasap
          <b class = "caret" > </b> 
    </a>
    <ul class = "drop-menu" > 
      ...
    </ul>
  </li>
</ul>

Javascript al

Deňiz panelinde tekst

Tekstiň setirlerini <.navbar-text>, adatça, <p>öňdebaryjy we reňk üçin bellikde örtüň.

Näme üçin ulanmaly?

Çörek döwmek nawigasiýasy ulanyjylara programmanyň ýa-da sahypanyň nirededigini görkezmegiň usuly hökmünde ulanylýar, ýöne esasy nawigasiýa üçin däl. Iň täsirli bolmagy üçin ulanylyşyny seýrek we anyk saklaň.

Mysallar

Birnäçe sahypada görkezilip bilinjek ýekeje mysal.

• Öý

• Baş sahypa /
• Kitaphana

• Baş sahypa /
• Kitaphana /
• Maglumatlar

Bellik

HTML, baglanyşyklar bilen standart tertipsiz sanawyňyzdyr.

<ul class = "çörek döwmek" > 
  <li>
    <a href = "#"> Baş sahypa </a> <span class = "divider" > / </span >   
  </li>
  <li>
    <a href = "#"> Kitaphana </a> <span class = "divider" > / </span >   
  </li>
  <li class = "işjeň" > Maglumatlar </li> 
</ul>

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

< div class = "sahypa" 
  <ul>
    <li> <a href = "#"> Öňki </a> </li> 
    <li class = "işjeň" > 
      <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 = "#"> Indiki </a> </li> 
  </ul>
</div>

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.

• Öňki
• Indiki

<ul class = "pager" > 
  <li>
    <a href = "#"> Öňki </a> _ 
  </li>
  <li>
    <a href = "#"> Indiki </a> _ 
  </li>
</ul>

Deňdirilen baglanyşyklar

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

• ← Köne
• Has täze →

<ul class = "pager" > 
  <li class = "öňki" > 
    <a href = "#"> & larr ; Köne </a> 
  </li>
  <li class = "indiki" > 
    <a href = "#"> Has täze & rarr ; </a> 
  </li>
</ul>

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

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

<div class = "gahryman-birlik" > 
  <h1> sözbaşy </h1>
  <p> Bellik </p>
  <p>
    <a class = "btn btn- başlangyç btn-large"> 
      Köpräk oka
    </a>
  </p>
</div>

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 .

<div class = "sahypa-sözbaşy" > 
  <h1> Mysal sahypasynyň sözbaşy </h1>
</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ň :

<ul class = "suratlar" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail"> _  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</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:

<ul class = "suratlar" > 
  <li class = "span3" > 
    <div class = "kiçijik" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> kiçijik bellik </h5>
      <p> Şu ýerdäki kiçijik ýazgy ... </p>
    </div>
  </li>
  ...
</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.

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

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

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

Roralňyşlyk ýa-da howp

<div class = "duýduryş duýduryşy" > 
  ...
</div>

Üstünlik

<div class = "duýduryş duýduryşy-üstünlik" > 
  ...
</div>

Maglumat

<div class = "duýduryş duýduryşy" > 
  ...
</div>

Esasy

Dik gradient bilen deslapky ösüş paneli.

<div class = "öňegidişlik" > 
  <div class = "bar" 
       style = " ini : 60 %; " > </div> 
</div>

Zolakly

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

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

Animasiýa

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

<div class = "öňegidişlik zolakly 
     işjeň " >
  <div class = "bar" 
       style = " ini : 40 %; " > </div> 
</div>

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

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

Nyşan ýapyň

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

×

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

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

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