in English

ನವಬಾರ್

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಶಕ್ತಿಯುತ, ಸ್ಪಂದಿಸುವ ನ್ಯಾವಿಗೇಶನ್ ಹೆಡರ್, ನ್ಯಾವ್‌ಬಾರ್‌ಗಾಗಿ ದಾಖಲೆ ಮತ್ತು ಉದಾಹರಣೆಗಳು. ಬ್ರ್ಯಾಂಡಿಂಗ್, ನ್ಯಾವಿಗೇಷನ್, ಕುಸಿತ ಪ್ಲಗಿನ್ ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಒಳಗೊಂಡಿದೆ.

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ನ್ಯಾವ್‌ಬಾರ್‌ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು ನೀವು ತಿಳಿದುಕೊಳ್ಳಬೇಕಾದದ್ದು ಇಲ್ಲಿದೆ:

  • ನವಬಾರ್‌ಗಳಿಗೆ ರೆಸ್ಪಾನ್ಸಿವ್ ಕುಸಿತ ಮತ್ತು .navbarಬಣ್ಣದ ಸ್ಕೀಮ್ ತರಗತಿಗಳಿಗೆ ಸುತ್ತುವ ಅಗತ್ಯವಿದೆ..navbar-expand{-sm|-md|-lg|-xl}
  • ನವಬಾರ್‌ಗಳು ಮತ್ತು ಅವುಗಳ ವಿಷಯಗಳು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ದ್ರವವಾಗಿರುತ್ತವೆ. ಅವುಗಳ ಸಮತಲ ಅಗಲವನ್ನು ಮಿತಿಗೊಳಿಸಲು ಐಚ್ಛಿಕ ಪಾತ್ರೆಗಳನ್ನು ಬಳಸಿ .
  • ನ್ಯಾವ್‌ಬಾರ್‌ಗಳಲ್ಲಿ ಅಂತರ ಮತ್ತು ಜೋಡಣೆಯನ್ನು ನಿಯಂತ್ರಿಸಲು ನಮ್ಮ ಅಂತರ ಮತ್ತು ಫ್ಲೆಕ್ಸ್ ಯುಟಿಲಿಟಿ ತರಗತಿಗಳನ್ನು ಬಳಸಿ.
  • Navbars ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಸ್ಪಂದಿಸುತ್ತವೆ, ಆದರೆ ಅದನ್ನು ಬದಲಾಯಿಸಲು ನೀವು ಅವುಗಳನ್ನು ಸುಲಭವಾಗಿ ಮಾರ್ಪಡಿಸಬಹುದು. ನಮ್ಮ ಸಂಕುಚಿಸಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ ಮೇಲೆ ರೆಸ್ಪಾನ್ಸಿವ್ ನಡವಳಿಕೆ ಅವಲಂಬಿತವಾಗಿದೆ.
  • ಪ್ರಿಂಟ್ ಮಾಡುವಾಗ ನವಬಾರ್‌ಗಳನ್ನು ಡಿಫಾಲ್ಟ್ ಆಗಿ ಮರೆಮಾಡಲಾಗುತ್ತದೆ. ಗೆ ಸೇರಿಸುವ ಮೂಲಕ ಅವುಗಳನ್ನು ಮುದ್ರಿಸಲು .d-printಒತ್ತಾಯಿಸಿ .navbar. ಪ್ರದರ್ಶನ ಉಪಯುಕ್ತತೆಯ ವರ್ಗವನ್ನು ನೋಡಿ .
  • ಒಂದು ಅಂಶವನ್ನು ಬಳಸುವ ಮೂಲಕ ಪ್ರವೇಶಿಸುವಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ <nav>ಅಥವಾ, ಒಂದು ನಂತಹ ಹೆಚ್ಚು ಸಾಮಾನ್ಯ ಅಂಶವನ್ನು ಬಳಸಿದರೆ , ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ಹೆಗ್ಗುರುತು ಪ್ರದೇಶವೆಂದು ಸ್ಪಷ್ಟವಾಗಿ ಗುರುತಿಸಲು ಪ್ರತಿ ನ್ಯಾವ್‌ಬಾರ್‌ಗೆ <div>a ಅನ್ನು ಸೇರಿಸಿ .role="navigation"
