Elýeterli glifler

“Glyphicon Halflings” toplumyndan şrift görnüşinde 250-den gowrak glif öz içine alýar. “ Glyphicons Halflings” adatça mugt elýeterli däl, ýöne döredijisi olary “Bootstrap” -a mugt elýeterli etdi. Sag boluň, diňe mümkin boldugyça Glyfikonlara baglanyşyk goşmagyňyzy haýyş edýäris .

glifikon glifikon-ýyldyz ýyldyzy
glifikon glifikon-plýus
glifikon glifikon-ýewro
glifikon glifikon-ýewr
glifikon glifikon-minus
glifikon glifikon-bulut
glifikon glifikon-konwert
glifikon glifikon-galam
glifikon glifikon-aýna
glifikon glifikon-saz
glifikon gözleg
glifikon glifikon-ýürek
glifikon glifikon-ýyldyz
glifikon glifikon-ýyldyz boş
glifikon glifikon ulanyjy
glifikon glifikon-film
glifikon
glifikon glifikon-th
glifikon glifikon-sanaw
glifikon glifikon-ok
glifikon glifikon-aýyrmak
glifikon glifikon-ulaltmak
glifikon glifikon-ulaltmak
glifikon
glifikon glifikon-signal
glifikon glifikon-sogan
glifikon glifikon-zibil
glifikon glifikon öýi
glifikon glifikon faýly
glifikon glifikon wagty
glifikon glifikon-ýol
glifikon glifikon-göçürip almak-alt
glifikon glifikon-göçürip almak
glifikon glifikon-ýüklemek
glifikon glifikon gutusy
glifikon glifikon-oýnamak
glifikon glifikon-gaýtalamak
glifikon glifikon-täzeleme
glifikon glifikon-list-alt
glifikon glifikon-gulp
glifikon glifikon-baýdak
glifikon glifikon-nauşnikler
glifikon glifikon-göwrümli
glifikon glifikon-ses pesligi
glifikon glifikonyň göwrümi
glifikon glifikon-krkod
glifikon glifikon-ştrih-kod
glifikon glifikon belligi
glifikon glifikon bellikleri
glifikon glifikon-kitap
glifikon glifikon-bellik
glifikon glifikon-çap
glifikon glifikon-kamera
glifikon glifikon-şrift
glifikon
glifikon glifikon-çyzykly
glifikon glifikon-tekst beýikligi
glifikon glifikon-tekst giňligi
glifikon glifikon-tekiz-çep
glifikon glifikon-tekizlemek merkezi
glifikon glifikon-tekiz-sag
glifikon glifikon-tekizlemek-aklamak
glifikon glifikon sanawy
glifikon glifikon-indent-çep
glifikon glifikon-indent-sag
glifikon glifikon-facime-wideo
glifikon glifikon-surat
glifikon glifikon-karta marker
glifikon glifikon-sazlamak
glifikon glifikon-reňk
glifikon glifikon-redaktirlemek
glifikon glifikon-paý
glifikon glifikon-barlag
glifikon glifikon-hereket
glifikon glifikon-ädim yza
glifikon glifikon-çalt yza
glifikon glifikon-yza
glifikon glifikon-oýun
glifikon glifikon-pauza
glifikon glifikon-duralga
glifikon
glifikon glifikon-çalt öňe
glifikon glifikon-ädim öňe
glifikon glifikon-çykarmak
glifikon glifikon-şewron-çep
glifikon glifikon-şewron-sag
glifikon glifikon-plýus belgisi
glifikon glifikon-minus belgisi
glifikon glifikon-aýyrmak belgisi
glifikon glifikon-ok-belgi
glifikon glifikon-sorag belgisi
glifikon glifikon-maglumat belgisi
glifikon glifikon-skrinshot
glifikon glifikon-aýyrmak-tegelek
glifikon glifikon-ok-tegelek
glifikon glifikon-ban-tegelek
glifikon glifikon-ok-çep
glifikon glifikon-ok-sag
glifikon glifikon-ok
glifikon glifikon-ok-aşak
glifikon glifikon-paý-alt
glifikon glifikon-ölçegi doly
glifikon glifikon-ölçegi-kiçi
glifikon glifikon-ýüzlenme belgisi
glifikon glifikon-sowgat
glifikon glifikon ýapragy
glifikon glifikon oty
glifikon glifikon-göz açyk
glifikon glifikon-göz ýakyn
glifikon glifikon-duýduryş belgisi
glifikon glifikon-tekizlik
glifikon glifikon-senenama
glifikon glifikon-tötänleýin
glifikon glifikon-teswir
glifikon glifikon-magnit
glifikon glifikon-şewron-up
glifikon glifikon-şewron-aşak
glifikon glifikon-retweet
glifikon glifikon-söwda arabasy
glifikon glifikon-bukja ýakyn
glifikon glifikon bukjasy açyk
glifikon glifikon-ölçegi-dik
glifikon glifikon-ölçeg-keseligine
glifikon glifikon-hdd
glifikon glifikon-öküz şahy
glifikon glifikon-jaň
glifikon glifikon şahadatnamasy
glifikon glifikon-başam barmak
glifikon glifikon-barmak-aşak
glifikon el-sag
glifikon el-çep
glifikon glifikon
glifikon glifikon
glifikon glifikon-tegelek-ok-sag
glifikon glifikon-tegelek-ok-çep
glifikon glifikon-tegelek-ok
glifikon glifikon-tegelek-ok-aşak
glifikon glifikon-globus
glifikon glifikon-wena
glifikon glifikon-meseleler
glifikon glifikon-süzgüç
glifikon glifikon-portfel
glifikon glifikon-doly ekran
glifikon glifikon-dolandyryş paneli
glifikon glifikon-kagyz
glifikon glifikon-ýürek boş
glifikon glifikon-baglanyşyk
glifikon-telefon
glifikon glifikon-pushpin
glifikon glifikon-usd
glifikon glifikon-gbp
glifikon glifikon görnüşi
glifikon glifikon-tertip-elipbiý
glifikon glifikon-sort-by-elipbiý-alt
glifikon glifikon-tertip boýunça
glifikon glifikon-tertip-tertip-alt
glifikon glifikon-tertip-aýratynlyklar
glifikon glifikon-sort-by-atributlar-alt
glifikon glifikon barlanmadyk
glifikon glifikon-giňelmek
glifikon glifikon-ýykylmak
glifikon glifikon-çökmek
glifikon glifikon-giriş
glifikon glifikon-fleş
glifikon glifikondan çykmak
glifikon glifikon-täze penjire
glifikon glifikon ýazgysy
glifikon glifikony tygşytlamak
glifikon açyk
glifikon glifikon bilen tygşytlanýar
glifikon glifikon-import
glifikon glifikon-eksport
glifikon glifikon ibermek
glifikon glifikon-disket
glifikon glifikon-disketi tygşytlanýar
glifikon glifikon-disketi aýyrmak
glifikon glifikon-disketi tygşytlamak
glifikon glifikon-açyk
glifikon glifikon-kredit kartoçkasy
glifikon glifikon-geçiriş
glifikon glifikon-kesler
glifikon glifikon-sözbaşy
glifikon glifikon bilen gysylan
glifikon glifikon-nauşnik
glifikon glifikon-telefon-alt
glifikon glifikon diňi
glifikon glifikon-statistika
glifikon glifikon-sd-wideo
glifikon glifikon-hd-wideo
glifikon glifikon-subtitrler
glifikon glifikon-ses-stereo
glifikon glifikon-ses-dolbi
glifikon glifikon-ses-5-1
glifikon glifikon-ses-6-1
glifikon glifikon-ses-7-1
glifikon glifikon-awtorlyk hukugy belligi
glifikon glifikon-bellige alyş belligi
glifikon glifikon-bulut-göçürip almak
glifikon glifikon-bulut ýüklemek
glifikon glifikon-agaç-ýaprak
glifikon glifikon-agaç ýaprakly
glifikon glifikon-cd
glifikon glifikon-ýatda saklaýjy faýl
glifikon glifikon-açyk faýl
glifikon glifikon derejesi
glifikon glifikon-göçürme
glifikon glifikon-pasta
glifikon glifikon-duýduryş
glifikon glifikon-ekwalaýzer
glifikon glikon-şa
glifikon glifikon-şa aýal
glifikon lifon
glifikon glifikon-ýepiskop
glifikon glifikon-rysar
glifikon glifikon-çaga formulasy
glifikon glifikon-çadyr
glifikon glifikon-tagtasy
glifikon krowat
glifikon glikon-alma
glifikon glifikon-pozmak
glifikon glifikon-sagat aýna
glifikon glifikon-lampa
glifikon glifikon-dublikat
glifikon glifikon-doňuz banky
glifikon glifikon-gaýçy
glifikon glifikon-bitcoin
glifikon glifikon-btc
glifikon glifikon-xbt
glifikon glifikon-ýen
glifikon glifikon-jpy
glifikon glifikon-rubl
glifikon glifikon-rub
glifikon glikon masştaby
glifikon glifikon-buz-lolly
glifikon glifikon-buz-lolly tagamly
glifikon glifikon-bilim
glifikon glifikon-wariant-gorizontal
glifikon glifikon-wariant-dik
glifikon glifikon-menýu-gamburger
glifikon glifikon-modal-penjire
glifikon glifikon-ýag
glifikon glifikon-däne
glifikon glifikon-äýnek
glifikon glifikon-tekst ululygy
glifikon glifikon-tekst-reňk
glifikon glifikon-tekst-fon
glifikon glifikon-obýekt-align-top
glifikon glifikon-obýekt-tekizlemek-aşagy
glifikon glifikon-obýekt-tekiz-kesel
glifikon glifikon-obýekt-tekiz-çep
glifikon glifikon-obýekt-tekiz-dik
glifikon glifikon-obýekt-deňlemek-sag
glifikon glifikon-üçburç-sag
glifikon glifikon-üçburç-çep
glifikon glifikon-üçburçluk-aşaky
glifikon glifikon-üçburçluk-ýokarky
glifikon glifikon-konsol
glifikon glifikon-superscript
glifikon glifikon-abuna
glifikon glifikon-menýu-çep
glifikon glifikon-menýu-sag
glifikon glifikon-menýu-aşak
glifikon glifikon-menýu-up

