Ναυτιλία Bootstrap 5

导航菜单

如果要创建简单的水平菜单，请将 .nav κλάση προστίθεται σε <ul> 元素，然后为每个 <li> 元素添加 .nav-item 并将 .nav-link 类添加到它们的链接：

Παράδειγμα

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Σύνδεσμος</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Σύνδεσμος</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Σύνδεσμος</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Απενεργοποιημένο</a>
  </li>
</ul>

Δοκιμάστε το προσωπικά

对齐导航栏

添加 .justify-content-center 类使导航居中，添加 .justify-content-end 类使导航右对齐。

Παράδειγμα

<!-- 居中的导航 -->
<ul class="nav justify-content-center">
<!-- 右对齐的导航 -->
<ul class="nav justify-content-end">

Δοκιμάστε το προσωπικά

垂直导航栏

添加 .flex-column κλάση μπορεί να δημιουργήσει μια κάθετη πλοήγηση:

Παράδειγμα

<ul class="nav flex-column">

Δοκιμάστε το προσωπικά

καρτέλτα

χρησιμοποιήστε .nav-tabs κλάση μετατρέπει το μενού πλοήγησης σε καρτέλα. Και .active κλάση προσθέστε στην ενεργή/τρέχουσα σύνδεση. Αν θέλετε τα καρτέλτα να είναι εναλλασσόμενα, δείτε τον τελευταίο παράδειγμα αυτής της σελίδας.

Παράδειγμα

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Ενεργό</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Σύνδεσμος</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Σύνδεσμος</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Απενεργοποιημένο</a>
  </li>
</ul>

Δοκιμάστε το προσωπικά

κελινά

χρησιμοποιήστε .nav-pills κλάση μπορεί να ρυθμίσει το μενού πλοήγησης σε καρτέλα κελινών. Αν θέλετε τα κελινά να είναι εναλλασσόμενα, δείτε τον τελευταίο παράδειγμα αυτής της σελίδας.

Παράδειγμα

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Ενεργό</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Σύνδεσμος</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Σύνδεσμος</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Απενεργοποιημένο</a>
  </li>
</ul>

Δοκιμάστε το προσωπικά

ισόμετρα καρτέλτα/κελινά

χρησιμοποιήστε .nav-justified κλάση (ισόμετρο) για την εξίσωση ετικετών/κελινών:

Παράδειγμα

<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>

Δοκιμάστε το προσωπικά

καταλόγου κελινόδων

Παράδειγμα

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Ενεργό</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Καταλόγος</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Σύνδεσμος 1</a></li>
      <li><a class="dropdown-item" href="#">Σύνδεσμος 2</a></li>
      <li><a class="dropdown-item" href="#">Σύνδεσμος 3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Σύνδεσμος</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Απενεργοποιημένο</a>
  </li>
</ul>

Δοκιμάστε το προσωπικά

καταλόγου καρτελών

Παράδειγμα

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Ενεργό</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Καταλόγος</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Σύνδεσμος 1</a></li>
      <li><a class="dropdown-item" href="#">Σύνδεσμος 2</a></li>
      <li><a class="dropdown-item" href="#">Σύνδεσμος 3</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Σύνδεσμος</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Απενεργοποιημένο</a>
  </li>
</ul>

Δοκιμάστε το προσωπικά

εναλλασσόμενα / δυναμικά καρτέλτα

Για να γίνει τα καρτέλτα εναλλασσόμενα, προσθέστε data-toggle="tab" προσθέστε ιδιότητες σε κάθε σύνδεσμο. Στη συνέχεια, προσθέστε σε κάθε καρτέλτα ένα σύνδεσμο με μοναδικό ID .tab-pane κλάσεις, και εμπνεύστε τα σε πλαίσια με .tab-content κλάση <div> στο στοιχείο.

Αν θέλετε να τα καρτέλτα μπορούν να μπαίνουν και να βγαίνουν με σβήσιμο, προσθέστε .fade κλάση προστίθεται σε .tab-pane：

Παράδειγμα

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

Δοκιμάστε το προσωπικά

Κατάλληλα / δυναμικά καψούλη οδηγία

Το ίδιο κώδικας ισχύει για τη ναυτιλία; Απλά αλλάξτε την ιδιότητα data-toggle data-toggle="pill" Απλά:

Παράδειγμα

<!-- Οδηγία καψούλη -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="pill" href="#home">Chunri</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu1">Chuxia</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu2">Shanxing</a>
  </li>
</ul>
<!-- Οπίσθιοι κάδροι καρτέλας -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

Δοκιμάστε το προσωπικά