Source

ನವಬಾರ್

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

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

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

ನವಬಾರ್‌ಗಳಿಗೆ ರೆಸ್ಪಾನ್ಸಿವ್ ಕುಸಿತ ಮತ್ತು .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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <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" href="#" tabindex="-1" aria-disabled="true">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.2/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.2/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" href="#" tabindex="-1" aria-disabled="true">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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

ನಿಮ್ಮ navbar 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="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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: 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ಪುಟದ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಲು ನ್ಯಾವ್‌ಬಾರ್ ಅನ್ನು ಸುತ್ತಿಕೊಳ್ಳಬಹುದು ಅಥವಾ ಸ್ಥಿರ ಅಥ��ಾ ಸ್ಥಿರ ಟಾಪ್ ನ್ಯಾವ್‌ಬಾರ್‌ನ ವಿಷಯಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು ಮಾತ್ರ ಸೇರಿಸಬಹುದು .

<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ಗಳು ತಮ್ಮ ವಿಷಯವು ಬಟನ್‌ನ ಹಿಂದೆ ಕುಸಿದಾಗ ಬದಲಾಯಿಸಲು .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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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>

ಬಾಹ್ಯ ವಿಷಯ

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

ಕುಗ್ಗಿಸಿದ ವಿಷಯ

navbar ಬ್ರ್ಯಾಂಡ್ ಮೂಲಕ ಟಾಗಲ್ ಮಾಡಬಹುದು.

<div class="pos-f-t">
  <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>