Glyphicons

Elérhető karakterjelek

Több mint 250 karakterjelet tartalmaz betűtípus formátumban a Glyphicon Halflings készletből. A Glyphicons Halflings általában nem érhető el ingyen, de készítőjük ingyenesen elérhetővé tette őket a Bootstrap számára. Köszönetképpen csak azt kérjük, hogy amikor csak lehetséges, adjon meg egy linket a Glyphiconshoz .

  • glyphicon glifikon-csillag
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-felhő
  • glyphicon glyphicon-boríték
  • glyphicon glyphicon-ceruza
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-zene
  • glyphicon glyphicon-search
  • glyphicon glyphicon-heart
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-empty
  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-remove
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-trash
  • glyphicon glyphicon-home
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-letöltés
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-flag
  • glyphicon glyphicon-fejhallgató
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-vonalkód
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon-kamera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-dőlt
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-kép
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-adjust
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-move
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon-backward
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-előre
  • glyphicon glyphicon-gyors előre
  • glyphicon glyphicon-step-forward
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-bal
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-question-sign
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ok-circle
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-arrow-bal
  • glyphicon glyphicon-arrow-right
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-felkiáltó-jel
  • glyphicon glyphicon-ajándék
  • glyphicon glyphicon-levél
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-eye-nyitott
  • glyphicon glyphicon-eye-close
  • glyphicon glyphicon-warning-sign
  • glyphicon glyphicon-sík
  • glyphicon glyphicon-calendar
  • glyphicon glyphicon-random
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-bevásárlókocsi
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-resize-vertikális
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-tanúsítvány
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-kéz-jobb
  • glyphicon glyphicon-kéz-bal
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-circle-arrow-right
  • glyphicon glyphicon-circle-arrow-bal
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-circle-arrow-down
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-csavarkulcs
  • glyphicon glyphicon-feladatok
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-aktatáska
  • glyphicon glyphicon-fullscreen
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-gemkapocs
  • glyphicon glyphicon-heart-empty
  • glyphicon glyphicon-link
  • glyphicon glyphicon-phone
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-sort-by-alphabet
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by-order
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attribútumok
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon-ellenőrizetlen
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-rekord
  • glyphicon glyphicon-save
  • glyphicon glyphicon-open
  • glyphicon glyphicon-mentve
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-mentve
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-credit-card
  • glyphicon glyphicon-transfer
  • glyphicon glyphicon-evőeszköz
  • glyphicon glyphicon-header
  • glyphicon glyphicon-tömörített
  • glyphicon glyphicon-fülhallgató
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-torony
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-feliratok
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-registration-mark
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glifikon-fa-lombos
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon-level-up
  • glyphicon glyphicon-copy
  • glyphicon glyphicon-paszta
  • glyphicon glyphicon-alert
  • glyphicon glyphicon-ekvalizer
  • glyphicon glyphicon-király
  • glyphicon glyphicon-királynő
  • glyphicon glyphicon-zálog
  • glyphicon glyphicon-püspök
  • glyphicon glyphicon-lovag
  • glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-sátor
  • glyphicon glyphicon-blackboard
  • glyphicon glyphicon-ágy
  • glyphicon glyphicon-apple
  • glyphicon glyphicon-erase
  • glyphicon glyphicon-homokóra
  • glyphicon glyphicon-lámpa
  • glyphicon glyphicon-duplikátum
  • glyphicon glyphicon-piggy-bank
  • glyphicon glyphicon-olló
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glifikon-rubel
  • glyphicon glyphicon-rub
  • glyphicon glyphicon-scale
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ice-lolly-ízű
  • glyphicon glyphicon-oktatás
  • glyphicon glyphicon-option-horizontal
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • glifikon glifikon-olaj
  • glyphicon glyphicon-grain
  • glyphicon glyphicon-napszemüveg
  • glyphicon glyphicon-text-size
  • glyphicon glyphicon-text-color
  • glyphicon glyphicon-text-background
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-horizontal
  • glyphicon glyphicon-object-align-left
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • glyphicon glyphicon-triangle-right
  • glyphicon glyphicon-triangle-bal
  • glyphicon glyphicon-triangle-bottom
  • glyphicon glyphicon-triangle-top
  • glyphicon glyphicon-console
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-als index
  • glyphicon glyphicon-menu-left
  • glyphicon glyphicon-menu-right
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up

Hogyan kell használni

Teljesítmény okokból minden ikonhoz alaposztályra és egyedi ikonosztályra van szükség. A használathoz helyezze el a következő kódot szinte bárhol. Ügyeljen arra, hogy hagyjon szóközt az ikon és a szöveg között a megfelelő kitöltés érdekében.

Ne keverje össze más összetevőkkel

Az ikonosztályok nem kombinálhatók közvetlenül más összetevőkkel. Nem használhatók más osztályokkal együtt ugyanazon az elemen. Ehelyett adjon hozzá egy beágyazottat <span>, és alkalmazza az ikonosztályokat a <span>.

Csak üres elemeken használható

Az ikonosztályokat csak olyan elemeken szabad használni, amelyek nem tartalmaznak szöveges tartalmat és nincsenek gyermekelemek.

Az ikon betűtípus helyének módosítása

A Bootstrap feltételezi, hogy az ikon-betűkészlet-fájlok a ../fonts/könyvtárban találhatók a lefordított CSS-fájlokhoz képest. A betűtípusfájlok áthelyezése vagy átnevezése azt jelenti, hogy a CSS-t háromféleképpen frissíti:

  • Módosítsa a @icon-font-pathés/vagy @icon-font-nameváltozókat a Kevesebb fájl forrásban.
  • Használja a Less fordító által biztosított relatív URL-ek beállítást .
  • Módosítsa az url()elérési utat a lefordított CSS-ben.