ಈ ಘಟಕದ ಅನಿಮೇಷನ್ ಪರಿಣಾಮವು prefers-reduced-motionಮಾಧ್ಯಮದ ಪ್ರಶ್ನೆಯ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ. ನಮ್ಮ ಪ್ರವೇಶಿಸುವಿಕೆ ದಸ್ತಾವೇಜನ್ನು ಕಡಿಮೆ ಚಲನೆಯ ವಿಭಾಗವನ್ನು ನೋಡಿ .

ಬೆಂಬಲಿತ ವಿಷಯ

Navbars ಬೆರಳೆಣಿಕೆಯಷ್ಟು ಉಪ-ಘಟಕಗಳಿಗೆ ಅಂತರ್ನಿರ್ಮಿತ ಬೆಂಬಲದೊಂದಿಗೆ ಬರುತ್ತವೆ. ಅಗತ್ಯವಿರುವಂತೆ ಕೆಳಗಿನವುಗಳಿಂದ ಆಯ್ಕೆಮಾಡಿ:

  • .navbar-brandನಿಮ್ಮ ಕಂಪನಿ, ಉತ್ಪನ್ನ ಅಥವಾ ಯೋಜನೆಯ ಹೆಸರಿಗಾಗಿ.
  • .navbar-navಪೂರ್ಣ-ಎತ್ತರ ಮತ್ತು ಹಗುರವಾದ ನ್ಯಾವಿಗೇಷನ್‌ಗಾಗಿ (ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಒಳಗೊಂಡಂತೆ).
  • .navbar-togglerನಮ್ಮ ಕುಸಿತದ ಪ್ಲಗಿನ್ ಮತ್ತು ಇತರ ನ್ಯಾವಿಗೇಶನ್ ಟಾಗಲ್ ನಡವಳಿಕೆಗಳೊಂದಿಗೆ ಬಳಸಲು.
  • .form-inlineಯಾವುದೇ ರೂಪ ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಕ್ರಿಯೆಗಳಿಗೆ.
  • .navbar-textಪಠ್ಯದ ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕೃತ ತಂತಿಗಳನ್ನು ಸೇರಿಸುವುದಕ್ಕಾಗಿ.
  • .collapse.navbar-collapseಪೋಷಕ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ನಿಂದ ನ್ಯಾವ್‌ಬಾರ್ ವಿಷಯಗಳನ್ನು ಗುಂಪು ಮಾಡಲು ಮತ್ತು ಮರೆಮಾಡಲು.

lg(ದೊಡ್ಡ) ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ನಲ್ಲಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕುಸಿದು ಬೀಳುವ ರೆಸ್ಪಾನ್ಸಿವ್ ಲೈಟ್-ಥೀಮ್ ನ್ಯಾವ್‌ಬಾರ್‌ನಲ್ಲಿ ಒಳಗೊಂಡಿರುವ ಎಲ್ಲಾ ಉಪ-ಘಟಕಗಳ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ .

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

ಈ ಉದಾಹರಣೆಯು ಬಣ್ಣ ( bg-light) ಮತ್ತು ಅಂತರ ( my-2, my-lg-0, mr-sm-0, my-sm-0) ಯುಟಿಲಿಟಿ ವರ್ಗಗಳನ್ನು ಬಳಸುತ್ತದೆ.

ಬ್ರಾಂಡ್

