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

Şeýle hem toplumlary has çylşyrymly taslamalar üçin <div class="btn-group">birleşdirip bilersiňiz.<div class="btn-toolbar">

Mysal belligi

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

<div class = "btn-group" > 
  <a class = "btn" href = "#"> 1 </a> _  
  <a class = "btn" href = "#"> 2 </a> _  
  <a class = "btn" href = "#"> 3 </a> _  
</div>

Birnäçe topar üçin gurallar paneli bilen:

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

Kelleler

Düwme toparlary üçin CSS aýratyn faýlda, düwme-toparlar.less.

Düwmeleriň açylmagy

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>

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

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.

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

Lighteňil defolt Birmeňzeş bellik, dürli synplar

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 .

Näme üçin tablar we dermanlar

“Bootstrap” -daky goýmalar we tabletkalar <ul>birmeňzeş HTML, baglanyşyklaryň sanawy bilen gurulýar. Salgylary ýa-da dermanlary diňe bir synp bilen çalyşyň.

Iki wariant hem mazmunyň kiçi bölümleri ýa-da baglanyşykly mazmun sahypalarynyň arasynda gezmek üçin ajaýyp.

Esasy goýmalar

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

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

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

Stackable Salgylary ýa-da dermanlary dik ediň

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

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

Toplanan dermanlar

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

Öňe gidiş bölekleri üçin

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

<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

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

Deňiz sanawlary sideönekeý gaplanan deňizleri guruň, gapdal paneller üçin ajaýyp

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.

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>

Tablisa nav Javascript arkaly bellikleri durmuşa geçiriň

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.

Tablisa mysaly

.nav-tabsSalgylary tablisa etmek üçin, synpy başga bir bölüme örtüň .tabbable.

Men 1-nji bölümde.

Howdy, men 2-nji bölümde.

Näme gyz, bu 3-nji bölüm.

Qörite jQuery plugin

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

Göni bellik

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

<div class = "tabbable" > 
  <ul class = "nav nav-tabs" > 
    <li class = "işjeň" > <a href = "#1" data-toggle = "tab"> 1-nji bölüm </a> </li >   
    <li> <a href = "#2" data-toggle = "tab"> 2-nji bölüm </a> </li >  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane işjeň" id = "1" >  
      <p> Men 1-nji bölümde. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Howdy, men 2-nji bölümde. </p>
    </div>
  </div>
</div>

Islendik ugur boýunça tablisa

Aşakdaky bellikler

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

Men A bölümde.

Howdy, men B bölümde.

Näme gyz, bu C bölüm.

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

Men A bölümde.

Howdy, men B bölümde.

Näme gyz, bu C bölüm.

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

Men A bölümde.

Howdy, men B bölümde.

Näme gyz, bu C bölüm.

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

Statik deňiz paneli mysaly

Taslamanyň ady, nawigasiýa we gözleg görnüşi bolan statiki (ýokarsyna kesgitlenmedik) navbar mysaly.

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>

Deňiz panelini görüniş nokadynyň ýokarsyna düzmek üçin .navbar-fixed-topiň daşarky diwany goşuň , .navbar. CSS-de, goşup, onuň üstaşyr gabat gelmegini hem hasaba padding-top: 40px;almaly bolarsyňyz <body>.

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

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özleg formasy

.navbar-searchGözleg formalary synp bilen deňiz panelinde ýörite stilleri alýarlar . Goşmak .pull-leftýa .pull-right- da formdeňleşdirmek üçin.

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

Başlar! Duýgur deňiz paneli çökmek plaginini talap edýär .

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>

Açylýan ýerleri goşmak

Deňiz gämisine 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

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.

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ň" > 
    <a href = "#"> Maglumatlar </a> _ 
  </li>
</ul>

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

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

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

Peýjer hakda

“Peýjer” komponenti, ýeňil bellikli we hatda has ýeňil görnüşli ýönekeý sahypalary ýerine ýetirmek üçin baglanyşyklar toplumydyr. Blog ýa-da magazinesurnal ýaly ýönekeý saýtlar üçin ajaýyp.

Bellenen mysal

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

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

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

Bellikler	Bellik
Bellenen	`<span class="label">Default</span>`
Täze	`<span class="label label-success">New</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>`

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.

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>- deslapky görnüşde talap edilmeýär, diňe daşarky <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.