Használja azt a lehetőséget, amelyik a legjobban megfelel az adott fejlesztési beállításnak.

Hozzáférhető ikonok

A kisegítő technológiák modern verziói bejelentik a CSS által generált tartalmakat, valamint bizonyos Unicode karaktereket. A képernyőolvasók nem szándékos és zavaró kimeneteinek elkerülése érdekében (különösen, ha az ikonokat pusztán dekorációként használjuk), elrejtjük őket az aria-hidden="true"attribútummal.

Ha egy ikont használ a jelentés közvetítésére (nem csak dekorációs elemként), gondoskodjon arról, hogy ezt a jelentést a segítő technológiák is átadják – például tartalmazzon további tartalmat, vizuálisan elrejtve az .sr-onlyosztályban.

Ha olyan vezérlőket hoz létre, amelyek nem tartalmaznak más szöveget (például olyan, <button>amely csak ikont tartalmaz), mindig biztosítson alternatív tartalmat a vezérlő céljának azonosításához, hogy a kisegítő technológiák felhasználói számára érthető legyen. Ebben az esetben aria-labelmagán a vezérlőn adhat hozzá egy attribútumot.

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

Példák

Használja őket gombokban, gombcsoportokban az eszköztárhoz, a navigációhoz vagy az űrlap elé fűzött bevitelekhez.

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

A figyelmeztetésben használt ikon, amely azt jelzi, hogy hibaüzenetről van szó, további .sr-onlyszöveggel, amely továbbítja ezt a tippet a kisegítő technológiák felhasználóinak.

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

Legördülő menük

Átkapcsolható, kontextuális menü a hivatkozások listájának megjelenítéséhez. Interaktívvá tettük a legördülő JavaScript beépülő modullal .

Csomagolja be a legördülő menü aktiválóját és a legördülő menüt a .dropdown, vagy egy másik elembe, amely deklarálja a position: relative;. Ezután adja hozzá a menü HTML-kódját.

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

A legördülő menük módosíthatók úgy, .dropuphogy a szülőhöz hozzáadva felfelé (lefelé) bővüljenek.

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

Alapértelmezés szerint a legördülő menü automatikusan 100%-ban a fölé és bal oldala mentén helyezkedik el. Add hozzá .dropdown-menu-righta .dropdown-menujobbra igazításhoz a legördülő menüt.

További pozicionálást igényelhet

A legördülő listák a CSS-en keresztül automatikusan elhelyezkednek a dokumentum normál folyamatán belül. Ez azt jelenti, hogy a legördülő listákat a szülők levághatják bizonyos overflowtulajdonságokkal, vagy a nézetablak határain kívül jelenhetnek meg. A felmerülő problémákat önállóan oldja meg.

Elavult .pull-rightigazítás

A 3.1.0-s verziótól kezdve .pull-righta legördülő menük használata megszűnt. A menü jobbra igazításához használja a gombot .dropdown-menu-right. A navigációs sáv jobbra igazított navigációs összetevői ennek az osztálynak a mixin verzióját használják a menü automatikus igazításához. A felülbíráláshoz használja a .dropdown-menu-left.

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

Adjon hozzá fejlécet a műveletek szakaszainak címkézéséhez bármely legördülő menüben.

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

Adjon hozzá egy elválasztót a hivatkozások elkülönítéséhez egy legördülő menüben.

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

A hivatkozás letiltásához adja hozzá .disableda legördülő menü a eleméhez.<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>

Gombcsoportok

Csoportosítsa a gombok sorozatát egyetlen sorban a gombcsoporttal. Adjon hozzá opcionális JavaScript rádiót és jelölőnégyzet stílust a gombok beépülő modulunkkal .

Az eszköztippek és a gombcsoportokban lévő előugró ablakok speciális beállítást igényelnek

Ha eszköztippeket vagy felugró ablakokat használ egy elemen belül .btn-group, meg kell adnia a lehetőséget container: 'body', hogy elkerülje a nem kívánt mellékhatásokat (például az elem kiszélesedését és/vagy lekerekített sarkainak elvesztését, amikor az eszköztipp vagy az előugró ablak aktiválódik).

Győződjön meg rolea helyességről és adjon címkét

Ahhoz, hogy a kisegítő technológiák – például a képernyőolvasók – azt jelezzék, hogy egy sor gomb csoportosítva van, megfelelő roleattribútumot kell megadni. Gombcsoportok esetén ez lenne role="group", míg az eszköztáraknak egy role="toolbar".

Kivételt képeznek azok a csoportok, amelyek csak egyetlen vezérlőt tartalmaznak (például a sorkizárt gombcsoportok elemekkel <button>) vagy egy legördülő listát.

Ezenkívül a csoportokat és az eszköztárakat kifejezetten meg kell jelölni, mivel a legtöbb kisegítő technológia egyébként nem jelenti be őket, a megfelelő roleattribútum jelenléte ellenére. Az itt közölt példákban a -t használjuk aria-label, de használhatók olyan alternatívák aria-labelledbyis, mint pl.

Alap példa

Csomagoljon be egy gombsort a .btnkövetkezővel: .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>

Gomb eszköztár

Kombinálja a készleteket a- <div class="btn-group">ba az <div class="btn-toolbar">összetettebb összetevőkért.

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

Méretezés

Ahelyett, hogy egy csoport minden gombjára gombméretezési osztályokat alkalmazna, egyszerűen adja hozzá .btn-group-*mindegyikhez .btn-group, beleértve a több csoport egymásba ágyazását is.




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

