Mysal

Salgylaryň sanawlaryny görkezmek üçin üýtgedip bolýan, kontekst menýu. Açylýan JavaScript plugin bilen interaktiw ýasaldy .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li> <a tabindex = "-1" href = "#"> Hereket </a> </li >  
  <li> <a tabindex = "-1" href = "#"> Başga bir hereket </a> </li>  
  <li> <a tabindex = "-1" href = "#"> Bu ýerde başga bir zat </a> </li >  
  <li class = "bölüji" > </li> 
  <li> <a tabindex = "-1" href = "#"> Aýrylan baglanyşyk </a> </li >  
</ul>

Bellik

Diňe açylýan menýuda seredeniňde, zerur HTML. Açylýan triggeriň we açylýan menýuny .dropdownýa-da yglan edýän başga bir elementi örtmeli position: relative;. Soňra diňe menýu dörediň.

<div class = "dropdown" > 
  <! - Açylanlary üýtgetmek üçin baglanyşyk ýa-da düwme ->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li> <a tabindex = "-1" href = "#"> Hereket </a> </li >  
    <li> <a tabindex = "-1" href = "#"> Başga bir hereket </a> </li>  
    <li> <a tabindex = "-1" href = "#"> Bu ýerde başga bir zat </a> </li >  
    <li class = "bölüji" > </li> 
    <li> <a tabindex = "-1" href = "#"> Aýrylan baglanyşyk </a> </li >  
  </ul>
</div>

Görnüş

Menýulary sag tarapa deňleşdiriň we goşma derejelerini goşuň.

Menýulary deňleşdirmek

Açylýan menýuny sag .pull-righttarapa goşuň ..dropdown-menu

<ul class = "dropdown-menu pull-right" rol = "menýu" aria-labelledby = "dLabel" >   
  ...
</ul>

Menýu opsiýalary ýapyk

Baglanyşygy öçürmek üçin aşak açylýan ýere .disabledgoşuň .<li>

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li> <a tabindex = "-1" href = "#"> Adaty baglanyşyk </a> </li >  
  <li class = "ýapyk" > <a tabindex = "-1" href = "#"> Öçürilen baglanyşyk </a> </li>   
  <li> <a tabindex = "-1" href = "#"> Başga bir baglanyşyk </a> </li>  
</ul>

Aşakdaky menýular

OSönekeý bellik goşmaçalary bilen, OS X-da bolşy ýaly ýokaryk çykýan menýularyň goşmaça derejesini goşuň. Awtomatiki düzmek üçin bar bolan açylan menýuda .dropdown-submenuislendik birine goşuň .li

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#"> Has köp opsiýa </a>  
    <ul class = "drop-menu" > 
      ...
    </ul>
  </li>
</ul>

Mysallar

Iki sany aýratyn wariant bilen birlikde iki esasy wariant.

Buttoneke düwme topary

Düwmeleriň bir toparyny .btnörtüň .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Çep </button> 
  <button class = "btn" > Orta </button> 
  <button class = "btn" > Sag </button> 
</div>

Birnäçe düwme toparlary

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>

Dik düwme toparlary

Düwmeleriň toplumyny keseligine däl-de, dikligine ýerleşdiriň.

<div class = "btn-group btn-group-vertical" > 
  ...
</div>

Bellik gutusy we radio tagamlary

Düwmeler toparlary radiolar hökmünde hem işläp bilerler, bu ýerde diňe bir düwme işjeň bolup biler ýa-da islendik düwme işjeň bolup bilýän bellik gutusy. Munuň üçin JavaScript resminamalaryny görüň .

Düwme toparlarynda aşak gaçmalar

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

Gysgaça syn we mysallar

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

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

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çylma bar.

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

Ölçegler

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Hereket </button> 
  <button class = "btn btn-mini 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>

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

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

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

Maýyp ýagdaý

Islendik deňiz komponenti (goýmalar, dermanlar ýa-da sanaw) .disabledüçin çal baglanyşyklary goşuň we hiç hili täsir etmez . Aýratynlygy aýyrmasaňyz, hrefbaglanyşyklar basylyp bilner. Ativea-da bolmasa, şol basmagyň öňüni almak üçin ýörite JavaScript-i durmuşa geçirip bilersiňiz.

