Componente
Peste o duzină de componente reutilizabile construite pentru a oferi iconografie, meniuri derulante, grupuri de intrare, navigare, alerte și multe altele.
Glificonuri
Glife disponibile
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.
- glificon glificon-asterisc
- glyphicon glyphicon-plus
- gliphicon gliphicon-euro
- glyphicon glyphicon-eur
- gliphicon gliphicon-minus
- glyphicon glyphicon-nor
- glyphicon gliphicon-plic
- gliphicon gliphicon-creion
- gliphicon gliphicon-sticlă
- glyphicon gliphicon-muzică
- glyphicon gliphicon-căutare
- glificon glificon-inima
- gliphicon gliphicon-stea
- gliphicon gliphicon-stea-gol
- glyphicon gliphicon-utilizator
- gliphicon gliphicon-film
- glyphicon glyphicon-th-mare
- glyphicon glyphicon-th
- glyphicon glyphicon-th-list
- gliphicon gliphicon-ok
- glyphicon gliphicon-eliminare
- gliphicon gliphicon-zoom-in
- glyphicon gliphicon-zoom-out
- glyphicon glyphicon-off
- glyphicon gliphicon-semnal
- gliphicon gliphicon-cog
- glyphicon glyphicon-trash
- gliphicon gliphicon-acasă
- glyphicon glyphicon-file
- glificon glificon-timp
- glyphicon gliphicon-drum
- glyphicon glyphicon-descărcare-alt
- glyphicon glyphicon-descărcare
- glyphicon glyphicon-upload
- glyphicon glyphicon-inbox
- gliphicon gliphicon-cerc-joc
- glyphicon gliphicon-repetare
- glyphicon glyphicon-refresh
- glyphicon gliphicon-list-alt
- glyphicon gliphicon-lock
- gliphicon gliphicon-steag
- glyphicon glyphicon-căști
- glyphicon gliphicon-volum-off
- gliphicon gliphicon-volum-jos
- glyphicon gliphicon-volum-up
- glyphicon glyphicon-qrcode
- glyphicon gliphicon-cod de bare
- glyphicon glyphicon-tag
- glyphicon glyphicon-tags
- glificon glificon-carte
- glyphicon gliphicon-semn de carte
- glyphicon glyphicon-print
- glyphicon gliphicon-camera
- glyphicon glyphicon-font
- glyphicon gliphicon-bold
- glyphicon gliphicon-italic
- glyphicon gliphicon-text-height
- glyphicon gliphicon-text-width
- glyphicon glyphicon-align-left
- glyphicon glyphicon-align-center
- glyphicon glyphicon-align-dreapta
- glyphicon glyphicon-align-justify
- glyphicon glyphicon-list
- glyphicon gliphicon-indentare-stânga
- glyphicon gliphicon-indentare-dreapta
- glyphicon glyphicon-facetime-video
- glyphicon gliphicon-imagine
- glyphicon gliphicon-hartă-marker
- glyphicon gliphicon-ajustare
- glyphicon gliphicon-tint
- glyphicon glyphicon-edit
- glyphicon glyphicon-share
- gliphicon glificon-verificare
- glificon glificon-mutare
- gliphicon gliphicon-pas-înapoi
- gliphicon gliphicon-rapid-înapoi
- glyphicon gliphicon-înapoi
- glyphicon gliphicon-joc
- gliphicon gliphicon-pauză
- gliphicon gliphicon-oprire
- glyphicon gliphicon-înainte
- glyphicon gliphicon-rapid-înainte
- gliphicon gliphicon-pas-înainte
- glyphicon glyphicon-eject
- glyphicon gliphicon-chevron-stânga
- glificon glificon-chevron-dreapta
- glyphicon glyphicon-plus-semn
- glyphicon gliphicon-semn-minus
- gliphicon gliphicon-elimină-semn
- gliphicon gliphicon-ok-semn
- glificon glificon-semn-întrebare
- glyphicon glyphicon-info-semn
- glyphicon glyphicon-screenshot
- gliphicon gliphicon-elimină-cerc
- gliphicon gliphicon-ok-cerc
- glyphicon glyphicon-ban-cerc
- gliphicon gliphicon-săgeată-stânga
- glyphicon gliphicon-săgeată-dreapta
- gliphicon gliphicon-săgeată-sus
- gliphicon gliphicon-săgeată-jos
- glyphicon glyphicon-share-alt
- gliphicon gliphicon-redimensionare-plin
- glyphicon gliphicon-redimensionare-mic
- glyphicon gliphicon-semn-exclamație
- gliphicon gliphicon-cadou
- gliphicon gliphicon-frunză
- glificon glificon-foc
- glyphicon gliphicon-ochi-deschis
- gliphicon gliphicon-ochi-închis
- glyphicon gliphicon-semn-de-avertizare
- glificon glificon-plan
- gliphicon gliphicon-calendar
- glyphicon gliphicon-aleatoriu
- glyphicon gliphicon-comentar
- glificon glificon-magnet
- glyphicon gliphicon-chevron-up
- gliphicon gliphicon-chevron-jos
- glyphicon glyphicon-retweet
- glyphicon glyphicon-cart-cumpărături
- gliphicon gliphicon-dosar-închidere
- gliphicon gliphicon-dosar-deschis
- glyphicon gliphicon-redimensionare-vertical
- glyphicon gliphicon-redimensionare-orizontal
- glyphicon glyphicon-hdd
- glyphicon glyphicon-bullhorn
- glificon glificon-clopot
- glyphicon glyphicon-certificat
- glyphicon gliphicon-degetul mare în sus
- glyphicon glyphicon-degetele în jos
- glificon glificon-mâna-dreapta
- glificon glificon-mâna-stânga
- gliphicon gliphicon-mâna sus
- glyphicon gliphicon-mâna-jos
- gliphicon gliphicon-cerc-săgeată-dreapta
- gliphicon gliphicon-cerc-săgeată-stânga
- gliphicon gliphicon-cerc-săgeată-sus
- gliphicon gliphicon-cerc-săgeată-jos
- glyphicon gliphicon-glob
- gliphicon gliphicon-cheie
- glyphicon glyphicon-sarcini
- gliphicon gliphicon-filtru
- gliphicon gliphicon-servietă
- glyphicon glyphicon-fullscreen
- gliphicon gliphicon-tablou de bord
- glyphicon glyphicon-clip de hârtie
- gliphicon gliphicon-inima-gol
- glyphicon glyphicon-link
- glyphicon gliphicon-telefon
- glyphicon glyphicon-pushpin
- glyphicon glyphicon-usd
- glyphicon glyphicon-gbp
- glyphicon glyphicon-sort
- glyphicon glyphicon-sortare-după-alfabet
- glyphicon glyphicon-sortare-după-alfabet-alt
- glyphicon glyphicon-sortare-după-ordine
- glyphicon glyphicon-sortare-după-ordine-alt
- glyphicon glyphicon-sortare-după-atribute
- glyphicon glyphicon-sortare-după-atribute-alt
- glyphicon gliphicon-nebifat
- glyphicon glyphicon-expand
- glyphicon gliphicon-colaps-down
- glyphicon gliphicon-colaps-up
- glyphicon glyphicon-log-in
- glificon glificon-flash
- glyphicon glyphicon-deconectare
- glyphicon glyphicon-new-window
- glyphicon gliphicon-record
- glyphicon glyphicon-salvare
- glyphicon gliphicon-deschis
- glyphicon glyphicon-salvat
- gliphicon gliphicon-import
- glyphicon glyphicon-export
- gliphicon gliphicon-trimite
- glyphicon glyphicon-dischetă
- glyphicon glyphicon-floppy-salvat
- glyphicon glyphicon-floppy-remove
- glyphicon glyphicon-floppy-save
- glyphicon glyphicon-floppy-deschis
- glyphicon glyphicon-card-de-credit
- gliphicon gliphicon-transfer
- glyphicon gliphicon-tacâmuri
- glyphicon glyphicon-header
- glyphicon gliphicon-comprimat
- glyphicon glyphicon-cască
- gliphicon gliphicon-telefon-alt
- glyphicon gliphicon-turn
- glyphicon glyphicon-stats
- gliphicon gliphicon-sd-video
- gliphicon gliphicon-hd-video
- glyphicon glyphicon-subtitrări
- gliphicon gliphicon-sunet-stereo
- glyphicon glyphicon-sound-dolby
- gliphicon gliphicon-sunet-5-1
- glyphicon glyphicon-sound-6-1
- glyphicon glyphicon-sound-7-1
- glyphicon glyphicon-copyright-mark
- glyphicon gliphicon-marca-înregistrare
- glyphicon glyphicon-cloud-descărcare
- glyphicon glyphicon-cloud-upload
- gliphicon gliphicon-arbore-conifer
- gliphicon gliphicon-arborele-foisitoare
- gliphicon gliphicon-cd
- glyphicon glyphicon-salvare-fișier
- glyphicon glyphicon-deschide-fișier
- glyphicon gliphicon-level-up
- gliphicon gliphicon-copie
- gliphicon gliphicon-pastă
- glyphicon glyphicon-alerta
- gliphicon glificon-egalizator
- glificon glificon-rege
- gliphicon gliphicon-regina
- glificon glificon-pion
- gliphicon gliphicon-episcop
- glificon glificon-cavaler
- glyphicon glyphicon-bebeluș-formulă
- gliphicon gliphicon-cort
- glyphicon glyphicon-tabletă
- gliphicon gliphicon-pat
- gliphicon gliphicon-măr
- glyphicon gliphicon-stergere
- gliphicon gliphicon-clepsidra
- gliphicon gliphicon-lampa
- glyphicon gliphicon-duplicat
- glyphicon glyphicon-pușculiță
- glyphicon glyphicon-foarfece
- glyphicon glyphicon-bitcoin
- glyphicon glyphicon-btc
- glyphicon glyphicon-xbt
- gliphicon gliphicon-yen
- glyphicon glyphicon-jpy
- glificon glificon-ruble
- glyphicon glyphicon-rub
- glyphicon gliphicon-scale
- gliphicon gliphicon-acadea-gheata
- gliphicon gliphicon-acadea-gheata-gustat
- glyphicon gliphicon-educatie
- gliphicon gliphicon-opțiune-orizontal
- gliphicon gliphicon-opțiune-verticală
- glyphicon glyphicon-meniu-hamburger
- glyphicon glyphicon-modal-window
- gliphicon gliphicon-ulei
- glyphicon glyphicon-grain
- glyphicon glyphicon-ochelari de soare
- glyphicon gliphicon-text-size
- gliphicon gliphicon-text-culoare
- gliphicon gliphicon-text-fond
- glyphicon gliphicon-obiect-aliniere-top
- gliphicon gliphicon-obiect-aliniere-de jos
- gliphicon gliphicon-obiect-aliniere-orizontal
- gliphicon gliphicon-obiect-aliniere-stânga
- gliphicon gliphicon-obiect-aliniere-vertical
- gliphicon gliphicon-obiect-aliniere-dreapta
- glificon glificon-triunghi-dreapta
- glificon glificon-triunghi-stânga
- glyphicon gliphicon-triunghi-de jos
- glyphicon gliphicon-triunghi-top
- glyphicon gliphicon-consolă
- glificon glificon-superscript
- glificon glificon-subscript
- gliphicon gliphicon-meniu-stânga
- gliphicon gliphicon-meniu-dreapta
- gliphicon gliphicon-meniu-jos
- gliphicon gliphicon-meniu-sus
Cum se utilizează
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ă.
Nu amestecați cu alte componente
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>.
Pentru utilizare numai pe elemente goale
Clasele de pictograme trebuie utilizate numai pe elemente care nu conțin conținut text și nu au elemente secundare.
Schimbarea locației fontului pictogramei
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:
- Modificați
@icon-font-pathși/sau@icon-font-namevariabilele din fișierele sursă Less. - Utilizați opțiunea URL-uri relative oferită de compilatorul Less.
- Schimbați
url()căile în CSS-ul compilat.
Utilizați opțiunea care se potrivește cel mai bine configurației dvs. specifice de dezvoltare.
Pictograme accesibile
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-onlyclasa.
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-labelatribut pe controlul în sine.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>Exemple
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-onlytext suplimentar pentru a transmite acest indiciu utilizatorilor tehnologiilor de asistență.
Eroare:Introduceți o adresă de email validă
<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>Mențiuni derulante
Meniu contextual care poate fi comutat pentru afișarea listelor de linkuri. Făcut interactiv cu pluginul JavaScript derulant .
Exemplu
Î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 .dropupla 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>Aliniere
Î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-rightla .dropdown-menua aliniați la dreapta meniul drop-down.
Poate necesita o poziționare suplimentară
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 overflowproprietăți sau pot apărea în afara limitelor ferestrei de vizualizare. Rezolvați singur aceste probleme pe măsură ce apar.
.pull-rightAliniere depreciată
Începând cu v3.1.0, am renunțat .pull-rightla 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>Anteturi
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>Divizor
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>Elemente de meniu dezactivate
Adăugați .disabledla 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>Grupuri de butoane
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 .
Sfaturile instrumente și popoverele din grupurile de butoane necesită o setare specială
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).
Asigurați-vă că este corect 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ă, roletrebuie 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 roleatributului corect. În exemplele oferite aici, folosim aria-label, dar aria-labelledbypot fi folosite și alternative, cum ar fi.
Exemplu de bază
Î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>Bara de instrumente pentru butoane
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>Dimensiunea
Î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>Cuibărire
Plasați un .btn-groupîn altul .btn-groupatunci 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>Variație verticală
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>Grupuri de butoane justificate
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.
Manipularea granițelor
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: -1pxeste folosit pentru a stivui chenarele în loc de a le elimina. Cu toate acestea, marginnu 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.
IE8 și frontiere
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.
Cu <a>elemente
Doar înfășurați o serie de .btns în .btn-group.btn-group-justified.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>Link-uri care acționează ca butoane
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".
Cu <button>elemente
Pentru 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>Butoane derulante
Utilizați orice buton pentru a declanșa un meniu derulant, plasându-l într-un .btn-groupși oferind meniul de marcare adecvat.
Dependență de plugin
Butoanele drop-down necesită ca pluginul dropdown să fie inclus în versiunea dvs. de Bootstrap.
Meniuri derulante cu un singur buton
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>Butoane derulante împărțite
Î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>Dimensiunea
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>Variație drop-up
Declanșați meniuri drop-down deasupra elementelor adăugând .dropupla 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>Grupuri de intrare
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-groupcu .input-group-addonsau .input-group-btnpentru a adăuga sau a adăuga elemente la un singur .form-control.
<input>Numai textuale
Evitaț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 rowsatributul lor nu va fi respectat în unele cazuri.
Sfaturile instrumente și popoverele din grupurile de introducere necesită o setare specială
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 cu alte componente
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ă.
Adăugați întotdeauna etichete
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-onlyclasa sau utilizarea atributului aria-label, aria-labelledby, aria-describedby, titlesau 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.
Exemplu de bază
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-addonsau .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>Dimensiunea
Adăugați clasele de dimensionare a formularului în .input-groupsine ș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>Casete de selectare și suplimente radio
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 -->Suplimente de butoane
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-btnpentru 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 -->Butoane cu meniuri derulante
<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 -->Butoane segmentate
<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>Butoane multiple
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>Navs
Nav-urile disponibile în Bootstrap au marcaj partajat, începând cu .navclasa de bază, precum și stări partajate. Schimbați clasele modificatoare pentru a comuta între fiecare stil.
Filele
Rețineți că .nav-tabsclasa necesită clasa de .navbază.
<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>Pastile
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>justificat
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>Linkuri dezactivate
Pentru orice componentă de navigare (file sau pastile), adăugați linkuri gri și .disabledfără efecte de trecere .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>Folosind meniuri derulante
Adăugați meniuri derulante cu puțin HTML suplimentar și pluginul JavaScript pentru meniuri derulante .
File cu 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>Pastile cu meniuri derulante
<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>Bara de navigare
Bara de navigare implicită
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>Imaginea marcii
Înlocuiți marca navbar cu propria imagine schimbând textul cu un <img>. Deoarece .navbar-brandare 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>Forme
Plasați conținutul formularului în interior .navbar-formpentru 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-formpartajează o mare parte din codul său .form-inlineprin 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>Butoane
Adăugați .navbar-btnclasa <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>Text
Î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>Linkuri non-nav
Pentru cei care folosesc linkuri standard care nu se află în componenta obișnuită de navigare a barei de navigare, utilizați .navbar-linkclasa 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>Alinierea componentelor
Aliniați legăturile de navigare, formularele, butoanele sau textul, utilizând clasele de utilitate .navbar-leftsau . .navbar-rightAmbele 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.
Fixat în partea de sus
Adăugați .navbar-fixed-topși includeți .containersau .container-fluidpentru a centra și a bloca conținutul din bara de navigare.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>Fixat de jos
Ad��ugați .navbar-fixed-bottomși includeți .containersau .container-fluidpentru a centra și a bloca conținutul din bara de navigare.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>Top static
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 .containersau .container-fluidpentru 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>Bara de navigare inversată
Modificați aspectul barei de navigare adăugând .navbar-inverse.
<nav class="navbar navbar-inverse">
...
</nav>Firimituri de pâine
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>Paginare
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 implicită
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>Etichetarea componentei de paginare
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-labelpentru <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".
Stări dezactivate și active
Linkurile sunt personalizabile pentru diferite circumstanțe. Utilizați .disabledpentru link-uri care nu se pot face clic și .activepentru 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>Dimensiunea
Vrei o paginare mai mare sau mai mică? Adăugați .pagination-lgsau .pagination-smpentru 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>Pager
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.
Exemplu implicit
Î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>Legături aliniate
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>Stare opțională dezactivată
Link-urile pager folosesc, de asemenea, .disabledclasa 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>Etichete
Exemplu
Exemplu de titlu Nou
Exemplu de titlu Nou
Exemplu de titlu Nou
Exemplu de titlu Nou
Exemplu de titlu Nou
Exemplu de titlu Nou
<h3>Example heading <span class="label label-default">New</span></h3>Variante disponibile
Adăugați oricare dintre clasele modificatoare menționate mai jos pentru a schimba aspectul unei etichete.
Informații de succes primare
implicite Avertisment Pericol
<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>Ai tone de etichete?
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-blockelement (cum ar fi o pictogramă). Modul de ocolire a acestui lucru este setarea display: inline-block;. Pentru context și un exemplu, consultați #13219 .
Ecusoane
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>Se prăbușește de sine
Când nu există elemente noi sau necitite, insignele se vor prăbuși pur și simplu (prin :emptyselectorul CSS) cu condiția să nu existe conținut în interior.
Compatibilitate între browsere
Insignele nu se vor prăbuși automat în Internet Explorer 8, deoarece nu suportă :emptyselectorul.
Se adaptează la stările de navigare active
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>Jumbotron
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.
Salut Lume!
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 .containers-urilor și adăugați în schimb un .containerinterior.
<div class="jumbotron">
<div class="container">
...
</div>
</div>Antetul paginii
O carcasă simplă pentru h1a distanța și a segmenta în mod corespunzător secțiunile de conținut pe o pagină. Poate utiliza elementul h1implicit al lui small, precum și majoritatea celorlalte componente (cu stiluri suplimentare).
Exemplu de antet de pagină Subtext pentru antet
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>Miniaturi
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 .
Exemplu implicit
Î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>Conținut personalizat
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>Alerte
Furnizați mesaje de feedback contextual pentru acțiunile tipice ale utilizatorului cu câteva mesaje de alertă disponibile și flexibile.
Exemple
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ă.
Nicio clasă implicită
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.
Bine făcut! Ați citit cu succes acest mesaj de alertă important.
Atenție! Această alertă necesită atenția dvs., dar nu este super importantă.
Avertizare! Mai bine verifică-te, nu arăți prea bine.
O, snap! Schimbați câteva lucruri și încercați să trimiteți din nou.
<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>Alerte respinse
Construiți pe orice alertă adăugând un .alert-dismissiblebuton opțional și de închidere.
Necesită pluginul de alertă JavaScript
Pentru a funcționa pe deplin, alerte respinse, trebuie să utilizați pluginul JavaScript alerte .
Avertizare! Mai bine verifică-te, nu arăți prea bine.
<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 un comportament adecvat pe toate dispozitivele
Asigurați-vă că utilizați <button>elementul cu data-dismiss="alert"atributul de date.
Link-uri în alerte
Utilizați .alert-linkclasa de utilitate pentru a furniza rapid link-uri colorate potrivite în orice alertă.
Bine făcut! Ați citit cu succes
acest mesaj de alertă important .
Atenție! Această
alertă necesită atenția dvs. , dar nu este foarte importantă.
Avertizare! Mai bine verifică-te,
nu arăți prea bine .
O, snap!
Schimbați câteva lucruri și încercați să trimiteți din nou.
<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>Bare de progres
Furnizați feedback actualizat cu privire la progresul unui flux de lucru sau a unei acțiuni cu bare de progres simple, dar flexibile.
Compatibilitate între browsere
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.
Compatibilitate cu Politica de securitate a conținutului (CSP).
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 styleatribute 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.
Exemplu de bază
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>Cu etichetă
Eliminați clasa <span>cu .sr-onlydin 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-widthla 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>Alternative contextuale
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>In dungi
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>Animat
Adăugați .activela .progress-bar-stripedpentru 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>Stivuite
Puneți mai multe bare în același .progresspentru 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>Obiect media
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ă
Media implicită afișează un obiect media (imagini, video, audio) la stânga sau la dreapta unui bloc de conținut.
Titlu media
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.
Titlu media
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.
Titlu media imbricat
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.Titlu media
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.
Titlu media
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.
<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-rightasemenea, 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-rightar trebui să fie plasate după .media-bodyîn html.
Alinierea media
Imaginile sau alte medii pot fi aliniate sus, mijloc sau jos. Valoarea implicită este aliniată în partea de sus.
Suport media aliniat 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.
Media aliniate la mijloc
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.
Suport media aliniat de jos
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>Lista media
Cu un pic de markup suplimentar, puteți utiliza media din lista (utilă pentru firele de comentarii sau listele de articole).
-
Titlu media
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.
Titlu media imbricat
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.
Titlu media imbricat
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.
Titlu media imbricat
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>Lista grupului
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.
Exemplu de bază
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.
- Cras justo odio
- Dapibus ac facilitis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum la eros
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>Ecusoane
Adăugați componenta insigne la orice element de grup de listă și va fi poziționat automat în partea dreaptă.
- 14Cras justo odio
- 2Dapibus ac facilitis in
- 1Morbi leo risus
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>Elemente legate
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>Elemente cu butoane
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 .btnaici 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>Articole dezactivate
Adăugați .disabledla a .list-group-itempentru 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>Clasele contextuale
Utilizați clase contextuale pentru a stila elementele listei, implicite sau legate. Include, de asemenea, .activestatul.
- Dapibus ac facilitis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum la eros
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>Conținut personalizat
Adăugați aproape orice HTML în interior, chiar și pentru grupurile de liste legate, cum ar fi cel de mai jos.
Listează titlul articolului de grup
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Listează titlul articolului de grup
Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Listează titlul articolului de grup
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>Panouri
Deși nu este întotdeauna necesar, uneori trebuie să puneți DOM-ul într-o cutie. Pentru aceste situații, încercați componenta panoului.
Exemplu de bază
În mod implicit, tot ceea ce .panelface este să aplice niște chenaruri de bază și umplutură pentru a conține conținut.
Exemplu de panou de bază
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>Panou cu antet
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-titleclasă 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.
Antetul panoului fără titlu
Conținutul panoului
Titlul panoului
Conținutul panoului
<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>Panou cu subsol
Î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.
Conținutul panoului
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>Alternative contextuale
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ă.
Titlul panoului
Conținutul panoului
Titlul panoului
Conținutul panoului
Titlul panoului
Conținutul panoului
Titlul panoului
Conținutul panoului
Titlul panoului
Conținutul panoului
<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>Cu mese
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.
Titlul panoului
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.
Titlul panoului
| # | 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>Cu grupuri de liste
Includeți cu ușurință grupuri de liste cu lățime completă în orice panou.
Titlul panoului
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.
- Cras justo odio
- Dapibus ac facilitis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum la eros
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>Încorporare receptivă
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-itemcâ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>Wells
Implicit bine
Utilizați puțul ca efect simplu asupra unui element pentru a-i da un efect de inserție.
Uite, sunt într-o fântână!
<div class="well">...</div>Clase optionale
Controlați umplutura și colțurile rotunjite cu două clase de modificatori opționale.
Uite, sunt într-o fântână mare!
<div class="well well-lg">...</div>
Uite, sunt într-o fântână mică!
<div class="well well-sm">...</div>