Nähili ulanmak

Iş öndürijiligi sebäpli, ähli nyşanlaryň esasy synpy we aýratyn nyşan synpy talap edilýär. Ulanmak üçin aşakdaky kody islendik ýere ýerleşdiriň. Dogry ýerleşdirmek üçin nyşan bilen tekstiň arasynda boş ýer goýuň.

Beýleki komponentler bilen garyşmaň

Nyşan synplaryny beýleki komponentler bilen gönüden-göni birleşdirip bolmaz. Olary şol bir elementdäki beýleki synplar bilen bilelikde ulanmaly däl. Munuň ýerine, höwürtge goşuň <span>we nyşan synplaryny ulanyň <span>.

Diňe boş elementlerde ulanmak üçin

Nyşan sapaklary diňe tekst mazmuny bolmadyk we çaga elementleri bolmadyk elementlerde ulanylmaly.

Nyşan şriftiniň ýerini üýtgetmek

../fonts/“Bootstrap”, nyşan şrift faýllarynyň düzülen CSS faýllaryna garanyňda katalogda ýerleşjekdigini çaklaýar . Şol şrift faýllaryny üýtgetmek ýa-da adyny üýtgetmek CSS-ni üç usulyň birinde täzelemegi aňladýar:

@icon-font-pathÇeşmedäki we / ýa-da @icon-font-nameüýtgeýjileri az faýllary üýtgediň .
Has az düzüjiniň beren URL -lerini ulanyň .
url()Toplanan CSS- de ýollary üýtgediň .

Developmentörite ösüş gurnamaňyza laýyk gelýän islendik warianty ulanyň.

Elýeterli nyşanlar

Kömekçi tehnologiýalaryň häzirki zaman wersiýalary CSS-iň döreden mazmunyny, şeýle hem ýörite icunikod nyşanlaryny yglan eder. Ekranyň okyjylarynda meýilleşdirilmedik we bulaşyk çykyşlardan gaça durmak üçin (esasanam nyşanlar diňe bezeg üçin ulanylanda), olary aria-hidden="true"atribut bilen gizleýäris.

