Dhjetra komponentë të ripërdorshëm janë ndërtuar në Bootstrap për të ofruar navigim, sinjalizime, popover dhe shumë më tepër.
Faqezim jashtëzakonisht i thjeshtë dhe me stil minimal i frymëzuar nga Rdio, i shkëlqyeshëm për aplikacionet dhe rezultatet e kërkimit. Blloku i madh është i vështirë për t'u humbur, lehtësisht i shkallëzueshëm dhe ofron zona të mëdha klikimesh.
Lidhjet janë të personalizueshme dhe funksionojnë në një sërë rrethanash me klasën e duhur. .disabled
për lidhjet e paklikueshme dhe .active
për faqen aktuale.
Shtoni njërën nga dy klasat opsionale për të ndryshuar shtrirjen e lidhjeve të faqes: .pagination-centered
dhe .pagination-right
.
Komponenti i parazgjedhur i faqezimit është fleksibël dhe funksionon në një sërë variacionesh.
I mbështjellë në një <div>
, faqezim është vetëm një <ul>
.
<div class="pagination"> <ul> <li><a href="#">Para</a></li> <li class="active"> <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="#">Tjetra</a></li> </ul> </div>
Komponenti i pager-it është një grup lidhjesh për zbatime të thjeshta faqeshimi me shënime të lehta dhe stile edhe më të lehta. Është i shkëlqyeshëm për sajte të thjeshta si blogje ose revista.
Si parazgjedhje, lidhjet përqendrojnë pager-in.
<ul class="pager"> <li> <a href="#">E mëparshme</a> </li> <li> <a href="#">Tjetër</a> </li> </ul>
Përndryshe, ju mund të rreshtoni secilën lidhje në anët:
<ul class="pager"> <li class="previous"> <a href="#">← Më i vjetër</a> </li> <li class="next"> <a href="#">Më të reja →</a> </li> </ul>
Etiketat | Markup |
---|---|
E paracaktuar | <span class="label">Default</span> |
I ri | <span class="label label-success">New</span> |
Paralajmërim | <span class="label label-warning">Warning</span> |
E rëndësishme | <span class="label label-important">Important</span> |
Informacion | <span class="label label-info">Info</span> |
Si parazgjedhje, miniaturat e Bootstrap janë krijuar për të shfaqur imazhe të lidhura me shënjimin minimal të kërkuar.
Me pak shënim shtesë, është e mundur të shtoni çdo lloj përmbajtjeje HTML si tituj, paragrafë ose butona në miniaturë.
Miniaturat (më parë .media-grid
deri në versionin 1.4) janë të shkëlqyera për rrjetet e fotografive ose videove, rezultatet e kërkimit të imazheve, produktet me pakicë, portofolet dhe shumë më tepër. Ato mund të jenë lidhje ose përmbajtje statike.
Shënimi i miniaturës është i thjeshtë - ul
me çdo numër li
elementësh është gjithçka që kërkohet. Është gjithashtu super fleksibël, duke lejuar çdo lloj përmbajtjeje me vetëm pak më shumë shënime për të mbështjellë përmbajtjen tuaj.
Së fundi, komponenti i miniaturave përdor klasat ekzistuese të sistemit të rrjetit - si .span2
ose .span3
- për kontrollin e dimensioneve të miniaturave.
Siç u përmend më parë, shënimi i kërkuar për miniaturat është i lehtë dhe i drejtpërdrejtë. Ja një vështrim në konfigurimin e paracaktuar për imazhet e lidhura :
<ul class="thumbnails"> <li class="span3"> <a href="#" class="thumbnail"> <img src="https://placehold.it/260x180" alt=""> </a> </li> ... </ul>
Për përmbajtjen e personalizuar HTML në miniaturë, shënimi ndryshon pak. Për të lejuar përmbajtjen e nivelit të bllokut kudo, ne e ndërrojmë atë <a>
me një <div>
si më poshtë:
<ul class="thumbnails"> <li class="span3"> <div class="thumbnail"> <img src="https://placehold.it/260x180" alt=""> <h5>Etiketa e miniaturës</h5> <p>Titrat e miniaturës pikërisht këtu...</p> </div> </li> ... </ul>
Me Bootstrap 2, ne kemi thjeshtuar klasën bazë: .alert
në vend të .alert-message
. Ne kemi reduktuar gjithashtu shënjimin minimal të kërkuar—jo <p>
kërkohet si parazgjedhje, vetëm e jashtme <div>
.
Për një komponent më të qëndrueshëm me më pak kod, ne kemi hequr pamjen diferencuese për sinjalizimet e bllokut, mesazhet që vijnë me më shumë mbushje dhe zakonisht më shumë tekst. Klasa gjithashtu ka ndryshuar në .alert-block
.
Bootstrap vjen me një shtesë të shkëlqyeshme jQuery që mbështet mesazhet alarmuese, duke e bërë heqjen e tyre të shpejtë dhe të lehtë.
Mbështillni mesazhin tuaj dhe një ikonë opsionale të mbylljes në një div me klasë të thjeshtë.
<div class="alert"> <a class="close">×</a> <strong>Kujdes!</strong> Kontrolloni më mirë se nuk po dukeni shumë mirë. </div>
Zgjate lehtësisht mesazhin standard të alarmit me dy klasa opsionale: .alert-block
për më shumë kontrolle mbushjeje dhe teksti dhe .alert-heading
për një titull që përputhet.
Kontrolloni më mirë veten, nuk po dukeni shumë mirë. Nulla vitae elit libero, një pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div class="alert alert-block"> <a class="close">×</a> <h4 class="alert-heading">Paralajmërim!</h4> Kontrolloni më mirë veten, nuk jeni... </div>
<div class="alert alert-error"> ... </div>
<div class="alert alert-success"> ... </div>
<div class="alert alert-info"> ... </div>
Shiriti i parazgjedhur i përparimit me një gradient vertikal.
<div class="progres"> <div class="bar" style="width: 60%;"></div> </div>
Përdor një gradient për të krijuar një efekt me vija.
<div class="progres progres-info progres-shirita"> <div class="bar" style="width: 20%;"></div> </div>
Merr shembullin me vija dhe e animon atë.
<div class="progresi progres-rrezik aktiv me vija progresive"> <div class="bar" style="width: 40%;"></div> </div>
Shiritat e progresit përdorin disa nga emrat e klasave të njëjta si butona dhe sinjalizime për stilime të ngjashme.
.progress-info
.progress-success
.progress-danger
Përndryshe, ju mund të personalizoni skedarët LESS dhe të rrotulloni ngjyrat dhe madhësitë tuaja.
Shiritat e progresit përdorin tranzicione CSS3, kështu që nëse rregulloni në mënyrë dinamike gjerësinë përmes javascript, ajo do të ndryshojë pa probleme.
Nëse përdorni .active
klasën, .progress-striped
shiritat e përparimit tuaj do të animojnë shiritat nga e majta në të djathtë.
Shiritat e progresit përdorin gradientët, tranzicionet dhe animacionet CSS3 për të arritur të gjitha efektet e tyre. Këto veçori nuk mbështeten në IE7-8 ose në versionet më të vjetra të Firefox-it.
Opera nuk i mbështet animacionet për momentin.
Përdorni pusin si një efekt të thjeshtë në një element për t'i dhënë atij një efekt të futur.
<div class="mirë"> ... </div>
Përdorni ikonën e përgjithshme të mbylljes për të hequr përmbajtjen si modalet dhe sinjalizimet.
<a class="close">×</a>