نوار منو در Bootstrap ورژن 4

نوار منو

نوار منو یک سربرگ ناوبری است که در بالای صفحه قرار دارد:

منو ساده

با استفاده از Bootstrap، یک نوار ناوبری می تواند بسته به اندازه صفحه نمایش گسترش یابد یا کم شود.

نوار ناوبری استاندارد با کلاس .navbar ایجاد می شود و به دنبال آن یک کلاس responsive ایجاد می شود: .navbar-expand-xl | lg | md | sm (نوار صفحه ای عمودی را روی صفحه نمایش بزرگ، بزرگ، متوسط و کوچک کوچک قرار می دهد).

برای اضافه کردن لینک ها درون نوار ناوبری، از عنصر <ul> با کلاس class="navbar-nav"  استفاده کنید. سپس عناصر <li> با یک کلاس nav-item همراه با یک عنصر <a> با کلاس nav-link اضافه کنید:

منو ساده
 <!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>

</nav> 
مشاهده مثال

منو عمودی

کلاس ".navbar-expand-xl | lg | md | sm را برای ایجاد نوار ناوبری عمودی حذف کنید:

منو عمودی
 <!-- A vertical navbar -->
<nav class="navbar bg-light">

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>

</nav> 
مشاهده مثال

منو رنگی

از هر کلاس کلاس bg استفاده کنید تا رنگ پس زمینه نوار ناوبری تغییر کند (.bg-primary، .bg-success، .bg-info، .bg-warning، .bg-danger، .bg-secondary، .bg -dark و .bg-light)

نکته: رنگ متن سفید را به تمام لینک های موجود در نوار هدایت با کلاس .navbar-dark اضافه کنید و یا برای اضافه کردن یک رنگ متن سیاه، از کلاس .navbar-light استفاده کنید.

نوار منو رنگی
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>

<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>

<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
مشاهده مثال

حالت فعال / غیرفعال: افزودن کلاس .active به یک عنصر <a> برای برجسته کردن لینک فعلی، یا کلاس .disabled نشان می دهد که لینک غیر قابل کلیک است.

برند/ لوگو

کلاس brandnavbar-branding برای برجسته کردن نام تجاری / آرم / نام پروژه صفحه شما استفاده می شود:

لوگو
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Logo</a>
  ...
</nav> 
مشاهده مثال

هنگام استفاده از کلاس brandnavbar-brand بر روی تصاویر، بوت استرپ 4 به طور خودکار تصویر را متناسب با نوار نویسی می کند.

لوگو و برند
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <a class="navbar-brand" href="#">
    <img src="bird.jpg" alt="Logo" style="width:40px;">
  </a>
  ...
</nav> 
مشاهده مثال

 در منو Collaps

اغلب، به ویژه در صفحات کوچک، شما می خواهید پیمایش های ناوبری را پنهان کنید و آنها را با یک دکمه ای که هنگام کلیک روی آنها نشان داده می شود، جایگزین کنید.

برای ایجاد یک نوار ناوبری قابل انعطاف، از یک دکمه با کلاس = "navbar-toggle"، data-toggle = "collapse" و data-target = "# thetarget" استفاده کنید. سپس محتوای محتوا (لینک ها و غیره) را در داخل یک عنصر div با کلاس = "collapse navbar-collapse" قرار دهید، سپس یک شناسه مطابق با هدف داده های دکمه: "thetarget".

Collapse در نوار منو
 <nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav> 
مشاهده مثال

منو کشویی

Navbars همچنین می توانید منوهای کشویی را نگه دارید:

کشویی
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Logo</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </li>
  </ul>
</nav> 
مشاهده مثال

منو فرم و دکمه

عنصر <form> را با  class = "form-inline" اضافه کنید تا ورودی ها و دکمه های یکپارچه گروه را دسته بندی کنید:

فرم در منو
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline" action="/action_page.php">
    <input class="form-control mr-sm-2" type="text" placeholder="Search">
    <button class="btn btn-success" type="submit">Search</button>
  </form>
</nav> 
مشاهده مثال

شما همچنین می توانید با استفاده از کلاس های ورودی دیگر مانند ininput-group-addon یک نماد یا متن کمک در کنار فیلد ورودی پیوست کنید. شما در مورد این کلاس ها در بخش ورودی بوت استرپ بیشتر بدانید.

فرم در منو
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline" action="/action_page.php">
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" placeholder="Username">
    </div>
  </form>
</nav> 
مشاهده مثال

متن منو

از کلاس classnavbar-text استفاده کنید تا کلیه عناصری که درون نوار ناوبری قرار دارند (که پیوندی ندارند) ترسیم شود

متن در نوار منو
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
  </ul>

  <!-- Navbar text-->
  <span class="navbar-text">
    Navbar text
  </span>

</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 و قبل از آن کار نمی کند (به عنوان موقعیت: نسبی).

منو چسبیده
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav> 
مشاهده مثال

 

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز