Glifikler

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

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

Açylýan ýerler

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

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>

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

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

Açylýan ýerler resminamanyň adaty akymynyň içinde awtomatiki usulda CSS arkaly ýerleşdirilýär. Diýmek, aşak düşýänler ene-atalar tarapyndan belli bir overflowhäsiýetlere eýe bolup biler ýa-da görüniş çäginden çykyp biler. Bu meseleleri ýüze çykanlarynda özbaşdak çözüň.

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

V3.1.0 bolşy ýaly, .pull-rightaşak düşýän menýulary ýatyrdyk. Menýu sag-deňleşdirmek üçin ulanyň .dropdown-menu-right. Deňiz panelindäki sag deňleşdirilen nav komponentleri menýuny awtomatiki tertipleşdirmek üçin bu synpyň garyndy görnüşini ulanýarlar. Ony ýok etmek üçin ulanyň .dropdown-menu-left.

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

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>

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>

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üwmeler toparlary

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

Düwme gurallar paneli

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.

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

Düwmeleriň açylmagy

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

Plugine baglylyk

Düwmeleriň açylmagy, açylýan pluginiň 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>

Giriş toparlary

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.

@

@ mysal.com

$ .00

https://example.com/users/
<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>

Deňiz güýçleri

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

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

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

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>

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>

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>

Navbar

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

  1. Nawbar elementleriniň mukdaryny ýa-da inini azaltmak.
  2. Duýgur peýdaly sapaklary ulanyp, belli bir deňiz ululykdaky elementleri gizläň .
  3. 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ň.

JavaScript pluginini talap edýär

JavaScript ýapyk bolsa we görnüş paneli ýykyljak derejede dar bolsa, deňiz panelini giňeltmek we içindäki mazmuny görmek mümkin bolmaz.navbar-collapse .

Düşünjeli gämi paneli, ýykylan pluginiň Bootstrap wersiýaňyza goşulmagyny talap edýär.

Mobileykylan ykjam navbar nokadyny üýtgetmek

Deňiz paneli, görüniş nokady has dar bolanda, dik ykjam görnüşine çökýär @grid-float-breakpointwe görüniş nokady iň bolmanda @grid-float-breakpointini bolanda gorizontal ykjam däl görnüşine giňelýär. Deňiz paneli ýykylanda / giňeldilende gözegçilik etmek üçin Az çeşmede bu üýtgeýjini sazlaň. Bellenen baha 768px(iň kiçi "kiçi" ýa-da "planşet" ekrany).

Gämi duralgalaryny elýeterli ediň

Bir elementi ulanmagy unutmaň <nav>ýa-da a ýaly has umumy elementi ulanýan bolsaňyz , kömekçi tehnologiýalary ulanýanlar üçin möhüm sebit hökmünde aç-açan kesgitlemek üçin her deňiz paneline <div>bir goşuň .role="navigation"

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

Jübi enjamy

Jübi enjamlarynda kesgitli elementleriň içinde forma dolandyryşlaryny ulanmak bilen baglanyşykly käbir gowaklar bar. Jikme-jiklikler üçin brauzer goldaw resminamalarymyza serediň.

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>

Kontekst aýratyn ulanylyşy

Adaty düwme synplary ýaly , elementlerde hem .navbar-btnulanylyp bilner . Şeýle-de bolsa, içindäki elementlerde ne adaty düwme synplary ulanylmaly däldir .<a><input>.navbar-btn<a>.navbar-nav

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.

Birnäçe komponenti dogry deňleşdirmek

Gämi duralgalarynda häzirki wagtda birnäçe .navbar-rightsynp bilen çäklendirme bar. .navbar-rightMazmuny dogry ýerleşdirmek üçin soňky elementde negatiw margin ulanýarys . Şol synpy ulanýan birnäçe element bar bolsa, bu çäkler göz öňünde tutulan ýaly işlemeýär.

Şol komponenti v4-de täzeden ýazyp bileris.

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>

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>

Bellikler

Mysal

Täze sözbaşy

Täze sözbaşy

Täze sözbaşy

Täze sözbaşy

Täze sözbaşy
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ň .

Nyşanlar

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

Jumbotron

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>

Sahypanyň sözbaşy

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>

Suratlar

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.

100% x200

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

100% x200

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

100% x200

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>

Duýduryşlar

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

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

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

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

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

Ösüş barlary

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.

60% Doly
<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.

40% Doly (üstünlik)
20% Doly
60% Doly (duýduryş)
80% Doly (howp)
<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.

40% Doly (üstünlik)
20% Doly
60% Doly (duýduryş)
80% Doly (howp)
<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.

45% Doly
<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.

35% Doly (üstünlik)
20% Doly (duýduryş)
10% Doly (howp)
<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>

Mediýa obýekti

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 topary

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.

<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

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

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

Paneller

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, şrift 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>

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

Jogap beriji

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>

Guýular

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>