Which bootstrap class is used to expand a collapsed object?

Styrk Dine Checkbokse: Guide til Bootstrap Toggle

17/03/2026

★★★★★Rating: 4.25 (6906 votes)

Har du nogensinde ønsket at forvandle dine standard HTML-checkbokse til noget mere moderne, interaktivt og visuelt tiltalende? Med Bootstrap Toggle er det ikke bare muligt, men utroligt nemt at opnå. Dette kraftfulde plugin til Bootstrap er designet specifikt til at omdanne almindelige afkrydsningsfelter til stilfulde skiftekontakter, der forbedrer brugeroplevelsen markant. I en verden, hvor brugervenlighed er altafgørende, kan en lille ændring som denne gøre en stor forskel for, hvordan dine brugere interagerer med dine webapplikationer. Glem de kedelige, firkantede bokse; tænk i stedet på intuitive skydekontakter, der øjeblikkeligt signalerer en tilstand – tændt eller slukket, aktiveret eller deaktiveret. Denne omfattende guide vil føre dig igennem alt, hvad du behøver at vide for at komme i gang med Bootstrap Toggle, fra installation til avancerede tilpasningsmuligheder og programmatisk kontrol.

Indholdsfortegnelse

Kom i Gang: Installation af Bootstrap Toggle

Før vi dykker ned i de spændende funktioner, skal vi først have Bootstrap Toggle installeret og klar til brug. Processen er ligetil og kan gøres på flere måder, afhængigt af din foretrukne arbejdsgang. Den nemmeste og hurtigste metode er ofte at benytte et Content Delivery Network (CDN), som giver dig adgang til filerne direkte fra internettet uden behov for manuel download og hostning. Dette er ideelt til hurtige prototyper eller projekter, hvor du ønsker at minimere din egen serverbelastning. Du skal blot inkludere følgende linjer i dit HTML-dokument, typisk i <head> for CSS og lige før den afsluttende </body>-tag for JavaScript, for at sikre optimal indlæsning og funktionalitet:

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"> <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

Det er vigtigt at bemærke, at hvis du arbejder med en ældre version af Bootstrap, specifikt v2.3.2, skal du anvende de tilsvarende filer: bootstrap2-toggle.min.js og bootstrap2-toggle.min.css. Dette sikrer kompatibilitet og undgår potentielle visuelle eller funktionelle fejl. For udviklere, der foretrækker at styre deres frontend-pakker med Bower, er installationen lige så enkel. Åbn din terminal eller kommandoprompt og kør følgende kommando:

bower install bootstrap-toggle

Dette vil downloade Bootstrap Toggle til dit projekt og integrere det i din pakkehåndtering, hvilket gør det nemt at opdatere og vedligeholde. Uanset hvilken metode du vælger, er grundlaget lagt for at begynde at transformere dine checkbokse.

Grundlæggende Anvendelse

Når Bootstrap Toggle er korrekt installeret, er det utroligt enkelt at forvandle en standard checkbox til en flot toggle-kontakt. Du behøver ikke at skrive komplekse JavaScript-koder for den grundlæggende funktionalitet. Den magiske ingrediens er en simpel data-attribut: data-toggle="toggle". Ved at tilføje denne attribut til enhver <input type="checkbox">-tag, vil Bootstrap Toggle automatisk registrere og transformere den ved sidens indlæsning. Forestil dig for eksempel en almindelig HTML-checkbox:

<input type="checkbox">

For at gøre den til en toggle, ændrer du den blot til:

<input type="checkbox" data-toggle="toggle">

Og så er du klar! Plugin'et tager sig af resten.

Dette fungerer ligeledes for stablede (stacked) og inline checkbokse, som du måske allerede bruger i dine Bootstrap-formularer. Hvis du har en gruppe af stablede checkbokse, som typisk bruges til at præsentere valgmuligheder lodret, skal du blot tilføje data-toggle="toggle" til hver enkelt input-element:

<div class="checkbox"> <label> <input type="checkbox" data-toggle="toggle"> Mulighed ét er aktiveret </label> </div> <div class="checkbox"> <label> <input type="checkbox" data-toggle="toggle" checked> Mulighed to er deaktiveret </label> </div>

På samme måde, for inline checkbokse, hvor valgmulighederne præsenteres side om side, anvender du den samme attribut:

