Source

ናቭባር

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

እንዴት እንደሚሰራ

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

  • Navbars ምላሽ ለሚሰጥ ውድቀት እና .navbarየቀለም ንድፍ ክፍሎች መጠቅለያ ያስፈልጋቸዋል።.navbar-expand{-sm|-md|-lg|-xl}
  • Navbars እና ይዘታቸው በነባሪ ፈሳሽ ናቸው። አግድም ስፋታቸውን ለመገደብ አማራጭ መያዣዎችን ይጠቀሙ ።
  • በ navbars ውስጥ ያለውን ክፍተት እና አሰላለፍ ለመቆጣጠር የእኛን ክፍተት እና ተጣጣፊ የመገልገያ ክፍሎችን ይጠቀሙ።
  • Navbars በነባሪነት ምላሽ ሰጪዎች ናቸው፣ ግን ያንን ለመለወጥ በቀላሉ ሊያስተካክሏቸው ይችላሉ። ምላሽ ሰጪ ባህሪ በጃቫስክሪፕት ተሰኪያችን ላይ ይወሰናል።
  • Navbars በሚታተምበት ጊዜ በነባሪነት ተደብቀዋል። .d-printወደ ላይ በመጨመር እንዲታተሙ ያስገድዷቸው .navbar። የማሳያ መገልገያ ክፍልን ይመልከቱ ።
  • ኤለመንትን በመጠቀም ተደራሽነትን ያረጋግጡ <nav>ወይም እንደ ሀ ያሉ የበለጠ አጠቃላይ አካልን ከተጠቀሙ ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች እንደ ምልክት ክልል በግልፅ ለመለየት በእያንዳንዱ ናቭባር ላይ <div>ይጨምሩ ።role="navigation"

ለአብነት እና የሚደገፉ ንዑስ ክፍሎች ዝርዝር ያንብቡ።

የሚደገፍ ይዘት

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

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

የናቭባር አሰሳ አገናኞች በራሳቸው የመቀየሪያ ክፍል በእኛ .navአማራጮች ላይ ይገነባሉ እና ለተገቢው ምላሽ የቅጥ አሰራር የመቀየሪያ ክፍሎችን መጠቀም ይፈልጋሉ። የናቭባርን ይዘቶች ደህንነቱ በተጠበቀ መልኩ እንዲሰለፉ ለማድረግ በናቭባርስ ውስጥ ያለው አሰሳ በተቻለ መጠን ብዙ አግድም ቦታን ለመያዝ ያድጋል ።

የአሁኑን ገጽ ለማመልከት ንቁ ግዛቶች- በ-- በቀጥታ በ 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="#">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="#">Disabled</a>
    </div>
  </div>
</nav>

እንዲሁም ተቆልቋይዎችን በእርስዎ የናቭባር ናቭ ውስጥ መጠቀም ይችላሉ። ተቆልቋይ ሜኑዎች ለአቀማመጥ የመጠቅለያ አካል ያስፈልጋቸዋል፣ ስለዚህ ከዚህ በታች እንደሚታየው የተለዩ .nav-itemእና የጎጆ ክፍሎችን መጠቀምዎን ያረጋግጡ።.nav-link

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" 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>

ቅጾች

የተለያዩ የቅጽ መቆጣጠሪያዎችን እና አካላትን በ navbar ውስጥ ያስቀምጡ .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>

ጽሑፍ

Navbars በ እገዛ ትንሽ ጽሑፍ ሊይዝ ይችላል .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 ጭብጥ ቀላል ሆኖ አያውቅም ። ከብርሃን ዳራ ቀለሞች ወይም ለጨለማ የጀርባ ቀለሞች .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>

ኮንቴይነሮች

ምንም እንኳን የሚያስፈልግ ባይሆንም ፣ navbarን በአንድ ገጽ ላይ ለመሃል መጠቅለል ወይም የቋሚ ወይም የማይንቀሳቀስ የላይኛው የዳሰሳ አሞሌን.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>

አቀማመጥ

ናቭባርን የማይለዋወጡ ቦታዎች ላይ ለማስቀመጥ የቦታ መገልገያዎችን ተጠቀም ። ከቋሚ ወደ ላይኛው፣ ወደ ታች ተስተካክለው ወይም ከላይኛው ላይ ተጣብቀው ይምረጡ (ከገጹ ጋር ወደ ላይኛው ክፍል እስኪደርስ ድረስ ይሸብልሉ፣ ከዚያ እዚያ ይቆያል)። ቋሚ ናቭባርስ ይጠቀማሉ ፣ ይህም ማለት ከDOM መደበኛ ፍሰት የተወሰዱ እና ብጁ CSS (ለምሳሌ በ ) ላይ ከሌሎች አካላት ጋር መደራረብን ለመከላከል position: fixedሊፈልጉ ይችላሉ ።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>

ምላሽ ሰጪ ባህሪያት

Navbars ይዘታቸው ከአዝራር ጀርባ ሲወድቅ ለመለወጥ፣፣ እና ክፍሎችን .navbar-togglerመጠቀም .navbar-collapseይችላሉ ። .navbar-expand{-sm|-md|-lg|-xl}ከሌሎች መገልገያዎች ጋር በማጣመር ልዩ ክፍሎችን መቼ እንደሚያሳዩ ወይም እንደሚደብቁ በቀላሉ መምረጥ ይችላሉ።

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

ቀያሪ

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

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