ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
Check
in English

නවබාර්

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

මෙම පිටුවේ

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

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

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

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

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

  • .navbar-brandඔබේ සමාගම, නිෂ්පාදනය හෝ ව්‍යාපෘති නාමය සඳහා.
  • .navbar-navසම්පූර්ණ උස සහ සැහැල්ලු සංචලනය සඳහා (ඩ්‍රොප් ඩවුන් සඳහා සහය ඇතුළුව).
  • .navbar-togglerඅපගේ බිඳවැටීමේ ප්ලගිනය සහ අනෙකුත් සංචාලන ටොගල් හැසිරීම් සමඟ භාවිතය සඳහා.
  • ඕනෑම ආකාරයක පාලන සහ ක්‍රියා සඳහා නම්‍ය සහ පරතරය උපයෝගිතා.
  • .navbar-textසිරස් අතට කේන්ද්‍රගත වූ පෙළ පෙළ එකතු කිරීම සඳහා.
  • .collapse.navbar-collapseමාපිය බ්‍රේක්පොයින්ට් එකකින් navbar අන්තර්ගතය සමූහගත කිරීම සහ සැඟවීම සඳහා.
  • .navbar-scrollපුළුල් කළ navbar අන්තර්ගතයක් සැකසීමට 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>

රූප

ඔබ තුළ ඇති පාඨය a .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>

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

වත්මන් පිටුව දැක්වීමට .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>

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

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>

ඔබට ඔබගේ navbar හි පතන ද භාවිතා කළ හැක. පතන මෙනුවලට ස්ථානගත කිරීම සඳහා එතීමේ මූලද්‍රව්‍යයක් අවශ්‍ය වේ, එබැවින් පහත පෙන්වා ඇති පරිදි වෙන වෙනම සහ කැදලි මූලද්‍රව්‍ය භාවිතා කිරීමට වග බලා .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>

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

ආදාන කණ්ඩායම් ද ක්‍රියා කරයි. ඔබගේ navbar සම්පූර්ණ ආකෘතියක් නම්, හෝ බොහෝ දුරට පෝරමයක් නම්, ඔබට <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>

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

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 හි නව: Navbar තේමා දැන් CSS විචල්‍යයන් මගින් බලගන්වන අතර .navbar-lightඑය අවලංගු කර ඇත. CSS විචල්‍යයන් .navbar"ආලෝකය" පෙනුමට පෙරනිමියෙන් යොදනු ලබන අතර, සමඟින් අභිබවා යා හැක .navbar-dark.

Bootstrap හි Sass සහ CSS විචල්‍යයන්ගේ සංකලනයට ස්තුතිවන්ත වන්නට Navbar තේමාවන් වෙන කවරදාටත් වඩා පහසුයි. පෙරනිමිය වන්නේ සැහැල්ලු පසුබිම් වර්ණ සමඟ භාවිතා කිරීම සඳහා අපගේ "සැහැල්ලු navbar" වේ, නමුත් ඔබට .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>

බහාලුම්

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

ඔබගේ navbar හි අන්තර්ගතය කෙතරම් පුළුල් ලෙස ඉදිරිපත් කර ඇත්ද යන්න වෙනස් කිරීමට ප්‍රතිචාර දක්වන ඕනෑම බහාලුමක් භාවිතා කරන්න.

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

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

ස්ථිතික නොවන ස්ථාන වල navbar තැබීමට අපගේ පිහිටුම් උපයෝගිතා භාවිතා කරන්න. ඉහළට ස්ථාවර, පහළට ස්ථාවර, ඉහළට ඇලවූ (පිටුව ඉහළට ළඟා වන තුරු අනුචලනය, පසුව එහි රැඳී) හෝ පහළට ඇලවූ (පිටුව පහළට ළඟා වන තුරු අනුචලන, පසුව රැඳී) තෝරාගන්න. එතන).

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

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

ප්‍රශස්ත පරතරයක් සඳහා අමතර ආන්තික උපයෝගිතා කිහිපයක් සමඟ .navbar-nav-scrollභාවිතා කරන navbar උදාහරණයකි .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>

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

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

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

ටොග්ලර්

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

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>

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

Offcanvas

ඔබේ පුළුල් වන සහ කඩා වැටෙන නව තීරුව offcanvas සංරචකය සහිත offcanvas ලාච්චුවක් බවට පරිවර්තනය කරන්න . අපි offcanvas පෙරනිමි විලාස දෙකම දිගු .navbar-expand-*කර ගතික සහ නම්‍යශීලී සංචාලන පැති තීරුවක් නිර්මාණය කිරීමට අපගේ පන්ති භාවිතා කරමු.

පහත උදාහරණයේ, සියලු කඩඉම් හරහා සෑම විටම කඩා වැටෙන offcanvas navbar එකක් සෑදීමට, .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>

වැනි නිශ්චිත කඩඉමකදී සාමාන්‍ය නව තීරුවක් දක්වා විහිදෙන offcanvas navbar එකක් සෑදීමට 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>

අඳුරු navbar එකක offcanvas භාවිතා කරන විට, පාඨය අපැහැදිලි වීම වැළැක්වීමට 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 විචල්‍ය ප්‍රවේශයේ කොටසක් ලෙස, navbars දැන් .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};

සමහර අමතර CSS විචල්‍යයන් ද පවතී .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-darkCSS විචල්‍ය හරහා අභිරුචිකරණය කිරීම අපි අනුපිටපත් 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 විචල්යයන්

සියලුම navbar සඳහා විචල්‍යයන්:

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

සාස් ලූප්

ප්‍රතිචාරාත්මක navbar විස්තාරණය/හැලීම පන්ති (උදා, .navbar-expand-lg) සිතියම සමඟ ඒකාබද්ධ කර $breakpointsලූපයක් හරහා ජනනය කෙරේ 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;
          }
        }
      }
    }
  }
}