Komponenter

Dusinvis av gjenbrukbare komponenter er innebygd i Bootstrap for å gi navigasjon, varsler, popovers og mye mer.

Knappegrupper

Bruk knappegrupper for å slå sammen flere knapper som én sammensatt komponent. Bygg dem med en serie av <a>eller <button>elementer.

Beste praksis

Vi anbefaler følgende retningslinjer for bruk av knappegrupper og verktøylinjer:

  • Bruk alltid det samme elementet i en enkelt knappegruppe, <a>eller <button>.
  • Ikke bland knapper med forskjellige farger i samme knappegruppe.
  • Bruk ikoner i tillegg til eller i stedet for tekst, men pass på å inkludere alt- og titteltekst der det er aktuelt.

Relaterte knappegrupper med rullegardiner (se nedenfor) bør kalles ut separat og alltid inkludere en rullegardinmerke for å indikere tiltenkt oppførsel.

Standard eksempel

Slik ser HTML-en ut for en standard knappegruppe bygget med ankertagknapper:

  1. <div class = "btn-gruppe" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Eksempel på verktøylinje

Kombiner sett <div class="btn-group">til en <div class="btn-toolbar">for mer komplekse komponenter.

  1. <div class = "btn-verktøylinje" >
  2. <div class = "btn-gruppe" >
  3. ...
  4. </div>
  5. </div>

Avkrysningsboks og radiosmaker

Knappegrupper kan også fungere som radioer, der bare én knapp kan være aktiv, eller avmerkingsbokser, hvor et hvilket som helst antall knapper kan være aktive. Se Javascript-dokumentene for det.

Få javascript »

Nedtrekkslister i knappegrupper

Vær oppmerksom! Knapper med rullegardiner må pakkes individuelt inn i .btn-groupen .btn-toolbarfor riktig gjengivelse.

Nedtrekkslister for knapper

Eksempel på markering

I likhet med en knappegruppe bruker vår markering vanlig knappemarkering, men med en håndfull tillegg for å avgrense stilen og støtte Bootstraps dropdown jQuery-plugin.

  1. <div class = "btn-gruppe" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Handling
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "rullegardinmeny" >
  7. <!-- lenker til rullegardinmenyen -->
  8. </ul>
  9. </div>

Fungerer med alle knappestørrelser

Nedtrekkbare knapper fungerer i alle størrelser. knappestørrelsene til .btn-large, .btn-small, eller .btn-mini.

Krever javascript

Dropdown- knapper krever at Bootstrap-rullegardinpluginen fungerer.

I noen tilfeller – som mobil – vil rullegardinmenyene strekke seg utenfor visningsporten. Du må løse justeringen manuelt eller med tilpasset javascript.


Rullegardiner for delknapper

Oversikt og eksempler

Med utgangspunkt i knappegruppestilene og markeringen kan vi enkelt lage en delt knapp. Delte knapper har en standard handling til venstre og en rullegardinbryter til høyre med kontekstuelle lenker.

Størrelser

Bruk de ekstra knappeklassene .btn-mini, .btn-small, eller .btn-largefor dimensjonering.

  1. <div class = "btn-gruppe" >
  2. ...
  3. <ul class = "rullegardinmeny trekk til høyre" >
  4. <!-- lenker til rullegardinmenyen -->
  5. </ul>
  6. </div>

Eksempel på markering

Vi utvider de vanlige rullegardinmenyene for å gi en andre knappehandling som fungerer som en separat rullegardinutløser.

  1. <div class = "btn-gruppe" >
  2. <button class = "btn" > Handling </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "rullegardinmeny" >
  7. <!-- lenker til rullegardinmenyen -->
  8. </ul>
  9. </div>

Dropup-menyer

Rullegardinmenyer kan også veksles fra bunnen og opp ved å legge til en enkelt klasse til den nærmeste forelderen til .dropdown-menu. Den vil snu retningen på .caretog flytte selve menyen for å flytte fra bunnen og opp i stedet for ovenfra og ned.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "rullegardinmeny" >
  7. <!-- lenker til rullegardinmenyen -->
  8. </ul>
  9. </div>

Multicon-side paginering

Når du skal bruke

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.

Stateful sidelinker