Manysyny bermek üçin nyşan ulanýan bolsaňyz (diňe bezeg elementi hökmünde däl), bu manynyň kömekçi tehnologiýalara-da ýetirilendigine göz ýetiriň - mysal üçin .sr-onlysynp bilen wizual gizlenen goşmaça mazmuny goşuň.

Başga teksti bolmadyk dolandyryş elementlerini döredýän bolsaňyz (meselem <button>, diňe nyşany öz içine alýan), dolandyryşyň maksadyny kesgitlemek üçin elmydama alternatiw mazmun bermeli, bu kömekçi tehnologiýalary ulanýanlara manyly bolar. aria-labelBu ýagdaýda dolandyryşyň özüne bir atribut goşup bilersiňiz .

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Mysallar

Gurallar paneli, nawigasiýa ýa-da deslapky görnüş girişleri üçin düwmelerde, düwme toparlarynda ulanyň.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Duýduryşda säwlik habaryny bermek üçin ulanylýan nyşan .sr-only, kömekçi tehnologiýalary ulanyjylara bu habary bermek üçin goşmaça tekst bilen.

Dogry e-poçta salgysyny giriziň

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

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

Mysal

Açylýan düwmäni we açylýan menýuny .dropdownýa-da yglan edýän başga bir elementi örtüň position: relative;. Soňra menýu HTML-i goşuň.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

.dropupAçylýan menýular ene-atany goşmak bilen ýokaryk (aşak däl-de) giňeltmek üçin üýtgedilip bilner .

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Deňleşdirmek

Düzgüne görä, açylýan menýu awtomatiki usulda ýokardan we ene-atasynyň çep tarapynda 100% ýerleşdirilýär. Açylýan menýuny saga deňleşdirmek üçin saga .dropdown-menu-rightgoşuň ..dropdown-menu

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Sözbaşylar

Islendik açylýan menýuda hereketleriň bölümlerini bellemek üçin sözbaşy goşuň.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Bölüniji

Açylýan menýuda baglanyşyklaryň hataryna bölüji goşuň.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Menýu elementleri ýapyk

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Düwmeleriň toparyny bir setirde bir topar düwmäni toparlaň. Düwmelerimiziň pluginleri bilen goşmaça JavaScript radio we bellik gutusynyň stilini goşuň .

Düwmeler toparlaryndaky gurallar we açyjylar ýörite sazlamany talap edýär

A içindäki elementlerde gurallar ýa-da açarlary ulananyňyzda .btn-group, islenmeýän zyýanly täsirlerden gaça durmak üçin opsiýany görkezmeli bolarsyňyz container: 'body'(meselem, gural giňelýär we / ýa-da gural görkezijisi ýa-da açylanda tegelek burçlaryny ýitirýär).

Dogrydygyna göz ýetiriň `role`we bellik beriň

Ekranyň okyjylary ýaly kömekçi tehnologiýalaryň bir topar düwmäniň toparlanandygyny habar bermek üçin degişli roleatribut berilmelidir. Düwme toparlary üçin bu bolar role="group", gurallar panelinde a bolmaly role="toolbar".

Bir kadadan çykma, diňe bir gözegçiligi öz içine alýan toparlar (mysal üçin elementler bilen esaslandyrylan düwme toparlary ) ýa-da aşak gaçma.<button>

Mundan başga-da, toparlara we gurallar paneline aç-açan bellik berilmelidir, sebäbi dogry roleatributyň bardygyna garamazdan, kömekçi tehnologiýalaryň köpüsi olary yglan etmez. Bu ýerde getirilen mysallarda ulanýarys aria-label, ýöne alternatiwalar aria-labelledbyhem ulanylyp bilner.

Esasy mysal

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

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

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

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

Ölçeg

Topardaky her düwmä düwme ölçeg synplaryny ulanmagyň ýerine, .btn-group-*hersine goşuň .btn-group, şol sanda birnäçe topara höwürtge goşanyňyzda.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Höwürtge

Birnäçe düwmeler bilen garylan açylan menýulary isläniňizde .btn-groupbaşga biriniň içine goýuň ..btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Dik üýtgeşiklik

Düwmeleriň toplumyny keseligine däl-de, dikligine ýerleşdiriň. Bölünmek düwmesiniň açylmagy bu ýerde goldanylmaýar.

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

Dogry düwme toparlary

Ene-atasynyň ähli giňligini aýlamak üçin düwmeler toparyny deň ölçegde uzadyň. Şeýle hem düwme toparyndaky düwmeleriň açylmagy bilen işleýär.

Serhetleri dolandyrmak

Düwmeleri (ýagny) aklamak üçin ulanylýan ýörite HTML we CSS sebäpli display: table-cellolaryň arasyndaky serhetler iki esse artýar. Adaty düwme toparlarynda margin-left: -1pxserhetleri aýyrmagyň ýerine serhetleri düzmek üçin ulanylýar. Şeýle-de bolsa, marginişlemeýär display: table-cell. Netijede, “Bootstrap” -daky aýratynlyklaryňyza baglylykda serhetleri aýyrmak ýa-da reňklemek isläp bilersiňiz.

IE8 we serhetler

<a>Internet Explorer 8, açyk ýa- da <button>elementlere garamazdan, dogry düwme toparyndaky düwmelerde serhet görkezmeýär . Bu meseläni çözmek üçin her düwmäni başga birine örtüň .btn-group.

Has giňişleýin maglumat üçin # 12476 serediň .

`<a>`Elementler bilen

Diňe bir topar .btns .btn-group.btn-group-justified.

Çep Orta Dogry

Çep Orta

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Düwmeler hökmünde hereket edýän baglanyşyklar

Elementler düwmeler hökmünde hereket etmek üçin <a>ulanylsa - häzirki sahypadaky başga bir resminama ýa-da bölüme geçmegiň ýerine, sahypanyň işlemegine itergi berýän bolsa - olara degişli hem berilmelidir role="button".

`<button>`Elementler bilen

