ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
Check
in English

ਨਵਬਾਰ

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

ਇਸ ਪੰਨੇ 'ਤੇ

ਕਿਦਾ ਚਲਦਾ

ਨਵਬਾਰ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਤੁਹਾਨੂੰ ਇਹ ਜਾਣਨ ਦੀ ਲੋੜ ਹੈ:

  • ਨਵਬਾਰ ਨੂੰ ਜਵਾਬਦੇਹ ਸਮੇਟਣ ਅਤੇ ਰੰਗ ਸਕੀਮ ਕਲਾਸਾਂ ਲਈ ਇੱਕ ਰੈਪਿੰਗ .navbarਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।.navbar-expand{-sm|-md|-lg|-xl|-xxl}
  • ਨਵਬਾਰ ਅਤੇ ਉਹਨਾਂ ਦੀ ਸਮੱਗਰੀ ਮੂਲ ਰੂਪ ਵਿੱਚ ਤਰਲ ਹੁੰਦੀ ਹੈ। ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਉਹਨਾਂ ਦੀ ਹਰੀਜੱਟਲ ਚੌੜਾਈ ਨੂੰ ਸੀਮਤ ਕਰਨ ਲਈ ਕੰਟੇਨਰ ਨੂੰ ਬਦਲੋ ।
  • ਨੇਵਬਾਰ ਦੇ ਅੰਦਰ ਸਪੇਸਿੰਗ ਅਤੇ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨ ਲਈ ਸਾਡੀਆਂ ਸਪੇਸਿੰਗ ਅਤੇ ਫਲੈਕਸ ਯੂਟਿਲਿਟੀ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
  • Navbars ਮੂਲ ਰੂਪ ਵਿੱਚ ਜਵਾਬਦੇਹ ਹੁੰਦੇ ਹਨ, ਪਰ ਤੁਸੀਂ ਇਸਨੂੰ ਬਦਲਣ ਲਈ ਉਹਨਾਂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਸੋਧ ਸਕਦੇ ਹੋ। ਜਵਾਬਦੇਹ ਵਿਵਹਾਰ ਸਾਡੇ ਸੰਕੁਚਿਤ JavaScript ਪਲੱਗਇਨ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ।
  • ਕਿਸੇ ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਓ <nav>ਜਾਂ, ਜੇਕਰ ਇੱਕ ਹੋਰ ਆਮ ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਜਿਵੇਂ ਕਿ , ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਇੱਕ ਲੈਂਡਮਾਰਕ ਖੇਤਰ ਵਜੋਂ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਪਛਾਣ ਕਰਨ ਲਈ ਹਰ ਨਵਬਾਰ ਵਿੱਚ <div>ਇੱਕ ਜੋੜੋ ।role="navigation"
  • aria-current="page"ਮੌਜੂਦਾ ਪੰਨੇ aria-current="true"ਲਈ ਜਾਂ ਇੱਕ ਸੈੱਟ ਵਿੱਚ ਮੌਜੂਦਾ ਆਈਟਮ ਲਈ ਵਰਤ ਕੇ ਮੌਜੂਦਾ ਆਈਟਮ ਨੂੰ ਦਰਸਾਓ ।
  • v5.2.0 ਵਿੱਚ ਨਵਾਂ: ਨਵਬਾਰਾਂ ਨੂੰ CSS ਵੇਰੀਏਬਲਾਂ ਨਾਲ ਥੀਮ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਜੋ ਕਿ .navbarਬੇਸ ਕਲਾਸ ਵਿੱਚ ਸਕੋਪ ਕੀਤੇ ਗਏ ਹਨ। .navbar-lightਨੂੰ ਬਰਤਰਫ਼ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ .navbar-darkਵਾਧੂ ਸਟਾਈਲ ਜੋੜਨ ਦੀ ਬਜਾਏ CSS ਵੇਰੀਏਬਲ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ ਦੁਬਾਰਾ ਲਿਖਿਆ ਗਿਆ ਹੈ।
ਇਸ ਕੰਪੋਨੈਂਟ ਦਾ ਐਨੀਮੇਸ਼ਨ ਪ੍ਰਭਾਵ prefers-reduced-motionਮੀਡੀਆ ਪੁੱਛਗਿੱਛ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਸਾਡੇ ਪਹੁੰਚਯੋਗਤਾ ਦਸਤਾਵੇਜ਼ਾਂ ਦੇ ਘਟਾਏ ਗਏ ਮੋਸ਼ਨ ਭਾਗ ਨੂੰ ਦੇਖੋ ।

ਸਮਰਥਿਤ ਸਮੱਗਰੀ