Lenker kan tilpasses og fungerer i en rekke omstendigheter med riktig klasse. .disabledfor uklikkbare lenker og .activefor gjeldende side.

Fleksibel justering

Legg til en av to valgfrie klasser for å endre justeringen av pagineringslenker: .pagination-centeredog .pagination-right.

Eksempler

Standard pagineringskomponent er fleksibel og fungerer i en rekke varianter.

Markup

Paginering er pakket inn i <div>en <ul>.

  1. <div class = "paginering" >
  2. <ul>
  3. <li><a href = "#" > Forrige </a></li>
  4. <li class = "aktiv" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Neste </a></li>
  11. </ul>
  12. </div>

Personsøker For raske forrige og neste lenker

Om personsøker

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.

Valgfri deaktivert tilstand

Personsøkerlenker bruker også den generelle .disabledklassen fra pagineringen.

Standard eksempel

Som standard sentrerer personsøkeren lenker.

  1. <ul class = "personsøker" >
  2. <li>
  3. <a href = "#" > Forrige </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Neste </a>
  7. </li>
  8. </ul>

Justerte lenker

Alternativt kan du justere hver lenke til sidene:

  1. <ul class = "personsøker" >
  2. <li class = "forrige" >
  3. <a href = "#" > Eldre </a>
  4. </li>
  5. <li class = "neste" >
  6. <a href = "#" > Nyere → </a>
  7. </li>
  8. </ul>
Etiketter Markup
Misligholde <span class="label">Default</span>
Suksess <span class="label label-success">Success</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>
Omvendt <span class="label label-inverse">Inverse</span>

Om

Merker er små, enkle komponenter for å vise en indikator eller telling av noe slag. De finnes ofte i e-postklienter som Mail.app eller på mobilapper for push-varsler.

Tilgjengelige klasser

Navn Eksempel Markup
Misligholde 1 <span class="badge">1</span>
Suksess 2 <span class="badge badge-success">2</span>
Advarsel 4 <span class="badge badge-warning">4</span>
Viktig 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Omvendt 10 <span class="badge badge-inverse">10</span>

Helteenhet

Bootstrap gir en lett, fleksibel komponent kalt en helteenhet for å vise frem innhold på nettstedet ditt. Det fungerer bra på markedsføring og innholdstunge nettsteder.

Markup

Pakk innholdet inn i en divslik:

  1. <div class = "hero-unit" >
  2. <h1> Overskrift </h1>
  3. <p> Slagord </p>
  4. <p>
  5. <a class = "btn btn-primær btn-large" >
  6. Lære mer
  7. </a>
  8. </p>
  9. </div>

Hei Verden!

Dette er en enkel helteenhet, en enkel jumbotron-stil komponent for å vekke ekstra oppmerksomhet til fremhevet innhold eller informasjon.

Lære mer

Sideoverskrift

Et enkelt skall for en h1passende plassering og segmentering av deler av innholdet på en side. Den kan bruke h1standardelementet smalli tillegg til de fleste andre komponenter (med ekstra stiler).

  1. <div class = "page-header" >
  2. <h1> Eksempelsideoverskrift </h1>
  3. </div>

Standard miniatyrbilder

Som standard er Bootstraps miniatyrbilder utformet for å vise frem koblede bilder med minimal nødvendig markering.

Svært tilpassbar

Med litt ekstra markering er det mulig å legge til alle slags HTML-innhold som overskrifter, avsnitt eller knapper i miniatyrbilder.

  • Miniatyrbildeetikett

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Handling Handling

  • Miniatyrbildeetikett

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Handling Handling

Hvorfor bruke miniatyrbilder

