ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
in English

ናቭባር

ሰነዳትን ኣብነታትን ናይቲ ሓያልን ምላሽ ዝህብን ርእሲ ምድህሳስ Bootstrap ዝኾነ navbar። ንብራንድንግ፡ ናቪጌሽንን ካልእን ዝኸውን ደገፍ ዘጠቓልል ኮይኑ፡ ንናይ ምፍራስ ፕላግ-ኢንና ደገፍ ሓዊሱ።

ኣብዚ ገጽ

ከመይ ይሰርሕ

ቅድሚ ብናቭባር ምጅማርካ ክትፈልጦም ዘለካ ነገራት ኣብዚ ኣለዉ፤

  • ናቭባርስ ንመልሲ ዝህብ ምፍራስን ሕብራዊ ስኬምን ክፍልታት .navbarምስ ምጥቕላል የድልዮም ።.navbar-expand{-sm|-md|-lg|-xl|-xxl}
  • ናቭባርን ትሕዝቶኦምን ​​ብነባሪ ፈሳሲ እዩ። ነቲ መትሓዚ ብዝተፈላለየ መንገዲ ንኣግማድ ስፍሓቶም ንምድራት ቀይርዎ ።
  • ኣብ ውሽጢ navbars ንዘሎ ርሕቀትን ኣሰላልፋን ንምቁጽጻር ናይ ርሕቀትን ፍሌክስን ዩቲሊቲ ክፍልታትና ተጠቐም ።
  • ናቭባር ብነባሪ ምላሽ ዝህቡ እዮም፡ ግን ብቐሊሉ ክትቅይሮም ትኽእል ኢኻ ነዚ ክትቅይሮ። ምላሽ ዝህብ ባህሪ ኣብቲ ናይ Collapse JavaScript ፕላግ-ኢንና ይምርኮስ።
  • ሓደ ባእታ ብምጥቃም ተበጻሕነት ምርግጋጽ <nav>ወይ ድማ ከም a ዝኣመሰለ ዝያዳ ሓፈሻዊ ባእታ እንተተጠቒምካሉ፡ ኣብ ነፍሲ ወከፍ ናቭባር <div>a ወሲኽካ role="navigation"ንተጠቀምቲ ሓጋዚ ቴክኖሎጂታት ከም ምልክት ዞባ ብግልጺ ከተለልዮ።
  • aria-current="page"ንናይ ሕጂ ገጽ ወይ aria-current="true"ንናይ ሕጂ ኣቕሓ ኣብ ሓደ ስብስብ ብምጥቃም ነቲ ናይ ሕጂ ኣቕሓ ኣመልክት ።
ናይዚ ኣካል ተንቀሳቓሲ ውጽኢት ኣብቲ ናይ prefers-reduced-motionሚድያ ሕቶ ዝምርኮስ እዩ። ኣብቲ ናይ ተበጻሕነት ሰነድና ኣብቲ ዝተቐነሰ ምንቅስቓስ ዝብል ክፍሊ ርአ ።

ዝድገፍ ትሕዝቶ

ናቭባር ንውሑዳት ንኡሳን ኣካላት ኣብ ውሽጡ ዝተሃንጸ ደገፍ ሒዞም ይመጹ። ከም ኣድላይነቱ ካብዞም ዝስዕቡ ምረጹ፤

  • .navbar-brandንናይ ትካልኩም፡ ፍርያትኩም ወይ ስም ፕሮጀክትኩም።
  • .navbar-navንሙሉእ ቁመትን ቀሊል ክብደትን ዘለዎ ምምራሕ (ንቁልቁል ዝወርድ ደገፍ ሓዊሱ)።
  • .navbar-togglerምስ ናይ ምፍራስ ፕላግ-ኢንናን ካልእ ናይ ምድህሳስ ምቕያር ባህርያትን ንኽትጥቀመሉ።
  • ንዝኾነ ቅጥዒ ቁጽጽርን ተግባራትን ዝኸውን ፍሌክስን ስፔሲንግን ዩቲሊቲታት።
  • .navbar-textንምውሳኽ ብቐጥታ ማእከል ዝገበሩ ሕብረ ቃላት ጽሑፍ።
  • .collapse.navbar-collapseንትሕዝቶታት navbar ብወላዲ ምብታኽን ንምጉጅጃልን ንምሕባእን እዩ።
  • .navbar-scrollንሓደ ንምቕማጥን ዝተሰፍሐ ትሕዝቶ ናቭባር ንምስግጋርንmax-height ኣማራጺ ወስኽ ።

