Dusinvis av gjenbrukbare komponenter er innebygd i Bootstrap for å gi navigasjon, varsler, popovers og mye mer.
Ultra forenklet og minimalistisk paginering inspirert av Rdio, flott for apper og søkeresultater. Den store blokken er vanskelig å gå glipp av, lett skalerbar og gir store klikkområder.
Lenker kan tilpasses og fungerer i en rekke omstendigheter med riktig klasse. .disabled
for uklikkbare lenker og .active
for gjeldende side.
Legg til en av to valgfrie klasser for å endre justeringen av pagineringslenker: .pagination-centered
og .pagination-right
.
Standard pagineringskomponent er fleksibel og fungerer i en rekke varianter.
Paginering er pakket inn i <div>
en <ul>
.
- <div class = "paginering" >
- <ul>
- <li><a href = "#" > Forrige </a></li>
- <li class = "aktiv" >
- <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 = "#" > Neste </a></li>
- </ul>
- </div>
Personsøkerkomponenten er et sett med lenker for enkle pagineringsimplementeringer med lett markering og enda lettere stiler. Det er flott for enkle nettsteder som blogger eller magasiner.
Som standard sentrerer personsøkeren lenker.
- <ul class = "personsøker" >
- <li>
- <a href = "#" > Forrige </a>
- </li>
- <li>
- <a href = "#" > Neste </a>
- </li>
- </ul>
Etiketter | Markup |
---|---|
Misligholde | <span class="label">Default</span> |
Ny | <span class="label label-success">New</span> |
Advarsel | <span class="label label-warning">Warning</span> |
Viktig | <span class="label label-important">Important</span> |
Info | <span class="label label-info">Info</span> |
Som standard er Bootstraps miniatyrbilder utformet for å vise frem koblede bilder med minimal nødvendig markering.
Med litt ekstra markering er det mulig å legge til alle slags HTML-innhold som overskrifter, avsnitt eller knapper i miniatyrbilder.
Miniatyrbilder (tidligere .media-grid
frem til v1.4) er flotte for rutenett med bilder eller videoer, bildesøkeresultater, detaljhandelsprodukter, porteføljer og mye mer. De kan være lenker eller statisk innhold.
Miniatyrbildeoppmerking er enkel – en ul
med et hvilket som helst antall li
elementer er alt som kreves. Den er også superfleksibel, og tillater alle typer innhold med bare litt mer markering for å pakke inn innholdet.
Til slutt bruker miniatyrbildekomponenten eksisterende rutenettsystemklasser – som .span2
eller .span3
– for kontroll av miniatyrbildedimensjoner.
Som nevnt tidligere, er den nødvendige markeringen for miniatyrbilder lett og grei. Her er en titt på standardoppsettet for koblede bilder :
- <ul class = "thumbnails" >
- <li class = "span3" >
- <a href = "#" class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
For tilpasset HTML-innhold i miniatyrbilder, endres markeringen litt. For å tillate innhold på blokknivå hvor som helst, bytter vi ut <a>
med et <div>
lignende:
- <ul class = "thumbnails" >
- <li class = "span3" >
- <div class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Miniatyrbildeetikett </h5>
- <p> Miniatyrbildetekst her... </p>
- </div>
- </li>
- ...
- </ul>
Med Bootstrap 2 har vi forenklet grunnklassen: .alert
i stedet for .alert-message
. Vi har også redusert minimumskravet – ingen <p>
er påkrevd som standard, bare den ytre <div>
.
For en mer holdbar komponent med mindre kode, har vi fjernet det differensierende utseendet for blokkvarsler, meldinger som kommer med mer utfylling og vanligvis mer tekst. Klassen har også endret seg til .alert-block
.
Bootstrap kommer med en flott jQuery-plugin som støtter varslingsmeldinger, noe som gjør det raskt og enkelt å avvise dem.
Pakk inn meldingen og et valgfritt lukkeikon i en div med enkel klasse.
- <div class = "alert" >
- <a class = "close" > × </a>
- <strong> Advarsel! </strong> Best sjekk deg selv, du ser ikke så bra ut.
- </div>
Utvid enkelt standardvarslingsmeldingen med to valgfrie klasser: .alert-block
for flere utfyllings- og tekstkontroller og .alert-heading
for en matchende overskrift.
Best sjekk deg selv, du ser ikke så bra ut. Nulla vitae elit libero, en pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "alert alert-block" >
- <a class = "close" > × </a>
- <h4 class = "alert-heading" > Advarsel! </h4>
- Best sjekk deg selv, du er ikke...
- </div>
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "alert alert-success" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
Standard fremdriftslinje med vertikal gradient.
- <div class = "fremgang" >
- <div class = "bar"
- style = " bredde : 60 %; " ></div>
- </div>
Bruker en gradient for å lage en stripete effekt.
- <div class = "fremdriftsinformasjon
- fremdriftsstripet" >
- <div class = "bar"
- style = " bredde : 20 %; " ></div>
- </div>
Tar det stripete eksemplet og animerer det.
- <div class = "fremgang fremgang-fare
- fremdriftsstripet aktiv" >
- <div class = "bar"
- style = " bredde : 40 %; " ></div>
- </div>
Fremdriftslinjer bruker noen av de samme klassenavnene som knapper og varsler for lignende stil.
.progress-info
.progress-success
.progress-danger
Alternativt kan du tilpasse LESS-filene og rulle dine egne farger og størrelser.
Fremdriftslinjer bruker CSS3-overganger, så hvis du dynamisk justerer bredden via javascript, vil den endre størrelsen jevnt.
Hvis du bruker .active
klassen, vil .progress-striped
fremdriftslinjene dine animere stripene fra venstre mot høyre.
Fremdriftslinjer bruker CSS3-gradienter, overganger og animasjoner for å oppnå alle effektene. Disse funksjonene støttes ikke i IE7-8 eller eldre versjoner av Firefox.
Opera støtter ikke animasjoner for øyeblikket.
Bruk brønnen som en enkel effekt på et element for å gi det en innfelt effekt.
- <div class = "vel" >
- ...
- </div>
Bruk det generiske lukkeikonet for å avvise innhold som modaler og varsler.
- <a class = "close" > × </a>