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 díszítésre 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 adjon meg 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.

Adjon meg egy érvényes email címet

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

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

Példa

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>

Igazítás

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.

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

Fejlécek

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>

Osztó

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>

Letiltott menüpontok

A hivatkozás letiltásához adja hozzá .disabledaz a elemet a legördülő menüben.<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>

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ő moduljával .

Az eszköztippek és a gombcsoportokban lévő felugró 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 `role`a 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 a role="group", míg az eszköztáron 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 a megfelelő roleattribútum megléte ellenére sem jelenti be őket. 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>

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 gombsorozattal kevert legördülő menüket 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ásaitó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.

Bal Középső Jobb

Bal Középső

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

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.

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

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 előugró 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 szélesebbé válását és/vagy lekerekített sarkainak elvesztését, amikor az eszköztipp 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 az, hogy milyen további információkat kell továbbítani, attól függően változik, hogy milyen típusú interfész widget implementál. 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.

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

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 szerepkört <ul>önmagához, mert ezzel megakadályozhatja, hogy a kisegítő technológiák tényleges listaként jelentsék be.

Tabs

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>

Tabletták

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>

Indokolt

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>

Letiltott linkek

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>

Legördülő menük használata

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>

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:

Csökkentse a navigációs sáv elemeinek mennyiségét vagy szélességét.
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 .
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.

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. Módosítsa 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ő).

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

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útum használatát, ha van, de vegye figyelembe, hogy placeholdermás címkézési módszerek helyett nem javasolt a 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>

Törölje be 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 tartoznak a normál navigációs komponensbe, az .navbar-linkosztály segítségével adja hozzá a megfelelő színeket az alapértelmezett és fordított 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.

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>

Igazított linkek

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>

Példa

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 .

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.

Beérkezett üzenetek42

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

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>

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>

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

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

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

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>

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.

Szép munka! Sikeresen elolvasta ezt a fontos figyelmeztető üzenetet.

Fel a fejjel! Ez a figyelmeztetés figyelmet igényel, de nem túl fontos.

Figyelem! Inkább nézd meg magad, nem nézel ki túl jól.

Ajjaj! Módosítson néhány dolgot, és próbálja meg újra elküldeni.

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

Figyelem! Inkább nézd meg magad, nem nézel ki túl jól.

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

Hivatkozások a figyelmeztetésekben

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

Szép munka! Sikeresen elolvasta ezt a fontos figyelmeztető üzenetet .

Fel a fejjel! Ez a figyelmeztetés figyelmet igényel , de nem túl fontos.

Figyelem! Inkább nézd meg magad, nem nézel ki túl jól .

Ajjaj! Módosítson néhány dolgot, és próbálja meg újra elküldeni.

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

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.

<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 érdekében, hogy a címkeszöveg még alacsony százalékok 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 figyelmeztető osztályokat használják a konzisztens stílusok érdekében.

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

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

<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 helyezze őket.

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

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>

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.

Cras justo odio Dapibus ac facilisis be Morbi leo risus Porta ac consectetur ac Vestibulum és eros

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

Cras justo odio Dapibus ac facilisis be Morbi leo risus Porta ac consectetur ac Vestibulum és eros

<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

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.

Listacsoport elem fejléce

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Listacsoport elem fejléce

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Listacsoport elem fejléce

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

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

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>egy .panel-titleelőre stílusos címsor hozzáadásához. <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ímsorokba 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>

Panel lábléccel

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

Panel lábléc

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

Engedélyezze a böngészőknek, hogy meghatározzák a videó vagy diavetítés méreteit a tárolóblokk szélessége alapján, 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>

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>

Alkatrészek

Glyphicons

Elérhető karakterjelek

Hogyan kell használni

Ne keverje össze más összetevőkkel

Csak üres elemeken használható

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

Hozzáférhető ikonok

Példák

Legördülő menük

Példa

Igazítás

További pozicionálást igényelhet

Elavult .pull-rightigazítás

Fejlécek

Osztó

Letiltott menüpontok

Gombcsoportok

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

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

Alap példa

Gomb eszköztár

Méretezés

Fészekrakás

Függőleges variáció

Igazított gombcsoportok

A határok kezelése

IE8 és határok

Elemekkel <a>_

Gombként működő linkek

Elemekkel <button>_

Gombok legördülő menüi

Plugin-függőség

Egygombos legördülő menük

Split gomb legördülő menük

Méretezés

Dropup variáció

Beviteli csoportok

Csak szöveges <input>s

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

Ne keverje össze más összetevőkkel

Mindig adjon hozzá címkéket

Alap példa

Méretezés

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

Gomb kiegészítők

Gombok legördülő menükkel

Szegmentált gombok

Több gomb

Navs

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

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

Tabs

Tabletták

Indokolt

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

Letiltott linkek

A link funkcióit nem érinti

Legördülő menük használata

Lapok legördülő menükkel

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

Navbar

Alapértelmezett navigációs sáv

Túlcsorduló tartalom

JavaScript plugin szükséges

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

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

Márka imázsa

Űrlapok

A mobileszközökre vonatkozó figyelmeztetések

Mindig adjon hozzá címkéket

Gombok

Kontextus-specifikus használat

Szöveg

Nem navigációs hivatkozások

Alkatrészek igazítása

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

A tetejére rögzítve

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

Alulra rögzítve

Elavult `.pull-right`igazítás

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

Elemekkel `<a>`_

Elemekkel `<button>`_

Csak szöveges `<input>`s