<button>Elementler bilen esaslandyrylan düwme toparlaryny ulanmak üçin her düwmäni bir düwme toparyna dolamaly . Brauzerleriň köpüsi elementleri aklamak üçin CSS-ni dogry ulanmaýarlar <button>, ýöne düwmäniň açylmagyny goldaýandygymyz sebäpli, bu meselede işläp bileris.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

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

Plugine baglylyk

Düwmeleriň açylmagy, açylýan plaginiň Bootstrap wersiýaňyza goşulmagyny talap edýär .

Buttoneke düwme

Esasy bellik üýtgeşmeleri bilen düwmäni aşak açylýan ýere öwüriň.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

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

Şonuň ýaly-da, diňe aýratyn düwme bilen birmeňzeş bellik üýtgeşmeleri bilen bölünen düwmäni açyň.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Ölçeg

Düwmeleriň açylmagy ähli ululykdaky düwmeler bilen işleýär.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Damjanyň üýtgemegi

.dropupEne-atany goşmak bilen elementleriň üstündäki açylan menýulary işlediň .

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Islendik tekste esaslanýan, soň ýa-da iki tarapynda tekst ýa-da düwmeler goşmak bilen forma dolandyryşlaryny giňeldiň <input>. .input-groupBir elementi goşmak ýa- .input-group-addonda goşmak üçin ulanyň ..input-group-btn.form-control

Diňe tekst `<input>`s

Bu ýerde elementleri ulanmakdan gaça duruň, <select>sebäbi olar WebKit brauzerlerinde doly ýazylyp bilinmez.

<textarea>Bu ýerde elementleri ulanmakdan gaça duruň, sebäbi rowskäbir ýagdaýlarda olaryň häsiýeti hormatlanmaz.

Giriş toparlaryndaky gurallar we açyjylar ýörite sazlamany talap edýär

Içindäki elementlerde gurallar ýa-da açarlary ulananyňyzda , islenilmeýän täsirlerden gaça durmak .input-groupüçin opsiýany görkezmeli bolarsyňyz (meselem, elementiň has giňelmegi we / ýa-da gural görkezijisi ýa-da açylanda tegelek burçlaryny ýitirmek).container: 'body'

Beýleki komponentler bilen garyşmaň

Forma toparlaryny ýa-da gözenek sütün synplaryny göni giriş toparlary bilen garyşdyrmaň. Muňa derek, giriş toparyny forma toparynyň ýa-da gözenegiň elementiniň içinde höwürtge dörediň.

Elmydama bellikleri goşuň

Her giriş üçin bellik goşmasaňyz, ekran okyjylary formalaryňyzda kynçylyk çekerler. Bu giriş toparlary üçin islendik goşmaça belligiň ýa-da işlemegiň kömekçi tehnologiýalara ýetirilendigine göz ýetiriň.

Ulanyljak takyk tehnika (görünýän <label>elementler, synpy <label>ulanyp gizlenýän elementler , ýa-da , ýa - da atributyň ulanylmagy) we haýsy goşmaça maglumat berilmelidigi, ýerine ýetirýän interfeýs widjetiniň takyk görnüşine görä üýtgeýär. Bu bölümdäki mysallar teklip edilen, mysal üçin birnäçe çemeleşmäni üpjün edýär..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

Esasy mysal

Girişiň iki gapdalynda bir goşmaçany ýa-da düwmäni goýuň. Girişiň iki gapdalynda hem ýerleşdirip bilersiňiz.

Bir tarapda birnäçe goşmaçalary ( .input-group-addonýa -da) goldamaýarys ..input-group-btn

Bir giriş toparynda birnäçe forma dolandyryşlaryny goldamaýarys.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Ölçeg

Özüne deňeşdirilen forma ölçeg synplaryny goşuň .input-groupwe içindäki mazmun awtomatiki usulda üýtgär - her elementde forma gözegçilik ölçeg synplaryny gaýtalamagyň zerurlygy ýok.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Bellikler we radio goşundylary

Islendik bellik gutusyny ýa-da radio opsiýasyny tekstiň ýerine giriş toparynyň goşmaçasynyň içinde goýuň.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Düwme düwmeleri

Giriş toparlaryndaky düwmeler birneme üýtgeşik we bir goşmaça höwürtge talap edýär. Munuň ýerine düwmeleri dolamak .input-group-addonüçin ulanmaly bolarsyňyz . .input-group-btnBu, ýazylyp bilinmeýän brauzer stilleri sebäpli talap edilýär.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Açylýan düwmeler

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Bölünen düwmeler

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Birnäçe düwme

Her tarapa diňe bir goşmaçasy bolup bilse-de, biriniň içinde birnäçe düwme bolup biler .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

“Bootstrap” -da bar bolan deňiz güýçleri, esasy .navsynpdan başlap, umumy ýagdaýlardan başlap umumy bellikleri paýlaşdy. Her stiliň arasynda geçmek üçin üýtgediji synplary çalyşyň.

Salgy panelleri üçin nav ulanmak JavaScript goýmalarynyň pluginini talap edýär

Salgylanýan ýerler bolan bellikler üçin, JavaScript pluginini ulanmaly . Bellik goşmaça rolewe ARIA atributlaryny hem talap eder - has giňişleýin maglumat üçin pluginiň mysal belligine serediň.

Nawigasiýa hökmünde ulanylýan deňiz gämilerini elýeterli ediň

Nawigasiýa zolagyny üpjün etmek üçin deňiz gämilerini ulanýan bolsaňyz role="navigation", iň logiki ene konteýnerine goşuň <ul>ýa-da <nav>tutuş nawigasiýa elementini gurşap alyň. Roly özüne goşmaň <ul>, sebäbi bu kömekçi tehnologiýalar arkaly hakyky sanaw hökmünde yglan edilmeginiň öňüni alar.

Salgylar

.nav-tabsSynpyň esasy synpy talap edýändigine üns beriň .nav.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Dermanlar

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

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Dermanlar hem dikligine saklanýar. Diňe goşuň .nav-stacked.

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

Dogry

Tablisa ýa-da tabletkalary 768px-den has giň ekranlarda ene-atasynyň deň giňligini ýasamak .nav-justified. Has kiçi ekranlarda deňiz baglanyşyklary ýerleşdirilen.

Dogry navbar nav baglanyşyklary häzirki wagtda goldanylmaýar.