Fészekrakás

Helyezzen el egy .btn-groupmásikat .btn-group, ha egy sor gombbal kevert legördülő menüt szeretne.

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

Függőleges variáció

Egy gombkészlet függőlegesen egymásra rakottnak tűnik, nem pedig vízszintesen. Az osztott gombok legördülő menüi itt nem támogatottak.

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

Igazított gombcsoportok

A gombok egy csoportját egyenlő méretűre nyújtsa úgy, hogy az átfogja a szülő teljes szélességét. A gombcsoporton belüli legördülő gombokkal is működik.

A határok kezelése

A gombok igazolására használt specifikus HTML és CSS miatt (nevezetesen display: table-cell) a köztük lévő határok megduplázódnak. A normál margin-left: -1pxgombcsoportokban a szegélyek egymásra helyezésére szolgál, ahelyett, hogy eltávolítaná őket. Azonban marginnem működik együtt display: table-cell. Ennek eredményeként a Bootstrap testreszabásától függően érdemes lehet eltávolítani vagy újraszínezni a szegélyeket.

IE8 és határok

Az Internet Explorer 8 nem jeleníti meg a szegélyeket az igazított gombcsoportban lévő gombokon, függetlenül attól, hogy az be van kapcsolva <a>vagy <button>elemek. Ennek megkerüléséhez csomagolja be az egyes gombokat egy másikba .btn-group.

További információért lásd: #12476 .

Elemekkel <a>_

Csak csomagoljon be egy .btns sorozatot .btn-group.btn-group-justified.

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

Gombként működő linkek

Ha az <a>elemek gombként működnek – oldalon belüli funkcionalitást indítanak el, nem pedig az aktuális oldalon belüli másik dokumentumra vagy szakaszra navigálnak –, akkor megfelelő jelölést is kell adni nekik role="button".

Elemekkel <button>_

Ha sorkizárt gombcsoportokat szeretne <button>elemekkel használni, minden gombot egy gombcsoportba kell csomagolnia . A legtöbb böngésző nem megfelelően alkalmazza a CSS-t az <button>elemek indokolására, de mivel támogatjuk a gombok legördülő menüit, megkerülhetjük ezt.

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

Gombok legördülő menüi

Bármelyik gombbal indíthat el egy legördülő menüt úgy, hogy elhelyezi a menüben, .btn-groupés megadja a megfelelő menüjelölést.

Beépülő modul-függőség

A gombok legördülő menüihez a legördülő bővítménynek szerepelnie kell a Bootstrap verziójában.

Egygombos legördülő menük

Néhány alapvető jelölésmódosítással a gombokat legördülő kapcsolóvá alakíthatja.

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

Split gomb legördülő menük

Hasonlóképpen hozzon létre osztott gombos legördülő listákat ugyanazokkal a jelölésmódosításokkal, csak külön gombbal.

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

Méretezés

A gombok legördülő menüi minden méretű gombbal működnek.

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

Dropup variáció

Az elemek feletti legördülő menük aktiválása .dropupa szülőhöz való hozzáadással.

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

Beviteli csoportok

Bővítse az űrlapvezérlőket szöveg vagy gombok hozzáadásával bármely szövegalapú szöveg elé, után vagy mindkét oldalára <input>. Használja .input-groupa .input-group-addonvagy .input-group-btnjellel az elemek elejére vagy hozzáfűzéséhez .form-control.

Csak szöveges <input>s

Kerülje az <select>elemek használatát itt, mivel a WebKit böngészőkben nem lehet őket teljesen stílusosan alakítani.

Kerülje az <textarea>elemek használatát itt, mivel a rowsrendszer bizonyos esetekben nem veszi figyelembe az attribútumot.

Az eszköztippek és a felugró ablakok a beviteli csoportokban speciális beállítást igényelnek

Ha eszköztippeket vagy felugró ablakokat használ egy elemen belül .input-group, meg kell adnia a lehetőséget container: 'body', hogy elkerülje a nem kívánt mellékhatásokat (például az elem kiszélesedését és/vagy lekerekített sarkainak elvesztését, amikor az elemtipp vagy az előugró ablak aktiválódik).

Ne keverje össze más összetevőkkel

Ne keverje az űrlapcsoportokat vagy a rácsoszlop osztályokat közvetlenül a beviteli csoportokkal. Ehelyett helyezze be a beviteli csoportot az űrlapcsoportba vagy a rácshoz kapcsolódó elembe.

Mindig adjon hozzá címkéket

A képernyőolvasók gondot okoznak az űrlapokkal, ha nem ad hozzá minden bevitelhez címkét. Ezeknél a beviteli csoportoknál győződjön meg arról, hogy minden további címke vagy funkció átkerül a kisegítő technológiákhoz.

A használandó pontos technika (látható <label>elemek, az osztály <label>használatával rejtett elemek , vagy a , , , vagy attribútum használata), és hogy milyen további információkat kell továbbítani, a megvalósítandó interfész widget pontos típusától függően változik. Az ebben a részben található példák néhány javasolt, esetspecifikus megközelítést kínálnak..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

Alap példa

Helyezzen egy-egy kiegészítőt vagy gombot a bemenet mindkét oldalára. A bemenet mindkét oldalára is elhelyezhet egyet.

Nem támogatunk több kiegészítőt ( .input-group-addonvagy .input-group-btn) egy oldalon.

Nem támogatunk több űrlapvezérlőt egyetlen beviteli csoportban.

@

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

Méretezés