ಹೆಚ್ಚಿನ .navbar-brandಅಂಶಗಳಿಗೆ ಅನ್ವಯಿಸಬಹುದು, ಆದರೆ ಆಂಕರ್ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಏಕೆಂದರೆ ಕೆಲವು ಅಂಶಗಳಿಗೆ ಉಪಯುಕ್ತತೆ ತರಗತಿಗಳು ಅಥವಾ ಕಸ್ಟಮ್ ಶೈಲಿಗಳು ಬೇಕಾಗಬಹುದು.

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

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

ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸುವುದರಿಂದ .navbar-brandಯಾವಾಗಲೂ ಸರಿಯಾದ ಗಾತ್ರಕ್ಕೆ ಕಸ್ಟಮ್ ಶೈಲಿಗಳು ಅಥವಾ ಉಪಯುಕ್ತತೆಗಳ ಅಗತ್ಯವಿರುತ್ತದೆ. ಪ್ರದರ್ಶಿಸಲು ಕೆಲವು ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Navbar ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್‌ಗಳು .navತಮ್ಮದೇ ಆದ ಪರಿವರ್ತಕ ವರ್ಗದೊಂದಿಗೆ ನಮ್ಮ ಆಯ್ಕೆಗಳನ್ನು ನಿರ್ಮಿಸುತ್ತವೆ ಮತ್ತು ಸರಿಯಾದ ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ಸ್ಟೈಲಿಂಗ್‌ಗಾಗಿ ಟಾಗ್ಲರ್ ತರಗತಿಗಳ ಬಳಕೆಯ ಅಗತ್ಯವಿರುತ್ತದೆ. ನ್ಯಾವ್‌ಬಾರ್‌ಗಳಲ್ಲಿನ ನ್ಯಾವಿಗೇಶನ್ ನಿಮ್ಮ ನ್ಯಾವ್‌ಬಾರ್ ವಿಷಯಗಳನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ಜೋಡಿಸಲು ಸಾಧ್ಯವಾದಷ್ಟು ಸಮತಲ ಸ್ಥಳವನ್ನು ಆಕ್ರಮಿಸಿಕೊಳ್ಳಲು ಸಹ ಬೆಳೆಯುತ್ತದೆ .

ಪ್ರಸ್ತುತ ಪುಟವನ್ನು ಸೂಚಿಸಲು ಸಕ್ರಿಯ ಸ್ಥಿತಿಗಳು-ಜೊತೆಗೆ - ನೇರವಾಗಿ ರು ಅಥವಾ ಅವರ ತಕ್ಷಣದ ಪೋಷಕರಿಗೆ .activeಅನ್ವಯಿಸಬಹುದು ..nav-link.nav-item

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

ಮತ್ತು ನಾವು ನಮ್ಮ navs ಗೆ ತರಗತಿಗಳನ್ನು ಬಳಸುವುದರಿಂದ, ನೀವು ಬಯಸಿದರೆ ನೀವು ಪಟ್ಟಿ ಆಧಾರಿತ ವಿಧಾನವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ತಪ್ಪಿಸಬಹುದು.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

ನಿಮ್ಮ ನ್ಯಾವ್‌ಬಾರ್‌ನಲ್ಲಿ ನೀವು ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಸಹ ಬಳಸಬಹುದು. ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳಿಗೆ ಸ್ಥಾನೀಕರಣಕ್ಕಾಗಿ ಸುತ್ತುವ ಅಂಶದ ಅಗತ್ಯವಿರುತ್ತದೆ, ಆದ್ದರಿಂದ ಕೆಳಗೆ ತೋರಿಸಿರುವಂತೆ ಪ್ರತ್ಯೇಕ .nav-itemಮತ್ತು ನೆಸ್ಟೆಡ್ ಅಂಶಗಳನ್ನು ಬಳಸಲು ಮರೆಯದಿರಿ ..nav-link

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

ರೂಪಗಳು

ನೊಂದಿಗೆ ನ್ಯಾವ್‌ಬಾರ್‌ನಲ್ಲಿ ವಿವಿಧ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಘಟಕಗಳನ್ನು ಇರಿಸಿ .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

