in English

නවබාර්

Bootstrap හි බලවත්, ප්‍රතිචාරාත්මක සංචාලන ශීර්ෂය, navbar සඳහා ලේඛනගත කිරීම සහ උදාහරණ. වෙළඳ නාමකරණය, සංචාලනය, ප්ලගිනය කඩා වැටීම සහ තවත් දේ සඳහා සහය ඇතුළත් වේ.

එය ක්රියා කරන ආකාරය

Navbar සමඟ ආරම්භ කිරීමට පෙර ඔබ දැනගත යුතු දේ මෙන්න:

  • Navbars හට .navbarප්‍රතිචාරාත්මක .navbar-expand{-sm|-md|-lg|-xl}කඩා වැටීම් සහ වර්ණ යෝජනා ක්‍රම පන්ති සඳහා එතීමක් අවශ්‍ය වේ.
  • Navbars සහ ඒවායේ අන්තර්ගතය පෙරනිමියෙන් තරල වේ. ඒවායේ තිරස් පළල සීමා කිරීමට විකල්ප බහාලුම් භාවිතා කරන්න .
  • navbars තුළ පරතරය පාලනය කිරීම සහ පෙළගැස්වීම සඳහා අපගේ පරතරය සහ නම්‍ය උපයෝගිතා පන්ති භාවිතා කරන්න.
  • Navbars පෙරනිමියෙන් ප්‍රතිචාර දක්වයි, නමුත් ඔබට එය වෙනස් කිරීමට පහසුවෙන් ඒවා වෙනස් කළ හැක. ප්‍රතිචාරාත්මක හැසිරීම අපගේ හැකිලීම JavaScript ප්ලගිනය මත රඳා පවතී.
  • මුද්‍රණය කිරීමේදී Navbars පෙරනිමියෙන් සඟවා ඇත. වෙත එකතු කිරීමෙන් ඒවා මුද්‍රණය .d-printකිරීමට බල කරන්න .navbar. සංදර්ශක උපයෝගිතා පන්තිය බලන්න .
  • මූලද්‍රව්‍යයක් භාවිතා කිරීමෙන් ප්‍රවේශ්‍යතාව සහතික කිරීම <nav>හෝ, a වැනි වඩාත් සාමාන්‍ය මූලද්‍රව්‍යයක් භාවිතා කරන්නේ නම් , සහායක තාක්ෂණයන් භාවිතා කරන්නන් සඳහා සන්ධිස්ථානයක් ලෙස එය පැහැදිලිව හඳුනා ගැනීමට සෑම navbar එකකටම <div>එක් කරන්න .role="navigation"
මෙම සංරචකයේ සජීවිකරණ බලපෑම prefers-reduced-motionමාධ්‍ය විමසුම මත රඳා පවතී. අපගේ ප්‍රවේශ්‍යතා ලේඛනවල අඩු කළ චලන කොටස බලන්න .

සහාය දක්වන අන්තර්ගතය

Navbars උප සංරචක අතලොස්සක් සඳහා ගොඩනඟන ලද සහාය සමඟ පැමිණේ. අවශ්‍ය පරිදි පහත ඒවායින් තෝරන්න:

  • .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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <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">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.6/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.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Navbar සංචාලන සබැඳි .navඔවුන්ගේම modifier පන්තිය සමඟ අපගේ විකල්ප මත ගොඩනගා ඇති අතර නිසි ප්‍රතිචාරාත්මක මෝස්තරයක් සඳහා ටොග්ලර් පන්ති භාවිතා කිරීම අවශ්‍ය වේ. ඔබේ navbar අන්තර්ගතය ආරක්ෂිතව පෙළගස්වා තබා ගැනීමට හැකි තරම් තිරස් ඉඩක් ලබා ගැනීමට navbars තුළ සංචාලනය ද වර්ධනය වේ .

වත්මන් පිටුව දැක්වීමට සක්‍රීය තත්වයන් - සමග - 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">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

