بررسی نوار هدایتی در بوت استرپ

چاپ

نوارهای هدایتی

Wiki

یک نوار هدایتی درواقع یک header می باشد که در بالای یک صفحه، قرار داده شده است.

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

یک نوار هدایتی استاندارد به وسیله ی عبارت <nav class="navbar navbar-default">  ایجاد می شود.

مثال زیر نشان می دهد که چگونه، یک نوار هدایتی را به بالای یک صفحه اضافه کنیم:

مثال (نوار هدایتی)

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">نام وبسایت</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">خانه</a></li>
        <li><a href="#">صفحه 1</a></li>
        <li><a href="#">صفحه 2</a></li> 
        <li><a href="#">صفحه 3</a></li> 
      </ul>
    </div>
  </div>
</nav>
...

خودتان امتحان کنید »
Note

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

این مشکل در دستگاه های کوچک  را در آخر این مقاله، حل خواهیم نمود. 

 

نوار هدایتی جایگزین

Wiki

در صورتی که استایل نوار هدایتی پیش فرض را نمی پسندید، بوتسترپ برای آن یک جایگزین دارد.

تنها کافی است که کلاس navbar-default. را به کلاس navbar-inverse. تغییر دهید:

مثال (نوار هدایتی)

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">نام وبسایت</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">خانه</a></li>
        <li><a href="#">صفحه 1</a></li>
        <li><a href="#">صفحه 2</a></li> 
        <li><a href="#">صفحه 3</a></li> 
      </ul>
    </div>
  </div>
</nav>

خودتان امتحان کنید »

نوار هدایتی ثابت

Wiki

نوار هدایتی همچنین می تواند در بالا یا پایین یک صفحه، به صورت ثابت قرار بگیرد.

یک نوار هدایتی ثابت، همواره در یک مکان ثابت(بالا یا پایین صفحه) مستقل از اسکرول کردن، قابل رویت می باشد.

کلاس navbar-fixed-top. یک نوار هدایتی ثابت را در بالای صفحه ایجاد می کند:

مثال (نوار هدایتی)

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">نام وبسایت</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">خانه</a></li>
        <li><a href="#">صفحه 1</a></li>
        <li><a href="#">صفحه 2</a></li> 
        <li><a href="#">صفحه 3</a></li> 
      </ul>
    </div>
  </div>
</nav>

خودتان امتحان کنید »

کلاس navbar-fixed-bottom. یک نوار هدایتی ثابت را در پایین ایجاد می کند:

مثال (نوار هدایتی)

<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">نام وبسایت</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">خانه</a></li>
        <li><a href="#">صفحه 1</a></li>
        <li><a href="#">صفحه 2</a></li> 
        <li><a href="#">صفحه 3</a></li> 
      </ul>
    </div>
  </div>
</nav>

خودتان امتحان کنید »

نوار هدایتی به همراه منوی کشویی

Wiki

نوار های هدایتی همچنین می توانند منوهای کشویی را در بر داشته باشند.

مثال زیر یک منوی کشویی را برای دکمه ی "Page 1" اضافه می کند:

مثال (نوار هدایتی)

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">نام وبسایت</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">خانه</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">صفحه 1
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">صفحه 1-1</a></li>
            <li><a href="#">صفحه 2-1</a></li>
            <li><a href="#">صفحه 3-1</a></li> 
          </ul>
        </li>
        <li><a href="#">صفحه 2</a></li> 
        <li><a href="#">صفحه 3</a></li> 
      </ul>
    </div>
  </div>
</nav>

خودتان امتحان کنید »

نوار هدایتی راست چین شده

Wiki

با استفاده از کلاس navbar-right. می توان دکمه های نوار هدایتی را، راست چین نمود.

 در مثال زیر یک دکمه ی "Sign Up" و یک دکمه ی "Login" را به سمت راست نوار هدایتی اضافه می کنیم. همچنین به دکمه های جدید، آیکن نمادین اضافه می کنیم:

مثال (نوار هدایتی)

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">نام وبسایت</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">خانه</a></li>
        <li><a href="#">صفحه 1</a></li>
        <li><a href="#">صفحه 2</a></li> 
        <li><a href="#">صفحه 3</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

خودتان امتحان کنید »

کوچک کردن نوار هدایتی

Wiki

نوار هدایتی در وسایل کوچک، فضای بسیار زیادی را اشغال می کند.

ما باید نوار هدایتی را محو کنیم و تنها در وقت نیاز آن را نمایش دهیم.

در مثال زیر نوار هدایتی، با یک دکمه در گوشه ی بالا و سمت راست جایگزین شده است. تنها هنگامی که دکمه کلیک می شود، نوار هدایتی نمایش داده می شود:

مثال (نوار هدایتی)

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">نام وبسایت</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">خانه</a></li>
        <li><a href="#">صفحه 1</a></li>
        <li><a href="#">صفحه 2</a></li> 
        <li><a href="#">صفحه 3</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

خودتان امتحان کنید »