Adja hozzá a relatív űrlapméret-osztályokat .input-groupönmagához, és a benne lévő tartalom automatikusan átméreteződik – nincs szükség az űrlapvezérlő méretosztályainak megismétlésére az egyes elemeken.

@

@

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

Jelölőnégyzetek és rádiókiegészítők

Szöveg helyett bármilyen jelölőnégyzetet vagy rádióbeállítást jelöljön be a beviteli csoport bővítményébe.

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

Gomb kiegészítők

A beviteli csoportokban lévő gombok kissé eltérnek egymástól, és egy további beágyazási szintet igényelnek. A helyett a gombokat .input-group-addonkell használnia .input-group-btna gombok becsomagolásához. Erre az alapértelmezett böngészőstílusok miatt van szükség, amelyeket nem lehet felülírni.

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

Gombok legördülő menükkel

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

Szegmentált gombok

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

Több gomb

Míg oldalanként csak egy bővítmény lehet, egyetlen gombon belül több gomb is lehet .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>

Navs

A Bootstrapben elérhető navigációs rendszerek megosztott jelöléssel rendelkeznek, az alaposztálytól kezdve, .navvalamint megosztott állapotokkal. Cserélje fel a módosító osztályokat az egyes stílusok közötti váltáshoz.

A lappanelek navigációjához JavaScript tabs beépülő modul szükséges

A lapozható területekkel rendelkező lapokhoz a lapok JavaScript beépülő modulját kell használnia . A jelöléshez további roleés ARIA attribútumokra is szükség lesz – további részletekért lásd a beépülő modul jelölési példáját .

Tegye elérhetővé a navigációként használt navigációkat

Ha navigációs sávot használ navigációs sáv létrehozására, ügyeljen arra, role="navigation"hogy a leglogikusabb szülőtárolóhoz adjon egy elemet <ul>, vagy tegyen egy <nav>elemet a teljes navigáció köré. Ne adja hozzá a szerepet <ul>magához, mert ezzel megakadályozhatja, hogy a kisegítő technológiák tényleges listának jelentsék.

Vegye figyelembe, hogy az .nav-tabsosztálynak szüksége van az .navalaposztályra.

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

Vegyük ugyanazt a HTML-kódot, de használjuk .nav-pillshelyette:

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

A tabletták függőlegesen is egymásra rakhatók. Csak add hozzá .nav-stacked.

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

A 768 képpontnál szélesebb képernyőkön a füleket vagy tablettákat könnyedén azonos szélességűvé teheti a szülővel .nav-justified. Kisebb képernyőkön a navigációs hivatkozások egymásra vannak helyezve.

Az igazított navigációs sáv navigációs hivatkozásai jelenleg nem támogatottak.

Safari és reszponzív indokolt navigációk

A 9.1.2-es verziótól kezdve a Safari olyan hibát mutat, amelyben a böngésző vízszintes átméretezése renderelési hibákat okoz az indokolt navigációban, amelyek frissítéskor törlődnek. Ez a hiba az indokolt navigációs példában is látható .

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

Bármely navigációs komponens (lapok vagy tabletták) esetén adja hozzá .disableda szürke hivatkozásokat, és ne lehessen lebegni effektusokat .

A link funkcióit nem érinti

Ez az osztály csak a <a>megjelenését változtatja meg, a funkcionalitását nem. Használjon egyéni JavaScriptet a linkek letiltásához.

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

Adjon hozzá legördülő menüket egy kis extra HTML-lel és a legördülő JavaScript beépülő modullal .

Lapok legördülő menükkel

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

Tabletták legördülő menükkel

<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

A navigációs sávok reszponzív metakomponensek, amelyek navigációs fejlécként szolgálnak az alkalmazás vagy a webhely számára. A mobilnézetekben összecsukva kezdődnek (és válthatók), és vízszintessé válnak, ahogy a rendelkezésre álló nézetablak szélessége nő.

Az igazított navigációs sáv navigációs hivatkozásai jelenleg nem támogatottak.

Túlcsorduló tartalom

Mivel a Bootstrap nem tudja, mekkora helyre van szüksége a navigációs sávban lévő tartalomnak, problémákba ütközhet a tartalom második sorba csomagolásával. Ennek megoldásához a következőket teheti:

  1. Csökkentse a navigációs sáv elemeinek mennyiségét vagy szélességét.
  2. A navigációs sáv egyes elemeinek elrejtése bizonyos képernyőméreteknél reszponzív segédprogram-osztályok használatával .
  3. Módosítsa azt a pontot, ahol a navigációs sáv az összecsukott és vízszintes mód között vált. Szabja testre a @grid-float-breakpointváltozót, vagy adja hozzá saját médialekérdezését.

JavaScript plugin szükséges

Ha a JavaScript le van tiltva, és a nézet elég szűk ahhoz, hogy a navigációs sáv összecsukódjon, akkor lehetetlen lesz a navigációs sáv kibontása és a tartalom megtekintése a .navbar-collapse.

Az érzékeny navigációs sáv megköveteli, hogy az összecsukási beépülő modul szerepeljen a Bootstrap verziójában.

A mobil navigációs sáv összecsukott töréspontjának módosítása

A navigációs sáv összecsukódik a függőleges mobilnézetbe, ha a nézetablak keskenyebb, mint @grid-float-breakpoint, és kitágul a vízszintes, nem mobil nézetbe, ha a nézetablak legalább @grid-float-breakpointszélessége. Állítsa be ezt a változót a Kevesebb forrásban, hogy szabályozza, mikor csukódik össze/kinyílik a navigációs sáv. Az alapértelmezett érték 768px(a legkisebb "kicsi" vagy "táblagép" képernyő).