ਨਵਬਾਰ ਮੁੱਠੀ ਭਰ ਉਪ-ਪੁਰਜ਼ਿਆਂ ਲਈ ਬਿਲਟ-ਇਨ ਸਮਰਥਨ ਦੇ ਨਾਲ ਆਉਂਦੇ ਹਨ। ਲੋੜ ਅਨੁਸਾਰ ਹੇਠ ਲਿਖੇ ਵਿੱਚੋਂ ਚੁਣੋ:

  • .navbar-brandਤੁਹਾਡੀ ਕੰਪਨੀ, ਉਤਪਾਦ, ਜਾਂ ਪ੍ਰੋਜੈਕਟ ਦੇ ਨਾਮ ਲਈ।
  • .navbar-navਪੂਰੀ ਉਚਾਈ ਅਤੇ ਹਲਕੇ ਨੈਵੀਗੇਸ਼ਨ ਲਈ (ਡ੍ਰੌਪਡਾਉਨ ਲਈ ਸਮਰਥਨ ਸਮੇਤ)।
  • .navbar-togglerਸਾਡੇ ਸਮੇਟਣ ਪਲੱਗਇਨ ਅਤੇ ਹੋਰ ਨੈਵੀਗੇਸ਼ਨ ਟੌਗਲਿੰਗ ਵਿਹਾਰਾਂ ਨਾਲ ਵਰਤਣ ਲਈ।
  • ਕਿਸੇ ਵੀ ਫਾਰਮ ਨਿਯੰਤਰਣ ਅਤੇ ਕਾਰਵਾਈਆਂ ਲਈ ਫਲੈਕਸ ਅਤੇ ਸਪੇਸਿੰਗ ਉਪਯੋਗਤਾਵਾਂ।
  • .navbar-textਟੈਕਸਟ ਦੀਆਂ ਲੰਬਕਾਰੀ ਕੇਂਦਰਿਤ ਸਤਰਾਂ ਨੂੰ ਜੋੜਨ ਲਈ।
  • .collapse.navbar-collapseਇੱਕ ਪੇਰੈਂਟ ਬ੍ਰੇਕਪੁਆਇੰਟ ਦੁਆਰਾ ਨਵਬਾਰ ਸਮੱਗਰੀਆਂ ਨੂੰ ਗਰੁੱਪਿੰਗ ਅਤੇ ਲੁਕਾਉਣ ਲਈ।
  • .navbar-scrollਇੱਕ ਸੈੱਟ ਕਰਨ ਲਈ ਇੱਕ ਵਿਕਲਪਿਕ ਸ਼ਾਮਲ ਕਰੋ max-heightਅਤੇ ਵਿਸਤ੍ਰਿਤ ਨਵਬਾਰ ਸਮੱਗਰੀ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰੋ ।

ਇੱਥੇ ਇੱਕ ਜਵਾਬਦੇਹ ਲਾਈਟ-ਥੀਮ ਵਾਲੇ ਨਵਬਾਰ ਵਿੱਚ ਸ਼ਾਮਲ ਸਾਰੇ ਉਪ-ਕੰਪੋਨੈਂਟਸ ਦੀ ਇੱਕ ਉਦਾਹਰਨ ਹੈ ਜੋ lg(ਵੱਡੇ) ਬ੍ਰੇਕਪੁਆਇੰਟ 'ਤੇ ਆਪਣੇ ਆਪ ਹੀ ਸਮੇਟਦੇ ਹਨ।

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

ਇਹ ਉਦਾਹਰਨ ਪਿਛੋਕੜ ( bg-light) ਅਤੇ ਸਪੇਸਿੰਗ ( me-auto, mb-2, mb-lg-0, me-2) ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ।

ਬ੍ਰਾਂਡ

ਜ਼ਿਆਦਾਤਰ ਤੱਤਾਂ ' .navbar-brandਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਪਰ ਇੱਕ ਐਂਕਰ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ, ਕਿਉਂਕਿ ਕੁਝ ਤੱਤਾਂ ਲਈ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਜਾਂ ਕਸਟਮ ਸਟਾਈਲ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।

ਟੈਕਸਟ

.navbar-brandਕਲਾਸ ਦੇ ਨਾਲ ਇੱਕ ਤੱਤ ਦੇ ਅੰਦਰ ਆਪਣਾ ਟੈਕਸਟ ਸ਼ਾਮਲ ਕਰੋ ।

html 
<!-- As a link -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

ਚਿੱਤਰ

ਤੁਸੀਂ ਦੇ ਅੰਦਰਲੇ ਟੈਕਸਟ ਨੂੰ .navbar-brandਇੱਕ ਨਾਲ ਬਦਲ ਸਕਦੇ ਹੋ <img>।

html 
<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

ਚਿੱਤਰ ਅਤੇ ਟੈਕਸਟ