lgኣብቲ (ዓቢ) ነጥቢ ምብታኽ ብኣውቶማቲክ ዝፈርስ ምላሽ ዝህብ ብርሃን-ቴማ ዘለዎ ናቭባር ዝተኻተቱ ኩሎም ንኡሳን ባእታታት ኣብነት ኣብዚ ኣሎ ።

<nav class="navbar navbar-expand-lg navbar-light 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="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <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)ን ርሕቀትን ( my-2, my-lg-0, me-sm-0, my-sm-0) ዩቲሊቲ ክፍልታት ይጥቀም።

ስም ምህርቲ

እቲ .navbar-brandኣብ መብዛሕትኦም ባእታታት ክውዕል ይኽእል እዩ፣ ግን ሓደ መልህቕ ዝበለጸ ይሰርሕ፣ ገለ ባእታታት ናይ ዩቲሊቲ ክፍልታት ወይ ብሕታዊ ቅዲታት ክጠልቡ ስለ ዝኽእሉ።

ጽሑፍ

ጽሑፍካ ኣብ ውሽጢ ሓደ ባእታ ምስቲ .navbar-brandክፍሊ ወስኸሉ።

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

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

ስእሊ

ኣብ ውሽጢ እቲ ዘሎ ጽሑፍ .navbar-brandብ <img>.

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

ምስልን ጽሑፍን

ብተወሳኺ ገለ ተወሳኺ ዩቲሊቲታት ተጠቒምካ ምስልን ጽሑፍን ኣብ ሓደ እዋን ክትውስኽ ትኽእል ኢኻ። .d-inline-blockምውሳኽን .align-text-topኣብ ልዕሊን ኣስተውዕል <img>።

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

ናቭባር ናይ ምድህሳስ መላግቦታት ኣብ .navኣማራጺታትና ምስ ናይ ገዛእ ርእሶም መቐየሪ ክፍሊ ዝሃንጹ ኮይኖም ንግቡእ ምላሽ ዝህብ ቅዲ ምጥቃም ናይ ቶግለር ክፍልታት ይጠልቡ። ኣብ ናቭባር ምዝዋር እውን ትሕዝቶታት ናቭባርካ ብውሑስ መንገዲ ንኽስለፍ ብዝተኻእለ መጠን ብዙሕ ኣግማድ ቦታ ንምሓዝ ክዓቢ እዩ ።

ነቲ ናይ ሕጂ ገጽ ንምምልካት ነቲ .activeክፍሊ on ወስኸሉ ።.nav-link

aria-currentኣብቲ ንጡፍ ’ ውን ነቲ ባህሪ ክትውስኾ ከም ዘለካ ኣስተውዕል .nav-link።

<nav class="navbar navbar-expand-lg navbar-light 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

ከምኡ’ውን ንናቭታትና ክፍልታት ስለ እንጥቀም፡ እንተደሊኹም ምሉእ ብምሉእ ካብቲ ኣብ ዝርዝር ዝተመርኮሰ ኣገባብ ክትርሕቑ ትኽእሉ ኢኹም።

<nav class="navbar navbar-expand-lg navbar-light 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </div>
    </div>
  </div>
</nav>

ኣብ ናቭባርካ ውን ንቑልቁል ዝወርድ ነገራት ክትጥቀም ትኽእል ኢኻ። ንቑልቁል ዝወርድ ምልክታታት ንኣቀማምጣ መጠቕለሊ ባእታ የድልዮም፣ ስለዚ ንኣቀማምጣን ከምቲ ኣብ ታሕቲ .nav-itemዘሎን ዝተፈላለዩን ዝተሰፍሩን ባእታታት ምጥቃምካ ኣረጋግጽ ።.nav-link

<nav class="navbar navbar-expand-lg navbar-light 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="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <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>

ቅጥዕታት

ዝተፈላለዩ ናይ ቅጥዒ ቁጽጽርን ኣካላትን ኣብ ውሽጢ ሓደ ናቭባር ኣቐምጥ፤

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <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. ነዚ ባህሪ ንምትዕርራይ ከም ኣድላይነቱ ተወሳኺ ፍሌክስ ዩቲሊቲስ ተጠቐም።

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <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>ባእታ ከም መትሓዚ ክትጥቀመሉን ገለ ኤችቲኤምኤል ክትዕቅቦን ትኽእል ኢኻ።

<nav class="navbar navbar-light 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>

ዝተፈላለዩ መጠወቒታት ከም ኣካል ናይዞም ናቭባር ቅጥዕታት ይድገፉ እዮም፣ ንሳቶም እውን። እዚ ውን ቨርቲካል ኣሰላልፋ ዩቲሊቲታት ዝተፈላለዩ ዓቐን ዘለዎም ባእታታት ንምስላፍ ክጥቀሙ ከም ዝኽእሉ ዓቢ መዘኻኸሪ እዩ።

<nav class="navbar navbar-light 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. እዚ ክፍሊ እዚ ንሕብረ ቃላት ጽሑፍ ቀጥታዊ ኣሰላልፋን ኣግማድ ርሕቀትን የስተኻኽል።

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

ከም ኣድላይነቱ ምስ ካልኦት ኣካላትን ዩቲሊቲታትን ምትሕውዋስን ምትሕውዋስን ።

<nav class="navbar navbar-expand-lg navbar-light 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>

ሕብራዊ ስርዓታት

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ኣብ ሓደ ገጽ ማእከል ንምግባር–ዋላ እኳ ውሽጣዊ መትሓዚ ጌና ከምዘድሊ ኣስተውዕል። ወይ ድማ ትሕዝቶ ናይ ሓደ ጽኑዕ ወይ ስታትቲክ ላዕለዋይ ናቭባር.navbar ጥራይ ማእከል ንምግባር ኣብ ውሽጢ መትሓዚ ክትውስኽ ትኽእል ኢኻ ።

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

ኣብ ናቭባርካ ዘሎ ትሕዝቶ ክሳብ ክንደይ ሰፊሕ ከም ዝቐርብ ንምቕያር ዝኾነ ካብቶም ምላሽ ዝህቡ መትሓዚታት ተጠቐም።

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

ምምዳብ

ንናቭባር ኣብ ዘይስታትቲክ ቦታታት ንምቕማጥ ናይ ፖዚሽን ዩቲሊቲታትና ተጠቐሙ ። ካብ ጽኑዕ ናብ ላዕሊ፡ ጽኑዕ ናብ ታሕቲ፡ ወይ ተጣቢቑ ናብ ላዕሊ ምረጽ (ምስ ገጽ ክሳብ ላዕሊ ዝበጽሕ ይሽክርከር፡ ድሕሪኡ ኣብኡ ይጸንሕ)። ጽኑዓት navbars ይጥቀሙ ፣ ማለት ካብ ንቡር ዋሕዚ ናይ DOM ይስሓቡን ምስ ካልኦት ባእታታት position: fixedንኸይደራረቡ ብሕታዊ CSS (ንኣብነት padding-topኣብ ) ከድልዮም ይኽእል እዩ።<body>

ከምኡ ’ ውን ኣብ ነፍሲ ወከፍ መርበብ ሓበሬታ ምሉእ ብምሉእ ዘይድገፍ ይጥቀም .sticky-topምዃኑposition: sticky ኣስተውዕል ።

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

ስክሮል ምግባር

ኣብ ውሽጢ እቲ ዝቕየር ትሕዝቶታት ናይ ሓደ ዝተዓጽወ ናቭባር ቀጥታዊ ምዝዋር ንምንቅስቓስ .navbar-nav-scrollናብ ሓደ (ወይ ካልእ ንኡስ ኣካል ናቭባር) ወስኽ ። .navbar-navብነባሪ፡ ምዝዋር ኣብ 75vh(ወይ 75% ናይ ቪውፖርት ቁመት) ይጅምር፡ ግን ነዚ ብናይ ከባቢ CSS ብሕታዊ ንብረት --bs-navbar-heightወይ ብሕታዊ ቅዲታት ክትሽፍኖ ትኽእል ኢኻ። ኣብ ዓበይቲ ቪውፖርትታት እቲ ናቭባር ምስ ዝሰፍሕ፡ ትሕዝቶ ከምቲ ኣብ ነባሪ ናቭባር ዝረአ ክረአ እዩ።