තවද අපි අපගේ navs සඳහා පන්ති භාවිතා කරන නිසා, ඔබ කැමති නම් ඔබට ලැයිස්තුව පදනම් කරගත් ප්‍රවේශය සම්පූර්ණයෙන්ම වළක්වා ගත හැක.

<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-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

ඔබට ඔබගේ navbar හි පතන ද භාවිතා කළ හැක. පතන මෙනුවලට ස්ථානගත කිරීම සඳහා එතීමේ මූලද්‍රව්‍යයක් අවශ්‍ය වේ, එබැවින් පහත පෙන්වා ඇති පරිදි වෙන වෙනම සහ කැදලි මූලද්‍රව්‍ය භාවිතා කිරීමට වග බලා .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="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <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>

flex පිරිසැලසුම භාවිතා කිරීමේ ක්ෂණික ළමා අංග .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>

මෙම navbar ආකෘතිවල කොටසක් ලෙස විවිධ බොත්තම් ද සහය දක්වයි. විවිධ ප්‍රමාණයේ මූලද්‍රව්‍ය පෙළගැස්වීම සඳහා සිරස් පෙළගැස්වීමේ උපයෝගිතා භාවිතා කළ හැකි බව මෙය හොඳ මතක් කිරීමකි.

<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-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එය අවශ්‍ය නොවන නමුත්, ඔබට එය පිටුවක කේන්ද්‍ර කර ගැනීමට a තුළ නව තීරුවක් ඔතා ගත හැක . නැතහොත් ඔබට ස්ථාවර හෝ ස්ථිතික ඉහළ නැව් තීරුවක.navbar අන්තර්ගතය මධ්‍යගත කිරීමට පමණක් ඇතුළත කන්ටේනරයක් එක් කළ හැක .

<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 තුළ ඇති විට, එහි තිරස් පිරවුම ඔබේ නිශ්චිත පන්තියට වඩා අඩු බිඳුම් ලක්ෂ්‍යවලදී ඉවත් කරනු ලැබේ . ඔබගේ නව තීරුව බිඳ වැටුණු විට අපි අඩු දර්ශන තොටුපලවල අනවශ්‍ය ලෙස පෑඩින් කිරීම දෙගුණ නොවන බව මෙය සහතික කරයි.

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

ස්ථානගත කිරීම

ස්ථිතික නොවන ස්ථාන වල navbar තැබීමට අපගේ පිහිටුම් උපයෝගිතා භාවිතා කරන්න. ස්ථාවර සිට ඉහළට, පහළට ස්ථාවර හෝ ඉහළට ඇලවූ ඒවා තෝරන්න (පිටුව ඉහළට ළඟා වන තෙක් අනුචලනය කරයි, පසුව එහි පවතී). ස්ථාවර navbars භාවිතා කරයි position: fixed, එනම් ඒවා DOM හි සාමාන්‍ය ප්‍රවාහයෙන් ඉවත් කර ඇති අතර අනෙකුත් මූලද්‍රව්‍ය සමඟ අතිච්ඡාදනය වීම වැළැක්වීමට අභිරුචි 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-nav-scrollකඩා වැටුණු navbar එකක ටොගල් කළ හැකි අන්තර්ගතය තුළ සිරස් අනුචලනය සක්‍රීය කිරීමට .navbar-collapse(හෝ වෙනත් navbar උප සංරචකයකට) එක් කරන්න . පෙරනිමියෙන්, අනුචලනය ආරම්භ වන්නේ 75vh(හෝ නැරඹුම් තොටේ උසින් 75%), නමුත් ඔබට පේළිගත හෝ අභිරුචි මෝස්තර සමඟ එය අභිබවා යා හැක. නව තීරුව පුළුල් කළ විට විශාල නැරඹුම් තොටුපලවල, පෙරනිමි නාවික තීරුවක මෙන් අන්තර්ගතය දිස්වනු ඇත.