ਤੁਸੀਂ ਇੱਕੋ ਸਮੇਂ ਇੱਕ ਚਿੱਤਰ ਅਤੇ ਟੈਕਸਟ ਜੋੜਨ ਲਈ ਕੁਝ ਵਾਧੂ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰ ਸਕਦੇ ਹੋ। .d-inline-blockਦੇ ਜੋੜ ਅਤੇ .align-text-top'ਤੇ ਨੋਟ ਕਰੋ <img>।

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

ਨਵਬਾਰ ਨੈਵੀਗੇਸ਼ਨ ਲਿੰਕ ਸਾਡੇ .navਵਿਕਲਪਾਂ 'ਤੇ ਆਪਣੀ ਖੁਦ ਦੀ ਸੋਧਕ ਕਲਾਸ ਨਾਲ ਬਣਾਉਂਦੇ ਹਨ ਅਤੇ ਸਹੀ ਜਵਾਬਦੇਹ ਸਟਾਈਲਿੰਗ ਲਈ ਟੌਗਲਰ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਤੁਹਾਡੀ ਨਵਬਾਰ ਸਮੱਗਰੀਆਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਢੰਗ ਨਾਲ ਇਕਸਾਰ ਰੱਖਣ ਲਈ ਨਵਬਾਰ ਵਿੱਚ ਨੈਵੀਗੇਸ਼ਨ ਵੱਧ ਤੋਂ ਵੱਧ ਖਿਤਿਜੀ ਥਾਂ 'ਤੇ ਕਬਜ਼ਾ ਕਰਨ ਲਈ ਵੀ ਵਧੇਗੀ ।

ਮੌਜੂਦਾ ਪੰਨੇ ਨੂੰ ਦਰਸਾਉਣ ਲਈ .activeਕਲਾਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ ।.nav-link

ਕਿਰਪਾ ਕਰਕੇ ਨੋਟ ਕਰੋ ਕਿ ਤੁਹਾਨੂੰ aria-currentਐਕਟਿਵ 'ਤੇ ਵਿਸ਼ੇਸ਼ਤਾ ਵੀ ਸ਼ਾਮਲ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ .nav-link।

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

ਅਤੇ ਕਿਉਂਕਿ ਅਸੀਂ ਆਪਣੇ navs ਲਈ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਜੇਕਰ ਤੁਸੀਂ ਚਾਹੋ ਤਾਂ ਤੁਸੀਂ ਸੂਚੀ-ਅਧਾਰਿਤ ਪਹੁੰਚ ਤੋਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਚ ਸਕਦੇ ਹੋ।

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

ਤੁਸੀਂ ਆਪਣੇ ਨਵਬਾਰ ਵਿੱਚ ਡ੍ਰੌਪਡਾਊਨ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰ ਸਕਦੇ ਹੋ। ਡ੍ਰੌਪਡਾਉਨ ਮੀਨੂ ਨੂੰ ਸਥਿਤੀ ਲਈ ਰੈਪਿੰਗ ਐਲੀਮੈਂਟ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਇਸਲਈ ਹੇਠਾਂ ਦਰਸਾਏ ਅਨੁਸਾਰ ਵੱਖਰੇ .nav-itemਅਤੇ ਨੇਸਟਡ ਤੱਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ।.nav-link

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

ਫਾਰਮ

ਇੱਕ ਨਵਬਾਰ ਦੇ ਅੰਦਰ ਵੱਖ-ਵੱਖ ਫਾਰਮ ਨਿਯੰਤਰਣ ਅਤੇ ਭਾਗ ਰੱਖੋ:

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

ਫਲੈਕਸ ਲੇਆਉਟ ਦੀ ਵਰਤੋਂ ਦੇ ਤਤਕਾਲ ਚਾਈਲਡ ਐਲੀਮੈਂਟਸ .navbarਅਤੇ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਹੋਣਗੇ justify-content: space-between। ਇਸ ਵਿਵਹਾਰ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਲਈ ਲੋੜ ਅਨੁਸਾਰ ਵਾਧੂ ਫਲੈਕਸ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

ਇਨਪੁਟ ਗਰੁੱਪ ਵੀ ਕੰਮ ਕਰਦੇ ਹਨ। ਜੇਕਰ ਤੁਹਾਡਾ ਨਵਬਾਰ ਇੱਕ ਪੂਰਾ ਰੂਪ ਹੈ, ਜਾਂ ਜਿਆਦਾਤਰ ਇੱਕ ਰੂਪ ਹੈ, ਤਾਂ ਤੁਸੀਂ <form>ਤੱਤ ਨੂੰ ਕੰਟੇਨਰ ਵਜੋਂ ਵਰਤ ਸਕਦੇ ਹੋ ਅਤੇ ਕੁਝ HTML ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰ ਸਕਦੇ ਹੋ।

