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ça derejeleri goşuň.

Menýulary deňleşdirmek

Açylýan menýuny saga deňleşdirmek üçin saga .pull-rightgoşuň ..dropdown-menu

<ul class = "dropdown-menu pull-right" rol = "menýu" aria-labelledby = "dLabel" >   
  ...
</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" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </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, ş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üň .

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

<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çylýan açyklyk 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 üýtgetmek üç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 etmek üçin, her tab üçin özboluşly ID bilen dörediň we gaplaň .tab-content.

Men 1-nji bölümde.

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

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

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

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>

Esasy gämi paneli

Başlamak üçin, gämi duralgalary statikdir (ýokarsyna kesgitlenmedi) we taslama ady we esasy nawigasiýa goldawyny öz içine alýar. .containerSahypaňyzyň we mazmunyňyzyň giňligini kesgitleýän birini islendik ý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 jaňdan çykýanlar 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şky 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>. Esasy “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>
 
      <! - Markany görkezmek isleseňiz, ş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 pluginini we Bootstrap CSS faýly talap edýär .

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 = "#"> 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 = "#"> Öňki </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> Öňki </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 = "pagination pagination-small" > 
  <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

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

Nyşanlar

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

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

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

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

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
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 komponent , 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 src = "https://placehold.it/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Eskizlerdäki adaty HTML mazmuny üçin bellik birneme üý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 src = "https://placehold.it/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üň .

Duýduryş! Iň gowusy özüňizi barlaň, gaty gowy görünmeýärsiňiz.

<div class = "duýduryş" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </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"> × </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" > × </button>

JavaScript arkaly duýduryşlary aýyryň

Duýduryşlary çalt we aňsat ýatyrmak üçin duýduryş jQuery pluginini ulanyň .

Görnüş

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

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" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </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

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. 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" > 
  <div class = "bar" style = " ini : 40 % " > </div>   
</div>
<div class = "öňegidişlik-duýduryş" > 
  <div class = "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>
<div class = "öňegidişlik-üstünlik ösüş-zolakly" > 
  <div class = "bar" style = " ini : 40 % " > </div>   
</div>
<div class = "öňegidişlik-duýduryş öňe gidiş zolakly" > 
  <div class = "bar" style = " ini : 60 % " > </div>   
</div>
<div 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 saga ýü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

<div class = "media" > 
  <a class = "pull-left" href = "#"> _  
    <img class = "media-object" src = "https://placehold.it/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).

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.

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.

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.

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

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#"> _  
      <img class = "media-object" src = "https://placehold.it/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ň.

Gör, men guýyda!

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

Meýletin sapaklar

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

Gör, men guýyda!

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

Gör, men guýyda!

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

iOS enjamlary, eger labyr ulanmagy isleseňiz, basmak hadysalary üçin href = "#" 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 ;
  }
}

Açylýan menýular

Mysal

Bellik

Görnüş

Menýulary deňleşdirmek

Aşakdaky menýular

Düwmeler toparlary

Mysallar

Buttoneke düwme topary

Birnäçe düwme toparlary

Dik düwme toparlary

Bellik gutusy we radio tagamlary

Düwme toparlarynda aşak gaçmalar

Düwme açylýan menýular

Gysgaça syn we mysallar

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

JavaScript talap edýär

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

Ölçegler

Açylýan menýular

Nav: tablar, dermanlar we sanawlar

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

Esasy goýmalar

Esasy dermanlar

Maýyp ýagdaý

Komponentleriň deňleşdirilmegi

Stackable

Toplanan goýmalar

Toplanan dermanlar

Açylýan ýerler

Açylýan bellikler

Açylýan dermanlar

Deňiz sanawlary

Mysal üçin nav sanawy

Gorizontal bölüjiler

Tablisa nav

Tablisa mysaly

Salgylarda ýitýär

JQuery pluginini talap edýär

Islendik ugur boýunça tablisa

Aşakdaky bellikler

Çep tarapdaky bellikler

Sag tarapdaky bellikler

Navbar

Esasy gämi paneli

Navbar komponentleri

Marka

Deňiz baglanyşyklary

Formalar

Gözleg formasy

Komponentleriň deňleşdirilmegi

Açylýan ýerleri ulanmak

Tekst

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

Topokarky

Aşakdan düzedildi

Statik ýokarky paneli

Jogapkärçilik paneli

Tersine üýtgeşiklik

Çörek bölekleri

Mysallar

Sahypa Mazmuny arkaly sahypalaşdyrmak üçin iki wariant

Adaty sahypa

Görnüş

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

Ölçegler

Deňleşdirmek

Pager

Bellenen mysal

Deňdirilen baglanyşyklar

Meýletin maýyp ýagdaý

Bellikler we nyşanlar

Bellikler

Nyşanlar

Tipografiki komponentler

Gahryman bölümi

Salam, dünýä!

Sahypanyň sözbaşy

Mysal sahypasynyň sözbaşy sözbaşy üçin subtekst

Suratlar Suratlar, wideolar, tekst we ş.m.