<label class="checkbox-inline"> <input type="checkbox" data-toggle="toggle"> Første </label> <label class="checkbox-inline"> <input type="checkbox" data-toggle="toggle"> Anden </label> <label class="checkbox-inline"> <input type="checkbox" data-toggle="toggle"> Tredje </label>

Denne enkle tilgang gør det ekstremt hurtigt at implementere toggles overalt, hvor du tidligere ville have brugt standard checkbokse. Den visuelle forbedring er øjeblikkelig, og dine brugere vil sætte pris på den forbedrede interaktivitet.

Avancerede Muligheder for Tilpasning

En af de største styrker ved Bootstrap Toggle er dens fleksibilitet og de mange muligheder for tilpasning. Du er ikke begrænset til standardudseendet; du kan ændre tekst, størrelse, farver og endda tilføje brugerdefinerede stilarter. Disse muligheder kan overføres på to primære måder: via data-attributter direkte i dit HTML eller programmatisk med JavaScript. Valget af metode afhænger ofte af, om du har faste indstillinger, der skal være en del af markup, eller om du har brug for dynamisk at ændre togglens adfærd baseret på applikationens tilstand.

1. Overførsel via Data-attributter

Dette er den foretrukne metode, hvis dine indstillinger er statiske og defineres direkte i dit HTML. Du skal blot tilføje data- foran navnet på den ønskede mulighed og sætte dens værdi. For eksempel, hvis du vil ændre teksten, der vises, når togglen er 'tændt', kan du bruge data-on="Aktiveret". Her er en oversigt over de mest almindelige muligheder:

  • on (string | html): Teksten, der vises, når togglen er 'tændt'. Standard er "On".
    Eksempel: data-on="Tændt"
  • off (string | html): Teksten, der vises, når togglen er 'slukket'. Standard er "Off".
    Eksempel: data-off="Slukket"
  • size (string): Størrelsen på togglen. Mulige værdier er: large, normal (standard), small, mini. Dette følger Bootstrap's knapstørrelser.
    Eksempel: data-size="large"
  • onstyle (string): Stilen (farven) på togglen, når den er 'tændt'. Mulige værdier matcher Bootstrap's knapstilarter: default, primary, success, info, warning, danger. Standard er "primary".
    Eksempel: data-onstyle="success"
  • offstyle (string): Stilen (farven) på togglen, når den er 'slukket'. Mulige værdier er de samme som for onstyle. Standard er "default".
    Eksempel: data-offstyle="warning"
  • style (string): Tilføjer en værdi til togglens class-attribut, hvilket giver dig mulighed for at anvende brugerdefinerede CSS-klasser for yderligere tilpasning.
    Eksempel: data-style="custom-toggle"
  • width (integer): Sætter bredden af togglen i pixels. Hvis den er null (standard), beregnes bredden automatisk.
    Eksempel: data-width="150"
  • height (integer): Sætter højden af togglen i pixels. Hvis den er null (standard), beregnes højden automatisk.
    Eksempel: data-height="50"

Her er et eksempel, der viser brugen af flere data-attributter:

<input type="checkbox" data-toggle="toggle" data-on="JA" data-off="NEJ" data-size="small" data-onstyle="info" data-offstyle="danger">

Dette vil skabe en lille toggle, der viser "JA" i blå (info-stil) når tændt, og "NEJ" i rød (danger-stil) når slukket.

2. Initialisering via JavaScript

For mere dynamiske scenarier, eller hvis du foretrækker at holde din HTML ren og adskilt fra konfigurationsdetaljer, kan du initialisere og konfigurere dine toggles ved hjælp af JavaScript. Dette gøres typisk ved at vælge elementet (f.eks. via dets ID) og kalde bootstrapToggle()-metoden med et JavaScript-objekt, der indeholder dine ønskede muligheder.

<input type="checkbox" id="minToggle"> <script> $(function() { $('#minToggle').bootstrapToggle({ on: 'Aktiv', off: 'Inaktiv', size: 'large', onstyle: 'success', offstyle: 'default' }); }); </script>

I dette eksempel initialiseres en toggle med ID'et minToggle med specifikke tekster og stilarter, der er defineret i JavaScript-objektet. Denne metode giver dig fuld kontrol og er ideel, når togglens muligheder skal genereres eller ændres dynamisk baseret på brugerinput eller data fra en server.

Sammenligning af Muligheder for Tilpasning