html 
<nav class="navbar bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

ਇਹਨਾਂ ਨਵਬਾਰ ਫਾਰਮਾਂ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਵੀ ਕਈ ਬਟਨ ਸਮਰਥਿਤ ਹਨ। ਇਹ ਇੱਕ ਵਧੀਆ ਰੀਮਾਈਂਡਰ ਵੀ ਹੈ ਕਿ ਲੰਬਕਾਰੀ ਅਲਾਈਨਮੈਂਟ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਵੱਖ-ਵੱਖ ਆਕਾਰ ਦੇ ਤੱਤਾਂ ਨੂੰ ਇਕਸਾਰ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।

html 
<nav class="navbar bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

ਟੈਕਸਟ

ਨਵਬਾਰ ਵਿੱਚ ਦੀ ਮਦਦ ਨਾਲ ਟੈਕਸਟ ਦੇ ਬਿੱਟ ਹੋ ਸਕਦੇ ਹਨ .navbar-text। ਇਹ ਕਲਾਸ ਟੈਕਸਟ ਦੀਆਂ ਸਤਰਾਂ ਲਈ ਵਰਟੀਕਲ ਅਲਾਈਨਮੈਂਟ ਅਤੇ ਹਰੀਜੱਟਲ ਸਪੇਸਿੰਗ ਨੂੰ ਐਡਜਸਟ ਕਰਦੀ ਹੈ।

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

ਲੋੜ ਅਨੁਸਾਰ ਹੋਰ ਹਿੱਸਿਆਂ ਅਤੇ ਉਪਯੋਗਤਾਵਾਂ ਨਾਲ ਮਿਲਾਓ ਅਤੇ ਮੇਲ ਕਰੋ।

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

ਰੰਗ ਸਕੀਮਾਂ

v5.2.0 ਵਿੱਚ ਨਵਾਂ: ਨਵਬਾਰ ਥੀਮਿੰਗ ਹੁਣ CSS ਵੇਰੀਏਬਲ ਦੁਆਰਾ ਸੰਚਾਲਿਤ ਹੈ ਅਤੇ .navbar-lightਇਸਨੂੰ ਬਰਤਰਫ਼ ਕੀਤਾ ਗਿਆ ਹੈ। CSS ਵੇਰੀਏਬਲ 'ਤੇ ਲਾਗੂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ .navbar, "ਲਾਈਟ" ਦਿੱਖ ਲਈ ਡਿਫਾਲਟ ਹੁੰਦੇ ਹਨ, ਅਤੇ ਨਾਲ ਓਵਰਰਾਈਡ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ .navbar-dark।

ਬੂਟਸਟਰੈਪ ਦੇ Sass ਅਤੇ CSS ਵੇਰੀਏਬਲਾਂ ਦੇ ਸੁਮੇਲ ਲਈ Navbar ਥੀਮ ਪਹਿਲਾਂ ਨਾਲੋਂ ਕਿਤੇ ਜ਼ਿਆਦਾ ਆਸਾਨ ਹਨ। ਹਲਕੇ ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗਾਂ ਦੇ ਨਾਲ ਵਰਤਣ ਲਈ ਡਿਫੌਲਟ ਸਾਡਾ "ਹਲਕਾ ਨਵਬਾਰ" ਹੈ, ਪਰ ਤੁਸੀਂ .navbar-darkਗੂੜ੍ਹੇ ਬੈਕਗ੍ਰਾਊਂਡ ਰੰਗਾਂ ਲਈ ਵੀ ਅਰਜ਼ੀ ਦੇ ਸਕਦੇ ਹੋ। .bg-*ਫਿਰ, ਉਪਯੋਗਤਾਵਾਂ ਨਾਲ ਅਨੁਕੂਲਿਤ ਕਰੋ।

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

ਕੰਟੇਨਰ

ਹਾਲਾਂਕਿ ਇਹ ਲੋੜੀਂਦਾ ਨਹੀਂ ਹੈ, ਤੁਸੀਂ .containerਇੱਕ ਪੰਨੇ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ ਇੱਕ ਨਵਬਾਰ ਨੂੰ ਇੱਕ ਵਿੱਚ ਲਪੇਟ ਸਕਦੇ ਹੋ-ਹਾਲਾਂਕਿ ਨੋਟ ਕਰੋ ਕਿ ਇੱਕ ਅੰਦਰੂਨੀ ਕੰਟੇਨਰ ਅਜੇ ਵੀ ਲੋੜੀਂਦਾ ਹੈ। ਜਾਂ ਤੁਸੀਂ ਇੱਕ ਸਥਿਰ ਜਾਂ ਸਥਿਰ ਚੋਟੀ ਦੇ ਨਵਬਾਰ.navbar ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਕੇਂਦਰ ਵਿੱਚ ਰੱਖਣ ਲਈ ਅੰਦਰ ਇੱਕ ਕੰਟੇਨਰ ਜੋੜ ਸਕਦੇ ਹੋ ।

