Oprettelse af en Bootstrap flip-kort-widget involverer brug af forsiden og bagsiden af en kortlignende struktur. Sådan kan du oprette en:
HTML-struktur :
```html
... Indhold på forsiden ...
... Indhold på bagsiden ...
```
CSS-styling :
```css
.flip-card {
bredde:250px;
højde:250px;
perspektiv:1000px; /* Opret en 3D-effekt */
}
.flip-card-inner {
stilling:relativ;
bredde:100%;
højde:100%;
tekst-align:center;
overgang:transformation 0,8s;
transform-stil:bevar-3d;
}
.flip-card-front,
.flip-card-back {
position:absolut;
bredde:100%;
højde:100%;
bagside-synlighed:skjult;
}
.flip-card-back {
transform:rotateY(180deg);
}
```
Interaktion med JavaScript:
For at aktivere flip-funktionaliteten kan du bruge JavaScript-hændelseslyttere (f.eks. ved et museklik) og manipulere "transform"-egenskaben for elementet ".flip-card-inner" til overgang mellem forsiden og bagsiden af kortet.
For eksempel, her er, hvordan du kan implementere flip-funcionalidad ved hjælp af jQuery:
```javascript
$(document).ready(() => {
$(".flip-card").on("klik", function () {
$(this).find(".flip-card-inner").toggleClass("flipped");
});
});
```
Denne JavaScript-kode lytter efter klik på ".flip-card"-elementet og skifter "flipped"-klassen på ".flip-card-inner"-elementet. "Flipped"-klassen kan defineres i CSS for at udføre flip-animationen.
Ved at kombinere HTML-strukturen, CSS-styling og JavaScript-interaktion kan du oprette en Bootstrap flip-kort-widget, der giver brugerne mulighed for at bladre mellem for- og bagsiden af kortet.
