Több mint egy tucat újrafelhasználható alkatrész, amelyek ikonográfiát, legördülő listákat, beviteli csoportokat, navigációt, figyelmeztetéseket és még sok mást biztosítanak.
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.
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.
Példák
Használja őket gombokban, gombcsoportokban az eszköztárhoz, a navigációhoz vagy az űrlap elé fűzött bevitelekhez.
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.
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.
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.
Fejlécek
Adjon hozzá fejlécet a műveletek szakaszainak címkézéséhez bármely legördülő menüben.
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.
Gomb eszköztár
Kombinálja a készleteket a- <div class="btn-group">ba az <div class="btn-toolbar">összetettebb összetevőkért.
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.
Fészekrakás
Helyezzen el egy .btn-groupmásikat .btn-group, ha egy sor gombbal kevert legördülő menüt szeretne.
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.
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.
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.
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.
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.
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.
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.
Gombok legördülő menükkel
Szegmentált gombok
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.
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
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.
Tabs
Vegye figyelembe, hogy az .nav-tabsosztálynak szüksége van az .navalaposztályra.
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ó .
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.
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.
Márka imázsa
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.
Űrlapok
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.
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.
Gombok
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.
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
Szöveg
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.
Nem navigációs hivatkozások
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.
Alkatrészek igazítása
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.
A tetejére rögzítve
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.
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.
Ügyeljen arra, hogy ezt az alapvető Bootstrap CSS után adja meg.
Alulra rögzítve
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.
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.
Ügyeljen arra, hogy ezt az alapvető Bootstrap CSS után adja meg.
Statikus felső
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.
Fordított navigációs sáv
Módosítsa a navigációs sáv megjelenését a hozzáadásával .navbar-inverse.
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.
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.
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.
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.
Méretezés
Nagyobb vagy kisebb oldalszámozásra vágyik? Add hozzá .pagination-lgvagy .pagination-smtovábbi méretekhez.
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.
Igazított linkek
Alternatív megoldásként az egyes hivatkozásokat az oldalakhoz igazíthatja:
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.
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
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 _
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.
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.
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).
Példa oldalfejléc Subtext a fejléchez
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.
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.
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.
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.
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.
Elvethető figyelmeztetések
Bármilyen riasztásra építhet egy opcionális .alert-dismissibleés bezárás gomb hozzáadásával.
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
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%
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%
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)
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)
É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
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)
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.
.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.
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.
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
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
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.
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.
Letiltott elemek
Adja hozzá .disabledaz a -hoz, .list-group-itemhogy kiszürkítse, hogy letiltva jelenjen meg.
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
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
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
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
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
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
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
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.
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!
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.