html 
<div class="container">
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

ਤੁਹਾਡੇ ਨਵਬਾਰ ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਕਿੰਨੀ ਚੌੜੀ ਪੇਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਨੂੰ ਬਦਲਣ ਲਈ ਕਿਸੇ ਵੀ ਜਵਾਬਦੇਹ ਕੰਟੇਨਰ ਦੀ ਵਰਤੋਂ ਕਰੋ।

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

ਪਲੇਸਮੈਂਟ

ਨੇਵੀਬਾਰ ਨੂੰ ਗੈਰ-ਸਥਿਰ ਸਥਿਤੀਆਂ ਵਿੱਚ ਰੱਖਣ ਲਈ ਸਾਡੀ ਸਥਿਤੀ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਫਿਕਸਡ ਤੋਂ ਸਿਖਰ ਤੱਕ ਚੁਣੋ, ਹੇਠਾਂ ਤੱਕ ਸਥਿਰ, ਸਿਖਰ 'ਤੇ ਚਿਪਕਿਆ ਹੋਇਆ (ਪੰਨੇ ਦੇ ਨਾਲ ਸਕ੍ਰੋਲ ਕਰੋ ਜਦੋਂ ਤੱਕ ਇਹ ਸਿਖਰ ਤੱਕ ਨਹੀਂ ਪਹੁੰਚਦਾ, ਫਿਰ ਉੱਥੇ ਰਹਿੰਦਾ ਹੈ), ਜਾਂ ਹੇਠਾਂ ਚਿਪਕਿਆ ਹੋਇਆ (ਪੰਨੇ ਦੇ ਨਾਲ ਸਕ੍ਰੋਲ ਕਰਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਇਹ ਹੇਠਾਂ ਨਹੀਂ ਪਹੁੰਚਦਾ, ਫਿਰ ਰਹਿੰਦਾ ਹੈ। ਉੱਥੇ).

ਸਥਿਰ ਨਵਬਾਰ ਵਰਤਦੇ ਹਨ position: fixed, ਭਾਵ ਉਹ DOM ਦੇ ਆਮ ਪ੍ਰਵਾਹ ਤੋਂ ਖਿੱਚੇ ਜਾਂਦੇ ਹਨ ਅਤੇ ਹੋਰ ਤੱਤਾਂ ਨਾਲ ਓਵਰਲੈਪ ਨੂੰ ਰੋਕਣ ਲਈ ਕਸਟਮ CSS (ਉਦਾਹਰਨ ਲਈ, padding-topਉੱਤੇ ) ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।<body>

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
html 
<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
html 
<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
html 
<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
html 
<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

ਸਕ੍ਰੋਲਿੰਗ

ਇੱਕ ਸਮੇਟਿਆ ਨਵਬਾਰ ਦੇ ਟੌਗਲ ਕਰਨ ਯੋਗ ਸਮੱਗਰੀ ਦੇ ਅੰਦਰ ਲੰਬਕਾਰੀ ਸਕ੍ਰੋਲਿੰਗ ਨੂੰ ਸਮਰੱਥ ਕਰਨ .navbar-nav-scrollਲਈ ਇੱਕ .navbar-nav(ਜਾਂ ਹੋਰ ਨਵਬਾਰ ਉਪ-ਕੰਪੋਨੈਂਟ) ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ। ਮੂਲ ਰੂਪ ਵਿੱਚ, ਸਕ੍ਰੋਲਿੰਗ (ਜਾਂ ਵਿਊਪੋਰਟ ਉਚਾਈ ਦੇ 75%) 'ਤੇ ਕਿੱਕ ਇਨ ਹੁੰਦੀ ਹੈ , ਪਰ ਤੁਸੀਂ ਇਸਨੂੰ ਸਥਾਨਕ CSS ਕਸਟਮ ਸੰਪਤੀ ਜਾਂ ਕਸਟਮ ਸਟਾਈਲ 75vhਨਾਲ ਓਵਰਰਾਈਡ ਕਰ ਸਕਦੇ ਹੋ । --bs-navbar-heightਵੱਡੇ ਵਿਊਪੋਰਟਾਂ 'ਤੇ ਜਦੋਂ ਨੇਵਬਾਰ ਦਾ ਵਿਸਤਾਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਸਮੱਗਰੀ ਦਿਖਾਈ ਦੇਵੇਗੀ ਜਿਵੇਂ ਕਿ ਇਹ ਡਿਫੌਲਟ ਨਵਬਾਰ ਵਿੱਚ ਹੁੰਦੀ ਹੈ।