ಫ್ಲೆಕ್ಸ್ ಲೇಔಟ್ ಅನ್ನು ಬಳಸುವ ತಕ್ಷಣದ ಮಕ್ಕಳ ಅಂಶಗಳು .navbarಮತ್ತು ಡೀಫಾಲ್ಟ್ ಆಗಿರುತ್ತದೆ justify-content: space-between. ಈ ನಡವಳಿಕೆಯನ್ನು ಸರಿಹೊಂದಿಸಲು ಅಗತ್ಯವಿರುವ ಹೆಚ್ಚುವರಿ ಫ್ಲೆಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

ಇನ್‌ಪುಟ್ ಗುಂಪುಗಳು ಸಹ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ:

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

ಈ ನ್ಯಾವ್‌ಬಾರ್ ಫಾರ್ಮ್‌ಗಳ ಭಾಗವಾಗಿ ವಿವಿಧ ಬಟನ್‌ಗಳನ್ನು ಸಹ ಬೆಂಬಲಿಸಲಾಗುತ್ತದೆ. ವಿಭಿನ್ನ ಗಾತ್ರದ ಅಂಶಗಳನ್ನು ಜೋಡಿಸಲು ಲಂಬ ಜೋಡಣೆಯ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಬಹುದು ಎಂಬುದಕ್ಕೆ ಇದು ಉತ್ತಮ ಜ್ಞಾಪನೆಯಾಗಿದೆ.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

ಪಠ್ಯ

ನವ್‌ಬಾರ್‌ಗಳು ಸಹಾಯದಿಂದ ಪಠ್ಯದ ಬಿಟ್‌ಗಳನ್ನು ಹೊಂದಿರಬಹುದು .navbar-text. ಈ ವರ್ಗವು ಪಠ್ಯದ ತಂತಿಗಳಿಗೆ ಲಂಬವಾದ ಜೋಡಣೆ ಮತ್ತು ಅಡ್ಡ ಅಂತರವನ್ನು ಸರಿಹೊಂದಿಸುತ್ತದೆ.

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

ಅಗತ್ಯವಿರುವಂತೆ ಇತರ ಘಟಕಗಳು ಮತ್ತು ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ಮಿಶ್ರಣ ಮಾಡಿ ಮತ್ತು ಹೊಂದಿಸಿ.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

ಬಣ್ಣದ ಯೋಜನೆಗಳು

ಥೀಮಿಂಗ್ ತರಗತಿಗಳು ಮತ್ತು background-colorಉಪಯುಕ್ತತೆಗಳ ಸಂಯೋಜನೆಯಿಂದಾಗಿ ನ್ಯಾವ್‌ಬಾರ್ ಅನ್ನು ಥೀಮಿಂಗ್ ಮಾಡುವುದು ಎಂದಿಗೂ ಸುಲಭವಲ್ಲ. .navbar-lightತಿಳಿ ಹಿನ್ನೆಲೆ ಬಣ್ಣಗಳ ಬಳಕೆಗಾಗಿ ಅಥವಾ .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 navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

ಕಂಟೈನರ್ಗಳು

ಇದು ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೂ, ನೀವು .containerಪುಟದ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಲು a ನಲ್ಲಿ ನ್ಯಾವ್‌ಬಾರ್ ಅನ್ನು ಸುತ್ತಿಕೊಳ್ಳಬಹುದು. ಅಥವಾ ಸ್ಥಿರ ಅಥವಾ ಸ್ಥಿರ ಟಾಪ್ ನ್ಯಾವ್‌ಬಾರ್‌ನ.navbar ವಿಷಯಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು ನೀವು ಒಳಗೆ ಕಂಟೇನರ್ ಅನ್ನು ಸೇರಿಸಬಹುದು .

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

ಕಂಟೇನರ್ ನಿಮ್ಮ ನ್ಯಾವ್‌ಬಾರ್‌ನಲ್ಲಿರುವಾಗ, ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ವರ್ಗಕ್ಕಿಂತ ಕಡಿಮೆ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳಲ್ಲಿ ಅದರ ಸಮತಲ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ .navbar-expand{-sm|-md|-lg|-xl}. ನಿಮ್ಮ ನ್ಯಾವ್‌ಬಾರ್ ಕುಸಿದಾಗ ಕಡಿಮೆ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ಗಳಲ್ಲಿ ನಾವು ಅನಗತ್ಯವಾಗಿ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ದ್ವಿಗುಣಗೊಳಿಸುವುದಿಲ್ಲ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

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

ನಿಯೋಜನೆ

ನ್ಯಾವ್‌ಬಾರ್‌ಗಳನ್ನು ಸ್ಥಿರವಲ್ಲದ ಸ್ಥಾನಗಳಲ್ಲಿ ಇರಿಸಲು ನಮ್ಮ ಸ್ಥಾನದ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ. ಸ್ಥಿರದಿಂದ ಮೇಲಕ್ಕೆ, ಕೆಳಕ್ಕೆ ಸ್ಥಿರವಾಗಿ ಅಥವಾ ಮೇಲಕ್ಕೆ ಅಂಟಿಕೊಂಡಿರುವುದನ್ನು ಆರಿಸಿ (ಪುಟವು ಮೇಲ್ಭಾಗವನ್ನು ತಲುಪುವವರೆಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುತ್ತದೆ, ನಂತರ ಅಲ್ಲಿಯೇ ಇರುತ್ತದೆ). ಸ್ಥಿರ ನ್ಯಾವ್‌ಬಾರ್‌ಗಳು ಬಳಸುತ್ತವೆ position: fixed, ಅಂದರೆ DOM ನ ಸಾಮಾನ್ಯ ಹರಿವಿನಿಂದ ಅವುಗಳನ್ನು ಎಳೆಯಲಾಗುತ್ತದೆ ಮತ್ತು ಇತರ ಅಂಶಗಳೊಂದಿಗೆ ಅತಿಕ್ರಮಣವನ್ನು ತಡೆಯಲು ಕಸ್ಟಮ್ CSS (ಉದಾ, padding-topಮೇಲೆ ) ಅಗತ್ಯವಿರುತ್ತದೆ.<body>

.sticky-topಬಳಸುತ್ತದೆposition: sticky ಎಂಬುದನ್ನು ಗಮನಿಸಿ , ಇದು ಪ್ರತಿ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ .

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

ಸ್ಕ್ರೋಲಿಂಗ್

ಕುಸಿದ ನ್ಯಾವ್‌ಬಾರ್‌ನ ಟಾಗಲ್ ಮಾಡಬಹುದಾದ ವಿಷಯಗಳಲ್ಲಿ ಲಂಬ ಸ್ಕ್ರೋಲಿಂಗ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು (ಅಥವಾ ಇತರ ನ್ಯಾವ್‌ಬಾರ್ ಉಪ-ಘಟಕ) ಗೆ .navbar-nav-scrollಸೇರಿಸಿ . .navbar-collapseಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಸ್ಕ್ರೋಲಿಂಗ್ 75vh(ಅಥವಾ ವ್ಯೂಪೋರ್ಟ್ ಎತ್ತರದ 75%) ನಲ್ಲಿ ಒದೆಯುತ್ತದೆ, ಆದರೆ ನೀವು ಅದನ್ನು ಇನ್‌ಲೈನ್ ಅಥವಾ ಕಸ್ಟಮ್ ಶೈಲಿಗಳೊಂದಿಗೆ ಅತಿಕ್ರಮಿಸಬಹುದು. ನ್ಯಾವ್‌ಬಾರ್ ಅನ್ನು ವಿಸ್ತರಿಸಿದಾಗ ದೊಡ್ಡ ವ್ಯೂಪೋರ್ಟ್‌ಗಳಲ್ಲಿ, ಡೀಫಾಲ್ಟ್ ನ್ಯಾವ್‌ಬಾರ್‌ನಲ್ಲಿರುವಂತೆ ವಿಷಯವು ಗೋಚರಿಸುತ್ತದೆ.