For at illustrere forskellen i udseende baseret på de valgte muligheder, lad os se på et par eksempler i en tabel. Bemærk, at dette er konceptuelle eksempler, der beskriver, hvordan forskellige indstillinger påvirker togglens udseende.

Attributter / JavaScript-indstillingerBeskrivelse af udseende
data-toggle="toggle" (Standard)En standard toggle med "On" og "Off" tekst, normal størrelse, blå (primary) når tændt, grå (default) når slukket.
data-toggle="toggle" data-size="large" data-onstyle="success" data-offstyle="danger"En stor toggle med "On" og "Off" tekst. Den er grøn (success) når tændt og rød (danger) når slukket. Meget iøjnefaldende.
data-toggle="toggle" data-on="Godkendt" data-off="Afvist" data-size="mini" data-style="custom-label"En lille toggle med brugerdefineret tekst "Godkendt" og "Afvist". Den har en ekstra CSS-klasse custom-label til yderligere stil.
JavaScript initialisering: { width: 200, height: 70, onstyle: 'info', offstyle: 'warning' }En bred (200px) og høj (70px) toggle med standard "On"/"Off" tekst. Den er lyseblå (info) når tændt og orange (warning) når slukket.

Som det fremgår af tabellen, giver de mange muligheder dig en utrolig frihed til at designe toggles, der passer perfekt til dit websites æstetik og dine applikationers funktionelle behov.

API-Metoder: Programmatisk Kontrol

Udover at initialisere og konfigurere toggles, giver Bootstrap Toggle dig også mulighed for at kontrollere dem programmatisk ved hjælp af JavaScript-metoder. Dette er afgørende for at skabe dynamiske brugerflader, hvor togglens tilstand skal ændres baseret på andre interaktioner eller logik i din applikation. Alle metoder kaldes på jQuery-objektet for den specifikke toggle, du ønsker at manipulere.

  • initialize: Initialiserer toggle-plugin'et med de definerede muligheder. Dette er ofte implicit, når du tilføjer data-toggle="toggle", men kan bruges til at geninitialisere eller anvende indstillinger efter DOM-manipulation.
    Eksempel: $('#toggle-demo').bootstrapToggle()
  • destroy: Fjerner toggle-funktionaliteten og returnerer elementet til en almindelig checkbox. Nyttigt, hvis du dynamisk skal fjerne eller genopbygge dele af din UI.
    Eksempel: $('#toggle-demo').bootstrapToggle('destroy')
  • on: Sætter togglen til 'tændt' (checked) tilstand.
    Eksempel: $('#toggle-demo').bootstrapToggle('on')
  • off: Sætter togglen til 'slukket' (unchecked) tilstand.
    Eksempel: $('#toggle-demo').bootstrapToggle('off')
  • toggle: Skifter togglens tilstand – hvis den er 'tændt', bliver den 'slukket', og omvendt.
    Eksempel: $('#toggle-demo').bootstrapToggle('toggle')
  • enable: Aktiverer en deaktiveret toggle, så den kan interagere med brugeren.
    Eksempel: $('#toggle-demo').bootstrapToggle('enable')
  • disable: Deaktiverer togglen, så den ikke kan interagere med brugeren. Den vil ofte fremstå nedtonet for at signalere, at den ikke er aktiv.
    Eksempel: $('#toggle-demo').bootstrapToggle('disable')

Disse metoder giver udviklere fuld kontrol over togglens tilstand og adfærd, hvilket åbner op for en bred vifte af interaktive muligheder i dine webapplikationer.

Håndtering af Begivenheder (Events)

En vigtig del af enhver interaktiv komponent er evnen til at reagere på brugerens handlinger. Med Bootstrap Toggle er dette designet på en intuitiv måde, der respekterer standard HTML-formular elementers opførsel. Alle begivenheder (events) – såsom change, click, focus osv. – der udløses af den underliggende <input type="checkbox"> eller af togglen selv, propageres i begge retninger. Dette betyder, at du skal lytte til begivenheder direkte fra <input type="checkbox">-elementet, præcis som du ville gøre med en almindelig checkbox. Du behøver altså ikke lede efter specifikke, brugerdefinerede events fra Bootstrap Toggle-plugin'et.

Denne designfilosofi har en stor fordel: Den sikrer, at uanset om en toggle ændrer tilstand via brugerinteraktion (klik) eller programmatisk via API-kald (f.eks. $('#toggle-demo').bootstrapToggle('on')), vil den samme change-begivenhed blive udløst på det originale checkbox-element. Dette forenkler din JavaScript-logik betydeligt, da du kan have én samlet event-handler, der reagerer på alle tilstandsændringer.