Safari we jogap beriji esasly deňizler

V9.1.2 ýagdaýyna görä, Safari brauzeriňizi keseligine üýtgetmek, täzelenenden soň arassalanan esaslandyrylan deňizde ýalňyşlyklaryň ýüze çykmagyna sebäp bolýan näsazlygy görkezýär. Bu näsazlyk esaslandyrylan nav mysalynda hem görkezilýär .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Öçürilen baglanyşyklar

Islendik bir komponent üçin (goýmalar ýa-da dermanlar) çal baglanyşyklary goşuň we hiç hili täsir.disabled etmez .

Baglanyşyň işleýşi täsir etmeýär

Bu synp diňe <a>işleýşini däl-de, daşky görnüşini üýtgeder. Bu ýerdäki baglanyşyklary öçürmek üçin ýörite JavaScript ulanyň.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Açylýan ýerleri ulanmak

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 role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Açylýan dermanlar

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navbars, programmaňyz ýa-da sahypaňyz üçin nawigasiýa sözbaşylary bolup hyzmat edýän meta komponentleridir. Jübi görnüşlerinde ýykylyp başlaýar (we üýtgedip bolýar) we elýeterli görnüşiň giňligi artdygyça keseligine öwrülýär.

Dogry navbar nav baglanyşyklary häzirki wagtda goldanylmaýar.

Artýan mazmun

“Bootstrap” deňiz paneliňizdäki mazmunyň näçeräk ýer talap edýändigini bilmeýändigi sebäpli, ikinji hatara mazmuny goşmak bilen baglanyşykly meselelere baş goşup bilersiňiz. Bu meseläni çözmek üçin edip bilersiňiz:

Nawbar elementleriniň mukdaryny ýa-da inini azaltmak.
Duýgur peýdaly sapaklary ulanyp, belli bir ululykdaky elementleri gizläň .
Navoluňyzyň ýykylan we keseligine re betweenimiň arasynda geçýän nokadyny üýtgediň. Üýtgeýjini sazlaň @grid-float-breakpointýa-da öz media talapyňyzy goşuň.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Nawbar markasyny teksti çalşyp, öz suratyňyz bilen çalyşyň <img>. Özüniň örtügi we beýikligi bolansoň .navbar-brand, suratyňyza baglylykda käbir CSS-leri ýok etmeli bolmagyňyz mümkin.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

.navbar-formDüz dikligine deňleşdirmek we dar görnüşdäki çöken hereketler üçin forma mazmunyny ýerleşdiriň . Deňiz paneliniň mazmunynyň nirede ýerleşýändigini kesgitlemek üçin deňleşdiriş opsiýalaryny ulanyň.

Başlyk hökmünde .navbar-formkodunyň köp bölegini .form-inlinemixin bilen paýlaşýar. Käbir forma dolandyryşlary, giriş toparlary ýaly, deňiz panelinde dogry görkezilmegi üçin kesgitli giňlikleri talap edip biler.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Elmydama bellikleri goşuň

Her giriş üçin bellik goşmasaňyz, ekran okyjylary formalaryňyzda kynçylyk çekerler. .sr-onlyBu içerki görnüşler üçin ýazgylary synpy ulanyp gizläp bilersiňiz . aria-labelKömekçi tehnologiýalar üçin bellik bermek ýa - aria-labelledbyda titleatribut ýaly başga alternatiw usullar bar . Bularyň hiç biri ýok bolsa, ekran okyjylary bar bolsa, placeholderatributdan peýdalanyp bilerler, ýöne bellik placeholderetmegiň beýleki usullaryny çalyşmak hökmünde ulanmak maslahat berilmeýändigini ýadyňyzdan çykarmaň.

Deňiz panelinde dikligine merkezleşdirmek üçin .navbar-btnsynpy <button>ýaşamaýan elementlere goşuň .<form>

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

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

<p class="navbar-text">Signed in as Mark Otto</p>

Adaty nawigasiýa nawigasiýa komponentiniň içinde bolmadyk adaty baglanyşyklary ulanýan adamlar .navbar-linküçin, adaty we ters deňiz paneli opsiýalary üçin laýyk reňk goşmak üçin synpy ulanyň.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Naw baglanyşyklaryny, formalaryny, düwmelerini ýa-da tekstini peýdaly .navbar-leftýa-da .navbar-rightpeýdaly synplary deňleşdiriň. Iki synp hem görkezilen ugurda CSS ýüzüşini goşar. Mysal üçin, deňiz baglanyşyklaryny deňleşdirmek üçin <ul>ulanylýan degişli peýdaly synp bilen aýratyn goýuň.

Bu synplar garyşyk görnüşli .pull-leftwe .pull-right, ýöne enjam ölçeglerinde deňiz paneli komponentlerini has aňsat işlemek üçin media soraglaryna berilýär.

Orta ýa-da pad navbar mazmunyny goşuň .navbar-fixed-topwe goşuň..container.container-fluid

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

Beden ýassygy zerur

paddingKesgitli deňiz paneli , ýokarsyna goşmasaňyz, beýleki mazmunyňyzy örter <body>. Öz gymmatlyklaryňyzy synap görüň ýa-da aşakdaky parçamyzy ulanyň. Maslahat: Düzgüne görä, deňiz paneli 50px beýikdir.

body { padding-top: 70px; }

“Bootstrap CSS” -den soň muny goşuň.

Orta ýa-da pad navbar mazmunyny goşuň .navbar-fixed-bottomwe goşuň..container.container-fluid

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

Beden ýassygy zerur

paddingKesgitli deňiz paneli , aşagyna goşmasaňyz, beýleki mazmunyňyzy örter <body>. Öz gymmatlyklaryňyzy synap görüň ýa-da aşakdaky parçamyzy ulanyň. Maslahat: Düzgüne görä, deňiz paneli 50px beýikdir.

body { padding-bottom: 70px; }

“Bootstrap CSS” -den soň muny goşuň.

Doly giňlikdäki navbar dörediň, sahypa ýa-da merkezi we pad navbar mazmunyny goşmak .navbar-static-topwe goşmak bilen sahypa bilen aýlanýar..container.container-fluid