ಈ ನಡವಳಿಕೆಯು ಸಂಭಾವ್ಯ ನ್ಯೂನತೆಯೊಂದಿಗೆ ಬರುತ್ತದೆ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ overflow- ಹೊಂದಿಸುವಾಗ overflow-y: auto(ಇಲ್ಲಿ ವಿಷಯವನ್ನು ಸ್ಕ್ರಾಲ್ ಮಾಡಲು ಅಗತ್ಯವಿದೆ), overflow-xಇದು ಸಮನಾಗಿರುತ್ತದೆ auto, ಇದು ಕೆಲವು ಸಮತಲ ವಿಷಯವನ್ನು ಕ್ರಾಪ್ ಮಾಡುತ್ತದೆ.

ಅತ್ಯುತ್ತಮ ಅಂತರಕ್ಕಾಗಿ ಕೆಲವು ಹೆಚ್ಚುವರಿ ಮಾರ್ಜಿನ್ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ನ್ಯಾವ್‌ಬಾರ್ .navbar-nav-scrollಅನ್ನು ಬಳಸುವ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ .style="max-height: 100px;"

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-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">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

ಸ್ಪಂದಿಸುವ ವರ್ತನೆಗಳು

Navbar ಗಳು .navbar-toggler, .navbar-collapse, ಮತ್ತು .navbar-expand{-sm|-md|-lg|-xl}ತರಗತಿಗಳನ್ನು ಬಳಸಿ ಅವುಗಳ ವಿಷಯವು ಬಟನ್‌ನ ಹಿಂದೆ ಕುಸಿದಾಗ ನಿರ್ಧರಿಸಲು. ಇತರ ಉಪಯುಕ್ತತೆಗಳ ಸಂಯೋಜನೆಯಲ್ಲಿ, ನಿರ್ದಿಷ್ಟ ಅಂಶಗಳನ್ನು ಯಾವಾಗ ತೋರಿಸಬೇಕು ಅಥವಾ ಮರೆಮಾಡಬೇಕು ಎಂಬುದನ್ನು ನೀವು ಸುಲಭವಾಗಿ ಆಯ್ಕೆ ಮಾಡಬಹುದು.

ಎಂದಿಗೂ ಕುಸಿಯದ .navbar-expandನ್ಯಾವ್‌ಬಾರ್‌ಗಳಿಗಾಗಿ, ನ್ಯಾವ್‌ಬಾರ್‌ನಲ್ಲಿ ವರ್ಗವನ್ನು ಸೇರಿಸಿ. ಯಾವಾಗಲೂ ಕುಸಿಯುವ ನ್ಯಾವ್‌ಬಾರ್‌ಗಳಿಗಾಗಿ, ಯಾವುದೇ .navbar-expandವರ್ಗವನ್ನು ಸೇರಿಸಬೇಡಿ.

ಟಾಗ್ಲರ್

Navbar ಟಾಗ್ಲರ್‌ಗಳನ್ನು ಡೀಫಾಲ್ಟ್ ಆಗಿ ಎಡಕ್ಕೆ ಜೋಡಿಸಲಾಗಿದೆ, ಆದರೆ ಅವರು ಒಂದು ಸಹೋದರ ಅಂಶವನ್ನು ಅನುಸರಿಸಿದರೆ .navbar-brand, ಅವುಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಬಲಕ್ಕೆ ಜೋಡಿಸಲಾಗುತ್ತದೆ. ನಿಮ್ಮ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ರಿವರ್ಸ್ ಮಾಡುವುದರಿಂದ ಟಾಗ್ಲರ್ನ ನಿಯೋಜನೆಯನ್ನು ಹಿಮ್ಮುಖಗೊಳಿಸುತ್ತದೆ. ವಿಭಿನ್ನ ಟಾಗಲ್ ಶೈಲಿಗಳ ಉದಾಹರಣೆಗಳನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ.