Tegye elérhetővé a navigációs sávokat

Ügyeljen arra, hogy használjon egy <nav>elemet, vagy ha általánosabb elemet használ, mint például a <div>, adjon hozzá egy role="navigation"jelet minden navigációs sávhoz, hogy egyértelműen azonosítsa a kisegítő technológiák felhasználói számára mérföldkőnek számító régióként.

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

Cserélje le a navigációs sáv márkáját saját képére úgy, hogy a szöveget egy <img>. Mivel a .navbar-brandfájlnak saját kitöltése és magassága van, előfordulhat, hogy a képtől függően felül kell írnia néhány CSS-t.

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

Helyezze el az űrlap tartalmát .navbar-forma megfelelő függőleges igazítás és az összecsukott viselkedés érdekében a szűk nézetablakban. Használja az igazítási beállításokat annak eldöntésére, hogy hol legyen a navigációs sáv tartalmán belül.

.navbar-formFigyelmeztetésként a kód nagy részét megosztja a mixin .form-inlinekeresztül. Egyes űrlapvezérlőkhöz, például a beviteli csoportokhoz rögzített szélességekre lehet szükség, hogy megfelelően jelenjenek meg a navigációs sávon.

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

A mobileszközökre vonatkozó figyelmeztetések

Van néhány figyelmeztetés a mobileszközök rögzített elemei közötti űrlapvezérlők használatával kapcsolatban. A részletekért tekintse meg a böngésző támogatási dokumentumait .

Mindig adjon hozzá címkéket

A képernyőolvasók gondot okoznak az űrlapokkal, ha nem ad hozzá minden bevitelhez címkét. Ezeknél a szövegközi űrlapoknál az .sr-onlyosztály segítségével elrejtheti a címkéket. Vannak további alternatív módszerek is a segítő technológiák címkézésére, mint például a aria-label, aria-labelledbyvagy titleattribútum. Ha ezek egyike sem található meg, a képernyőolvasók igénybe vehetik az placeholderattribútumot, ha van ilyen, de vegye figyelembe, hogy placeholdermás címkézési módszerek helyett nem javasolt az attribútum használata.

Adja hozzá az .navbar-btnosztályt a <button>nem a-ban található elemekhez, <form>hogy függőlegesen középre helyezze őket a navigációs sávban.

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

Kontextus-specifikus használat

A szabványos gombosztályokhoz hasonlóan a és elemeken .navbar-btnhasználható . Azonban sem a szabványos gombosztályokat nem szabad használni a -n belüli elemeken .<a><input>.navbar-btn<a>.navbar-nav

Törölje a szöveges karakterláncokat egy elembe a jellel .navbar-text, általában egy <p>címkén a megfelelő vezetés és szín érdekében.

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

Azok az emberek, akik szabványos hivatkozásokat használnak, amelyek nem találhatók a normál navigációs komponensen belül, használja az .navbar-linkosztályt a megfelelő színek hozzáadásához az alapértelmezett és az inverz navigációs sáv beállításához.

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

Igazítsa a navigációs hivatkozásokat, űrlapokat, gombokat vagy szöveget a .navbar-leftvagy .navbar-rightsegédosztályok használatával. Mindkét osztály hozzáad egy CSS float-ot a megadott irányban. Például a navigációs hivatkozások igazításához helyezze őket külön <ul>a megfelelő segédprogram osztályba.

Ezek az osztályok a és a vegyes változatai .pull-left, .pull-rightde médialekérdezésekre vonatkoznak a navigációs sáv összetevőinek egyszerűbb kezelése érdekében a különböző eszközméretekben.

Több alkatrész jobbra igazítása

A navigációs sávok jelenleg több .navbar-rightosztályra korlátozódnak. A tartalom megfelelő elhelyezéséhez negatív margót használunk az utolsó .navbar-rightelemen. Ha több elem is használja ezt az osztályt, ezek a margók nem a rendeltetésszerűen működnek.

Ezt újra meglátjuk, amikor átírhatjuk az összetevőt a 4-es verzióban.

Adjon hozzá .navbar-fixed-topés vegyen fel egy .containervagy .container-fluidelemet a középpontba és a pad navigációs sávjába.

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

Testpárnázás szükséges

A rögzített navigációs sáv fedni fogja a többi tartalmat, hacsak nem adja hozzá paddinga <body>. Próbálja ki saját értékeit, vagy használja az alábbi részletet. Tipp: Alapértelmezés szerint a navigációs sáv 50 képpont magas.

body { padding-top: 70px; }

Ügyeljen arra, hogy ezt az alapvető Bootstrap CSS után adja meg.

Adjon hozzá .navbar-fixed-bottomés vegyen fel egy .containervagy .container-fluidelemet a középpontba és a pad navigációs sávjába.

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

Testpárnázás szükséges

A rögzített navigációs sáv fedni fogja a többi tartalmat, hacsak nem adja hozzá paddinga <body>. Próbálja ki saját értékeit, vagy használja az alábbi részletet. Tipp: Alapértelmezés szerint a navigációs sáv 50 képpont magas.

body { padding-bottom: 70px; }

Ügyeljen arra, hogy ezt az alapvető Bootstrap CSS után adja meg.

Hozzon létre egy teljes szélességű navigációs sávot, amely elgörget az oldallal úgy, hogy hozzáad .navbar-static-topegy .containervagy .container-fluida középre és a pad navigációs sávját.

Az .navbar-fixed-*osztályokkal ellentétben nem kell módosítania a kitöltést a body.

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

Módosítsa a navigációs sáv megjelenését a hozzáadásával .navbar-inverse.

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