Sapaklardan tapawutlylykda, .navbar-fixed-*üstünde haýsydyr bir padding üýtgetmegiň zerurlygy ýok body.

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

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

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

Çörek bölekleri

Nawigasiýa iýerarhiýasynyň içinde häzirki sahypanyň ýerleşişini görkeziň.

Aýryjylar CSS-de awtomatiki usulda :beforewe content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Sahypa

Sahypaňyz ýa-da programmaňyz üçin köp sahypaly sahypa sahypasy ýa-da has ýönekeý peýjer alternatiwasy bilen sahypa baglanyşyklaryny beriň .

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Sahypanyň komponentini bellemek

Sahypa komponenti, <nav>okyjylary we beýleki kömekçi tehnologiýalary ekranlaşdyrmak üçin nawigasiýa bölümi hökmünde kesgitlemek üçin bir element bilen örtülmelidir. Mundan başga-da, sahypada eýýäm birden köp nawigasiýa bölüminiň bolmagy ähtimal (sözbaşydaky esasy nawigasiýa ýa-da gapdal nawigasiýa ýaly), maksadyny görkezýän beýany aria-labelbermek maslahat berilýär. <nav>Mysal üçin, gözleg netijeleriniň toplumynyň arasynda gezmek üçin sahypa sahypasy ulanylsa, degişli bellik bolup biler aria-label="Search results pages".

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

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

<span>Göz öňünde tutulan stilleri saklamak bilen basmak funksiýasyny aýyrmak üçin işjeň ýa-da ýapyk labyrlary çalyşmagy ýa-da öňki / indiki oklar bolan ýagdaýynda labyry taşlamagyňyzy maslahat berýäris .

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Ölçeg

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

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

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.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Deňdirilen baglanyşyklar

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Meýletin maýyp ýagdaý

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Mysal

Täze sözbaşy

<h3>Example heading <span class="label label-default">New</span></h3>

Elýeterli üýtgeşiklikler

Etiketkanyň daşky görnüşini üýtgetmek üçin aşakda görkezilen üýtgediji synplaryň islendigini goşuň.

Bellenen başlangyç üstünlik barada duýduryş howpy

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Birnäçe tonna ýazgy barmy?

Dar konteýneriň içinde hersiniň öz inline-blockelementini (nyşan ýaly) öz içine alýan onlarça ýazgy ýazgylary bar bolsa, hödürlemek meselesi ýüze çykyp biler. Munuň ýoly düzülýär display: inline-block;. Kontekst we mysal üçin # 13219 serediň .

<span class="badge">Salgylara, “Bootstrap navs” we ş.m. goşmak arkaly täze ýa-da okalmadyk zatlary aňsatlyk bilen tapawutlandyryň .

Gelýän bukja42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Öz-özüňi ýykmak

:emptyTäze ýa-da okalmadyk zatlar ýok bolanda, içerde mazmun ýok bolsa, nyşanlar ýykylar (CSS saýlaýjysynyň üsti bilen ).

Brauzeriň gabat gelmegi

Nyşanlar Internet Explorer 8-de öz-özünden ýykylmaz, sebäbi :emptysaýlaýjy üçin goldaw ýok.

Işjeň deňiz ýagdaýlaryna uýgunlaşýar

Gurlan stiller, nyşanlary nawigasiýa nawigasiýalarynda işjeň ýagdaýlara ýerleşdirmek üçin girizilýär.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Sahypaňyzdaky möhüm mazmuny görkezmek üçin ähli görnüşi giňeldip bilýän ýeňil, çeýe komponent.

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="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

“Jumbotron” -yň doly giňligini we tegelek burçlary bolmazdan, ony ähli .containersleriň daşynda goýuň we ýerine içini goşuň .container.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

h1Bir sahypadaky mazmun bölümlerini ýerlikli ýerleşdirmek üçin ýönekeý gabyk . Beýleki komponentleriň köpüsi ýaly (goşmaça stiller bilen) h1deslapky elementi ulanyp biler .small

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Suratlaryň, wideolaryň, tekstiň we başgalaryň gözeneklerini aňsatlyk bilen görkezmek üçin “Bootstrap” gözenek ulgamyny kiçijik komponent bilen giňeldiň.

Dürli beýiklikdäki we / ýa-da giňlikdäki kiçijik suratlaryň Pinterest ýaly görkezilişini gözleýän bolsaňyz, Masonry , Isotope ýa-da Salvattore ýaly üçünji tarap pluginini ulanmaly bolarsyňyz .

Bellenen mysal

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Omörite mazmun

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.

Düwme Düwme

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.

Düwme Düwme

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.

Düwme Düwme

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Elýeterli we çeýe duýduryş habarlary bilen adaty ulanyjy hereketleri üçin kontekstli jogap habarlaryny beriň.

Mysallar

Esasy duýduryş habarlary üçin islendik teksti we islege bagly işden aýyrmak düwmesini .alertwe dört kontekst synpyň birine (meselem ) ýapyň..alert-success

Bellenen synp ýok

Duýduryşlarda başlangyç synplar ýok, diňe esasy we üýtgediji synplar bar. Adaty çal duýduryş kän bir many bermeýär, şonuň üçin bir görnüşi kontekst synpy arkaly görkezmeli. Üstünlikden, maglumatdan, duýduryşdan ýa-da howpdan saýlaň.

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

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

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

Aý, gysga! Birnäçe zady üýtgediň we täzeden tabşyrmaga synanyşyň.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Bölünip bilinmeýän duýduryşlar

.alert-dismissibleIslege görä we ýapmak düwmesini goşup, islendik duýduryşda guruň .

JavaScript duýduryş plaginini talap edýär

Doly işlemek, işden çykarylýan duýduryşlar üçin duýduryşlary JavaScript pluginini ulanmaly .

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

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Deviceshli enjamlarda dogry hereket etmegi üpjün ediň

<button>Elementi data-dismiss="alert"maglumat atributy bilen ulanmagy unutmaň .

Duýduryşlardaky baglanyşyklar

.alert-linkIslendik duýduryşyň içinde gabat gelýän reňkli baglanyşyklary çalt üpjün etmek üçin peýdaly synpy ulanyň .

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

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

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

