Eksempel på Bootstrap 5 Faneblade

Her vises et eksempel på, hvordan faneblade (tabs) kan implementeres i Bootstrap 5 med tilpassede farver og design.

Hvad med begreberne?

Klik på en knap for at se mere (eksempel på anvendelse)....

Pædagogik handler om at tilrettelægge betingelser for menneskelig udvikling. Pædagogik er kunsten at opdrage/forme eller danne mennesker, hvilket altid sker i lyset af bestemte værdier (Brinkmann) [1].
Dannelse er højnelse til humanitet igennem kultur (en fælles menneskelighed) [1].
Kultur er ikke kun kunsten – men at lære at begå sig i fællesskabet med andre. Brinkmann peger selv på, at "mesterlæreren" er den ideelle måde at udvikle sig til at begå sig på. Altså: Hvordan er man sammen med andre (Hans-Georg Gadamer/Brinkmann) [1].
Didaktik: Den del af pædagogikken, der handler om undervisning [1].
Læring:
  1. At få mere viden ind i hovedet.
  2. At kunne huske og reproducere erhvervet viden.
  3. At erhverve kendsgerninger/procedurer, som kan bruges i praksis.
  4. At forstå.
  5. At ændre sin viden og derigennem ændre sin tolkning af omverdenen.
  6. At ændre sin tolkning af omverdenen og derigennem ændre sig som person. [1]

Kopierbar kode

Her er den fulde kode til fanebladene i Bootstrap 5. Kopier den direkte ind i dit projekt:

<!DOCTYPE html>
<html lang="da">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Faneblade</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h4><strong>Hvad med begreberne?</strong></h4>
        <p>Klik på en knap for at se mere (eksempel på anvendelse)....</p>

        <div class="container-fluid">
            <div class="row">
                <!-- Venstre kolonne med knapper -->
                <div class="col-md-3">
                    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                        <a
                            id="v-pills-1-tab"
                            class="nav-link active text-white mb-1"
                            style="background-color: #3f5b58; border-radius: 0.25rem;"
                            data-bs-toggle="pill"
                            href="#v-pills-1"
                            role="tab"
                            aria-controls="v-pills-1"
                            aria-selected="true">
                            Pædagogik
                        </a>
                        <a
                            id="v-pills-2-tab"
                            class="nav-link text-white mb-1"
                            style="background-color: #3f5b58; border-radius: 0.25rem;"
                            data-bs-toggle="pill"
                            href="#v-pills-2"
                            role="tab"
                            aria-controls="v-pills-2"
                            aria-selected="false">
                            Dannelse
                        </a>
                        <a
                            id="v-pills-3-tab"
                            class="nav-link text-white mb-1"
                            style="background-color: #3f5b58; border-radius: 0.25rem;"
                            data-bs-toggle="pill"
                            href="#v-pills-3"
                            role="tab"
                            aria-controls="v-pills-3"
                            aria-selected="false">
                            Kultur
                        </a>
                        <a
                            id="v-pills-4-tab"
                            class="nav-link text-white mb-1"
                            style="background-color: #3f5b58; border-radius: 0.25rem;"
                            data-bs-toggle="pill"
                            href="#v-pills-4"
                            role="tab"
                            aria-controls="v-pills-4"
                            aria-selected="false">
                            Didaktik
                        </a>
                        <a
                            id="v-pills-5-tab"
                            class="nav-link text-white mb-1"
                            style="background-color: #3f5b58; border-radius: 0.25rem;"
                            data-bs-toggle="pill"
                            href="#v-pills-5"
                            role="tab"
                            aria-controls="v-pills-5"
                            aria-selected="false">
                            Læring
                        </a>
                    </div>
                </div>

                <!-- Højre kolonne med indhold -->
                <div class="col-md-9">
                    <div class="tab-content" id="v-pills-tabContent">
                        <div
                            id="v-pills-1"
                            class="tab-pane fade show active alert alert-success shadow-sm p-4 mb-5"
                            style="border-radius: 1.5rem;"
                            role="tabpanel"
                            aria-labelledby="v-pills-1-tab">
                            <strong>Pædagogik</strong> handler om at tilrettelægge betingelser for menneskelig udvikling. Pædagogik er kunsten at opdrage/forme eller danne mennesker, hvilket altid sker i lyset af bestemte værdier (Brinkmann) [1].
                        </div>
                        <div
                            id="v-pills-2"
                            class="tab-pane fade alert alert-success shadow-sm p-4 mb-5"
                            style="border-radius: 1.5rem;"
                            role="tabpanel"
                            aria-labelledby="v-pills-2-tab">
                            <strong>Dannelse</strong> er højnelse til humanitet igennem kultur (en fælles menneskelighed) [1].
                        </div>
                        <div
                            id="v-pills-3"
                            class="tab-pane fade alert alert-success shadow-sm p-4 mb-5"
                            style="border-radius: 1.5rem;"
                            role="tabpanel"
                            aria-labelledby="v-pills-3-tab">
                            <strong>Kultur</strong> er ikke kun kunsten – men at lære at begå sig i fællesskabet med andre. Brinkmann peger selv på, at "mesterlæreren" er den ideelle måde at udvikle sig til at begå sig på. Altså: Hvordan er man sammen med andre (Hans-Georg Gadamer/Brinkmann) [1].
                        </div>
                        <div
                            id="v-pills-4"
                            class="tab-pane fade alert alert-success shadow-sm p-4 mb-5"
                            style="border-radius: 1.5rem;"
                            role="tabpanel"
                            aria-labelledby="v-pills-4-tab">
                            <strong>Didaktik:</strong> Den del af pædagogikken, der handler om undervisning [1].
                        </div>
                        <div
                            id="v-pills-5"
                            class="tab-pane fade alert alert-success shadow-sm p-4 mb-5"
                            style="border-radius: 1.5rem;"
                            role="tabpanel"
                            aria-labelledby="v-pills-5-tab">
                            <strong>Læring:</strong>
                            <ol>
                                <li>At få mere viden ind i hovedet.</li>
                                <li>At kunne huske og reproducere erhvervet viden.</li>
                                <li>At erhverve kendsgerninger/procedurer, som kan bruges i praksis.</li>
                                <li>At forstå.</li>
                                <li>At ændre sin viden og derigennem ændre sin tolkning af omverdenen.</li>
                                <li><em>At ændre sin tolkning af omverdenen og derigennem ændre sig som person.</em> [1]</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Sådan tilpasser du fanebladene

Her er en guide til at tilpasse farver, skygger, kantradius og layout i fanebladene:

1. Knappernes udseende
  • Baggrundsfarve: Ændr background-color i style-attributten for knapperne.
    Eksempel: style="background-color: #3f5b58;"
    Erstat #3f5b58 med en anden farvekode (fx #5a7d7d for en lysere grøn).
  • Tekstfarve: Tekstfarven er sat til hvid (text-white). Ønsker du en anden farve, tilføj color i style-attributten.
    Eksempel: style="background-color: #3f5b58; color: #ffff00;" (gul tekst).
  • Kantradius (afrunding af hjørner): Juster border-radius for at ændre afrundingen af knappernes hjørner.
    Eksempel: style="border-radius: 0.5rem;"
  • Margin mellem knapper: Juster mb-1 (margin-bottom) for at ændre afstanden mellem knapperne.
    Eksempel: mb-2 for større afstand.
2. Indholdsboksens udseende
  • Baggrundsfarve: Indholdsboksene bruger alert alert-success for en lysegrøn baggrund. Ønsker du en anden farve, kan du erstatte det med:
    - alert alert-primary (blå)
    - alert alert-secondary (grå)
    - alert alert-light (hvid)
    - Eller tilføj en inline style: style="background-color: #e9f7fe;"
  • Skygge: Juster shadow-sm til shadow eller shadow-lg for mere/mindre skygge.
  • Kantradius (afrunding af hjørner): Juster border-radius i style-attributten.
    Eksempel: style="border-radius: 1rem;"
  • Padding (indrykning): Juster p-4 for at ændre indrykningen af teksten.
    Eksempel: p-3 for mindre padding.
3. Citationshåndtering

Citatet er inkluderet i formatet [1], da kilden indeholder et id-attribut. Hvis du ikke ønsker at citere, kan du fjerne [1] manuelt.

4. Eksempel på tilpasset knap

Her er et eksempel på en knap med flere tilpasninger:

<a
    id="v-pills-1-tab"
    class="nav-link active text-white mb-2"
    style="background-color: #5a7d7d; color: #ffff00; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.2);"
    data-bs-toggle="pill"
    href="#v-pills-1"
    role="tab"
    aria-controls="v-pills-1"
    aria-selected="true">
    Tilpasset knap
</a>

آخر تعديل: الخميس، 10 سبتمبر 2026، 11:13 AM