Komponenter

Dusinvis af genbrugelige komponenter er indbygget i Bootstrap for at give navigation, advarsler, popovers og meget mere.

Knapgrupper

Brug knapgrupper til at sammenføje flere knapper som én sammensat komponent. Byg dem med en række af <a>eller <button>elementer.

Bedste praksis

Vi anbefaler følgende retningslinjer for brug af knapgrupper og værktøjslinjer:

  • Brug altid det samme element i en enkelt knapgruppe, <a>eller <button>.
  • Bland ikke knapper af forskellige farver i den samme knapgruppe.
  • Brug ikoner som supplement til eller i stedet for tekst, men sørg for at inkludere alt- og titeltekst, hvor det er relevant.

Relaterede knapgrupper med dropdown-menuer (se nedenfor) skal kaldes ud separat og altid inkludere en dropdown-mærke for at angive tilsigtet adfærd.

Standard eksempel

Sådan ser HTML-koden ud for en standardknapgruppe 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å værktøjslinje

Kombiner sæt <div class="btn-group">til en <div class="btn-toolbar">for mere komplekse komponenter.

  1. <div class = "btn-værktøjslinje" >
  2. <div class = "btn-gruppe" >
  3. ...
  4. </div>
  5. </div>

Afkrydsningsfelt og radiosmag

Knapgrupper kan også fungere som radioer, hvor kun én knap kan være aktiv, eller afkrydsningsfelter, hvor et vilkårligt antal knapper kan være aktive. Se Javascript-dokumenterne for det.

Hent javascript »

Dropdowns i knapgrupper

Heads up! Knapper med dropdowns skal pakkes individuelt ind i deres egne .btn-groupinden for en .btn-toolbarfor korrekt gengivelse.

Knap rullemenuer

Eksempel markup

I lighed med en knapgruppe bruger vores opmærkning almindelig knapmarkering, men med en håndfuld tilføjelser for at forfine stilen og understø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 = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Fungerer med alle knapstørrelser

Knap rullemenuer fungerer i enhver størrelse. dine knapstørrelser til .btn-large, .btn-small, eller .btn-mini.

Kræver javascript

Knap dropdowns kræver Bootstrap dropdown plugin for at fungere.

I nogle tilfælde – som mobil – vil rullemenuerne strække sig uden for visningsporten. Du skal løse justeringen manuelt eller med brugerdefineret javascript.


Rullemenuer med splitknap

Overblik og eksempler

Med udgangspunkt i knapgruppestilene og markeringen kan vi nemt oprette en opdelt knap. Split-knapper har en standardhandling til venstre og en rullemenu til højre med kontekstuelle links.

Størrelser

Brug de ekstra knapklasser .btn-mini, .btn-small, eller .btn-largetil størrelse.

  1. <div class = "btn-gruppe" >
  2. ...
  3. <ul class = "rullemenu-træk til højre" >
  4. <!-- dropdown menu links -->
  5. </ul>
  6. </div>

Eksempel markup

Vi udvider de normale knap-rullemenuer for at give en anden knaphandling, der fungerer som en separat dropdown-udlø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 = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Dropup menuer

Rullemenuer kan også skiftes fra bunden og op ved at tilføje en enkelt klasse til den umiddelbare forælder af .dropdown-menu. Det vil vende retningen af .caret​​og flytte selve menuen for at flytte nedefra og op i stedet for top 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 = "dropdown-menu" >
  7. <!-- dropdown menu links -->
  8. </ul>
  9. </div>

Multicon-side paginering

Hvornår skal bruges

Ultra forenklet og minimalistisk paginering inspireret af Rdio, fantastisk til apps og søgeresultater. Den store blok er svær at gå glip af, let skalerbar og giver store klikområder.

Stateful sidelinks

Links kan tilpasses og fungerer under en række omstændigheder med den rigtige klasse. .disabledfor uklikbare links og .activefor den aktuelle side.

Fleksibel justering

Tilføj en af ​​to valgfrie klasser for at ændre justeringen af ​​sideinddelingslinks: .pagination-centeredog .pagination-right.