ਕਿਰਪਾ ਕਰਕੇ ਨੋਟ ਕਰੋ ਕਿ ਇਹ ਵਿਵਹਾਰ overflow—ਜਦੋਂ ਸੈਟਿੰਗ overflow-y: auto(ਇੱਥੇ ਸਮੱਗਰੀ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰਨ ਲਈ ਲੋੜੀਂਦਾ ਹੈ) ਦੀ ਸੰਭਾਵੀ ਕਮੀ ਦੇ ਨਾਲ ਆਉਂਦਾ overflow-xਹੈ, ਦੇ ਬਰਾਬਰ ਹੈ auto, ਜੋ ਕੁਝ ਲੇਟਵੀਂ ਸਮਗਰੀ ਨੂੰ ਕੱਟ ਦੇਵੇਗਾ।

ਸਰਵੋਤਮ ਸਪੇਸਿੰਗ ਲਈ ਕੁਝ ਵਾਧੂ ਮਾਰਜਿਨ ਉਪਯੋਗਤਾਵਾਂ ਦੇ .navbar-nav-scrollਨਾਲ , ਦੇ ਨਾਲ ਵਰਤਣ ਵਾਲੀ ਇੱਕ ਉਦਾਹਰਨ ਨਵਬਾਰ ਹੈ।style="--bs-scroll-height: 100px;"

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

ਜਵਾਬਦੇਹ ਵਿਵਹਾਰ

ਨਵਬਾਰ ਇਹ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ .navbar-toggler, .navbar-collapse, ਅਤੇ .navbar-expand{-sm|-md|-lg|-xl|-xxl}ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਨ ਜਦੋਂ ਉਹਨਾਂ ਦੀ ਸਮੱਗਰੀ ਇੱਕ ਬਟਨ ਦੇ ਪਿੱਛੇ ਸਮੇਟਦੀ ਹੈ। ਹੋਰ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਆਸਾਨੀ ਨਾਲ ਚੁਣ ਸਕਦੇ ਹੋ ਕਿ ਖਾਸ ਤੱਤਾਂ ਨੂੰ ਕਦੋਂ ਦਿਖਾਉਣਾ ਜਾਂ ਲੁਕਾਉਣਾ ਹੈ।

ਨਵਬਾਰ ਲਈ ਜੋ ਕਦੇ ਵੀ ਨਹੀਂ ਟੁੱਟਦੇ ਹਨ, ਨਵਬਾਰ .navbar-expand'ਤੇ ਕਲਾਸ ਸ਼ਾਮਲ ਕਰੋ। ਹਮੇਸ਼ਾ ਸਮੇਟਣ ਵਾਲੇ ਨਵਬਾਰਾਂ ਲਈ, ਕੋਈ ਵੀ .navbar-expandਕਲਾਸ ਨਾ ਜੋੜੋ।

ਟੌਗਲਰ

ਨਵਬਾਰ ਟੌਗਲਰ ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਖੱਬੇ-ਅਲਾਈਨ ਹੁੰਦੇ ਹਨ, ਪਰ ਕੀ ਉਹ ਇੱਕ ਸਾਈਲਿੰਗ ਐਲੀਮੈਂਟ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ .navbar-brand, ਉਹ ਆਪਣੇ ਆਪ ਹੀ ਬਹੁਤ ਸੱਜੇ ਪਾਸੇ ਇਕਸਾਰ ਹੋ ਜਾਣਗੇ। ਤੁਹਾਡੇ ਮਾਰਕਅੱਪ ਨੂੰ ਉਲਟਾਉਣ ਨਾਲ ਟੌਗਲਰ ਦੀ ਪਲੇਸਮੈਂਟ ਉਲਟ ਜਾਵੇਗੀ। ਹੇਠਾਂ ਵੱਖ-ਵੱਖ ਟੌਗਲ ਸਟਾਈਲ ਦੀਆਂ ਉਦਾਹਰਨਾਂ ਹਨ।

.navbar-brandਸਭ ਤੋਂ ਛੋਟੇ ਬ੍ਰੇਕਪੁਆਇੰਟ 'ਤੇ ਦਿਖਾਏ ਬਿਨਾਂ :

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

ਖੱਬੇ ਪਾਸੇ ਦਿਖਾਏ ਗਏ ਬ੍ਰਾਂਡ ਨਾਮ ਅਤੇ ਸੱਜੇ ਪਾਸੇ ਟੌਗਲਰ ਦੇ ਨਾਲ:

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