Zsemlemorzsa

Adja meg az aktuális oldal helyét egy navigációs hierarchiában.

Az elválasztók automatikusan hozzáadódnak a CSS-hez a :beforeés segítségével content.

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

Lapszámozás

Adjon meg oldalszámozási linkeket webhelyéhez vagy alkalmazásához a többoldalas lapozási összetevővel vagy az egyszerűbb lapozó-alternatívával .

Alapértelmezett oldalszámozás

Az Rdio által ihletett egyszerű lapozás, amely nagyszerű alkalmazásokhoz és keresési eredményekhez. A nagy blokkot nehéz kihagyni, könnyen méretezhető, és nagy kattintási területeket biztosít.

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

Az oldalszámozási összetevő címkézése

Az oldalszámozási összetevőt olyan elembe kell csomagolni, amely <nav>a képernyőolvasók és más segítő technológiák navigációs szakaszaként azonosítja. Ezen túlmenően, mivel egy oldalon valószínűleg már több ilyen navigációs szakasz található (például az elsődleges navigáció a fejlécben vagy az oldalsáv navigációja), célszerű olyan leírást aria-labelmegadni, <nav>amely tükrözi a célját. Például, ha az oldalszámozási összetevőt a keresési eredmények halmaza közötti navigálásra használják, a megfelelő címke lehet aria-label="Search results pages".

Letiltott és aktív állapotok

A linkek testreszabhatók a különböző körülményekhez. Használja .disableda nem kattintható hivatkozásokhoz és .activeaz aktuális oldal jelzéséhez.

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

Javasoljuk, hogy cserélje ki az aktív vagy letiltott horgonyokat a <span>következőre, vagy hagyja ki a horgonyt az előző/következő nyilak esetében, hogy eltávolítsa a kattintási funkciót a kívánt stílusok megtartása mellett.

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

Méretezés

Nagyobb vagy kisebb oldalszámozásra vágyik? Add hozzá .pagination-lgvagy .pagination-smtovábbi méretekhez.

<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

Gyors előző és következő hivatkozások az egyszerű lapozási megvalósításokhoz könnyű jelölésekkel és stílusokkal. Nagyszerű egyszerű webhelyekhez, például blogokhoz vagy magazinokhoz.

Alapértelmezett példa

Alapértelmezés szerint a lapozó központosítja a hivatkozásokat.

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

Alternatív megoldásként az egyes hivatkozásokat az oldalakhoz igazíthatja:

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

Opcionális letiltott állapot

A személyhívó hivatkozások az oldalszámozás általános .disabledsegédprogram-osztályát is használják.

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

Címkék

Példa

Példa címsor Új

Példa címsor Új

Példa címsor Új

Példa címsor Új

Példa címsor Új
Példa címsor Új
<h3>Example heading <span class="label label-default">New</span></h3>

Elérhető variációk

Adja hozzá az alább említett módosító osztályok bármelyikét a címke megjelenésének megváltoztatásához.

Alapértelmezett elsődleges sikerinformáció Figyelmeztetés Veszély _
<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>

Rengeteg címkéje van?

Renderelési problémák merülhetnek fel, ha több tucat soron belüli címke van egy keskeny tárolóban, amelyek mindegyike saját inline-blockelemet (például egy ikont) tartalmaz. A megkerülő út a beállítás display: inline-block;. A szövegkörnyezetért és egy példáért lásd: #13219 .

Jelvények

Könnyen kiemelheti az új vagy olvasatlan elemeket, ha a <span class="badge">hivatkozásokhoz, Bootstrap navigációs elemekhez és egyebekhez ad hozzá egy elemet.

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

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

Önmaguk összeomlása

Ha nincsenek új vagy olvasatlan elemek, a jelvények egyszerűen összecsukódnak (a CSS :emptyválasztóján keresztül), feltéve, hogy nincs benne tartalom.

Böngészők közötti kompatibilitás

A jelvények nem csukódnak össze az Internet Explorer 8-ban, mert nem támogatja a :emptyválasztót.

Alkalmazkodik az aktív navigációs állapotokhoz

Beépített stílusok vannak a jelvények aktív állapotba helyezéséhez a tablettanavigációban.

<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

Könnyű, rugalmas összetevő, amely opcionálisan kiterjesztheti a teljes nézetablakot, hogy megjelenítse webhelye kulcsfontosságú tartalmát.

Helló Világ!

Ez egy egyszerű hős egység, egy egyszerű jumbotron-stílusú komponens, amely felhívja a figyelmet a kiemelt tartalmakra vagy információkra.

Tudj meg többet

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

Ahhoz, hogy a jumbotron teljes szélességű legyen, lekerekített sarkok nélkül, helyezze az összes .containers-n kívülre, és adjon hozzá egy .containerbelsőt.

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

Oldalfejléc

Egy egyszerű héj az h1oldalon lévő tartalom szakaszainak megfelelő szétválasztásához és szegmentálásához. Használhatja az h1alapértelmezett smallelemet, valamint a legtöbb egyéb összetevőt (további stílusokkal).

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

Miniatűrök

Bővítse ki a Bootstrap rácsrendszerét a miniatűr komponenssel, hogy könnyen megjelenítse a képek, videók, szövegek és egyebek rácsát.

Ha különböző magasságú és/vagy szélességű miniatűrök Pinterest-szerű megjelenítését keresi, külső féltől származó beépülő modult kell használnia, például a Masonry , az Isotope vagy a Salvattore .

Alapértelmezett példa

