Source

ናቭባር

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

ከመይ ይሰርሕ

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

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

ናይዚ ኣካል ተንቀሳቓሲ ውጽኢት ኣብቲ ናይ prefers-reduced-motionሚድያ ሕቶ ዝምርኮስ እዩ። ኣብቲ ናይ ተበጻሕነት ሰነድና ኣብቲ ዝተቐነሰ ምንቅስቓስ ዝብል ክፍሊ ርአ ።

ኣብነትን ዝርዝር ናይ ዝድገፉ ንኡሳን ባእታታትን ንምርካብ ቀጽል ኣንብብ።

ዝድገፍ ትሕዝቶ

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

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

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.4/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.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

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

ንጡፋት ኩነታት—ምስ —እቲ ናይ ሕጂ ገጽ ንምምልካት ብቐጥታ ኣብ s ወይ ናይ ቀረባ ወላዲኦም s .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>

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

<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: 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 ጥራይ ማእከል ንምግባር ።

<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}ክፍሊ ኣብ ዝወሓደ ናይ ምብታኽ ነጥብታት ይእለ። እዚ ድማ navbar ናትካ ምስ ዝፈርስ ኣብ ታሕተዎት viewports ብዘይ ኣድላይነት ኣብ padding ብዕጽፊ ከምዘይንውስኽ የረጋግጽ።

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <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">
  <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-toggler, .navbar-collapse, ከምኡ’ውን ክፍልታት ክጥቀሙ ይኽእሉ ። .navbar-expand{-sm|-md|-lg|-xl}ምስ ካልኦት ዩቲሊቲታት ተደሚሩ፡ ፍሉያት ባእታታት መዓስ ከም እተርኢ ወይ ከም እትሓብእ ብቐሊሉ ክትመርጽ ትኽእል ኢኻ።

ንዘይፈርሱ ናቭባር .navbar-expand፡ ኣብቲ ናቭባር ዘሎ ክፍሊ ወስኹሉ። ኩሉ ግዜ ዝፈርሱ navbars ዝኾነ .navbar-expandክፍሊ ኣይትውሰኹ።

ቶግለር

Navbar togglers ብነባሪ ብጸጋም ይስለፉ፣ ግን ከም a ዝኣመሰለ ናይ ሓው ባእታ እንተተኸቲሎም .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>

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

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

ናይ ደገ ትሕዝቶ

ሓደ ሓደ ግዜ ነቲ ናይ ምዕጻፍ ፕላግ-ኢን ተጠቒምካ ኣብ ካልእ ቦታታት ናይቲ ገጽ ሕቡእ ትሕዝቶ ክትጅምር ትደሊ። ምኽንያቱ ናትና ፕላግ-ኢን ኣብቲ idand data-targetmatching ስለ ዝሰርሕ፡ እዚ ብቐሊሉ ይግበር!

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