overflowමෙම හැසිරීම - සැකසීමේදී overflow-y: auto(මෙහි අන්තර්ගතය අනුචලනය කිරීමට අවශ්‍ය වේ) හි විභව අඩුපාඩුවක් සමඟ එන බව කරුණාවෙන් සලකන්න , එය යම් තිරස් අන්තර්ගතයක් කැපීමට overflow-xසමාන වේ .auto

ප්‍රශස්ත පරතරයක් සඳහා අමතර ආන්තික උපයෝගිතා කිහිපයක් සමඟ .navbar-nav-scrollභාවිතා කරන navbar උදාහරණයකි .style="max-height: 100px;"

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <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="#" role="button" data-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">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

ප්රතිචාරාත්මක හැසිරීම්

Navbars හට ඔවුන්ගේ අන්තර්ගතය බොත්තමක් පිටුපස කඩා වැටෙන විට තීරණය කිරීමට .navbar-toggler, .navbar-collapse, සහ පන්ති භාවිතා කළ හැක. .navbar-expand{-sm|-md|-lg|-xl}වෙනත් උපයෝගිතා සමඟ ඒකාබද්ධව, ඔබට විශේෂිත අංග පෙන්වීමට හෝ සැඟවීමට කවදාද යන්න පහසුවෙන් තෝරා ගත හැකිය.

කිසිදා කඩා වැටෙන නව තීරු සඳහා, navbar .navbar-expandමත පන්තිය එක් කරන්න. සෑම විටම කඩා වැටෙන navbar සඳහා, කිසිදු .navbar-expandපන්තියක් එක් නොකරන්න.

ටොග්ලර්

Navbar togglers පෙරනිමියෙන් වමට පෙළගස්වා ඇත, නමුත් ඔවුන් වැනි සහෝදර අංගයක් අනුගමනය කරන්නේ නම් .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">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">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">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>

බාහිර අන්තර්ගතය

සමහර විට ඔබට ව්‍යුහාත්මකව පිටත පිහිටා ඇති අන්තර්ගතය සඳහා බහාලුම් මූලද්‍රව්‍ය ක්‍රියාරම්භ කිරීමට හැකිලීමේ ප්ලගිනය භාවිතා කිරීමට අවශ්‍ය වේ .navbar. අපගේ ප්ලගිනය idසහ data-targetගැලපීම මත ක්‍රියා කරන නිසා, එය පහසුවෙන් කළ හැකිය!

<div class="fixed-top">
  <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>

ඔබ මෙය කරන විට, එය විවෘත කළ විට, අවධානය ක්‍රමලේඛනාත්මකව කන්ටේනරය වෙත ගෙන යාමට අමතර JavaScript ඇතුළත් කිරීමට අපි නිර්දේශ කරමු. එසේ නොමැති නම්, යතුරුපුවරු භාවිතා කරන්නන්ට සහ සහායක තාක්ෂණයන් භාවිතා කරන්නන්ට අලුතින් හෙළිදරව් කරන ලද අන්තර්ගතය සොයා ගැනීමට අපහසු වනු ඇත - විශේෂයෙන් විවෘත කරන ලද බහාලුම ලේඛනයේ ව්‍යුහයේ ටොග්ලර්ට පෙර පැමිණේ නම්. අන්තර්ගත කන්ටේනරය aria-controlsවෙත යොමු කරමින් ටොග්ලර්ට උපලක්ෂණ ඇති බව සහතික කර ගැනීමට ද අපි නිර්දේශ කරමු . idන්‍යායාත්මකව, මෙය සහායක තාක්‍ෂණ පරිශීලකයින්ට ටොග්ලර් සිට එය පාලනය කරන බහාලුමට කෙලින්ම පැනීමට ඉඩ සලසයි - නමුත් මේ සඳහා සහය දැනට තරමක් නොගැලපේ.