Alapértelmezés szerint a Bootstrap bélyegképei úgy vannak kialakítva, hogy a linkelt képeket minimális jelöléssel jelenítsék meg.

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

Egyedi tartalom

Egy kis extra jelöléssel bármilyen HTML-tartalom, például címsor, bekezdés vagy gomb hozzáadható miniatűrökhöz.

100%x200

Miniatűr címke

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Gomb Gomb

100%x200

Miniatűr címke

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Gomb Gomb

100%x200

Miniatűr címke

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Gomb Gomb

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

Figyelmeztetések

Kontextusfüggő visszacsatolási üzeneteket biztosít a tipikus felhasználói műveletekhez a maroknyi elérhető és rugalmas figyelmeztető üzenettel.

Példák

Törölje be a szöveget és az opcionális elvetés gombot .alerta négy kontextus szerinti osztály egyikébe (pl. .alert-success) az alapvető figyelmeztető üzenetekhez.

Nincs alapértelmezett osztály

A riasztásoknak nincsenek alapértelmezett osztályai, csak alap- és módosító osztályok. Az alapértelmezett szürke riasztásnak nincs túl sok értelme, ezért meg kell adnia a típust a környezetfüggő osztályon keresztül. Válasszon a siker, az információ, a figyelmeztetés vagy a veszély közül.

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

Elvethető figyelmeztetések

Bármilyen riasztásra építhet egy opcionális .alert-dismissibleés bezárás gomb hozzáadásával.

JavaScript-riasztási bővítmény szükséges

A teljesen működőképes, elvethető figyelmeztetésekhez az alerts JavaScript beépülő modult kell használnia .

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

Biztosítsa a megfelelő viselkedést minden eszközön

Ügyeljen arra, hogy a data attribútummal <button>rendelkező elemet használja.data-dismiss="alert"

Használja a .alert-linksegédprogram osztályt, hogy gyorsan biztosítson megfelelő színű hivatkozásokat bármely riasztáson belül.

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

Haladásjelző sávok

Naprakész visszajelzést ad egy munkafolyamat vagy művelet előrehaladásáról az egyszerű, de rugalmas folyamatjelző sávokkal.

Böngészők közötti kompatibilitás

A folyamatjelző sávok CSS3 átmeneteket és animációkat használnak bizonyos hatásuk eléréséhez. Ezeket a funkciókat az Internet Explorer 9 és régebbi, illetve a Firefox régebbi verziói nem támogatják. Az Opera 12 nem támogatja az animációkat.

A Content Security Policy (CSP) kompatibilitása

Ha webhelyén olyan tartalombiztonsági házirend (CSP) van, amely nem teszi lehetővé style-src 'unsafe-inline', akkor nem tudja majd soron belüli styleattribútumokkal beállítani a folyamatjelző sáv szélességét, ahogy az alábbi példákban látható. A szigorú CSP-kkel kompatibilis szélességek beállításának alternatív módjai közé tartozik egy kis egyéni JavaScript (amely beállítja element.style.width) vagy egyéni CSS-osztályok használata.

Alap példa

Alapértelmezett folyamatjelző sáv.

60% kész
<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>

Címkével

A látható százalékos arány megjelenítéséhez távolítsa el a <span>with .sr-onlyosztályt a folyamatjelző sávból.

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>

Annak biztosítása érdekében, hogy a címke szövege még alacsony százalékos arányok esetén is olvasható maradjon, fontolja meg egy jel hozzáadását min-widtha folyamatjelző sávhoz.

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>

Kontextuális alternatívák

A folyamatjelző sávok ugyanazokat a gombokat és riasztási osztályokat használják a konzisztens stílusok érdekében.

40% kész (siker)
20% kész
60% kész (figyelmeztetés)
80% kész (veszély)
<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>

Csíkos

Színátmenetet használ a csíkos hatás létrehozásához. Nem érhető el IE9 és régebbi verziókban.

40% kész (siker)
20% kész
60% kész (figyelmeztetés)
80% kész (veszély)
<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>

Élénk

Hozzáadás .activea .progress-bar-stripedcsíkok jobbról balra animálásához. Nem érhető el IE9 és régebbi verziókban.

45% kész
<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>

Halmozott

Helyezzen több rudat ugyanabba .progress, hogy egymásra rakja őket.

35% kész (siker)
20% kész (figyelmeztetés)
10% kész (veszély)
<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>

Médiaobjektum

Absztrakt objektumstílusok különféle típusú összetevők (például blogbejegyzések, tweetek stb.) létrehozásához, amelyek szöveges tartalom mellett balra vagy jobbra igazított képet tartalmaznak.

Alapértelmezett média

Az alapértelmezett média egy médiaobjektumot (képeket, videót, hangot) jelenít meg a tartalomblokk bal vagy jobb oldalán.

Média címsor

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Média címsor

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Beágyazott médiacímsor

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Média címsor

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Média címsor

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, 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>

.pull-leftA és osztályok .pull-rightszintén léteznek, és korábban a médiakomponens részeként használták őket, de a 3.3.0-s verziótól elavulttá váltak. Ezek megközelítőleg egyenértékűek a .media-leftés .media-right-vel, kivéve, hogy a html-ben a jel .media-rightután kell elhelyezni ..media-body

Média igazítás

A képeket vagy más adathordozókat felül, középen vagy alul lehet igazítani. Az alapértelmezett beállítás felülre igazítva.

Felülre igazított média

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

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

Középre igazított média

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

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

Alulra igazított média

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 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>

Médialista

Egy kis extra jelöléssel használhatja a médiát a belső listán (hasznos megjegyzésszálaknál vagy cikklistáknál).

  • Média címsor

    Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Beágyazott médiacímsor

    Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Beágyazott médiacímsor

    Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Beágyazott médiacímsor

    Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, 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>

