in English

ናቭባር

ሰነዶች እና ምሳሌዎች ለ Bootstrap ኃይለኛ፣ ምላሽ ሰጪ የአሰሳ ራስጌ፣ የ navbar። የእኛን የስብስብ ተሰኪ ድጋፍን ጨምሮ ለብራንዲንግ፣ አሰሳ እና ሌሎችም ድጋፍን ያካትታል።

በዚህ ገጽ ላይ

እንዴት እንደሚሰራ

በ navbar ከመጀመርዎ በፊት ማወቅ ያለብዎት ነገር ይኸውና፡-

Navbars ምላሽ ለሚሰጥ ውድቀት እና .navbarየቀለም ንድፍ ክፍሎች መጠቅለያ ያስፈልጋቸዋል።.navbar-expand{-sm|-md|-lg|-xl|-xxl}
Navbars እና ይዘታቸው በነባሪ ፈሳሽ ናቸው። አግድም ስፋታቸውን በተለያየ መንገድ ለመገደብ መያዣውን ይለውጡ .
በ navbars ውስጥ ያለውን ክፍተት እና አሰላለፍ ለመቆጣጠር የእኛን ክፍተት እና ተጣጣፊ የመገልገያ ክፍሎችን ይጠቀሙ።
Navbars በነባሪነት ምላሽ ሰጪዎች ናቸው፣ ግን ያንን ለመለወጥ በቀላሉ ሊያስተካክሏቸው ይችላሉ። ምላሽ ሰጪ ባህሪ በጃቫስክሪፕት ተሰኪያችን ላይ ይወሰናል።
ኤለመንትን በመጠቀም ተደራሽነትን ያረጋግጡ <nav>ወይም እንደ ሀ ያሉ የበለጠ አጠቃላይ አካልን ከተጠቀሙ ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች እንደ ምልክት ክልል በግልፅ ለመለየት በእያንዳንዱ ናቭባር ላይ <div>ይጨምሩ ።role="navigation"
aria-current="page"ለአሁኑ ገጽ ወይም aria-current="true"በስብስብ ውስጥ ያለውን የአሁኑን ንጥል በመጠቀም የአሁኑን ንጥል ያመልክቱ ።
አዲስ በv5.2.0፡ Navbars ከሲኤስኤስ ተለዋዋጮች ጋር .navbarበመሠረታዊ ክፍል ውስጥ ሊካተት ይችላል። .navbar-lightተቋርጧል እና .navbar-darkተጨማሪ ቅጦችን ከመጨመር ይልቅ የሲኤስኤስ ተለዋዋጮችን ለመሻር በድጋሚ ተጽፏል።

የዚህ አካል አኒሜሽን ተጽእኖ prefers-reduced-motionበመገናኛ ብዙሃን ጥያቄ ላይ የተመሰረተ ነው. የእኛን የተደራሽነት ሰነድ የተቀነሰውን እንቅስቃሴ ክፍል ይመልከቱ ።

የሚደገፍ ይዘት

ናቭባርስ ለተወሰኑ ንዑሳን ክፍሎች አብሮ የተሰራ ድጋፍ ይዘው ይመጣሉ። እንደ አስፈላጊነቱ ከሚከተሉት ውስጥ ይምረጡ።

.navbar-brandለእርስዎ ኩባንያ፣ ምርት ወይም የፕሮጀክት ስም።
.navbar-navለሙሉ ቁመት እና ቀላል ክብደት አሰሳ (የተቆልቋይ መውረድ ድጋፍን ጨምሮ)።
.navbar-togglerከእኛ የስብስብ ፕለጊን እና ከሌሎች የአሰሳ መቀያየር ባህሪዎች ጋር ለመጠቀም።
ለማንኛውም የቅጽ መቆጣጠሪያዎች እና ድርጊቶች ተጣጣፊ እና ክፍተት መገልገያዎች።
.navbar-textበአቀባዊ መሃል የጽሑፍ ሕብረቁምፊዎችን ለመጨመር።
.collapse.navbar-collapseየ navbar ይዘቶችን በወላጅ መግቻ ነጥብ ለመቧደን እና ለመደበቅ።
.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>

እና ክፍሎችን የምንጠቀመው ለባህር ኃይልዎቻችን ስለሆነ፣ ከፈለግክ በዝርዝሩ ላይ የተመሰረተውን አካሄድ ሙሉ በሙሉ ማስወገድ ትችላለህ።

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>

ጽሑፍ

Navbars በ እገዛ ትንሽ ጽሑፍ ሊይዝ ይችላል .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.

በBootstrap የ Sass እና CSS ተለዋዋጮች ጥምረት የናቭባር ገጽታዎች ከመቼውም ጊዜ በበለጠ ቀላል ናቸው። ነባሪው ከብርሃን ዳራ ቀለሞች ጋር ለመጠቀም የኛ “የብርሃን ናቭባር” ነው፣ ነገር ግን .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>

አቀማመጥ

