Valg tabs

Kode:

<div class="container mt-3">
  <h2>Toggleable Tabs</h2>
  <br>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active text-white"
              style="background-color: #3f5b58;"
              id="home-tab"
              data-bs-toggle="tab"
              data-bs-target="#home"
              type="button"
              role="tab"
              aria-controls="home"
              aria-selected="true">
        Home
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link text-white"
              style="background-color: #3f5b58; margin-left: 2px;"
              id="menu1-tab"
              data-bs-toggle="tab"
              data-bs-target="#menu1"
              type="button"
              role="tab"
              aria-controls="menu1"
              aria-selected="false">
        Menu 1
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link text-white"
              style="background-color: #3f5b58; margin-left: 2px;"
              id="menu2-tab"
              data-bs-toggle="tab"
              data-bs-target="#menu2"
              type="button"
              role="tab"
              aria-controls="menu2"
              aria-selected="false">
        Menu 2
      </button>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content mt-3" id="myTabContent">
    <div class="tab-pane fade show active"
         id="home"
         role="tabpanel"
         aria-labelledby="home-tab">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="tab-pane fade"
         id="menu1"
         role="tabpanel"
         aria-labelledby="menu1-tab">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="tab-pane fade"
         id="menu2"
         role="tabpanel"
         aria-labelledby="menu2-tab">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>
</div>

Sådan tilpasser du farver og stil

Her er en guide til at tilpasse **Toggleable Tabs** i Bootstrap 5:

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).
• Margin mellem knapper: Juster afstanden mellem knapperne med margin-left eller margin-right.
  Eksempel: style="margin-left: 2px;"
• Kantradius (afrunding af hjørner): Tilføj border-radius for at afrunde knappernes hjørner.
  Eksempel: style="border-radius: 5px 5px 0 0;" (afrunder kun de øverste hjørner).

2. Indholdsboksens udseende

• Baggrundsfarve: Tilføj en baggrundsfarve til tab-content eller tab-pane for at skabe kontrast.
  Eksempel: style="background-color: #f8f9fa; padding: 20px; border-radius: 0 0 5px 5px;"
• Kanter: Tilføj en kant rundt om indholdet for at skabe en ramme.
  Eksempel: style="border: 1px solid #dee2e6; border-top: none; padding: 20px;"
• Padding (indrykning): Juster afstanden mellem teksten og boksen med padding.
  Eksempel: style="padding: 20px;"

3. Generelle tips

• Bootstrap-klasser: Bootstrap 5 har indbyggede farveklasser, fx bg-primary, bg-success eller bg-danger. Disse kan bruges i stedet for inline styles, hvis du foretrækker det.
  Eksempel: class="nav-link bg-primary text-white"
• Responsivitet: Tabs er responsivt som standard. Ønsker du yderligere tilpasning til mobil/tablet, kan du bruge Bootstrap's col-*-klasser eller medieforespørgsler i CSS.

4. Eksempel på fuldt tilpasset knap

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

<button
  class="nav-link text-white"
  style="background-color: #5a7d7d; color: #ffff00; margin-left: 2px; border-radius: 5px 5px 0 0;"
  id="menu1-tab"
  data-bs-toggle="tab"
  data-bs-target="#menu1"
  type="button"
  role="tab"
  aria-controls="menu1"
  aria-selected="false">
  Tilpasset knap
</button>