Eksempler

Standardpagineringskomponenten er fleksibel og fungerer i en række variationer.

Markup

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

  1. <div class = "paginering" >
  2. <ul>
  3. <li><a href = "#" > Forrige </a></li>
  4. <li klasse = "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 = "#" > Næste </a></li>
  11. </ul>
  12. </div>

Personsøger For hurtige forrige og næste links

Om personsøger

Personsøger-komponenten er et sæt links til simple pagineringsimplementeringer med let markering og endnu lettere stilarter. Det er fantastisk til simple websteder som blogs eller magasiner.

Valgfri deaktiveret tilstand

Pager-links bruger også den generelle .disabledklasse fra pagineringen.

Standard eksempel

Som standard centrerer personsøgeren links.

  1. <ul class = "personsøger" >
  2. <li>
  3. <a href = "#" > Forrige </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Næste </a>
  7. </li>
  8. </ul>

Justerede links

Alternativt kan du justere hvert link til siderne:

  1. <ul class = "personsøger" >
  2. <li klasse = "forrige" >
  3. <a href = "#" > Ældre </a>
  4. </li>
  5. <li klasse = "næste" >
  6. <a href = "#" > Nyere → </a>
  7. </li>
  8. </ul>
Etiketter Markup
Standard <span class="label">Default</span>
Succes <span class="label label-success">Success</span>
Advarsel <span class="label label-warning">Warning</span>
Vigtig <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Omvendt <span class="label label-inverse">Inverse</span>

Om

Badges er små, enkle komponenter til at vise en indikator eller et antal af en slags. De findes almindeligvis i e-mail-klienter som Mail.app eller på mobilapps til push-meddelelser.

Tilgængelige klasser

Navn Eksempel Markup
Standard 1 <span class="badge">1</span>
Succes 2 <span class="badge badge-success">2</span>
Advarsel 4 <span class="badge badge-warning">4</span>
Vigtig 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>

Hero enhed

Bootstrap giver en let, fleksibel komponent kaldet en heltenhed til at vise indhold på dit websted. Det fungerer godt på marketing- og indholdstunge sider.

Markup

Pak dit indhold ind i en divsådan:

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

Hej Verden!

Dette er en simpel heltenhed, en simpel jumbotron-lignende komponent til at gøre ekstra opmærksom på fremhævet indhold eller information.

Lær mere

Sidehoved

En simpel skal h1til passende afstand og segmentering af sektioner af indhold på en side. Det kan bruge h1standardelementet small, såvel som de fleste andre komponenter (med yderligere stilarter).

  1. <div class = "page-header" >
  2. <h1> Eksempel på sidehoved </h1>
  3. </div>

Standard miniaturebilleder

Bootstraps thumbnails er som standard designet til at vise sammenkædede billeder med minimalt påkrævet opmærkning.

Meget tilpasselig

Med lidt ekstra markering er det muligt at tilføje enhver form for HTML-indhold som overskrifter, afsnit eller knapper til miniaturebilleder.

  • Miniaturelabel

    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

  • Miniaturelabel

    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 bruge thumbnails

Miniaturebilleder (tidligere .media-gridindtil v1.4) er fantastiske til gitter af fotos eller videoer, billedsøgeresultater, detailprodukter, porteføljer og meget mere. De kan være links eller statisk indhold.

Enkel, fleksibel markering

Opmærkning af miniaturebilleder er enkel - en ulmed et vilkårligt antal lielementer er alt, der kræves. Det er også super fleksibelt, hvilket giver mulighed for enhver type indhold med bare en smule mere markering til at pakke dit indhold.

Bruger gitterkolonnestørrelser

Til sidst bruger thumbnails-komponenten eksisterende gittersystemklasser – som .span2eller .span3– til kontrol af thumbnail-dimensioner.

Markup

Som tidligere nævnt er den nødvendige markering for miniaturebilleder let og ligetil. Her er et kig på standardopsætningen for linkede billeder :

  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-indhold i miniaturebilleder ændres opmærkningen lidt. For at tillade indhold på blokniveau overalt, bytter vi ud <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> Miniaturelabel </h5>
  6. <p> Miniature billedtekst lige her... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Flere eksempler