Miniatyrbilder (tidligere .media-gridfrem 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.

Enkel, fleksibel markering

Miniatyrbildeoppmerking er enkel – en ulmed et hvilket som helst antall lielementer er alt som kreves. Den er også superfleksibel, og tillater alle typer innhold med bare litt mer markering for å pakke inn innholdet.

Bruker rutenettkolonnestørrelser

Til slutt bruker miniatyrbildekomponenten eksisterende rutenettsystemklasser – som .span2eller .span3– for kontroll av miniatyrbildedimensjoner.

Markeringen

Som nevnt tidligere, er den nødvendige markeringen for miniatyrbilder lett og grei. Her er en titt på standardoppsettet for koblede bilder :

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Miniatyrbildeetikett </h5>
  6. <p> Miniatyrbildetekst her... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Flere eksempler

Utforsk alle alternativene dine med de forskjellige rutenettklassene som er tilgjengelige for deg. Du kan også mikse og matche forskjellige størrelser.

Lette standardinnstillinger

Omskrevet grunnklasse

Med Bootstrap 2 har vi forenklet grunnklassen: .alerti stedet for .alert-message. Vi har også redusert den minste nødvendige markeringen – ingen <p>er påkrevd som standard, bare den ytre <div>.

Enkelt varselmelding

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.


Går bra med javascript

Bootstrap kommer med en flott jQuery-plugin som støtter varslingsmeldinger, noe som gjør det raskt og enkelt å avvise dem.

Få plugin »

Eksempler på varsler

Pakk inn meldingen og et valgfritt lukkeikon i en div med enkel klasse.

Advarsel! Best sjekk deg selv, du ser ikke så bra ut.
  1. <div class = "alert" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Advarsel! </strong> Best sjekk deg selv, du ser ikke så bra ut.
  4. </div>

Vær oppmerksom! iOS-enheter krever en href="#"for avvisning av varsler. Sørg for å inkludere den og dataattributtet for ankerlukkingsikoner. Alternativt kan du bruke et <button>element med dataattributtet, som vi har valgt å gjøre for dokumentene våre. Når du bruker <button>, må du inkludere type="button"eller sende inn skjemaene dine.

Utvid enkelt standardvarslingsmeldingen med to valgfrie klasser: .alert-blockfor flere utfyllings- og tekstkontroller og .alert-headingfor en matchende overskrift.

Advarsel!

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.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Advarsel! </h4>
  4. Best sjekk deg selv, du er ikke...
  5. </div>

Kontekstuelle alternativer Legg til valgfrie klasser for å endre et varsels konnotasjon

Feil eller fare

Oh Snap! Endre noen ting og prøv å sende inn på nytt.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Suksess

Bra gjort! Du har lest denne viktige varselmeldingen.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Informasjon

Vær oppmerksom! Dette varselet trenger din oppmerksomhet, men det er ikke superviktig.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Eksempler og markering

Grunnleggende

Standard fremdriftslinje med vertikal gradient.

  1. <div class = "fremgang" >
  2. <div class = "bar"
  3. style = " bredde : 60 %; " ></div>
  4. </div>

Stripete

Bruker en gradient for å lage en stripete effekt (ingen IE).

  1. <div class = "progress progress-striped" >
  2. <div class = "bar"
  3. style = " bredde : 20 %; " ></div>
  4. </div>

Animert

Tar det stripete eksemplet og animerer det (ingen IE).

  1. <div class = "fremdrift fremdriftsstripet
  2. aktiv" >
  3. <div class = "bar"
  4. style = " bredde : 40 %; " ></div>
  5. </div>

Alternativer og nettleserstøtte

Ekstra farger

Fremdriftslinjer bruker noen av de samme knappe- og varslingsklassene for konsekvente stiler.

Stripete stenger

I likhet med de solide fargene har vi varierte stripete fremdriftslinjer.

Oppførsel

Fremdriftslinjer bruker CSS3-overganger, så hvis du dynamisk justerer bredden via javascript, vil den endre størrelsen jevnt.

Hvis du bruker .activeklassen, vil .progress-stripedfremdriftslinjene dine animere stripene fra venstre mot høyre.

Nettleserstøtte

Fremdriftslinjer bruker CSS3-gradienter, overganger og animasjoner for å oppnå alle effektene. Disse funksjonene støttes ikke i IE7-9 eller eldre versjoner av Firefox.

Opera og IE støtter ikke animasjoner for øyeblikket.

Wells

Bruk brønnen som en enkel effekt på et element for å gi det en innfelt effekt.

Se, jeg er i en brønn!
  1. <div class = "vel" >
  2. ...
  3. </div>

Lukk ikon

Bruk det generiske lukkeikonet for å avvise innhold som modaler og varsler.

  1. <button class = "lukk" > × </button>

iOS-enheter krever en href="#" for klikkhendelser hvis du heller bruker et anker.

  1. <a class = "close" href = "#" > × </a>