<ul class = "nav nav-pills" > 
  ...
  <li class = "maýyp" > <a href = "#"> Baş sahypa </a> </li>  
  ...
</ul>

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.

Stackable

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>

Açylýan ýerler

Birneme goşmaça HTML we açylan JavaScript plugin bilen açylýan menýulary goşuň .

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

Goşmaça sözbaşylar bilen deňiz baglanyşyk toparlaryny gurmagyň ýönekeý we aňsat usuly. OS X-da Finder ýaly gapdal panellerde iň gowusy ulanylýar.

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şysy </li> 
  <li class = "işjeň" > <a href = "#"> Baş sahypa </a> </li>  
  <li> <a href = "#"> Kitaphana </a> </li> 
  ...
</ul>

BellikDeňiz sanawynyň içinde höwürtge döretmek üçin class="nav nav-list", islendik höwürtge goşuň <ul>.

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>

Tablisa nav

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.

Tablisa mysaly

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

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

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çirmelidigi barada has giňişleýin okaň .

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

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

Esasy gämi paneli

Başlamak üçin, gämi duralgalary statikdir (ýokarsyna kesgitlenmedik) we taslama ady we esasy nawigasiýa goldawyny öz içine alýar. .containerSahypaňyzyň we mazmunyňyzyň giňligini kesgitleýän bir ýerde ýerleşdiriň .

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#"> Ady </a> _  
    <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>
  </div>
</div>

Navbar komponentleri

Marka

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>  

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>

Formalar

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" >  
  <düwme görnüşi = " tabşyr " synp = "btn" > Ibermek </button>  
</form>

Gözleg formasy

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>

Komponentleriň deňleşdirilmegi

Nav baglanyşyklaryny, gözleg görnüşini ýa-da teksti deňleşdiriň, ýa- .pull-leftda .pull-rightpeýdaly synplary ulanyň. Iki synp hem görkezilen ugurda CSS ýüzüşini goşar.

Açylýan ýerleri ulanmak

Birneme bellik we açylan JavaScript plugin bilen deňizde açylanlary we açylanlary goşuň .

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

Has köp bellik etmek we açylan jaňlar barada maglumat almak üçin JavaScript açylan resminamalaryna giriň .

Tekst

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

Meýletin displeý üýtgeýişleri

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

Topokarky

.navbar-fixed-topIň azyndan 40px goşup, aşagyndaky gizlin meýdany hasaba almagy ýatdan paddingçykarmaň <body>. Muny “Bootstrap CSS” -den soň we islege bagly CSS-den öň goşuň.

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

Aşakdan düzedildi

Munuň ýerine goşuň .navbar-fixed-bottom.

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

Statik ýokarky paneli

Goşmak bilen sahypa bilen aýlanýan doly giňlikdäki navbar dörediň .navbar-static-top. Sapakdan tapawutlylykda, .navbar-fixed-tophaýsydyr bir paddingi üýtgetmegiň zerurlygy ýok body.

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

Jogapkärçilik paneli

Apsykylýan täsirli deňiz panelini amala aşyrmak üçin, navbar mazmunyňyzy öz içine diw bilen örtüň .nav-collapse.collapsewe navbar panelini üý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>

Tersine üýtgeşiklik

Goşmak arkaly deňiz paneliniň görnüşini üýtgediň .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Mysallar

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

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

Adaty sahypa

Rdio tarapyndan ylhamlanan ýönekeý 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.

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

Görnüş

Maýyp we işjeň ýagdaýlar

Salgylar dürli ýagdaýlar üçin düzülip bilner. .disabledÇekip bolmaýan baglanyşyklar we .activehäzirki sahypany görkezmek üçin ulanyň .

< div class = "sahypa" 
  <ul>
    <li class = "maýyp" > <a href = "#"> & laquo; </a> </li>  
    <li class = "işjeň" > <a href = "#"> 1 </a> </li>  
    ...
  </ul>
