Alkatrészek
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.
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.
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 .
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.
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>
.
Az ikonosztályokat csak olyan elemeken szabad használni, amelyek nem tartalmaznak szöveges tartalmat és nincsenek gyermekelemek.
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:
@icon-font-path
és/vagy @icon-font-name
változókat a Kevesebb fájl forrásban.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.
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-only
osztá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-label
magán a vezérlőn adhat hozzá egy attribútumot.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
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-only
szöveggel, amely továbbítja ezt a tippet a kisegítő technológiák felhasználóinak.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
Átkapcsolható, kontextuális menü a hivatkozások listájának megjelenítéséhez. Interaktívvá tettük a legördülő JavaScript beépülő modullal .
Csomagolja be a legördülő menü aktiválóját és a legördülő menüt a .dropdown
, vagy egy másik elembe, amely deklarálja a position: relative;
. Ezután adja hozzá a menü HTML-kódját.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
A legördülő menük módosíthatók úgy, .dropup
hogy a szülőhöz hozzáadva felfelé (lefelé) bővüljenek.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Alapértelmezés szerint a legördülő menü automatikusan 100%-ban a fölé és bal oldala mentén helyezkedik el. Add hozzá .dropdown-menu-right
a .dropdown-menu
jobbra igazításhoz a legördülő menüt.
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 overflow
tulajdonságokkal, vagy a nézetablak határain kívül jelenhetnek meg. A felmerülő problémákat önállóan oldja meg.
.pull-right
igazításA 3.1.0-s verziótól kezdve .pull-right
a legördülő menük használata megszűnt. A menü jobbra igazításához használja a gombot .dropdown-menu-right
. A navigációs sáv jobbra igazított navigációs összetevői ennek az osztálynak a mixin verzióját használják a menü automatikus igazításához. A felülbíráláshoz használja a .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Adjon hozzá fejlécet a műveletek szakaszainak címkézéséhez bármely legördülő menüben.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Adjon hozzá egy elválasztót a hivatkozások elkülönítéséhez egy legördülő menüben.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
A hivatkozás letiltásához adja hozzá .disabled
az 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 .
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).
role
a helyességről és adjon címkétAhhoz, 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ő role
attribú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ő role
attribú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-labelledby
is, mint pl.
Csomagoljon be egy gombsort a .btn
kö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>
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>
Helyezzen el egy .btn-group
má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>
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>
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 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: -1px
gombcsoportokban a szegélyek egymásra helyezésére szolgál, ahelyett, hogy eltávolítaná őket. Azonban margin
nem 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.
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 .
<a>
_Csak csomagoljon be egy .btn
s sorozatot .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
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"
.
<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.
A gombok legördülő menüihez a legördülő bővítménynek szerepelnie kell a Bootstrap verziójában.
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>
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>
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>
Az elemek feletti legördülő menük aktiválása .dropup
a 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-group
a .input-group-addon
vagy .input-group-btn
jellel az elemek elejére vagy hozzáfűzéséhez .form-control
.
<input>
sKerü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 rows
rendszer bizonyos esetekben nem veszi figyelembe az attribútumot.
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 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.
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-only
aria-label
aria-labelledby
aria-describedby
title
placeholder
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-addon
vagy .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>
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>
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 -->
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-addon
kell használnia .input-group-btn
a 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 -->
<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 -->
<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>
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, .nav
valamint megosztott állapotokkal. Cserélje fel a módosító osztályokat az egyes stílusok közötti váltáshoz.
Vegye figyelembe, hogy az .nav-tabs
osztálynak szüksége van az .nav
alaposztályra.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Vegyük ugyanazt a HTML-kódot, de használjuk .nav-pills
helyette:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
A tabletták függőlegesen is egymásra rakhatók. Csak add hozzá .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
A 768 képpontnál szélesebb képernyőkön a füleket vagy tablettákat könnyedén azonos szélességűvé teheti a szülővel .nav-justified
. Kisebb képernyőkön a navigációs hivatkozások egymásra vannak helyezve.
Az igazított navigációs sáv navigációs hivatkozásai jelenleg nem támogatottak.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Bármely navigációs komponens (lapok vagy tabletták) esetén adja hozzá .disabled
a szürke hivatkozásokat, és ne lehessen lebegni effektusokat .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Adjon hozzá legördülő menüket egy kis extra HTML-lel és a legördülő JavaScript beépülő modullal .
<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>
<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.
<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-brand
fá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-form
a 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-form
Figyelmeztetésként a kód nagy részét megosztja a mixin .form-inline
keresztü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>
Adja hozzá az .navbar-btn
osztá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-link
osztá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-left
vagy .navbar-right
segé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-right
de 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 .container
vagy .container-fluid
elemet 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>
Adjon hozzá .navbar-fixed-bottom
és vegyen fel egy .container
vagy .container-fluid
elemet 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>
Hozzon létre egy teljes szélességű navigációs sávot, amely elgörget az oldallal úgy, hogy hozzáad .navbar-static-top
egy .container
vagy .container-fluid
a 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>
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>
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 .
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">«</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">»</span>
</a>
</li>
</ul>
</nav>
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-label
megadni, <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"
.
A linkek testreszabhatók a különböző körülményekhez. Használja .disabled
a nem kattintható hivatkozásokhoz és .active
az aktuális oldal jelzéséhez.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</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">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Nagyobb vagy kisebb oldalszámozásra vágyik? Add hozzá .pagination-lg
vagy .pagination-sm
tová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>
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értelmezés szerint a lapozó központosítja a hivatkozásokat.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Alternatív megoldásként az egyes hivatkozásokat az oldalakhoz igazíthatja:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
A személyhívó hivatkozások az oldalszámozás általános .disabled
segédprogram-osztályát is használják.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
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.
<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>
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-block
elemet (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.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Ha nincsenek új vagy olvasatlan elemek, a jelvények egyszerűen összecsukódnak (a CSS :empty
választóján keresztül), feltéve, hogy nincs benne tartalom.
A jelvények nem csukódnak össze az Internet Explorer 8-ban, mert nem támogatja a :empty
választót.
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.
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.
<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 .container
s-n kívülre, és adjon hozzá egy .container
belsőt.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Egy egyszerű héj az h1
oldalon lévő tartalom szakaszainak megfelelő szétválasztásához és szegmentálásához. Használhatja az h1
alapértelmezett small
elemet, 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é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>
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.
<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.
Törölje be a szöveget és az opcionális elvetés gombot .alert
a négy kontextus szerinti osztály egyikébe (pl. .alert-success
) az alapvető figyelmeztető üzenetekhez.
A riasztásoknak nincsenek alapértelmezett osztályai, csak alap- és módosító osztályok. Az alapértelmezett szürke riasztásnak nincs túl sok értelme, ezért meg kell adnia a típust a környezetfüggő osztályon keresztül. Válasszon a siker, az információ, a figyelmeztetés vagy a veszély közül.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
Bármilyen riasztásra építhet egy opcionális .alert-dismissible
és bezárás gomb hozzáadásával.
A teljesen működőképes, elvethető figyelmeztetésekhez az alerts JavaScript beépülő modult kell használnia .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Ügyeljen arra, hogy a data attribútummal <button>
rendelkező elemet használja.data-dismiss="alert"
Használja a .alert-link
segédprogram osztályt, hogy gyorsan biztosítson megfelelő színű hivatkozásokat bármely riasztáson belül.
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
Naprakész visszajelzést ad egy munkafolyamat vagy művelet előrehaladásáról az egyszerű, de rugalmas folyamatjelző sávokkal.
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.
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 style
attribú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é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>
A látható százalékos arány megjelenítéséhez távolítsa el a <span>
with .sr-only
osztályt a folyamatjelző sávból.
<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-width
a folyamatjelző sávhoz.
<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>
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>
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>
Hozzáadás .active
a .progress-bar-striped
csí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>
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.
Az alapértelmezett média egy médiaobjektumot (képeket, videót, hangot) jelenít meg a tartalomblokk bal vagy jobb oldalán.
<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-left
A és osztályok .pull-right
szinté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-right
után kell elhelyezni ..media-body
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.
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.
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.
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>
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).
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.
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.
<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>
Adja hozzá a jelvények összetevőt a listacsoport bármely eleméhez, és az automatikusan a jobb oldalon lesz.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
A listaelemek összekapcsolása a listaelemek helyett horgonycímkék használatával (ez egyben szülőt is jelent a <div>
helyett <ul>
). Nincs szükség külön szülőkre az egyes elemek körül.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
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 .btn
itt 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>
Adja hozzá .disabled
az a -hoz, .list-group-item
hogy kiszürkítse, hogy letiltva jelenjen meg.
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Használjon környezetfüggő osztályokat a listaelemek stílusához, legyen az alapértelmezett vagy linkelt. Tartalmazza az .active
állapotot is.
<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>
Szinte bármilyen HTML-kódot adjon hozzá, még az alábbihoz hasonló hivatkozott listacsoportokhoz is.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
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értelmezés szerint .panel
csak néhány alapvető szegélyt és kitöltést kell alkalmazni a tartalom tárolására.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
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-title
elő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
.
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
A gombok vagy a másodlagos szöveg tördelése .panel-footer
. Vegye figyelembe, hogy a panelláb nem örökli a színeket és a szegélyeket, ha kontextus szerinti variációkat használ, mivel nem az előtérben vannak.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
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.
<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>
.table
A 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.
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 |
<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.
# | 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 |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Könnyen beilleszthet teljes szélességű listacsoportokat bármely panelbe.
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.
<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>
Használja a kutat egyszerű effektusként egy elemen, hogy beilleszthető hatást adjon.
<div class="well">...</div>
Szabályozhatja a párnázást és a lekerekített sarkokat két választható módosító osztállyal.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>