Listacsoport

A listacsoportok rugalmas és hatékony komponensek nemcsak egyszerű elemek listáinak megjelenítéséhez, hanem összetettek egyedi tartalommal is.

Alap példa

A legalapvetőbb listacsoport egyszerűen egy rendezetlen lista listaelemekkel és a megfelelő osztályokkal. Építsen rá a következő opciókkal, vagy szükség szerint saját CSS-jével.

  • Cras justo odio
  • Dapibus ac facilisis be
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum és eros
<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>

Jelvények

Adja hozzá a jelvények összetevőt a listacsoport bármely eleméhez, és az automatikusan a jobb oldalon lesz.

  • 14Cras justo odio
  • 2Dapibus ac facilisis be
  • 1Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Kapcsolt elemek

A listaelemek összekapcsolása a listaelemek helyett horgonycímkék használatával (ez egyben szülőt is jelent a <div>helyett <ul>). Nincs szükség külön szülőkre az egyes elemek körül.

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

Gombelemek

A listacsoport elemei lehetnek gombok a listaelemek helyett (ez egyben szülőt is jelent a <div>helyett <ul>). Nincs szükség külön szülőkre az egyes elemek körül. Ne használja .btnitt a szabványos osztályokat.

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

Letiltott elemek

Adja hozzá .disabledaz a -hoz, .list-group-itemhogy kiszürkítse, hogy letiltva jelenjen meg.

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

Kontextuális osztályok

Használjon környezetfüggő osztályokat a listaelemek stílusához, legyen az alapértelmezett vagy linkelt. Tartalmazza az .activeállapotot is.

  • Dapibus ac facilisis be
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum és eros
<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>

Egyedi tartalom

Szinte bármilyen HTML-kódot adjon hozzá, még az alábbihoz hasonló hivatkozott listacsoportokhoz is.

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

Panelek

Bár nem mindig szükséges, néha be kell helyeznie a DOM-ot egy dobozba. Ilyen helyzetekben próbálja ki a panel komponenst.

Alap példa

Alapértelmezés szerint .panelcsak néhány alapvető szegélyt és kitöltést kell alkalmazni a tartalom tárolására.

Alapvető panel példa
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel címsorral

Egyszerűen adjon hozzá címtárolót a panelhez a segítségével .panel-heading. Bármelyik <h1>- osztályt is beilleszthet <h6>, .panel-titlehogy előre stílusos címsort adjon hozzá. <h1>A - betűméretét <h6>azonban felülírja .panel-heading.

A linkek megfelelő színezése érdekében ügyeljen arra, hogy a linkeket a címsorokban helyezze el .panel-title.

Panel fejléce cím nélkül
Panel tartalma

Panel címe

Panel tartalma
<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 gombok vagy a másodlagos szöveg tördelése .panel-footer. Vegye figyelembe, hogy a panelláb nem örökli a színeket és a szegélyeket, ha kontextus szerinti variációkat használ, mivel nem az előtérben vannak.

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

Kontextuális alternatívák

A többi komponenshez hasonlóan a paneleket a kontextuális állapotosztályok bármelyikének hozzáadásával egyszerűen lehet értelmesebbé tenni egy adott környezet számára.

Panel címe

Panel tartalma

Panel címe

Panel tartalma

Panel címe

Panel tartalma

Panel címe

Panel tartalma

Panel címe

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

Asztalokkal

.tableA zökkenőmentes kialakítás érdekében adjon hozzá bármilyen nem szegélyezett elemet a panelen belül. Ha van .panel-body, akkor a táblázat tetejére egy extra szegélyt adunk az elválasztás érdekében.

Panel fejléce

Néhány alapértelmezett paneltartalom itt. Nulla vitae elit libero, a 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 vehicula ut id elit.

# Keresztnév Vezetéknév Felhasználónév
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @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>

Ha nincs paneltest, az összetevő megszakítás nélkül mozog a panel fejlécéből a táblázatba.

Panel fejléce
# Keresztnév Vezetéknév Felhasználónév
1 Mark Ottó @mdo
2 Jákób Thornton @zsír
3 Larry a madár @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

Listacsoportokkal

Könnyen beilleszthet teljes szélességű listacsoportokat bármely panelbe.

Panel fejléce

Néhány alapértelmezett paneltartalom itt. Nulla vitae elit libero, a 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 vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis be
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum és eros
<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>

Reszponzív beágyazás

Lehetővé teszi a böngészők számára, hogy meghatározzák a videó vagy diavetítés méreteit az őket tartalmazó blokk szélessége alapján egy olyan belső arány létrehozásával, amely bármely eszközön megfelelően méretezhető.

A szabályok közvetlenül vonatkoznak a <iframe>, <embed>, <video>, és <object>elemekre; opcionálisan használjon explicit leszármazott osztályt .embed-responsive-item, ha más attribútumok stílusát szeretné egyeztetni.

Profi tipp! Nem kell beleírnia frameborder="0"az <iframe>s-be, mivel ezt felülírjuk az Ön számára.

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

Wells

Alapértelmezett jól

Használja a kutat egyszerű effektusként egy elemen, hogy beilleszthető hatást adjon.

Nézd, egy kútban vagyok!
<div class="well">...</div>

Választható órák

Szabályozhatja a párnázást és a lekerekített sarkokat két választható módosító osztállyal.

Nézd, egy nagy kútban vagyok!
<div class="well well-lg">...</div>
Nézd, egy kis kútban vagyok!
<div class="well well-sm">...</div>