</div>

Göz öňünde tutulan stilleri saklamak bilen basmak funksiýasyny aýyrmak üçin işjeň ýa-da ýapyk labyrlary islege görä çalşyp bilersiňiz.

< div class = "sahypa" 
  <ul>
    <li class = "maýyp" > <span> & laquo; </span> </li> 
    <li class = "işjeň" > <span> 1 </span> </li> 
    ...
  </ul>
</div>

Ölçegler

Ulymy ýa-da kiçi sahypa? Goşuň ýa-da .pagination-largegoşmaça ululyklar üçin..pagination-small.pagination-mini

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
< div class = "sahypa" 
  <ul>
    ...
  </ul>
</div>
<div class = "sahypa sahypasy-kiçi" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Deňleşdirmek

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

<div class = "sahypa sahypasy merkezi" > 
  ...
</div>

<div class = "sahypa sahypasy-sag" > 
  ...
</div>

Pager

Lightagtylyk belligi we stili bilen ýönekeý sahypany durmuşa geçirmek üçin çalt öňki we indiki baglanyşyklar. 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>

Meýletin maýyp ýagdaý

Peýjer baglanyşyklary, sahypadan umumy .disabledpeýdaly synpy hem ulanýar.

<ul class = "pager" > 
  <li class = "öňki maýyp" > 
    <a href = "#"> & larr ; Köne </a> 
  </li>
  ...
</ul>

Bellikler

Nyşanlar

Ansatlyk bilen ýykylýar

:emptyEasyeňil durmuşa geçirmek üçin bellikler we nyşanlar içerde hiç hili mazmun ýok bolanda ýykylar (CSS saýlaýjysynyň üsti bilen ).

Gahryman bölümi

Sahypaňyzdaky esasy mazmuny görkezmek üçin ýeňil, çeýe komponent. Marketing we mazmunly saýtlarda gowy işleýär.

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

Sahypanyň sözbaşy

h1Bir sahypadaky 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 <small> sözbaşy üçin subtekst </small> </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.

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 = "span4" > 
    <a href = "#" class = "thumbnail"> _  
      <img data-src = "holder.js / 300x200" 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 = "span4" > 
    <div class = "kiçijik" > 
      <img data-src = "holder.js / 300x200" alt = "" >  
      <h3> kiçijik bellik </h3>
      <p> 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.

Bellenen duýduryş

.alertEsasy duýduryş duýduryşy üçin islendik teksti we islege bagly işden aýyrmak düwmesini örtüň .

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

Düwmeleri aýryň

Mobil Safari we Mobile Opera brauzerleri, data-dismiss="alert"atributdan başga-da, bellik href="#"ulanylanda duýduryşlaryň ýatyrylmagyny talap edýär.<a>

<a href = "#" class = "close" data-dismiss = "alert"> & times ; </a>   

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

<button type = "button" class = "close" data-dismiss = "alert" > & times; </button>   

JavaScript arkaly duýduryşlary aýyryň

Duýduryşlary çalt we aňsat işden aýyrmak üçin jQuery pluginini ulanyň .

Görnüş

Has uzyn habarlar üçin, goşmaçanyň üsti bilen duýduryş örtüginiň ýokarsynda we aşagynda paddini köpeldiň .alert-block.

<div class = "duýduryş duýduryşy" > 
  <button type = "button" class = "close" data-dismiss = "alert" > & times; </button>   
  <h4> 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

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

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. IE7-8-de ýok

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

Animasiýa

Zolaklary sagdan çepe janlandyrmak üçin .activegoşuň . .progress-stripedIE-iň ähli wersiýalarynda ýok.

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

Toplanan

Toplamak üçin birnäçe barlary şol bir ýere goýuň .progress.

<div class = "öňegidişlik" > 
  <div class = "bar bar-success" style = " ini : 35 %; " > </div>   
  <div class = "bar bar-duýduryş" style = " ini : 20 %; " > </div>   
  <div class = "bar bar-danger" style = " ini : 10 %; " > </div>   
</div>

Görnüş

Goşmaça reňkler

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