ਖੱਬੇ ਪਾਸੇ ਇੱਕ ਟੌਗਲਰ ਅਤੇ ਸੱਜੇ ਪਾਸੇ ਬ੍ਰਾਂਡ ਨਾਮ ਦੇ ਨਾਲ:

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

ਬਾਹਰੀ ਸਮੱਗਰੀ

ਕਈ ਵਾਰ ਤੁਸੀਂ ਉਸ ਸਮਗਰੀ ਲਈ ਕੰਟੇਨਰ ਐਲੀਮੈਂਟ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਨ ਲਈ ਸਮੇਟਣ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਜੋ ਸੰਰਚਨਾਤਮਕ ਤੌਰ 'ਤੇ ਦੇ ਬਾਹਰ ਬੈਠਦੀ ਹੈ .navbar। ਕਿਉਂਕਿ ਸਾਡਾ ਪਲੱਗਇਨ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ idਅਤੇ data-bs-targetਮੇਲ ਖਾਂਦਾ ਹੈ, ਇਹ ਆਸਾਨੀ ਨਾਲ ਹੋ ਜਾਂਦਾ ਹੈ!

html 
<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Collapsed content</h5>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

ਜਦੋਂ ਤੁਸੀਂ ਅਜਿਹਾ ਕਰਦੇ ਹੋ, ਤਾਂ ਅਸੀਂ ਵਾਧੂ JavaScript ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦੇ ਹਾਂ ਤਾਂ ਜੋ ਫੋਕਸ ਨੂੰ ਪ੍ਰੋਗਰਾਮੇਟਿਕ ਤੌਰ 'ਤੇ ਕੰਟੇਨਰ ਨੂੰ ਖੋਲ੍ਹਿਆ ਜਾ ਸਕੇ। ਨਹੀਂ ਤਾਂ, ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਅਤੇ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸੰਭਾਵਤ ਤੌਰ 'ਤੇ ਨਵੀਂ ਪ੍ਰਗਟ ਕੀਤੀ ਸਮੱਗਰੀ ਨੂੰ ਲੱਭਣ ਵਿੱਚ ਔਖਾ ਸਮਾਂ ਲੱਗੇਗਾ - ਖਾਸ ਤੌਰ 'ਤੇ ਜੇ ਡੌਕੂਮੈਂਟ ਦੇ ਢਾਂਚੇ ਵਿੱਚ ਟੌਗਲਰ ਤੋਂ ਪਹਿਲਾਂ ਖੋਲ੍ਹਿਆ ਗਿਆ ਕੰਟੇਨਰ ਆਉਂਦਾ ਹੈ। ਅਸੀਂ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਦੀ ਵੀ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦੇ ਹਾਂ ਕਿ ਟੌਗਲਰ ਕੋਲ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ, ਸਮੱਗਰੀ ਕੰਟੇਨਰ ਦੇ aria-controlsਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦੇ ਹੋਏ । idਸਿਧਾਂਤਕ ਤੌਰ 'ਤੇ, ਇਹ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਟੌਗਲਰ ਤੋਂ ਸਿੱਧੇ ਕੰਟੇਨਰ 'ਤੇ ਜਾਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਜਿਸ ਨੂੰ ਇਹ ਨਿਯੰਤਰਿਤ ਕਰਦਾ ਹੈ-ਪਰ ਇਸ ਲਈ ਸਮਰਥਨ ਇਸ ਸਮੇਂ ਕਾਫ਼ੀ ਖਰਾਬ ਹੈ।

ਆਫਕੈਨਵਸ

ਆਪਣੇ ਵਿਸਤਾਰ ਅਤੇ ਸਮੇਟਣ ਵਾਲੇ ਨਵਬਾਰ ਨੂੰ ਆਫਕੈਨਵਸ ਕੰਪੋਨੈਂਟ ਦੇ ਨਾਲ ਇੱਕ ਆਫਕੈਨਵਸ ਦਰਾਜ਼ ਵਿੱਚ ਬਦਲੋ । ਅਸੀਂ ਔਫਕੈਨਵਸ ਡਿਫੌਲਟ ਸਟਾਈਲ ਦੋਵਾਂ ਦਾ ਵਿਸਤਾਰ ਕਰਦੇ ਹਾਂ ਅਤੇ .navbar-expand-*ਇੱਕ ਗਤੀਸ਼ੀਲ ਅਤੇ ਲਚਕਦਾਰ ਨੈਵੀਗੇਸ਼ਨ ਸਾਈਡਬਾਰ ਬਣਾਉਣ ਲਈ ਸਾਡੀਆਂ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।

ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਵਿੱਚ, ਇੱਕ offcanvas ਨਵਬਾਰ ਬਣਾਉਣ ਲਈ ਜੋ ਹਮੇਸ਼ਾ ਸਾਰੇ ਬ੍ਰੇਕਪੁਆਇੰਟਸ ਵਿੱਚ ਸਮੇਟਿਆ ਜਾਂਦਾ ਹੈ, .navbar-expand-*ਕਲਾਸ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਛੱਡ ਦਿਓ।

