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>

ကိုယ်တိုင် ကြိုးစားလေ့ကျင့်

活动/禁用状态：将 .active 类添加到 元素可突出显示当前链接，或添加 .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">
    
      Avatar Logo 
    
  </div>
</nav>

ကိုယ်တိုင် ကြိုးစားလေ့ကျင့်

导航栏文本

အသုံးပြုပါ .navbar-text 类垂直对齐导航栏中非链接的任何元素（确保正确的内边距和文本颜色）。

အကျိုးဆက်

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

ကိုယ်တိုင် ကြိုးစားလေ့ကျင့်

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

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

元素中，后跟与按钮的 data-bs-target တွေ့ရှိသော id: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="Search">
        <button class="btn btn-primary" type="button">Search</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>

ကိုယ်တိုင် ကြိုးစားလေ့ကျင့်