Aý, gysga! Birnäçe zady üýtgediň we täzeden tabşyrmaga synanyşyň.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Simpleönekeý, ýöne çeýe ösüş çyzgylary bilen iş prosesiniň ýa-da hereketiň gidişi barada iň täze pikirleri beriň.

Brauzeriň gabat gelmegi

Ösüş barlary, käbir täsirlerine ýetmek üçin CSS3 geçişlerini we animasiýalaryny ulanýarlar. Bu aýratynlyklar Internet Explorer 9-da we Firefox-yň aşaky ýa-da köne wersiýalarynda goldanylmaýar. Opera 12 animasiýalary goldamaýar.

Mazmun howpsuzlygy syýasaty (CSP) utgaşyklygy

Web sahypaňyzda Mazmun Howpsuzlyk Syýasaty (CSP) bar bolsa , aşakdaky mysallarda görkezilişi ýaly ösüş çyzgylarynyň giňligini kesgitlemek style-src 'unsafe-inline'üçin içerki atributlary ulanyp bilmersiňiz . styleGaty CSP-lere laýyk gelýän giňlikleri kesgitlemegiň alternatiw usullary, birneme adaty JavaScript (sazlaýar element.style.width) ýa-da ýörite CSS synplaryny ulanmagy öz içine alýar.

Esasy mysal

Bellenen öňegidişlik paneli.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Bellik bilen

Görünýän göterimi görkezmek üçin öňegidişlik setirinden synpy <span>aýyryň ..sr-only

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Etiketkanyň tekstiniň hatda pes göterimlerde-de düşnükli bolmagyny üpjün etmek üçin min-widthöňegidişlik setirine goşmagy göz öňünde tutuň.

0%

2%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Kontekst alternatiwalary

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

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Zolakly

Zolakly effekt döretmek üçin gradient ulanýar. IE9 we aşakda ýok.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animasiýa

Zolaklary sagdan çepe janlandyrmak üçin .activegoşuň . .progress-bar-stripedIE9 we aşakda ýok.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Toplanan

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

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

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 metbugat

Adaty media mazmun blokynyň çep ýa-da sag tarapynda media obýektini (suratlar, wideo, ses) görkezýä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”.

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.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Sapaklar .pull-lefthem .pull-rightbar, öňem media komponentiniň bir bölegi hökmünde ulanylýardy, ýöne v3.3.0 ulanylyşy üçin köneldi. Olar takmynan ekwiwalentdir .media-leftwe html- .media-rightden .media-rightsoň goýulmalydygyna garamazdan..media-body

Mediýa deňleşdirmesi

Suratlar ýa-da beýleki metbugat ýokarky, orta ýa-da aşaky hatara düzülip bilner. Dymmaklyk ýokarky hatara düzüldi.

Iň ýokary tertipli metbugat

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur gülkünç mus.

Orta deňleşdirilen metbugat

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur gülkünç mus.

Aşakda deňleşdirilen metbugat

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur gülkünç mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </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.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Sanaw toparlary diňe bir ýönekeý elementleriň sanawlaryny däl, eýsem aýratyn mazmuny bolan çylşyrymly toparlary görkezmek üçin çeýe we güýçli komponentdir.

Esasy mysal

Iň esasy sanaw topary, sanaw elementleri we degişli synplar bilen tertipsiz sanaw. Ondan soňky saýlawlar ýa-da zerur bolanda öz CSS-leriňiz bilen guruň.

Cras justo odio
Dapibus ac facilisis
Morbi leo risus
Porta ac consectetur ac
Erosda westibulum

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Nyşanlar

Belgi komponentini islendik sanaw topary elementine goşuň we awtomatiki usulda sagda ýerleşer.

14Cras justo odio
2Dapibus ac facilisis
1Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Baglanan zatlar

Sanaw toparlarynyň elementlerini sanaw elementleriniň ýerine labyr bellikleri bilen baglanyşdyryň (bu hem <div>ýerine ene-atany aňladýar <ul>). Her elementiň töwereginde aýratyn ene-atalara zerurlyk ýok.

Cras justo odio Dapibus ac facilisis Morbi leo risus Porta ac consectetur ac Erosda westibulum

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Düwme elementleri

Sanaw toparlarynyň elementleri sanaw elementleriniň ýerine düwmeler bolup biler (bu hem <div>ýerine ene-atany aňladýar <ul>). Her elementiň töwereginde aýratyn ene-atalara zerurlyk ýok. Bu ýerde adaty sapaklary ulanmaň ..btn

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Öçürilen zatlar

Maýyp görünmek üçin çal reňk .disabledgoşuň ..list-group-item

Cras justo odio Dapibus ac facilisis Morbi leo risus Porta ac consectetur ac Erosda westibulum

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Kontekst sapaklary

Düzülen ýa-da baglanyşdyrylan sanaw sanaw elementleri üçin kontekst sapaklaryny ulanyň. Şeýle hem .activedöwleti öz içine alýar.

Dapibus ac facilisis
Cras oturýar
Porta ac consectetur ac
Erosda westibulum

Dapibus ac facilisis Cras oturýar Porta ac consectetur ac Erosda westibulum

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Omörite mazmun

Aşakdaky ýaly baglanyşdyrylan sanaw toparlary üçin hatda islendik HTML goşuň.

Topar elementiniň sözbaşysyny sanaň

Donec id elit metus-da mi porta gravida. Maecenas sed diam eget risus varius blandit.

Topar elementiniň sözbaşysyny sanaň

Donec id elit metus-da mi porta gravida. Maecenas sed diam eget risus varius blandit.

Topar elementiniň sözbaşysyny sanaň

Donec id elit metus-da mi porta gravida. Maecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Elmydama zerur bolmasa-da, käwagt DOM-yňyzy bir gutujyga salmaly bolarsyňyz. Şol ýagdaýlar üçin panel komponentini synap görüň.

Esasy mysal

Düzgüne .panelgörä, käbir zatlar käbir mazmuny saklamak üçin esasy serhet we padding ulanylýar.

Esasy panel mysaly

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Sözbaşyly panel

