Bar ya Navigesheni ya Bootstrap 5

导航栏

导航栏是位于页面顶部的导航页眉：

基础的导航栏

通过使用 Bootstrap，导航栏可以扩展或折叠，具体取决于屏幕大小。

Tumia .navbar 类创建标准导航栏，然后是响应式折叠类：.navbar-expand-xxl|xl|lg|md|sm（在特大、超大、大、中型设备上水平排列，或小屏幕上垂直堆叠导航栏）。

如需在导航栏中添加链接，请使用 class="navbar-nav" 的

    元素（或
    ）。然后添加带有 .nav-item 类的
  • 元素，后跟带有 .nav-link 类的 <a> 元素：

    Mfano

    Jifunze tena

    • 垂直导航栏

    删除 .navbar-expand-* 类可创建始终垂直的导航栏：

    Mfano

    
<nav class="navbar bg-light">
  ...
</nav>

    Jifunze tena

    Mabara wa mabara kati

    Inaongeza .justify-content-center Inaongeza rangiaji wa mabara wa mabara kuwa kati:

    Mfano

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

    Jifunze tena

    Mabara ya rangia

    Tumia kwa uwanja wote .bg-color Inaongeza rangiaji wa mabara wa mabara wa mabara:

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

    Mafanikio:Tumia .navbar-dark Inaongeza rangiaji wa mtindo wa mabara wa mabara kwa viungo vyote, au tumia .navbar-light Inaongeza rangiaji wa mabara wa mabara.

    Mfano

    <!-- Mwili wa mabara, mtindo wa mabara wa miguu -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">活动</a>
      </li>
     <li class="nav-item">
        <a class="nav-link" href="#">Linki</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Linki</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">禁用</a>
      </li>
    </ul>
  </div>
</nav>
<!-- 黑色背景，白色文本 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- 蓝色背景，白色文本 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

    Jifunze tena

    活动/禁用状态：将 .active 类添加到 <a> 元素可突出显示当前链接，或添加 .disabled 类来指示链接不可点击。

    品牌 / 标志

    .navbar-brand 类用于突出显示页面的品牌/标志/项目名称：

    Mfano

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

    Jifunze tena

    如果将 .navbar-brand 类与图像一起使用时，Bootstrap 5 将自动设置图像样式，在垂直方向适应导航栏。

    Mfano

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

    Jifunze tena

    导航栏文本

    Tumia .navbar-text 类垂直对齐导航栏中非链接的任何元素（确保正确的内边距和文本颜色）。

    Mfano

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">导航栏文本</span>
  </div>
</nav>

    Jifunze tena

    很多时候，尤其是在小屏幕上，您希望隐藏导航链接并用一个按钮替代它们，并在单击该按钮时显示它们。

    如需创建可折叠导航栏，请使用已设置 class="navbar-toggler"、data-bs-toggle="collapse" 和 data-bs-target="#thetarget" 的按钮。然后将导航栏内容（链接等）包裹在 class="collapse navbar-collapse" 的 <div> 元素中，后跟与按钮的 data-bs-target 匹配的 id：thetarget"。

    Mfano

    <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="#">Linki</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Linki</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Linki</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

    Jifunze tena

    Mafanikio:Waweza kufungua pia: .navbar-expand-md Class inahifadhi likizo la viungo vya bara ya uharibifu na kuonyesha mibato ya kubonyeza chini.

    Bara ya uharibifu ya menu ya kubonyeza chini

    Bara ya uharibifu inaweza kuweka menu ya kubonyeza chini:

    Mfano

    <li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Menu ya kubonyeza chini</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Linki</a></li>
    <li><a class="dropdown-item" href="#">Linki nyingine</a></li>
    <li><a class="dropdown-item" href="#">Linki ya tatu</a></li>
  </ul>
</li>

    Jifunze tena

    Menu na mibato ya bara ya uharibifu

    Waweza kuongeza formu kwenye bara ya uharibifu:

    Mfano

    <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)">Kiungo</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Kiungo</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Kiungo</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Tafuta">
        <button class="btn btn-primary" type="button">Tafuta</button>
      </form>
    </div>
  </div>
</nav>

    Jifunze tena

    Muhtasari wa eneo la kina

    Muhtasari wa muhtasari pia inaweza kuwaonekana kwenye kikamilifu cha ukurasa au kizazi kwenye chini ya ukurasa.

    Muhtasari wa muhtasari hauwezi kuwaonekana kwa kutumia ukurasa wa kina kwenye eneo la kina (kikamilifu au kizazi kwenye chini ya ukurasa) kama inaingia kwenye ukurasa.

    .fixed-top Majina hii inaonesha kwa kuzingatia kwenye ukurasa kama inaingia kwenye chini ya ukurasaKikamilifu:

    Mfano

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

    Jifunze tena

    Tumia .fixed-bottom class kuondoa kwenye chini ya ukurasa:

    Mfano

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

    Jifunze tena

    Tumia .sticky-top Majina hii inaonesha kwa kuzingatia kwenye ukurasa kama inaingia kwenye eneo hiloKikamilifu。

    Mwongozo:Majina hii ha jaribu IE11 na kuzingatia zamani (inaonesha position:relative）。

    Mfano

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

    Jifunze tena