نوار ناوبری

مستندات و نمونه هایی برای هدر ناوبری قدرتمند و پاسخگو Bootstrap، نوار ناوبری. شامل پشتیبانی از نام تجاری، ناوبری و موارد دیگر، از جمله پشتیبانی از افزونه فروپاشی Bootstrap.

نوار ناوبری در بوت استرپ
نوار ناوبری روشن
<nav class="navbar navbar-expand-lg bg-light navbar-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="#navbarLightExample" aria-controls="navbarLightExample" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarLightExample">
      <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="#" id="navbarLightExampleDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu py-0" aria-labelledby="navbarLightExampleDropdown">
            <div class="bg-white dark__bg-1000 py-2 rounded-3"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a>
              <hr class="dropdown-divider" /><a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
        </li>
        <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
      </ul>
      <form class="d-flex"><input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" /><button class="btn btn-light" type="submit">Search</button></form>
    </div>
  </div>
</nav>
نوار تاریک
<nav class="navbar navbar-expand-lg bg-dark navbar-dark 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="#navbarSuccessExample" aria-controls="navbarSuccessExample" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarSuccessExample">
      <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="#" id="navbarSuccessExampleDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu py-0" aria-labelledby="navbarSuccessExampleDropdown">
            <div class="bg-white dark__bg-1000 py-2 rounded-3"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a>
              <hr class="dropdown-divider" /><a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
        </li>
        <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
      </ul>
      <form class="d-flex"><input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" /><button class="btn btn-light" type="submit">Search</button></form>
    </div>
  </div>
</nav>

ممنون که با فالکون خلق کردید

نسخه 3.4.0

تنظیمات

سبک سفارشی خود را تنظیم کنید

طرح رنگ بندی

حالت رنگ مناسب را برای برنامه خود انتخاب کنید.


RTL حالت

جهت زبان خود را تغییر دهید

RTL راهنما

چیدمان سیال

سیستم چیدمان کانتینر را تغییر دهید

راهنما سیال

موقعیت ناوبری

یک سیستم ناوبری مناسب برای برنامه وب خود انتخاب کنید


سبک نوار ناوبری عمودی

برای نوار ناوبری عمودی خود بین سبک ها جابه جا شوید

دیدن راهنما

چیزی که میبینی را دوست داری؟

برای خرید قالب فالکون از راستچین اقدام کنید.

خرید
شخصی سازی