Udforsk alle dine muligheder med de forskellige gitterklasser, der er tilgængelige for dig. Du kan også mikse og matche forskellige størrelser.

Letvægts standardindstillinger

Omskrevet basisklasse

Med Bootstrap 2 har vi forenklet basisklassen: .alerti stedet for .alert-message. Vi har også reduceret den mindste krævede markering - nej <p>er påkrævet som standard, kun den ydre <div>.

Enkelt alarmbesked

For en mere holdbar komponent med mindre kode har vi fjernet det differentierende udseende for blokadvarsler, meddelelser, der kommer med mere udfyldning og typisk mere tekst. Klassen er også ændret til .alert-block.


Går godt med javascript

Bootstrap kommer med et fantastisk jQuery-plugin, der understøtter alarmbeskeder, hvilket gør det hurtigt og nemt at afvise dem.

Hent plugin »

Eksempler på advarsler

Pak din besked og et valgfrit lukkeikon ind i en div med enkel klasse.

Advarsel! Bedst tjek dig selv, du ser ikke for godt ud.
  1. <div class = "alert" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Advarsel! </strong> Tjek bedst selv, du ser ikke for godt ud.
  4. </div>

Heads up! iOS-enheder kræver en href="#"for afvisning af advarsler. Sørg for at inkludere den og dataattributten for ankerlukningsikoner. Alternativt kan du bruge et <button>element med dataattributten, hvilket vi har valgt at gøre for vores dokumenter. Når du bruger <button>, skal du inkludere, type="button"ellers kan dine formularer ikke indsendes.

Udvid nemt standardadvarselsmeddelelsen med to valgfrie klasser: .alert-blockfor mere udfyldning og tekstkontrol og .alert-headingfor en matchende overskrift.

Advarsel!

Bedst tjek dig selv, du ser ikke for godt ud. Nulla vitae elit libero, en pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

Kontekstuelle alternativer Tilføj valgfri klasser for at ændre en underretnings konnotation

Fejl eller fare

Oh snap! Skift et par ting, og prøv at indsende igen.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Succes

Godt klaret! Du har læst denne vigtige advarselsmeddelelse.
  1. <div class = "alarm alert-success" >
  2. ...
  3. </div>

Information

Heads up! Denne advarsel kræver din opmærksomhed, men den er ikke super vigtig.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Eksempler og opmærkning

Grundlæggende

Standard statuslinje med en lodret gradient.

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

Stribet

Bruger en gradient til at skabe en stribet effekt (ingen IE).

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

Animeret

Tager det stribede eksempel og animerer det (ingen IE).

  1. <div class = "fremskridt fremskridt-stribet
  2. aktiv" >
  3. <div klasse = "bar"
  4. style = " bredde : 40 %; " ></div>
  5. </div>

Valgmuligheder og browserunderstøttelse

Yderligere farver

Fremskridtslinjer bruger nogle af de samme knap- og advarselsklasser til ensartede stilarter.

Stribede stænger

I lighed med de solide farver har vi varierede stribede fremskridtsbjælker.

Opførsel

Fremskridtsbjælker bruger CSS3-overgange, så hvis du dynamisk justerer bredden via javascript, ændres størrelsen jævnt.

Hvis du bruger .activeklassen, vil dine .progress-stripedfremskridtsbjælker animere striberne fra venstre mod højre.

Browser support

Fremskridtsbjælker bruger CSS3-gradienter, overgange og animationer til at opnå alle deres effekter. Disse funktioner understøttes ikke i IE7-9 eller ældre versioner af Firefox.

Opera og IE understøtter ikke animationer på nuværende tidspunkt.

Wells

Brug brønden som en simpel effekt på et element for at give det en indsat effekt.

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

Luk ikon

Brug det generiske lukkeikon til at afvise indhold som modals og advarsler.

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

iOS-enheder kræver et href="#" for klikhændelser, hvis du hellere bruger et anker.

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