.navbar-brandಚಿಕ್ಕ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ನಲ್ಲಿ ತೋರಿಸದೆ :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

ಎಡಭಾಗದಲ್ಲಿ ತೋರಿಸಿರುವ ಬ್ರ್ಯಾಂಡ್ ಹೆಸರು ಮತ್ತು ಬಲಭಾಗದಲ್ಲಿ ಟಾಗ್ಲರ್ನೊಂದಿಗೆ:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

ಎಡಭಾಗದಲ್ಲಿ ಟಾಗ್ಲರ್ ಮತ್ತು ಬಲಭಾಗದಲ್ಲಿ ಬ್ರ್ಯಾಂಡ್ ಹೆಸರಿನೊಂದಿಗೆ:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

ಬಾಹ್ಯ ವಿಷಯ

ರಚನಾತ್ಮಕವಾಗಿ ಹೊರಗೆ ಇರುವ ವಿಷಯಕ್ಕಾಗಿ ಕಂಟೇನರ್ ಅಂಶವನ್ನು ಪ್ರಚೋದಿಸಲು ಕೆಲವೊಮ್ಮೆ ನೀವು ಕುಸಿತದ ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸಲು ಬಯಸುತ್ತೀರಿ .navbar. ನಮ್ಮ ಪ್ಲಗಿನ್ ಕೆಲಸ idಮತ್ತು data-targetಹೊಂದಾಣಿಕೆಯ ಕಾರಣ, ಅದು ಸುಲಭವಾಗಿ ಮಾಡಲಾಗುತ್ತದೆ!

<div class="fixed-top">
  <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">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

ನೀವು ಇದನ್ನು ಮಾಡಿದಾಗ, ಕಂಟೇನರ್ ಅನ್ನು ತೆರೆದಾಗ ಅದನ್ನು ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ಫೋಕಸ್ ಮಾಡಲು ಹೆಚ್ಚುವರಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಸೇರಿಸಲು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ. ಇಲ್ಲದಿದ್ದರೆ, ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರು ಮತ್ತು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರು ಹೊಸದಾಗಿ ಬಹಿರಂಗಪಡಿಸಿದ ವಿಷಯವನ್ನು ಹುಡುಕಲು ಕಷ್ಟಪಡುತ್ತಾರೆ - ವಿಶೇಷವಾಗಿ ತೆರೆದಿರುವ ಕಂಟೇನರ್ ಡಾಕ್ಯುಮೆಂಟ್‌ನ ರಚನೆಯಲ್ಲಿ ಟಾಗ್ಲರ್‌ಗಿಂತ ಮೊದಲು ಬಂದರೆ. ವಿಷಯ ಧಾರಕವನ್ನು aria-controlsಸೂಚಿಸುವ ಮೂಲಕ ಟಾಗ್ಲರ್ ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ . idಸಿದ್ಧಾಂತದಲ್ಲಿ, ಇದು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನದ ಬಳಕೆದಾರರಿಗೆ ಟಾಗ್ಲರ್‌ನಿಂದ ನೇರವಾಗಿ ಅದು ನಿಯಂತ್ರಿಸುವ ಕಂಟೇನರ್‌ಗೆ ನೆಗೆಯುವುದನ್ನು ಅನುಮತಿಸುತ್ತದೆ-ಆದರೆ ಇದಕ್ಕೆ ಬೆಂಬಲವು ಪ್ರಸ್ತುತ ಸಾಕಷ್ಟು ತೇಪೆಯಾಗಿದೆ.