Bootstrap 5 నేవిగేషన్ బార్

నేవిగేషన్ బార్

నేవిగేషన్ బార్ అనేది పేజీ పైన ఉన్న నేవిగేషన్ హెడర్ ఉంటుంది:

బేసిక్ నేవిగేషన్ బార్

Bootstrap ఉపయోగించి నేవిగేషన్ బార్ స్క్రీన్ పరిమాణాను ఆధారంగా విస్తరించడానికి లేదా కూడిపోవడానికి ఉపయోగించబడుతుంది.

ఉపయోగించండి .navbar క్లాస్ అడజుక్ట్ స్టాండర్డ్ నేవిగేషన్ బార్ సృష్టించడానికి ఉపయోగించండి మరియు ప్రతిస్పందక క్లాస్ అడజుక్ట్ ఉపయోగించండి:.navbar-expand-xxl|xl|lg|md|sm（విశాలమైన, అత్యవసరమైన, పెద్ద, మధ్యమ పరికరాలపై హోరిజంటల్ గా ప్రదర్శించబడుతుంది లేదా చిన్న స్క్రీన్‌లో వర్టికల్ గా ప్రదర్శించబడుతుంది).

నేవిగేషన్ బార్‌లో లింకులను జోడించడానికి ఉపయోగించండి class="navbar-nav" యొక్క <ul> అంశం (లేదా <div>）。తరువాత ఉపయోగించండి .nav-item క్లాస్ అడజుక్ట్ ఉపయోగించండి: <li> అంశంపై తరువాత ఉపయోగించండి .nav-link క్లాస్ అడజుక్ట్ ఉపయోగించండి: క్లాస్ జాబితాలో జోడించండి అంశంపై ఉపయోగించండి:

ఇన్స్టాన్స్

<-- హేయిట్ హోరిజంటల్ నేవిగేషన్ బార్ చిన్న స్క్రీన్‌లో వర్టికల్ అవుతుంది -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <-- లింకులు -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">లింక్ 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">లింక్ 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">లింక్ 3</a>
      </li>
    </ul>
  </div>
</nav>

స్వయంగా ప్రయత్నించండి

వర్టికల్ నేవిగేషన్ బార్

తొలగించండి .navbar-expand-* క్లాస్ అడజుక్ట్ వర్టికల్ నేవిగేషన్ బార్ ఉపయోగించడానికి ఉపయోగించండి:

ఇన్స్టాన్స్

<-- హేయిట్ వర్టికల్ నేవిగేషన్ బార్ -->
<nav class="navbar bg-light">
  ...
</nav>

స్వయంగా ప్రయత్నించండి

మధ్యన స్థానం పెట్టబడిన నేవిగేషన్ బార్

జోడించండి .justify-content-center క్లాస్ అడజుక్ట్ నేవిగేషన్ బార్ మధ్యన స్థానం పెట్టడానికి ఉపయోగించండి:

ఇన్స్టాన్స్

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

స్వయంగా ప్రయత్నించండి

రంగు నేవిగేషన్ బార్

ఏదైనా రంగు నేవిగేషన్ బార్ ఉపయోగించండి: .bg-color క్లాస్ అడజుక్ట్ నేవిగేషన్ బార్ బ్యాక్‌గ్రౌండ్ రంగును మార్చడానికి ఉపయోగించండి:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

సలహా:ఉపయోగించండి .navbar-dark క్లాస్ అడజుక్ట్ అన్ని లింకులకు వెంట్రుక వర్ణం జోడించడానికి లేదా ఉపయోగించండి .navbar-light క్లాస్ అడజుక్ట్ బ్లాక్ టెక్స్ట్ రంగు.

ఇన్స్టాన్స్

<-- హేయిట్ బ్యాక్‌గ్రౌండ్ మరియు వెంట్రుక వర్ణం -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        活动
      </li>
     <li class="nav-item">
        <a class="nav-link" href="#">లింక్</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">లింక్</a>
      </li>
      <li class="nav-item">
        禁用
      </li>
    </ul>
  </div>
</nav>
<a class="nav-link active" href="#">చేసిన ప్రక్రియ</a>
<a class="nav-link disabled" href="#">అచేతనం</a>
<!-- కాళ్ళు బ్యాక్గ్రౌండ్ మరియు తెలుపు పాఠం -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>

స్వయంగా ప్రయత్నించండి

<!-- నీలపు బ్యాక్గ్రౌండ్ మరియు తెలుపు పాఠం --><nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav> చేసిన ప్రక్రియను లేదా అచేతనం చేయండి: .active క్లాస్ జాబితాలో జోడించండి <a> క్లాస్ ఉపయోగించినప్పుడు, ప్రస్తుత లింక్ను ఉపదృష్టం చేయడానికి లేదా ఉపయోగించండి .disabled

క్లాస్ ఉపయోగించినప్పుడు, లింక్ని నిలిపించడానికి ఉపయోగించండి.

.navbar-brand బ్రాండ్ / లోగో

ఇన్స్టాన్స్

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

స్వయంగా ప్రయత్నించండి

క్లాస్ ఉపయోగించినప్పుడు, పేజీ యొక్క బ్రాండ్ / లోగో / పేరును ప్రదర్శించడానికి ఉపయోగించండి: .navbar-brand క్లాస్ చిత్రంతో కలిసి ఉపయోగించినప్పుడు, Bootstrap 5 స్వయంచాలకంగా చిత్ర శైలిని అమర్చుతుంది, పారిశ్రామిక ప్రాంతంలో ఉన్నట్లు చేస్తుంది.

ఇన్స్టాన్స్

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"> 
    </a>
  </div>
</nav>

స్వయంగా ప్రయత్నించండి

నేవిగేషన్ పాఠం

ఉపయోగించండి .navbar-text క్లాస్ విస్తరణ ప్రాంతంలో క్లాస్ నిలుస్తుంది ఏ అన్ని విషయాలను ఉంచండి (సరైన అంతరాంతరాలు మరియు పాఠ రంగులను నిర్ధారించండి).

ఇన్స్టాన్స్

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">నేవిగేషన్ పాఠం</span>
  </div>
</nav>

స్వయంగా ప్రయత్నించండి

చాలా సార్లు, ప్రత్యేకించి చిన్న స్క్రీన్లపై, మీరు నేవిగేషన్ లింక్లను దాచి ఒక బటన్ను ఉపయోగించడానికి మరియు బటన్ను నొక్కినప్పుడు వాటిని చూపించడానికి కోరుకుంటారు.

ఒక క్రియాశీలమైన పారిశ్రామిక ప్రాంతాన్ని సృష్టించడానికి, అమర్చిన పరికరాలను ఉపయోగించండి class="navbar-toggler"మరియుdata-bs-toggle="collapse" మరియు data-bs-target="#thetarget" యొక్క బటన్ తో పాటు ఉండే అన్ని విషయాలను పెట్టండి class="collapse navbar-collapse" యొక్క <div> మెటా ప్రాంతంలో తరువాత, బటన్ తో పాటు ఉండే అన్ని విషయాలను పెట్టండి data-bs-target మీరు సర్వీసు ప్రొవైడర్ పేజీలో ప్రదర్శించవలసిన విషయాలను పెట్టండిthetarget"。

ఇన్స్టాన్స్

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">లింక్</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">లింక్</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">లింక్</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

స్వయంగా ప్రయత్నించండి

సలహా:మీరు కూడా తొలగించవచ్చు: .navbar-expand-md క్లాస్ నావిగేషన్ బార్ లింక్స్ ని ఎప్పటికీ మరియు ట్రాన్స్ఫర్ బటన్స్ చూపిస్తుంది.

డౌన్ మెనూ నావిగేషన్ బార్

నావిగేషన్ బార్ డౌన్ మెనూ చేర్చవచ్చు:

ఇన్స్టాన్స్

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">డౌన్ మెనూ</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">లింక్</a></li>
    <li><a class="dropdown-item" href="#">మరొక లింక్</a></li>
    <li><a class="dropdown-item" href="#">మూడవ లింక్</a></li>
  </ul>
</li>

స్వయంగా ప్రయత్నించండి

నావిగేషన్ బార్ మెనూ మరియు బటన్స్

మీరు ప్రయాణపథంలో ఫారమ్స్ చేర్చవచ్చు:

ఇన్స్టాన్స్

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">లింకు</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">లింకు</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">లింకు</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="శోధించు">
        <button class="btn btn-primary" type="button">శోధించు</button>
      </form>
    </div>
  </div>
</nav>

స్వయంగా ప్రయత్నించండి

స్థానం పెట్టిన నేవిగేషన్

నేవిగేషన్ పేజీ ప్రాంతంలో పైభాగం లేదా తలలో పెట్టబడవచ్చు.

పెట్టిన నేవిగేషన్ పేజీ ప్రాంతంలో స్వతంత్రంగా పనిచేయు ప్రత్యక్ష స్థానం (పైభాగం లేదా తలలో) లో కనిపిస్తుంది.

.fixed-top కేసును పేజీ ప్రాంతంలో పెట్టినప్పుడు నేవిగేషన్ పనిచేయబడుతుందిపైభాగం:

ఇన్స్టాన్స్

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

స్వయంగా ప్రయత్నించండి

ఉపయోగించండి .fixed-bottom కేసును నేవిగేషన్ పెట్టినప్పుడు పేజీ ప్రాంతంలో తగిన స్థానంలో ఉంచండి:

ఇన్స్టాన్స్

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

స్వయంగా ప్రయత్నించండి

ఉపయోగించండి .sticky-top ఈ కేసులో నేవిగేషన్ పరిగెత్తుకు పాటు పెట్టినప్పుడు పేజీలో ప్రత్యక్షంగా పరిగెత్తుకు పోతుంది / పెట్టినప్పుడు ఉంచబడుతుందిపైభాగం.

ప్రకటన:ఈ కేసులో IE11 మరియు అంతకు ముంది వెర్షన్లలో ఈ కేసు పనిచేయదు (దానిని పరిగణించండి) position:relative)

ఇన్స్టాన్స్

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

స్వయంగా ప్రయత్నించండి