በጃኻ ኣስተውዕል እዚ ባህሪ ምስ ክኸውን ዝኽእል ጕድለት ከም ዝመጽእ ኣስተውዕል overflow—ምቕማጥ overflow-y: auto(ኣብዚ ትሕዝቶ ንምስግጋር ዘድሊ)፣ overflow-xማዕረ ናይ auto፣ ገለ ኣግማድ ትሕዝቶ ክቖርጽ ከሎ።

.navbar-nav-scrollኣብዚ ምስ ዝጥቀም ኣብነት navbar ኣሎ style="--bs-scroll-height: 100px;", ምስ ገለ ተወሳኺ ወሰን ዩቲሊቲታት ንዝበለጸ ርሕቀት።

<nav class="navbar navbar-expand-lg navbar-light 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="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <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" href="#" tabindex="-1" aria-disabled="true">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <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፡ ኣብቲ ናቭባር ዘሎ ክፍሊ ወስኹሉ። ኩሉ ግዜ ዝፈርሱ navbars ዝኾነ .navbar-expandክፍሊ ኣይትውሰኹ።

ቶግለር

Navbar togglers ብነባሪ ብጸጋም ይስለፉ፣ ግን ከም a ዝኣመሰለ ናይ ሓው ባእታ እንተተኸቲሎም .navbar-brand፣ ብኣውቶማቲክ ናብ ርሑቕ የማናይ ክስለፉ እዮም። ናትካ ምልክት ምግልባጥ ንኣቀማምጣ ናይቲ ቶግለር ንድሕሪት ይመልሶ። ኣብ ታሕቲ ኣብነታት ዝተፈላለዩ ቅዲታት ምቕያር ኣለዉ።

.navbar-brandኣብቲ ዝነኣሰ ነጥቢ ምብታኽ ዝኾነ ምስ ዝተራእየ፤

<nav class="navbar navbar-expand-lg navbar-light 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <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>

ብጸጋም ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት

<nav class="navbar navbar-expand-lg navbar-light 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <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>

ብጸጋም ቶግለር ብየማን ድማ ስም ምልክት ንግዲ (brand name) ዘለዎ፤

<nav class="navbar navbar-expand-lg navbar-light 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <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. ምኽንያቱ ናትና ፕላግ-ኢን ኣብቲ idand data-bs-targetmatching ስለ ዝሰርሕ፡ እዚ ብቐሊሉ ይግበር!

<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>

እዚ ክትገብር ከለኻ፡ ፎኮስ ምስ ተኸፍተ ብፕሮግራም ናብቲ ኮንተይነር ንምግዓዝ ተወሳኺ ጃቫስክሪፕት ከተካትት ንመክር። እንተዘይኮይኑ፡ ተጠቀምቲ ቁልፊ ሰሌዳን ተጠቀምቲ ሓጋዚ ቴክኖሎጂታትን ነቲ ሓድሽ ዝተጋህደ ትሕዝቶ ንምርካብ ክጽገሙ ተኽእሎ ኣሎ - ብፍላይ እቲ ዝተኸፍተ ኮንተይነር ኣብ ኣቃውማ ናይቲ ሰነድ ቅድሚ እቲ ቶግለር እንተመጺኡ። ብተወሳኺ እቲ ቶግለር ነቲ ባህሪ ከም ዘለዎ ከተረጋግጽ ንመክር ፣ ናብቲ ናይቲ ትሕዝቶ መትሓዚ aria-controlsብምምልካት ። idብክልሰ-ሓሳብ፡ እዚ ተጠቀምቲ ሓጋዚ ቴክኖሎጂ ብቐጥታ ካብቲ ቶግለር ናብቲ ዝቆጻጸሮ ኮንተይነር ክዘሉ የኽእሎም–ግን ኣብዚ እዋን’ዚ ነዚ ዝድግፍ ምሉእ ብምሉእ ምትፍናን’ዩ።

ሳስ

ተለዋዋጢ ረቛሒታት

$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-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-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-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

ዓንኬል

ምላሽ ዝህቡ navbar expand/collapse classes (ንኣብነት, .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: $navbar-nav-link-padding-x;
            padding-left: $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;
        }
      }
    }
  }
}