Componente
Peste o duzină de componente reutilizabile construite pentru a oferi iconografie, meniuri derulante, grupuri de intrare, navigare, alerte și multe altele.
Peste o duzină de componente reutilizabile construite pentru a oferi iconografie, meniuri derulante, grupuri de intrare, navigare, alerte și multe altele.
Include peste 250 de glife în format font din setul Glyphicon Halflings. Glyphicons Halflings nu sunt în mod normal disponibile gratuit, dar creatorul lor le-a pus la dispoziție gratuit pentru Bootstrap. Ca mulțumire, vă cerem să includeți un link înapoi la Glyphicons, ori de câte ori este posibil.
Din motive de performanță, toate pictogramele necesită o clasă de bază și o clasă individuală de pictograme. Pentru a utiliza, plasați următorul cod aproape oriunde. Asigurați-vă că lăsați un spațiu între pictogramă și text pentru o umplutură adecvată.
Clasele de pictograme nu pot fi combinate direct cu alte componente. Ele nu trebuie folosite împreună cu alte clase pe același element. În schimb, adăugați un imbricat <span>
și aplicați clasele de pictograme la <span>
.
Clasele de pictograme trebuie utilizate numai pe elemente care nu conțin conținut text și nu au elemente secundare.
Bootstrap presupune că fișierele cu fonturi pictograme vor fi localizate în ../fonts/
director, în raport cu fișierele CSS compilate. Mutarea sau redenumirea acelor fișiere cu fonturi înseamnă actualizarea CSS-ului într-unul din trei moduri:
@icon-font-path
și/sau @icon-font-name
variabilele din fișierele sursă Less.url()
căile în CSS-ul compilat.Utilizați opțiunea care se potrivește cel mai bine configurației dvs. specifice de dezvoltare.
Versiunile moderne ale tehnologiilor de asistență vor anunța conținut generat CSS, precum și caractere Unicode specifice. Pentru a evita ieșirile neintenționate și confuze în cititoarele de ecran (în special atunci când pictogramele sunt folosite doar pentru decorare), le ascundem cu aria-hidden="true"
atributul.
Dacă utilizați o pictogramă pentru a transmite semnificație (mai degrabă decât doar ca element decorativ), asigurați-vă că acest sens este transmis și tehnologiilor de asistență – de exemplu, includeți conținut suplimentar, ascuns vizual cu .sr-only
clasa.
Dacă creați controale fără alt text (cum ar fi un text <button>
care conține doar o pictogramă), ar trebui să furnizați întotdeauna conținut alternativ pentru a identifica scopul controlului, astfel încât să aibă sens pentru utilizatorii tehnologiilor de asistență. În acest caz, puteți adăuga un aria-label
atribut pe controlul în sine.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Folosiți-le în butoane, grupuri de butoane pentru o bară de instrumente, navigare sau intrări de formulare anexate.
<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>
O pictogramă folosită într-o alertă pentru a transmite că este un mesaj de eroare, cu .sr-only
text suplimentar pentru a transmite acest indiciu utilizatorilor tehnologiilor de asistență.
<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>
Meniu contextual care poate fi comutat pentru afișarea listelor de linkuri. Făcut interactiv cu pluginul JavaScript derulant .
Închideți declanșatorul meniului drop-down și meniul drop-down în .dropdown
, sau alt element care declară position: relative;
. Apoi adăugați HTML-ul meniului.
<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>
Meniurile drop-down pot fi modificate pentru a se extinde în sus (în loc de în jos) prin adăugarea .dropup
la părinte.
<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>
În mod implicit, un meniu derulant este poziționat automat 100% din partea de sus și de-a lungul părții stângi a părintelui său. Adăugați .dropdown-menu-right
la .dropdown-menu
a aliniați la dreapta meniul drop-down.
Mențiunile derulante sunt poziționate automat prin CSS în fluxul normal al documentului. Aceasta înseamnă că meniurile derulante pot fi tăiate de părinți cu anumite overflow
proprietăți sau pot apărea în afara limitelor ferestrei de vizualizare. Rezolvați singur aceste probleme pe măsură ce apar.
.pull-right
Aliniere depreciatăÎncepând cu v3.1.0, am renunțat .pull-right
la meniurile drop-down. Pentru a alinia la dreapta un meniu, utilizați .dropdown-menu-right
. Componentele de navigare aliniate la dreapta din bara de navigare folosesc o versiune mixin a acestei clase pentru a alinia automat meniul. Pentru a o anula, utilizați .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Adăugați un antet pentru a eticheta secțiunile de acțiuni din orice meniu vertical.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Adăugați un divizor la serii separate de linkuri într-un meniu vertical.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Adăugați .disabled
la a <li>
în meniul derulant pentru a dezactiva linkul.
<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>
Grupați o serie de butoane împreună pe o singură linie cu grupul de butoane. Adăugați un comportament radio opțional JavaScript și stil de casetă de selectare cu pluginul nostru pentru butoane .
Când utilizați sfaturi cu instrumente sau popover-uri pe elemente dintr-un .btn-group
, va trebui să specificați opțiunea container: 'body'
pentru a evita efectele secundare nedorite (cum ar fi elementul care crește și/sau își pierde colțurile rotunjite atunci când este declanșat balonul sau popoverul).
role
și furnizați o etichetăPentru ca tehnologiile de asistență – cum ar fi cititoarele de ecran – să transmită că o serie de butoane este grupată, role
trebuie furnizat un atribut adecvat. Pentru grupurile de butoane, aceasta ar fi role="group"
, în timp ce barele de instrumente ar trebui să aibă un role="toolbar"
.
O excepție sunt grupurile care conțin doar un singur control (de exemplu, grupurile de butoane justificate cu <button>
elemente) sau un meniu derulant.
În plus, grupurile și barele de instrumente ar trebui să primească o etichetă explicită, deoarece majoritatea tehnologiilor de asistență nu le vor anunța altfel, în ciuda prezenței role
atributului corect. În exemplele oferite aici, folosim aria-label
, dar aria-labelledby
pot fi folosite și alternative, cum ar fi.
Înfășurați o serie de nasturi cu .btn
în .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>
Combinați seturi de <div class="btn-group">
într-un <div class="btn-toolbar">
pentru componente mai complexe.
<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>
În loc să aplicați clase de dimensionare a butoanelor fiecărui buton dintr-un grup, trebuie doar să adăugați .btn-group-*
la fiecare .btn-group
, inclusiv atunci când imbricați mai multe grupuri.
<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>
Plasați un .btn-group
în altul .btn-group
atunci când doriți meniuri drop-down amestecate cu o serie de butoane.
<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>
Faceți ca un set de butoane să apară stivuite pe verticală și nu pe orizontală. Mențiunile drop-down cu butoanele divizate nu sunt acceptate aici.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Faceți un grup de nasturi să se întindă la dimensiuni egale pentru a acoperi întreaga lățime a părintelui său. Funcționează, de asemenea, cu butoanele drop-down din grupul de butoane.
Datorită specificului HTML și CSS folosit pentru a justifica butoanele (și anume display: table-cell
), granițele dintre ele sunt dublate. În grupurile obișnuite de butoane, margin-left: -1px
este folosit pentru a stivui chenarele în loc de a le elimina. Cu toate acestea, margin
nu funcționează cu display: table-cell
. Ca rezultat, în funcție de personalizările dvs. pentru Bootstrap, este posibil să doriți să eliminați sau să recolorați chenarele.
Internet Explorer 8 nu redă chenarele butoanelor dintr-un grup de butoane justificate, indiferent dacă este activat <a>
sau <button>
elemente. Pentru a ocoli asta, înfășurați fiecare buton în altul .btn-group
.
Consultați #12476 pentru mai multe informații.
<a>
elementeDoar înfășurați o serie de .btn
s în .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Dacă <a>
elementele sunt folosite pentru a acționa ca butoane – declanșând funcționalitatea în pagină, mai degrabă decât navigarea către un alt document sau secțiune din pagina curentă – ar trebui să li se acorde și un role="button"
.
<button>
elementePentru a utiliza grupuri de butoane justificate cu <button>
elemente, trebuie să împachetați fiecare buton într-un grup de butoane . Majoritatea browserelor nu aplică corect CSS-ul nostru pentru justificarea <button>
elementelor, dar deoarece acceptăm butoanele drop-down, putem rezolva asta.
<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>
Utilizați orice buton pentru a declanșa un meniu derulant, plasându-l într-un .btn-group
și oferind meniul de marcare adecvat.
Butoanele drop-down necesită ca pluginul dropdown să fie inclus în versiunea dvs. de Bootstrap.
Transformați un buton într-un meniu derulant cu câteva modificări de bază ale markupurilor.
<!-- 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>
În mod similar, creați meniuri derulante de butoane împărțite cu aceleași modificări de markup, doar cu un buton separat.
<!-- 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>
Butoanele derulante funcționează cu butoane de toate dimensiunile.
<!-- 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>
Declanșați meniuri drop-down deasupra elementelor adăugând .dropup
la părinte.
<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>
Extindeți controalele formularului adăugând text sau butoane înainte, după sau pe ambele părți ale oricărui text bazat pe text <input>
. Utilizați .input-group
cu .input-group-addon
sau .input-group-btn
pentru a adăuga sau a adăuga elemente la un singur .form-control
.
<input>
Numai textualeEvitați să folosiți <select>
elemente aici, deoarece nu pot fi stilate complet în browserele WebKit.
Evitați să folosiți <textarea>
elemente aici, deoarece rows
atributul lor nu va fi respectat în unele cazuri.
Când utilizați indicații sau popover-uri pe elemente dintr-un .input-group
, va trebui să specificați opțiunea container: 'body'
pentru a evita efectele secundare nedorite (cum ar fi elementul care crește și/sau își pierde colțurile rotunjite atunci când este declanșat balonul sau popoverul).
Nu amestecați grupuri de formulare sau clase de coloane grilă direct cu grupurile de intrare. În schimb, imbricați grupul de intrare în interiorul grupului de formulare sau al elementului legat de grilă.
Cititoarele de ecran vor avea probleme cu formularele dvs. dacă nu includeți o etichetă pentru fiecare intrare. Pentru aceste grupuri de intrare, asigurați-vă că orice etichetă sau funcționalitate suplimentară este transmisă tehnologiilor de asistență.
Tehnica exactă care trebuie utilizată ( <label>
elementele vizibile, <label>
elementele ascunse folosind .sr-only
clasa sau utilizarea atributului aria-label
, aria-labelledby
, aria-describedby
, title
sau placeholder
) și informațiile suplimentare care vor trebui transmise vor varia în funcție de tipul exact de widget de interfață pe care îl implementați. Exemplele din această secțiune oferă câteva abordări sugerate, specifice cazului.
Plasați un supliment sau un buton pe fiecare parte a unei intrări. De asemenea, puteți plasa unul pe ambele părți ale unei intrări.
Nu acceptăm mai multe suplimente ( .input-group-addon
sau .input-group-btn
) pe o singură parte.
Nu acceptăm mai multe controale de formular într-un singur grup de intrare.
<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>
Adăugați clasele de dimensionare a formularului în .input-group
sine și conținutul din interior se va redimensiona automat - nu este nevoie să repetați clasele de dimensiune de control al formularului pe fiecare element.
<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>
Plasați orice casetă de selectare sau opțiune radio în suplimentul unui grup de intrare în loc de text.
<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 -->
Butoanele din grupurile de intrare sunt puțin diferite și necesită un nivel suplimentar de imbricare. În loc de .input-group-addon
, va trebui să utilizați .input-group-btn
pentru a înfășura butoanele. Acest lucru este necesar din cauza stilurilor implicite de browser care nu pot fi suprascrise.
<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>
Deși puteți avea doar un supliment pe fiecare parte, puteți avea mai multe butoane într-un singur .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>
Nav-urile disponibile în Bootstrap au marcaj partajat, începând cu .nav
clasa de bază, precum și stări partajate. Schimbați clasele modificatoare pentru a comuta între fiecare stil.
Rețineți că .nav-tabs
clasa necesită clasa de .nav
bază.
<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>
Luați același HTML, dar folosiți .nav-pills
în schimb:
<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>
Pastilele sunt, de asemenea, stivuibile pe verticală. Doar adăugați .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Faceți cu ușurință tabletele sau pastilele cu lățimi egale față de părintele lor pe ecrane mai late de 768 px cu .nav-justified
. Pe ecranele mai mici, legăturile de navigare sunt stivuite.
Linkurile de navigare justificate din bara de navigare nu sunt acceptate momentan.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Pentru orice componentă de navigare (file sau pastile), adăugați linkuri gri și .disabled
fără efecte de trecere .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Adăugați meniuri derulante cu puțin HTML suplimentar și pluginul JavaScript pentru meniuri derulante .
<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>
Barele de navigare sunt meta componente receptive care servesc drept anteturi de navigare pentru aplicația sau site-ul dvs. Ele încep restrânse (și pot comuta) în vizualizările mobile și devin orizontale pe măsură ce lățimea ferestrei de vizualizare disponibilă crește.
Linkurile de navigare justificate din bara de navigare nu sunt acceptate momentan.
<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>
Înlocuiți marca navbar cu propria imagine schimbând textul cu un <img>
. Deoarece .navbar-brand
are propriile sale umplutură și înălțime, poate fi necesar să înlocuiți unele CSS, în funcție de imaginea dvs.
<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>
Plasați conținutul formularului în interior .navbar-form
pentru o aliniere verticală corectă și un comportament restrâns în ferestrele de vizualizare înguste. Utilizați opțiunile de aliniere pentru a decide unde se află în conținutul barei de navigare.
Ca informație, .navbar-form
partajează o mare parte din codul său .form-inline
prin mixin. Unele controale de formular, cum ar fi grupurile de intrare, pot necesita lățimi fixe pentru a fi afișate corect într-o bară de navigare.
<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>
Adăugați .navbar-btn
clasa <button>
elementelor care nu se află într-o <form>
pentru a le centra vertical în bara de navigare.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Înfășurați șirurile de text într-un element cu .navbar-text
, de obicei pe o <p>
etichetă pentru a obține o interfață și culoare adecvate.
<p class="navbar-text">Signed in as Mark Otto</p>
Pentru cei care folosesc linkuri standard care nu se află în componenta obișnuită de navigare a barei de navigare, utilizați .navbar-link
clasa pentru a adăuga culorile adecvate pentru opțiunile implicite și inverse ale barei de navigare.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Aliniați legăturile de navigare, formularele, butoanele sau textul, utilizând clasele de utilitate .navbar-left
sau . .navbar-right
Ambele clase vor adăuga un float CSS în direcția specificată. De exemplu, pentru a alinia legăturile de navigare, puneți-le într-un loc separat <ul>
cu clasa de utilitate respectivă aplicată.
Aceste clase sunt versiuni combinate ale .pull-left
și .pull-right
, dar sunt destinate interogărilor media pentru o manipulare mai ușoară a componentelor barei de navigare pe dimensiunile dispozitivelor.
Adăugați .navbar-fixed-top
și includeți .container
sau .container-fluid
pentru a centra și a bloca conținutul din bara de navigare.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Ad��ugați .navbar-fixed-bottom
și includeți .container
sau .container-fluid
pentru a centra și a bloca conținutul din bara de navigare.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Creați o bară de navigare cu lățime completă care se derulează odată cu pagina, adăugând .navbar-static-top
și includeți un .container
sau .container-fluid
pentru a centra și blocați conținutul barei de navigare.
Spre deosebire de .navbar-fixed-*
clase, nu trebuie să modificați nicio umplutură pe body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Modificați aspectul barei de navigare adăugând .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Indicați locația paginii curente într-o ierarhie de navigare.
Separatoarele sunt adăugate automat în CSS prin :before
și content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Furnizați linkuri de paginare pentru site-ul sau aplicația dvs. cu componenta de paginare cu mai multe pagini sau cu alternativa mai simplă de paginare .
Paginare simplă inspirată de Rdio, excelentă pentru aplicații și rezultatele căutării. Blocul mare este greu de ratat, ușor de scalat și oferă zone mari de clic.
<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>
Componenta de paginare ar trebui să fie înfășurată într-un <nav>
element care să o identifice ca o secțiune de navigare către cititoarele de ecran și alte tehnologii de asistență. În plus, deoarece o pagină este probabil să aibă deja mai multe astfel de secțiuni de navigare (cum ar fi navigarea principală în antet sau o navigare în bara laterală), este recomandabil să furnizați un descriptiv aria-label
pentru <nav>
care să reflecte scopul său. De exemplu, dacă componenta de paginare este utilizată pentru a naviga între un set de rezultate de căutare, o etichetă adecvată ar putea fi aria-label="Search results pages"
.
Linkurile sunt personalizabile pentru diferite circumstanțe. Utilizați .disabled
pentru link-uri care nu se pot face clic și .active
pentru a indica pagina curentă.
<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>
Vă recomandăm să schimbați ancorele active sau dezactivate cu <span>
, sau să omiteți ancora în cazul săgeților anterioare/următoare, pentru a elimina funcționalitatea de clic, păstrând în același timp stilurile dorite.
<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>
Vrei o paginare mai mare sau mai mică? Adăugați .pagination-lg
sau .pagination-sm
pentru dimensiuni suplimentare.
<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>
Link-uri anterioare și următoare rapide pentru implementări simple de paginare cu markup și stiluri ușoare. Este grozav pentru site-uri simple, cum ar fi bloguri sau reviste.
În mod implicit, paginatorul centrează linkurile.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Alternativ, puteți alinia fiecare link pe părțile laterale:
<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>
Link-urile pager folosesc, de asemenea, .disabled
clasa de utilitate generală din paginare.
<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>
Adăugați oricare dintre clasele modificatoare menționate mai jos pentru a schimba aspectul unei etichete.
<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>
Problemele de randare pot apărea atunci când aveți zeci de etichete în linie într-un container îngust, fiecare conținând propriul său inline-block
element (cum ar fi o pictogramă). Modul de ocolire a acestui lucru este setarea display: inline-block;
. Pentru context și un exemplu, consultați #13219 .
Evidențiați cu ușurință elementele noi sau necitite adăugând o <span class="badge">
la linkuri, navigații Bootstrap și multe altele.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Când nu există elemente noi sau necitite, insignele se vor prăbuși pur și simplu (prin :empty
selectorul CSS) cu condiția să nu existe conținut în interior.
Insignele nu se vor prăbuși automat în Internet Explorer 8, deoarece nu suportă :empty
selectorul.
Stilurile încorporate sunt incluse pentru plasarea insignelor în stări active în navigarea cu pilule.
<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>
O componentă ușoară, flexibilă, care poate extinde opțional întreaga fereastră de vizualizare pentru a prezenta conținut cheie de pe site-ul dvs.
Aceasta este o unitate eroică simplă, o componentă simplă în stil jumbotron pentru a atrage o atenție suplimentară asupra conținutului sau informațiilor prezentate.
<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>
Pentru a face jumbotronul cu lățimea completă și fără colțuri rotunjite, plasați-l în afara tuturor .container
s-urilor și adăugați în schimb un .container
interior.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
O carcasă simplă pentru h1
a distanța și a segmenta în mod corespunzător secțiunile de conținut pe o pagină. Poate utiliza elementul h1
implicit al lui small
, precum și majoritatea celorlalte componente (cu stiluri suplimentare).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Extindeți sistemul de grile Bootstrap cu componenta miniaturi pentru a afișa cu ușurință grile de imagini, videoclipuri, text și multe altele.
Dacă sunteți în căutarea unei prezentări asemănătoare Pinterest a miniaturilor de diferite înălțimi și/sau lățimi, va trebui să utilizați un plugin terță parte, cum ar fi Masonry , Isotope sau Salvattore .
În mod implicit, miniaturile Bootstrap sunt concepute pentru a prezenta imaginile legate cu un marcaj minim necesar.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Cu un pic de markup suplimentar, este posibil să adăugați orice tip de conținut HTML, cum ar fi titluri, paragrafe sau butoane în miniaturi.
<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>
Furnizați mesaje de feedback contextual pentru acțiunile tipice ale utilizatorului cu câteva mesaje de alertă disponibile și flexibile.
Includeți orice text și un buton opțional de respingere .alert
și una dintre cele patru clase contextuale (de exemplu, .alert-success
) pentru mesajele de alertă de bază.
Alertele nu au clase implicite, ci doar clase de bază și modificatoare. O alertă gri implicită nu are prea mult sens, așa că trebuie să specificați un tip prin intermediul clasei contextuale. Alegeți dintre succes, informații, avertismente sau pericol.
<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>
Construiți pe orice alertă adăugând un .alert-dismissible
buton opțional și de închidere.
Pentru a funcționa pe deplin, alerte respinse, trebuie să utilizați pluginul JavaScript alerte .
<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>
Asigurați-vă că utilizați <button>
elementul cu data-dismiss="alert"
atributul de date.
Utilizați .alert-link
clasa de utilitate pentru a furniza rapid link-uri colorate potrivite în orice alertă.
<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>
Furnizați feedback actualizat cu privire la progresul unui flux de lucru sau a unei acțiuni cu bare de progres simple, dar flexibile.
Barele de progres folosesc tranziții și animații CSS3 pentru a obține unele dintre efectele lor. Aceste funcții nu sunt acceptate în Internet Explorer 9 și versiunile anterioare sau versiuni mai vechi de Firefox. Opera 12 nu acceptă animații.
Dacă site-ul dvs. are o politică de securitate a conținutului (CSP) care nu permite style-src 'unsafe-inline'
, atunci nu veți putea folosi style
atribute inline pentru a seta lățimea barei de progres, așa cum se arată în exemplele noastre de mai jos. Metodele alternative de setare a lățimilor care sunt compatibile cu CSP-uri stricte includ utilizarea unui mic JavaScript personalizat (care setează element.style.width
) sau utilizarea claselor CSS personalizate.
Bara de progres implicită.
<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>
Eliminați clasa <span>
cu .sr-only
din bara de progres pentru a afișa un procent vizibil.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
Pentru a vă asigura că textul etichetei rămâne lizibil chiar și pentru procente mici, luați în considerare adăugarea unui min-width
la bara de progres.
<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>
Barele de progres folosesc unele dintre aceleași clase de butoane și alerte pentru stiluri consistente.
<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>
Utilizează un gradient pentru a crea un efect de dungi. Nu este disponibil în IE9 și mai jos.
<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>
Adăugați .active
la .progress-bar-striped
pentru a anima dungile de la dreapta la stânga. Nu este disponibil în IE9 și mai jos.
<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>
Puneți mai multe bare în același .progress
pentru a le stivui.
<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>
Stiluri abstracte de obiecte pentru construirea diferitelor tipuri de componente (cum ar fi comentarii pe blog, Tweeturi etc.) care prezintă o imagine aliniată la stânga sau la dreapta alături de conținut textual.
Media implicită afișează un obiect media (imagini, video, audio) la stânga sau la dreapta unui bloc de conținut.
<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>
Clasele .pull-left
și , de .pull-right
asemenea, există și au fost utilizate anterior ca parte a componentei media, dar sunt depreciate pentru această utilizare începând cu v3.3.0. Ele sunt aproximativ echivalente cu .media-left
și .media-right
, cu excepția faptului că .media-right
ar trebui să fie plasate după .media-body
în html.
Imaginile sau alte medii pot fi aliniate sus, mijloc sau jos. Valoarea implicită este aliniată în partea de sus.
Cras sit amet nibh libero, in 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, in 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, in 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>
Cu un pic de markup suplimentar, puteți utiliza media din lista (utilă pentru firele de comentarii sau listele de articole).
Cras sit amet nibh libero, in 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>
Grupurile de liste sunt o componentă flexibilă și puternică pentru afișarea nu numai a listelor simple de elemente, ci și a celor complexe cu conținut personalizat.
Cel mai elementar grup de liste este pur și simplu o listă neordonată cu elemente de listă și clasele adecvate. Construiți pe el cu opțiunile care urmează sau propriul dvs. CSS, după cum este necesar.
<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>
Adăugați componenta insigne la orice element de grup de listă și va fi poziționat automat în partea dreaptă.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Conectați elementele grupului de listă utilizând etichete de ancorare în loc de elemente de listă (care înseamnă și un părinte <div>
în loc de un <ul>
). Nu este nevoie de părinți individuali în jurul fiecărui element.
<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>
Elementele grupului de listă pot fi butoane în loc de elemente de listă (care înseamnă, de asemenea, un părinte <div>
în loc de un <ul>
). Nu este nevoie de părinți individuali în jurul fiecărui element. Nu folosiți .btn
aici clasele standard.
<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>
Adăugați .disabled
la a .list-group-item
pentru a dezactiva gri pentru a apărea dezactivat.
<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>
Utilizați clase contextuale pentru a stila elementele listei, implicite sau legate. Include, de asemenea, .active
statul.
<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>
Adăugați aproape orice HTML în interior, chiar și pentru grupurile de liste legate, cum ar fi cel de mai jos.
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Mecenas 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>
Deși nu este întotdeauna necesar, uneori trebuie să puneți DOM-ul într-o cutie. Pentru aceste situații, încercați componenta panoului.
În mod implicit, tot ceea ce .panel
face este să aplice niște chenaruri de bază și umplutură pentru a conține conținut.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Adăugați cu ușurință un container de antet la panoul dvs. cu .panel-heading
. De asemenea, puteți include orice <h1>
- <h6>
cu o .panel-title
clasă pentru a adăuga un titlu pre-stilat. Cu toate acestea, dimensiunile fontului <h1>
- <h6>
sunt înlocuite de .panel-heading
.
Pentru o colorare corectă a linkurilor, asigurați-vă că plasați linkurile în titluri din .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>
Încadrați butoanele sau textul secundar în .panel-footer
. Rețineți că subsolurile panoului nu moștenesc culorile și marginile atunci când utilizați variații contextuale, deoarece nu sunt menite să fie în prim-plan.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Ca și alte componente, faceți cu ușurință un panou mai semnificativ pentru un anumit context, adăugând oricare dintre clasele de stare contextuală.
<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>
Adăugați orice fără margini .table
într-un panou pentru un design perfect. Dacă există un .panel-body
, adăugăm un chenar suplimentar în partea de sus a tabelului pentru separare.
Unele conținut implicit ale panoului aici. 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.
# | Nume | Numele de familie | Nume de utilizator |
---|---|---|---|
1 | marcă | Otto | @mdo |
2 | Iacov | Thornton | @gras |
3 | Larry | Pasarea | @stare de nervozitate |
<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>
Dacă nu există un corp de panou, componenta se mută de la antetul panoului la tabel fără întrerupere.
# | Nume | Numele de familie | Nume de utilizator |
---|---|---|---|
1 | marcă | Otto | @mdo |
2 | Iacov | Thornton | @gras |
3 | Larry | Pasarea | @stare de nervozitate |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Includeți cu ușurință grupuri de liste cu lățime completă în orice panou.
Unele conținut implicit ale panoului aici. 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>
Permiteți browserelor să determine dimensiunile videoclipurilor sau ale prezentării de diapozitive pe baza lățimii blocului care le conține, creând un raport intrinsec care se va scala corect pe orice dispozitiv.
Regulile sunt aplicate direct la <iframe>
, <embed>
, <video>
, și <object>
elemente; opțional, utilizați o clasă descendentă explicită .embed-responsive-item
când doriți să potriviți stilul pentru alte atribute.
Sfat pro! Nu trebuie să includeți frameborder="0"
în documentele dvs. <iframe>
, deoarece noi îl înlocuim pentru dvs.
<!-- 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>
Utilizați puțul ca efect simplu asupra unui element pentru a-i da un efect de inserție.
<div class="well">...</div>
Controlați umplutura și colțurile rotunjite cu două clase de modificatori opționale.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>