<div class = "progress progress-info" > 
  <div class = "bar" style = " ini : 20 % " > </div>   
</div>
<div class = "öňegidişlik-üstünlik" > 
  <diw  class = "bar" style = " ini : 40 % " > </div>  
</div>
<div class = "öňegidişlik-duýduryş" > 
  <div synp =  "bar" style = " ini : 60 % " > </div>  
</div>
<div class = "öňegidişlik-howp" > 
  <div class = "bar"   style = " ini : 80 % " > </div> 
</div>

Zolakly barlar

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

<div class = "progress progress-info progress-zolakly" > 
  <div class = "bar" style =  " ini : 20 % " > </div> 
</div>
<diw  class = "öňegidişlik-üstünlik ösüş-zolakly" >
  <div class = "bar" style = "  ini : 40 % " > </div> 
</div>
<diw  class = "öňegidişlik-duýduryş öňe gidiş zolakly" >
  <div class = "bar" style = " ini  : 60 % " > </div> 
</div>
<diw  class = "öňegidişlik-howp howpy öňe gidiş zolakly" >
  <div class = "bar" style = " ini :   80 % " > </div>
</div>

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.

Internet Explorer 10 we Opera 12-den has irki wersiýalar animasiýalary goldamaýar.

Tekstiň mazmuny bilen birlikde çep ýa-da sag tarapdaky şekili görkezýän dürli görnüşli komponentleri gurmak üçin abstrakt obýekt stilleri (blog teswirleri, twitler we ş.m.).

Bellenen mysal

Adaty media media obýektini (suratlar, wideo, ses) mazmun blokynyň çep ýa-da sag tarapynda ýüzmäge mümkinçilik berýär.

Mediýa sözbaşy

Cras, gravida nulla-da amet nibh libero oturýar. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, wulputate vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. “Donec lacinia congue felis”.

Mediýa sözbaşy

Cras, gravida nulla-da amet nibh libero oturýar. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, wulputate vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. “Donec lacinia congue felis”.

Mediýa sözbaşy

Cras, gravida nulla-da amet nibh libero oturýar. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, wulputate vestibulum, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. “Donec lacinia congue felis”.

<div class = "media" > 
  <a class = "pull-left" href = "#"> _  
    <img class = "media-object" data-src = "holder.js / 64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-sözbaşy" > Mediýa sözbaşy </h4> 
    ...
 
    <! - Içerki media obýekti ->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Mediýa sanawy

Birneme goşmaça bellik bilen, sanawyň içindäki mediany ulanyp bilersiňiz (düşündiriş sapaklary ýa-da makalalaryň sanawy üçin peýdaly).

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#"> _  
      <img class = "media-object" data-src = "holder.js / 64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-sözbaşy" > Mediýa sözbaşy </h4> 
      ...
 
      <! - Içerki media obýekti ->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Guýular

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

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

Meýletin sapaklar

Iki sany goşmaça üýtgediji synpy bilen padding we tegelek burçlary dolandyryň.

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

<div class = "gowy-kiçi" > 
  ...
</div>

Nyşan ýapyň

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

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

href="#"iOS enjamy , labyr ulanmagy isleseňiz, basmak hadysalaryny talap edýär .

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

Kömekçi sapaklar

Kiçijik displeý ýa-da özüni alyp barşyň üýtgemegi üçin ýönekeý, gönükdirilen synplar.

Çep

Bir element galan

class = "çekmek-çep"

. çekmek - çep {
  ýüzmek : çep ;
}

sag-sag

Bir elementi dogry ýüzüň

class = "çekmek-sag"

. çekmek - sag {
  ýüzmek : sag ;
}

.Mut

Bir elementiň reňkini üýtgediň#999

class = "sessiz"

. sesini çykardy {
  reňk : # 999; 
}

.clearfix

floatIslendik elementi arassalaň

class = "clearfix"

. Clearfix {
  * ulaltmak : 1 ; 
  &: öň ,
  &: soň {
    görkezmek : tablisa ;
    mazmuny : "" ; 
  }
  &: soň {
    düşnükli : ikisi ;
  }
}