Paneliňize aňsatlyk bilen sözbaşy goşuň .panel-heading. <h1>Mundan başga - da, öňünden düzülen sözbaşy goşmak <h6>üçin islendik .panel-titlesynpy goşup bilersiňiz. Şeýle-de bolsa, şriftiň ululyklary <h1>- <h6>ýokaşdyrylýar .panel-heading.

Baglanyşygyň dogry reňklenmegi üçin baglanyşyklary sözbaşylara ýerleşdiriň .panel-title.

Paneliň ady

Paneliň mazmuny

Paneliň ady

Paneliň mazmuny

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Aşakdaky ýazgy

Düwmeleri ýa-da ikinji derejeli teksti örtüň .panel-footer. Panel aşaky sözbaşylar kontekst üýtgeýişleri ulananyňyzda reňkleri we serhetleri miras almaýandyklaryna üns beriň, sebäbi olar birinji hatarda bolmaly däl .

Paneliň mazmuny

Paneliň aşagy

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Kontekst alternatiwalary

Beýleki komponentler ýaly, kontekstdäki döwlet synplarynyň islendik birini goşup, belli bir kontekst üçin paneli aňsatlaşdyryň.

Paneliň ady

Paneliň mazmuny

Paneliň ady

Paneliň mazmuny

Paneliň ady

Paneliň mazmuny

Paneliň ady

Paneliň mazmuny

Paneliň ady

Paneliň mazmuny

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Tablisa bilen

.tableDüşnüksiz dizaýn üçin paneliň içinde serhetsiz goşuň . Eger bar bolsa, .panel-bodyaýralyk üçin stoluň ýokarsyna goşmaça serhet goşýarys.

Paneliň sözbaşy

Bu ýerde käbir deslapky panel mazmuny. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies ulag serişdesi.

#	Ady	Familiýasy	Ulanyjy ady
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Panel korpusy ýok bolsa, komponent panel sözbaşysyndan stola bökdençsiz geçýär.

Paneliň sözbaşy

#	Ady	Familiýasy	Ulanyjy ady
1	Bellik	Otto	@mdo
2	Jacobakup	Thornton	@fat
3	Larry	guş	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Sanaw toparlary bilen

Islendik paneliň içinde doly giňlikdäki sanaw toparlaryny aňsatlyk bilen goşuň.

Paneliň sözbaşy

Bu ýerde käbir deslapky panel mazmuny. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies ulag serişdesi.

Cras justo odio
Dapibus ac facilisis
Morbi leo risus
Porta ac consectetur ac
Erosda westibulum

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Brauzerlere islendik enjamda dogry ölçeljek içerki gatnaşygy döredip, öz blokynyň giňligine baglylykda wideo ýa-da slaýdşow ölçeglerini kesgitlemäge rugsat beriň.

<iframe>Düzgünler ,, we elementlere gönüden <embed>- göni ulanylýar ; islege görä , beýleki atributlar üçin stil bilen deňeşdirjek bolanyňyzda aç-açan nesil synpyny ulanyň .<video><object>.embed-responsive-item

Maslahat! Siziň üçin muny girizmek hökman däl, sebäbi bu frameborder="0"siziň <iframe>üçin ýok.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Bellenen gowy

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

Gör, men guýyda!

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

Meýletin sapaklar

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

Ine, men uly guýyda!

<div class="well well-lg">...</div>

Gör, men kiçijik guýyda!

<div class="well well-sm">...</div>

Komponentler

Glifikler

Elýeterli glifler

Nähili ulanmak

Beýleki komponentler bilen garyşmaň

Diňe boş elementlerde ulanmak üçin

Nyşan şriftiniň ýerini üýtgetmek

Elýeterli nyşanlar

Mysallar

Açylýan ýerler

Mysal

Deňleşdirmek

Goşmaça ýerleşiş talap edip biler

Könelişen .pull-rightdeňleşdirme

Sözbaşylar

Bölüniji

Menýu elementleri ýapyk

Düwmeler toparlary

Düwmeler toparlaryndaky gurallar we açyjylar ýörite sazlamany talap edýär

Dogrydygyna göz ýetiriň rolewe bellik beriň

Esasy mysal

Düwme gurallar paneli

Ölçeg

Höwürtge

Dik üýtgeşiklik

Dogry düwme toparlary

Serhetleri dolandyrmak

IE8 we serhetler

<a>Elementler bilen

Düwmeler hökmünde hereket edýän baglanyşyklar

<button>Elementler bilen

Düwmeleriň açylmagy

Plugine baglylyk

Buttoneke düwme

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

Ölçeg

Damjanyň üýtgemegi

Giriş toparlary

Diňe tekst <input>s

Giriş toparlaryndaky gurallar we açyjylar ýörite sazlamany talap edýär

Beýleki komponentler bilen garyşmaň

Elmydama bellikleri goşuň

Esasy mysal

Ölçeg

Bellikler we radio goşundylary

Düwme düwmeleri

Açylýan düwmeler

Bölünen düwmeler

Birnäçe düwme

Deňiz güýçleri

Salgy panelleri üçin nav ulanmak JavaScript goýmalarynyň pluginini talap edýär

Nawigasiýa hökmünde ulanylýan deňiz gämilerini elýeterli ediň

Salgylar

Dermanlar

Dogry

Safari we jogap beriji esasly deňizler

Öçürilen baglanyşyklar

Baglanyşyň işleýşi täsir etmeýär

Açylýan ýerleri ulanmak

Açylýan bellikler

Açylýan dermanlar

Navbar

Bellenen gämi paneli

Artýan mazmun

JavaScript pluginini talap edýär

Mobileykylan ykjam navbar nokadyny üýtgetmek

Gämi duralgalaryny elýeterli ediň

Marka şekili

Formalar

Jübi enjamy

Elmydama bellikleri goşuň

Düwmeler

Kontekst aýratyn ulanylyşy

Tekst

Deňiz däl baglanyşyklar

Komponentleriň deňleşdirilmegi

Birnäçe komponenti dogry deňleşdirmek

Topokarky

Beden ýassygy zerur

Aşakdan düzedildi

Könelişen `.pull-right`deňleşdirme

Dogrydygyna göz ýetiriň `role`we bellik beriň

`<a>`Elementler bilen

`<button>`Elementler bilen

Diňe tekst `<input>`s