Her er et eksempel på, hvordan du kan lytte til change-begivenheden:

<input type="checkbox" id="statusToggle" data-toggle="toggle"> <script> $(function() { $('#statusToggle').change(function() { if ($(this).prop('checked')) { console.log('Togglen er nu TÆNDT!'); // Udfør handlinger, når togglen er tændt } else { console.log('Togglen er nu SLUKKET!'); // Udfør handlinger, når togglen er slukket } }); }); </script>

I dette eksempel vil konsolloggen opdatere, hver gang statusToggle ændrer tilstand, uanset om det er et brugerklik eller et JavaScript-kald, der udløser ændringen. Denne konsistens gør det nemt at integrere toggles i din applikationsflow og bygge responsiv logik.

Ofte Stillede Spørgsmål (FAQ)

Hvordan installerer jeg Bootstrap Toggle?
Du kan installere Bootstrap Toggle ved at inkludere dets CSS- og JavaScript-filer via et CDN i dit HTML-dokument eller ved at bruge en pakkehåndtering som Bower med kommandoen bower install bootstrap-toggle.
Kan jeg ændre udseendet af togglen?
Ja, i høj grad! Du kan tilpasse udseendet ved hjælp af data-attributter i HTML (f.eks. data-onstyle, data-size) eller ved at overføre et objekt med indstillinger til .bootstrapToggle()-metoden i JavaScript. Du kan ændre tekst, farver, størrelse og endda tilføje brugerdefinerede CSS-klasser.
Hvad er forskellen på at bruge data-attributter og JavaScript til indstillinger?
Data-attributter er ideelle til statiske indstillinger, der defineres direkte i HTML-markup. De er nemme at implementere og kræver minimal JavaScript. JavaScript-initialisering giver dig mere dynamisk kontrol; du kan ændre indstillinger på farten, generere toggles programmatisk og holde din HTML renere. Valget afhænger af dine specifikke behov.
Hvordan lytter jeg til ændringer i togglens tilstand?
Du skal lytte til standard change-begivenheden på det originale <input type="checkbox">-element. Bootstrap Toggle propagerer alle begivenheder til og fra input-elementet, så din event-handler vil blive udløst, uanset om ændringen skyldes brugerinteraktion eller programmatisk kontrol via API-metoder.
Kan jeg deaktivere en toggle?
Ja, du kan deaktivere en toggle programmatisk ved at kalde $('#dinToggle').bootstrapToggle('disable'). For at genaktivere den, bruger du $('#dinToggle').bootstrapToggle('enable').
Hvad hvis jeg bruger en ældre version af Bootstrap?
Hvis du bruger Bootstrap v2.3.2, skal du sørge for at bruge de specifikke filer: bootstrap2-toggle.min.js og bootstrap2-toggle.min.css for at sikre fuld kompatibilitet og korrekt funktionalitet.

Konklusion

Bootstrap Toggle er et fremragende værktøj, der forbedrer funktionaliteten og æstetikken af dine webformularer markant. Ved at omdanne simple checkbokse til intuitive og visuelt tiltalende skiftekontakter, bidrager det til en mere moderne og brugervenlig oplevelse. Fra den enkle installation og grundlæggende anvendelse med data-toggle="toggle" til de avancerede muligheder for tilpasning via data-attributter eller JavaScript, tilbyder plugin'et en høj grad af fleksibilitet. Evnen til at styre toggles programmatisk med en række API-metoder og den konsistente håndtering af begivenheder gør det nemt at integrere i komplekse applikationer. Uanset om du ønsker at forbedre et eksisterende projekt eller starte et nyt, er Bootstrap Toggle en værdifuld tilføjelse til dit frontend-udviklingsværktøjssæt, der hjælper dig med at skabe mere engagerende og effektive brugergrænseflader.

How do I get a collapse instance in Bootstrap?
You can use it like this: bootstrap.Collapse.getOrCreateInstance(element) Bootstrap’s collapse class exposes a few events for hooking into collapse functionality. This event fires immediately when the show instance method is called.

Hvis du vil læse andre artikler, der ligner Styrk Dine Checkbokse: Guide til Bootstrap Toggle, kan du besøge kategorien Teknologi.

Go up