بوت اسپین 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="#">Dropdown</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="#">Dropdown</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" ਹਰ ਲਿੰਕ ਵਿੱਚ ਲੇਬਲ ਸੰਕੇਤ ਸ਼ਾਮਲ ਕਰੋ। ਹਰ ਟੈਬ ਨੂੰ ਇੱਕ ਅਲੱਗ ਆਈਡੀ ਦੇ ਨਾਲ ਜੋੜੋ .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">ਹੋਮ
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu1">ਮੇਨੂ 1
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#menu2">ਮੇਨੂ 2
  </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>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਸਿਖਰਾਇਆ

ਸ਼ਿਫਟਿੰਗ / ਗਤੀਸ਼ੀਲ ਕੈਪਸੂਲ ਨੇਵੀਗੇਸ਼ਨ

ਨੇਵੀਗੇਸ਼ਨ ਲਈ ਇਕੱਲੀ ਕੋਡ ਵਰਤੋਂ ਕਰੋ; ਕੇਵਲ 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">ਗ੍ਰੀਸ਼ਮ
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu1">ਸਰਦਾਂ
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="#menu2">ਸ਼ਾਨਿਸ਼ਠਾ
  </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>

ਆਪਣੇ ਤੌਰ 'ਤੇ ਸਿਖਰਾਇਆ