html 
<nav class="navbar bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

ਇੱਕ ਆਫਕੈਨਵਸ ਨੇਵਬਾਰ ਬਣਾਉਣ ਲਈ ਜੋ ਇੱਕ ਖਾਸ ਬ੍ਰੇਕਪੁਆਇੰਟ 'ਤੇ ਇੱਕ ਆਮ ਨਵਬਾਰ ਵਿੱਚ ਫੈਲਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ lg, ਵਰਤੋਂ .navbar-expand-lg।

<nav class="navbar navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

ਇੱਕ ਗੂੜ੍ਹੇ ਨੇਵਬਾਰ ਵਿੱਚ ਔਫਕੈਨਵਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਧਿਆਨ ਰੱਖੋ ਕਿ ਟੈਕਸਟ ਦੇ ਅਯੋਗ ਹੋਣ ਤੋਂ ਬਚਣ ਲਈ ਤੁਹਾਨੂੰ ਔਫਕੈਨਵਸ ਸਮੱਗਰੀ 'ਤੇ ਇੱਕ ਗੂੜ੍ਹਾ ਬੈਕਗ੍ਰਾਊਂਡ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਗੂੜ੍ਹੇ ਆਫਕੈਨਵਸ ਦੇ ਨਾਲ ਸਹੀ ਸਟਾਈਲ ਲਈ , ਨੂੰ , ਤੋਂ , ਅਤੇ ਵਿੱਚ .navbar-darkਜੋੜਦੇ ਹਾਂ ।.bg-dark.navbar.text-bg-dark.offcanvas.dropdown-menu-dark.dropdown-menu.btn-close-white.btn-close

html 
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

ਵੇਰੀਏਬਲ

v5.2.0 ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ

ਬੂਟਸਟਰੈਪ ਦੀ ਵਿਕਸਤ ਹੋ ਰਹੀ CSS ਵੇਰੀਏਬਲ ਪਹੁੰਚ ਦੇ ਹਿੱਸੇ ਵਜੋਂ, ਨੈਵੀਬਾਰ ਹੁਣ .navbarਵਧੇ ਹੋਏ ਅਸਲ-ਸਮੇਂ ਦੇ ਅਨੁਕੂਲਨ ਲਈ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। CSS ਵੇਰੀਏਬਲ ਲਈ ਮੁੱਲ Sass ਦੁਆਰਾ ਸੈੱਟ ਕੀਤੇ ਗਏ ਹਨ, ਇਸਲਈ Sass ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਅਜੇ ਵੀ ਸਮਰਥਿਤ ਹੈ।

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

ਕੁਝ ਵਾਧੂ CSS ਵੇਰੀਏਬਲ ਵੀ ਇਸ 'ਤੇ ਮੌਜੂਦ ਹਨ .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

CSS ਵੇਰੀਏਬਲ ਦੁਆਰਾ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ .navbar-darkਕਲਾਸ 'ਤੇ ਦੇਖੀ ਜਾ ਸਕਦੀ ਹੈ ਜਿੱਥੇ ਅਸੀਂ ਡੁਪਲੀਕੇਟ CSS ਚੋਣਕਾਰਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕੀਤੇ ਬਿਨਾਂ ਖਾਸ ਮੁੱਲਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਦੇ ਹਾਂ।

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Sass ਵੇਰੀਏਬਲ

ਸਾਰੇ navbars ਲਈ ਵੇਰੀਏਬਲ:

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color:          $navbar-light-active-color;
$navbar-light-brand-hover-color:    $navbar-light-active-color;

ਡਾਰਕ ਨੇਵਬਾਰ ਲਈ ਵੇਰੀਏਬਲ :

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);
$navbar-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

ਸੱਸ ਲੂਪ

ਜਵਾਬਦੇਹ ਨਵਬਾਰ ਵਿਸਤਾਰ/ਸਮੇਟਣ ਵਰਗਾਂ (ਉਦਾਹਰਨ ਲਈ, .navbar-expand-lg) ਨੂੰ ਨਕਸ਼ੇ ਨਾਲ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ $breakpointsਅਤੇ ਵਿੱਚ ਇੱਕ ਲੂਪ ਰਾਹੀਂ ਤਿਆਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ scss/_navbar.scss।

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}