بوت اسپرینگ 5 ناویگیشن بار

ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ

ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਪੇਜ ਦੀ ਸਿਰਫ਼ ਤਲ ਵਿੱਚ ਸਥਿਤ ਨੇਵੀਗੇਸ਼ਨ ਹੈ:

ਬੁਨਿਆਦੀ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ

ਬ੍ਰੌਸਿੰਗਸਟਾਕ ਦੀ ਵਰਤੋਂ ਨਾਲ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਫੈਲਾਇਆ ਜਾ ਸਕਦਾ ਹੈ ਜਾਂ ਸਾਕਰੀਫ਼ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਸਕ੍ਰੀਨ ਦਾ ਸਾਈਜ਼ ਵੱਧਦਾ ਜਾਂ ਘਟਦਾ ਹੈ。

ਕਿਰਪਾ ਕਰਕੇ ਇਸ ਦਾ ਉਪਯੋਗ ਕਰੋ .navbar ਕਲਾਸ ਨਾਲ ਸਟੈਂਡਰਡ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ ਅਤੇ ਤਬਦੀਲੀ ਕਰਨ ਵਾਲੀ ਰੈਸਪੋਨਸਿਵ ਕਲਾਸ ਹੈ:.navbar-expand-xxl|xl|lg|md|sm（ਵੱਡੇ ਵੱਡੇ ਸਾਈਜ਼, ਵੱਡੇ, ਮੱਧ ਅਤੇ ਛੋਟੇ ਸਕ੍ਰੀਨਾਂ 'ਤੇ ਪੱਧਰੀ ਰੂਪ ਵਿੱਚ ਸਥਿਤ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਜਾਂ ਛੋਟੇ ਸਕ੍ਰੀਨਾਂ 'ਤੇ ਊਰਧਵਾਧਰ ਰੂਪ ਵਿੱਚ ਸਥਿਤ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ）。

ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਵਿੱਚ ਲਿੰਕ ਜੋੜਨ ਲਈ ਵਰਤੋਂ ਕਰੋ class="navbar-nav" ਦੇ <ul> ਤੱਤ (ਜਾਂ <div>）。ਤਦ ਨਾਲ .nav-item ਕਲਾਸ ਦੇ <li> ਤੱਤ ਦੇ ਨਾਲ ਸਾਰੇ .nav-link ਕਲਾਸ ਦੇ <a> ਤੱਤ:

ਇੰਸਟੈਂਸ

<!-- ਗੁਰੂ ਰੰਗ ਦਾ ਪੱਧਰੀ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਛੋਟੇ ਸਕ੍ਰੀਨਾਂ 'ਤੇ ਊਰਧਵਾਧਰ ਬਣਦਾ ਹੈ -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <!-- ਲਿੰਕ -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">ਲਿੰਕ 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ਲਿੰਕ 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ਲਿੰਕ 3</a>
      </li>
    </ul>
  </div>
</nav>

ਸਵੈ ਮੁਸ਼ਕਲਾਤ ਕਰੋ

ਊਰਧਵਾਧਰ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ

ਹਟਾਓ .navbar-expand-* ਕਲਾਸ ਨਾਲ ਹਮੇਸ਼ਾ ਊਰਧਵਾਧਰ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ:

ਇੰਸਟੈਂਸ

<!-- ਗੁਰੂ ਰੰਗ ਦੀ ਊਰਧਵਾਧਰ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ -->
<nav class="navbar bg-light">
  ...
</nav>

ਸਵੈ ਮੁਸ਼ਕਲਾਤ ਕਰੋ

ਮੱਧਮ ਸਥਿਤੀ ਵਿੱਚ ਰੱਖੇ ਗਏ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ

ਜੋੜੋ .justify-content-center ਕਲਾਸ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਨੂੰ ਮੱਧਮ ਸਥਿਤੀ ਵਿੱਚ ਰੱਖਦੀ ਹੈ:

ਇੰਸਟੈਂਸ

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

ਸਵੈ ਮੁਸ਼ਕਲਾਤ ਕਰੋ

ਰੰਗ ਵਾਲੀ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ

ਕੋਈ ਵੀ .bg-color ਕਲਾਸ ਨਾਲ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਦੇ ਪਿੱਛੋਕੜੀ ਰੰਗ ਨੂੰ ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

ਸੁਝਾਅ:ਕਿਰਪਾ ਕਰਕੇ ਇਸ ਦਾ ਉਪਯੋਗ ਕਰੋ .navbar-dark ਕਲਾਸ ਨਾਲ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਵਿੱਚ ਸਾਰੇ ਲਿੰਕਾਂ ਨੂੰ ਸਫੇਦ ਟੈਕਸਟ ਰੰਗ ਦੇ ਰਸਤੇ ਦੇ ਰੰਗ ਦਿੰਦੀ ਹੈ ਜਾਂ ਵਰਤੋਂ ਕਰੋ .navbar-light ਕਲਾਸ ਨੂੰ ਕਾਲੇ ਟੈਕਸਟ ਰੰਗ ਦੇ ਰਸਤੇ ਦੇ ਰੰਗ ਦਿੰਦੀ ਹੈ。

ਇੰਸਟੈਂਸ

<!-- ਗੁਰੂ ਰੰਗ ਪਿੱਛੋਕੜੀ，ਸਫੇਦ ਟੈਕਸਟ -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        活动
      </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 active" href="#">ਸਰਵਾਇਵਲ</a>
      </li>
    </ul>
  </div>
</nav>
<a class="nav-link disabled" href="#">ਨਾਸਤਵਿਕ</a>
<!-- ਕਾਲੇ ਪੱਟੇ, ਸਫੇਦ ਟੈਕਸਟ -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- ਨੀਲੇ ਪੱਟੇ, ਸਫੇਦ ਟੈਕਸਟ -->

ਸਵੈ ਮੁਸ਼ਕਲਾਤ ਕਰੋ

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>ਸਰਵਾਇਵਲ / ਨਾਸਤਵਿਕ ਸਥਿਤੀ: .active ਕਲਾਸ ਨੂੰ <a> ਐਲੀਮੈਂਟ ਨੂੰ ਮੌਜੂਦਾ ਲਿੰਕ ਨੂੰ ਬਲੈਕ ਕਰ ਸਕਦੇ ਹੋ, ਜਾਂ .disabled ਕਲਾਸ ਦੀ ਮਦਦ ਨਾਲ ਲਿੰਕ ਨੂੰ ਨਾਕਲਿਕ ਕਰ ਸਕਦੇ ਹੋ

ਬ੍ਰਾਂਡ / ਲੋਗੋ

.navbar-brand ਕਲਾਸ ਦਾ ਉਪਯੋਗ ਕਰਦੇ ਹੋ ਤਾਂ

ਇੰਸਟੈਂਸ

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

ਸਵੈ ਮੁਸ਼ਕਲਾਤ ਕਰੋ

ਜੇਕਰ ਤੁਸੀਂ .navbar-brand ਜਦੋਂ ਤੁਸੀਂ ਚਿਤਰ ਨਾਲ ਕਲਾਸ ਦਾ ਉਪਯੋਗ ਕਰਦੇ ਹੋ ਤਾਂ, Bootstrap 5 ਆਪਣੇ ਢੰਗ ਨਾਲ ਚਿਤਰ ਸਟਾਈਲ ਸੈਟ ਕਰੇਗਾ, ਜੋ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰਡ ਵਿੱਚ ਵਾਲੀ ਪੱਥਰ ਵਿੱਚ ਮਿਲਾਇਆ ਜਾਵੇਗਾ。

ਇੰਸਟੈਂਸ

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"> 
    </a>
  </div>
</nav>

ਸਵੈ ਮੁਸ਼ਕਲਾਤ ਕਰੋ

ਨੇਵੀਗੇਸ਼ਨ ਬਾਰਡ ਟੈਕਸਟ

ਕਿਰਪਾ ਕਰਕੇ ਇਸ ਦਾ ਉਪਯੋਗ ਕਰੋ .navbar-text ਕਲਾਸ ਨਾਲ ਸਿਧਾਂਤਕ ਰੂਪ ਵਿੱਚ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰਡ ਵਿੱਚ ਗਿਣਤੀ ਵਿੱਚ ਕਿਸੇ ਵੀ ਐਲੀਮੈਂਟ ਨੂੰ ਸਥਿਤ ਕਰਨਾ ਹੈ (ਯਕੀਨੀ ਕਰੋ ਕਿ ਸਹੀ ਇਨਡੈਂਟ ਅਤੇ ਟੈਕਸਟ ਰੰਗ ਹੋਣ)

ਇੰਸਟੈਂਸ

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">ਨੇਵੀਗੇਸ਼ਨ ਬਾਰਡ ਟੈਕਸਟ</span>
  </div>
</nav>

ਸਵੈ ਮੁਸ਼ਕਲਾਤ ਕਰੋ

ਬਹੁਤ ਸਾਰੇ ਸਮੇਂ, ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਛੋਟੇ ਸਕਰੀਨਾਂ 'ਤੇ, ਤੁਸੀਂ ਨੇਵੀਗੇਸ਼ਨ ਲਿੰਕਸ ਛੁਪਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਅਤੇ ਇੱਕ ਬਟਨ ਦੀ ਥਾਂ ਲੈਣਾ ਚਾਹੁੰਦੇ ਹੋ ਜਿਸ ਨੂੰ ਦੱਬਣ 'ਤੇ ਉਹ ਦਿਖਾਉਣ

ਜੇਕਰ ਤੁਸੀਂ ਸਕਰੋਲਬਰ ਦੇ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰਡ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ class="navbar-toggler"ਅਤੇdata-bs-toggle="collapse" ਅਤੇ data-bs-target="#thetarget" ਦੇ ਬਟਨ ਵਿੱਚ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰਡ ਦੇ (ਲਿੰਕਸ ਆਦਿ) ਕਰਨ ਲਈ class="collapse navbar-collapse" ਦੇ <div> ਐਲੀਮੈਂਟ ਵਿੱਚ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਬਟਨ ਦੇ data-bs-target ਮੇਲ ਖਾਣ ਵਾਲੇ id: "thetarget"。

ਇੰਸਟੈਂਸ

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-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>
      </ul>
    </div>
  </div>
</nav>

ਸਵੈ ਮੁਸ਼ਕਲਾਤ ਕਰੋ

ਸੁਝਾਅ:ਤੁਸੀਂ ਇਸ ਨੂੰ ਹਟਾ ਸਕਦੇ ਹੋ .navbar-expand-md ਵਰਗ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਲਿੰਕ ਨੂੰ ਹਮੇਸ਼ਾ ਛੁਪਾਉਂਦਾ ਹੈ ਅਤੇ ਟੋਗਲ ਬਟਨ ਦਿਖਾਉਂਦਾ ਹੈ。

ਡਰਾਪਡ-ਮੇਨੂ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ

ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਡਰਾਪਡ-ਮੇਨੂ ਰੱਖ ਸਕਦਾ ਹੈ:

ਇੰਸਟੈਂਸ

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">ਡਰਾਪਡ-ਮੇਨੂ</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">ਲਿੰਕ</a></li>
    <li><a class="dropdown-item" href="#">ਹੋਰ ਲਿੰਕ</a></li>
    <li><a class="dropdown-item" href="#">ਤੀਜਾ ਲਿੰਕ</a></li>
  </ul>
</li>

ਸਵੈ ਮੁਸ਼ਕਲਾਤ ਕਰੋ

ਨੇਵੀਗੇਸ਼ਨ ਮੇਨੂ ਅਤੇ ਬਟਨ

ਤੁਸੀਂ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਫਾਰਮ ਜੋੜ ਸਕਦੇ ਹੋ

ਇੰਸਟੈਂਸ

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">ਲਿੰਕ</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">ਲਿੰਕ</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">ਲਿੰਕ</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-primary" type="button">Search</button>
      </form>
    </div>
  </div>
</nav>

ਸਵੈ ਮੁਸ਼ਕਲਾਤ ਕਰੋ

ਸਥਿਰ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰੇ

ਨੇਵੀਗੇਸ਼ਨ ਪੇਜ ਦੇ ਉੱਪਰ ਜਾਂ ਨੀਚੇ ਸਥਿਰ ਹੋ ਸਕਦਾ ਹੈ。

ਸਥਿਰ ਨੇਵੀਗੇਸ਼ਨ ਪੇਜ ਦੇ ਸਾਲੇ ਗਿਰਣ ਤੋਂ ਅਲੱਗ ਇੱਕ ਸਥਿਰ ਸਥਾਨ (ਉੱਪਰ ਜਾਂ ਨੀਚੇ) ਵਿੱਚ ਦਿਖਾਈ ਦੇਣਾ ਰਹਿੰਦਾ ਹੈ。

.fixed-top ਕਿਸਮ ਨੇਵੀਗੇਸ਼ਨ ਨੂੰ ਪੇਜ ਦੇ ਉੱਪਰ ਸਥਿਰ ਕਰਦੀ ਹੈਟੋਪ:

ਇੰਸਟੈਂਸ

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

ਸਵੈ ਮੁਸ਼ਕਲਾਤ ਕਰੋ

ਕਿਰਪਾ ਕਰਕੇ .fixed-bottom ਕਿਸਮ ਨੂੰ ਵਰਤ ਕੇ ਨੇਵੀਗੇਸ਼ਨ ਨੂੰ ਪੇਜ ਦੇ ਨੀਚੇ ਸਥਿਰ ਕਰੋ:

ਇੰਸਟੈਂਸ

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

ਸਵੈ ਮੁਸ਼ਕਲਾਤ ਕਰੋ

ਕਿਰਪਾ ਕਰਕੇ ਇਸ ਦਾ ਉਪਯੋਗ ਕਰੋ .sticky-top ਇਹ ਕਿਸਮ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰੇ ਗਿਰਦੇ ਵੇਲੇ ਪੇਜ ਦੇ ਉੱਪਰ ਲੱਗੀ ਰਹਿੰਦੀ ਹੈ / ਸਥਿਰ ਰਹਿੰਦੀ ਹੈਟੋਪ。

ਟਿੱਪਣੀਆਂ:ਇਹ ਕਿਸਮ IE11 ਅਤੇ ਪੁਰਾਣੇ ਸੰਸਕਰਣਾਂ ਵਿੱਚ ਕੰਮ ਨਹੀਂ ਕਰਦੀ (ਇਸ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖੋ position:relative）。

ਇੰਸਟੈਂਸ

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

ਸਵੈ ਮੁਸ਼ਕਲਾਤ ਕਰੋ