ናቭባርን የማይለዋወጡ ቦታዎች ላይ ለማስቀመጥ የቦታ መገልገያዎችን ተጠቀም ። ከተስተካከሉ ወደ ላይ፣ ከታች ተስተካክለው፣ ወደ ላይ ተጣብቀው (ከገጹ ጋር ወደላይ እስኪደርስ ድረስ ይሸብልሉ፣ ከዚያም እዚያው ይቆያሉ) ወይም ከታች ተጣብቀው (ከገጹ በታች እስኪደርስ ድረስ ይሸብልሉ፣ ከዚያም ይቆያሉ) እዚያ)።

ቋሚ ናቭባርስ ይጠቀማሉ ፣ ይህም ማለት ከDOM መደበኛ ፍሰት የተወሰዱ እና ብጁ CSS (ለምሳሌ በ ) ላይ ከሌሎች አካላት ጋር መደራረብን ለመከላከል position: fixedሊፈልጉ ይችላሉ ።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(ወይም ሌላ የናቭባር ንዑስ ክፍል) አክል በነባሪ፣ ማሸብለል 75vh(ወይም የእይታ ቁመቱ 75%) ላይ ይጀምራል፣ ነገር ግን ያንን በአካባቢያዊ የCSS ብጁ ንብረት --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-togglerNavbars ይዘታቸው ከአዝራር ጀርባ ሲወድቅ ለማወቅ ፣፣ .navbar-collapseእና .navbar-expand{-sm|-md|-lg|-xl|-xxl}ክፍሎችን መጠቀም ይችላሉ ። ከሌሎች መገልገያዎች ጋር በማጣመር ልዩ ክፍሎችን መቼ እንደሚያሳዩ ወይም እንደሚደብቁ በቀላሉ መምረጥ ይችላሉ።

ፈጽሞ የማይፈርስ ናቭባርስ፣ .navbar-expandክፍሉን በ navbar ላይ ያክሉ። ሁልጊዜ ለሚወድቁ ናቭባርዎች፣ ምንም .navbar-expandክፍል አይጨምሩ።

ቀያሪ

የናቭባር መቀየሪያዎች በነባሪ በግራ የተሰለፉ ናቸው፣ነገር ግን እንደ a ያለ ወንድም ወይም እህት አባል ከተከተሉ .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በማዛመድ ላይ ስለሚሰራ፣ ያ በቀላሉ ይከናወናል!

Collapsed content

Toggleable via the navbar brand.

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>

ይህን በሚያደርጉበት ጊዜ, በሚከፈትበት ጊዜ ትኩረቱን በፕሮግራም ወደ መያዣው ለማንቀሳቀስ ተጨማሪ ጃቫ ስክሪፕት እንዲያካትቱ እንመክራለን. አለበለዚያ የቁልፍ ሰሌዳ ተጠቃሚዎች እና አጋዥ ቴክኖሎጂዎች ተጠቃሚዎች አዲስ የተገለጠውን ይዘት ለማግኘት ይቸገራሉ - በተለይ የተከፈተው መያዣ በሰነዱ መዋቅር ውስጥ ካለው መቀየሪያ በፊት ከመጣ። aria-controlsእንዲሁም የይዘት መያዣውን በመጠቆም መቀያየሪያው ባህሪው እንዳለው እንዲያረጋግጡ እንመክራለን id። በንድፈ ሀሳብ፣ ይህ የረዳት ቴክኖሎጂ ተጠቃሚዎች በቀጥታ ከመቀያየር ወደ ሚቆጣጠረው መያዣ እንዲዘሉ ያስችላቸዋል - ነገር ግን ለዚህ ድጋፍ በአሁኑ ጊዜ በጣም የተወሳሰበ ነው።

Offcanvas

እየተስፋፋ ያለው እና እየተሰባበረ ያለውን ናቭባር ከካንቫስ ክፍል ጋር ወደ ውጭ መሣቢያ ይቀይሩት ። ሁለቱንም የከሸራ ነባሪ ቅጦችን እናሰፋለን እና .navbar-expand-*ተለዋዋጭ እና ተለዋዋጭ የአሰሳ የጎን አሞሌ ለመፍጠር ክፍሎቻችንን እንጠቀማለን።

ከታች ባለው ምሳሌ በሁሉም መግቻ ነጥቦች ላይ ሁል ጊዜ የሚፈርስ የከሸራ ናቭባርን ለመፍጠር .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>

በጨለማ ናቭባር ውስጥ Offcanvasን ሲጠቀሙ ጽሑፉ የማይነበብ እንዳይሆን ከሸራው ላይ የጨለማ ዳራ ሊኖርዎት እንደሚችል ይገንዘቡ። ከታች ባለው ምሳሌ ላይ ፣ ወደ ፣ ወደ ፣ ወደ ፣ እና .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 ውስጥ ተጨምሯል

እንደ የBootstrap የ 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};

አንዳንድ ተጨማሪ የሲኤስኤስ ተለዋዋጮችም በሚከተሉት ላይ ይገኛሉ .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);

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

Sass loop

ምላሽ ሰጪ የናቭባር ማስፋፊያ/ስብስብ ክፍሎች (ለምሳሌ፣ .navbar-expand-lg) ከካርታው ጋር ተጣምረው $breakpointsእና በ loop ውስጥ ይፈጠራሉ 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;
          }
        }
      }
    }
  }
}