<div class = "duýduryş" > 
  <a class = "close"> × </a> _ 
  <strong> Duýduryş! </strong> Iň gowusy özüňizi barlaň, gaty gowy görünmeýärsiňiz.
</div>

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.

<div class = "duýduryş duýduryşy" > 
  <a class = "close"> × </a> _ 
  <h4 class = "duýduryş-sözbaşy" > Duýduryş! </h4> 
  Iň gowusy özüňizi barlaň, siz däl ...
</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ň.

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

Üstünlik

× Berekella! Bu möhüm duýduryş habaryny üstünlikli okadyňyz.

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

Maglumat

× Başlar! Bu duýduryş siziň ünsüňize mätäç, ýöne bu gaty möhüm däl.

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

Mysallar we bellik

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.

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

Animasiýa

Zolakly mysal alýar we janlandyrýar.

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

Görnüşler we brauzer goldawy

Goşmaça reňkler

Ösüş panelleri, şuňa meňzeş stil üçin düwmeler we duýduryşlar bilen birmeňzeş synp atlaryny ulanýar.

.progress-info
.progress-success
.progress-danger

Ativea-da bolmasa, LESS faýllaryny sazlap, öz reňkleriňizi we ululyklaryňyzy öwrüp bilersiňiz.

Ö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-8 ýa-da Firefox-yň köne wersiýalarynda goldanylmaýar.

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

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

Nyşanlar

Okalmadyk sanamak ýa-da ýönekeý görkeziji hökmünde bir elementdäki nyşany ulanyň.

<span class = "nyşan" > 3 </div>

Nyşan ýapyň

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

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

Düwmeler toparlary Gurallar paneline meňzeş has köp işlemek üçin düwmelere goşulyň

Düwmeler toparlary

Mysal belligi

Bellik gutusy we radio tagamlary

Kelleler

Düwmeleriň aşak gaçmagy Düwme toparlarynda gurlan kontekstdäki açylyş menýulary

Düwmeleriň açylmagy

Mysal belligi

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

Mysal belligi

Nav, tablar we dermanlar lyokary düzülip bilinýän sanaw görnüşindäki nawigasiýa

Lighteňil defolt Birmeňzeş bellik, dürli synplar

Güýçli esasy synp

Näme üçin tablar we dermanlar

Esasy goýmalar

Esasy dermanlar

Stackable Salgylary ýa-da dermanlary dik ediň

Nädip saklamaly

Toplanan goýmalar

Toplanan dermanlar

Öňe gidiş bölekleri üçin

Baý menýular aňsatlaşdyryldy

Açylýan bellikler

Açylýan dermanlar

Deňiz sanawlary sideönekeý gaplanan deňizleri guruň, gapdal paneller üçin ajaýyp

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

Nyşanlar bilen

Mysal üçin nav sanawy

Nyşanlar bilen mysal

Tablisa nav Javascript arkaly bellikleri durmuşa geçiriň

Näme girýär

Tablisa mysaly

Qörite jQuery plugin

Göni bellik

Islendik ugur boýunça tablisa

Aşakdaky bellikler

Çep tarapdaky bellikler

Sag tarapdaky bellikler

Navbar

Statik deňiz paneli mysaly

Gämi duralgasy

Marka ady

Gözleg formasy

Meýletin jogap üýtgeýşi

Deňiz baglanyşyklary

Açylýan ýerleri goşmak

Çörek bölekleri

Näme üçin ulanmaly?

Mysallar

Bellik

Sahypa Mazmuny arkaly sahypalaşdyrmak üçin iki wariant

Köp sahypaly sahypa

Haçan ulanmaly

Döwlet sahypa baglanyşyklary

Çeýe deňleşdirme

Mysallar

Bellik

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

Peýjer hakda

Bellenen mysal

Deňdirilen baglanyşyklar

Içerki bellikleri Etiketka we bellikli tekst

Suratlar Suratlar, wideolar, tekst we ş.m.

Bellenen kiçi suratlar

Lyokary düzülip bilner

Surat eseri

Surat eseri

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

Pleönekeý, çeýe bellik

Panel sütüniniň ululyklaryny ulanýar

Bellik

Has köp mysal

Üstünlik, duýduryş we ýalňyş habarlary üçin duýduryş stilleri

Lighteňil

Esasy synp

Singleekeje duýduryş habary

Javascript bilen ajaýyp gidýär

Mysal duýduryşlary

Duýduryş!

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