منو ناوبری بوت استرپ – Bootstrap Navigation Bar

نوارهای ناوبری

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

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

نوار ناوبری استاندارد با کلاس <nav کلاس = “navbar navbar-default”> ایجاد شده است.

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

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
...

<a class="navbar-brand" href="#">WebSiteName</a>

</div>

</ul>

</div>

</nav>

...

توجه: تمام مثال هایی که در این صفحه وجود دارد، یک نوار ناوبری را نشان می دهد که بر روی صفحه نمایش های کوچک از فضای بسیار زیادی برخوردار است (با این وجود، نوار ناوبری روی صفحه نمایش بزرگ بر روی یک خط قرار می گیرد) زیرا Bootstrap ریسپانسیو است. این مشکل (با صفحه نمایش کوچک) در آخرین مثال در این صفحه حل خواهد شد.

مقالات

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

Inverted Navigation Bar

اگر سبک ستون نوار ناوبری پیش فرض را دوست ندارید، Bootstrap یک جایگزین، نوار سیاه را فراهم می کند:

فقط کلاس پیش فرض را به نام .avbar-inverse تغییر دهید:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

<a class="navbar-brand" href="#">WebSiteName</a>

</div>

</ul>

</div>

</nav>

نوار ناوبری با کشیدن

Navigation Bar With Dropdown

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

مثال زیر یک دکمه کشویی برای دکمه”page 1″ اضافه می کند:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

<a class="navbar-brand" href="#">WebSiteName</a>

</div>

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1

</ul>

</li>

</ul>

</div>

</nav>

نوار ناوبری راست

Right-Aligned Navigation Bar

او کلاس classnavbar-right برای دکمه های نوار ناوبری سمت راست استفاده می شود.

در مثال زیر یک دکمه “ثبت نام” و یک دکمه “ورود” را به سمت راست در نوار ناوبری وارد کنید. ما همچنین در هر دو دکمه جدید glyphicon اضافه می کنیم:

مثال:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</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>
</nav>

<a class="navbar-brand" href="#">WebSiteName</a>

</div>

</ul>

<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

</ul>

</div>

</nav>

برای اضافه کردن دکمه های داخل نوار ناوبری، کلاس .navbar-btn را در یک دکمه بوت استرپ اضافه کنید:

مثال:

&lt;nav class="navbar navbar-inverse">
  &lt;div class="container-fluid">
    &lt;div class="navbar-header">
      &lt;a class="navbar-brand" href="#">WebSiteName&lt;/a>
    &lt;/div>
    &lt;ul class="nav navbar-nav">
      &lt;li class="active">&lt;a href="#">Home&lt;/a>&lt;/li>
      &lt;li>&lt;a href="#">Link&lt;/a>&lt;/li>
      &lt;li>&lt;a href="#">Link&lt;/a>&lt;/li>
    &lt;/ul>
    &lt;button class="btn btn-danger navbar-btn">Button&lt;/button>
  &lt;/div>
&lt;/nav>

<a class="navbar-brand" href="#">WebSiteName</a>

</div>

</ul>

<button class="btn btn-danger navbar-btn">Button</button>

</div>

</nav>

Navbar Forms

برای اضافه کردن عناصر فرم در داخل نوار ناوبری، کلاس .navbar-form را به یک عنصر فرم و یک ورودی (ها) اضافه کنید. توجه داشته باشید که ما یک کلاس form group را به ظرف div که حاوی input است اضافه کرده ایم. این اضافه می کند padding مناسب اگر شما بیش از یک input داشته (شما می توانید در بخش قورم آن را بخوانید).

&lt;nav class="navbar navbar-inverse">
  &lt;div class="container-fluid">
    &lt;div class="navbar-header">
      &lt;a class="navbar-brand" href="#">WebSiteName&lt;/a>
    &lt;/div>
    &lt;ul class="nav navbar-nav">
      &lt;li class="active">&lt;a href="#">Home&lt;/a>&lt;/li>
      &lt;li>&lt;a href="#">Page 1&lt;/a>&lt;/li>
      &lt;li>&lt;a href="#">Page 2&lt;/a>&lt;/li>
    &lt;/ul>
    &lt;form class="navbar-form navbar-left" action="/action_page.php">
      &lt;div class="form-group">
        &lt;input type="text" class="form-control" placeholder="Search">
      &lt;/div>
      &lt;button type="submit" class="btn btn-default">Submit&lt;/button>
    &lt;/form>
  &lt;/div>
&lt;/nav>

<a class="navbar-brand" href="#">WebSiteName</a>

</div>

</ul>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

</div>

</nav>

شما همچنین می توانید کلاس های .input group و .input-group-addon را برای پیوست یک نماد یا متن کمک در کنار فیلد ورودی استفاده کنید. شما در مورد این کلاس ها در بخشbootstrap input بیشتر آشنا خواهید شد.

&lt;form class="navbar-form navbar-left" action="/action_page.php">
  &lt;div class="input-group">
    &lt;input type="text" class="form-control" placeholder="Search">
    &lt;div class="input-group-btn">
      &lt;button class="btn btn-default" type="submit">
        &lt;i class="glyphicon glyphicon-search">&lt;/i>
      &lt;/button>
    &lt;/div>
  &lt;/div>
&lt;/form>

</button>

</div>

</form>

نوشته ناوبری Navbar Text

استفاده از کلاس .navbar-text برای عمودی کردن هر عنصر درون نوار ناوبری که لینک نیستند (تضمین پوشش مناسب و رنگ متن). استفاده می شود.

&lt;nav class="navbar navbar-inverse">
  &lt;ul class="nav navbar-nav">
    &lt;li>&lt;a href="#">Link&lt;/a>&lt;/li>
    &lt;li>&lt;a href="#">Link&lt;/a>&lt;/li>
  &lt;/ul>
  &lt;p class="navbar-text">Some text&lt;/p>
&lt;/nav>

</ul>

</nav>

منو ناوبری چسپیده Fixed Navigation Bar

نوار ناوبری نیز می تواند در بالا یا پایین صفحه تنظیم شود.

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

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

مثال

&lt;nav class="navbar navbar-inverse navbar-fixed-top">
  &lt;div class="container-fluid">
    &lt;div class="navbar-header">
      &lt;a class="navbar-brand" href="#">WebSiteName&lt;/a>
    &lt;/div>
    &lt;ul class="nav navbar-nav">
      &lt;li class="active">&lt;a href="#">Home&lt;/a>&lt;/li>
      &lt;li>&lt;a href="#">Page 1&lt;/a>&lt;/li>
      &lt;li>&lt;a href="#">Page 2&lt;/a>&lt;/li>
      &lt;li>&lt;a href="#">Page 3&lt;/a>&lt;/li>
    &lt;/ul>
  &lt;/div>
&lt;/nav>

<a class="navbar-brand" href="#">WebSiteName</a>

</div>

</ul>

</div>

</nav>

کلاس navbar-fixed-bottom باعث می شود نوار ناوبری در پایین قرار گیرد:

&lt;nav class="navbar navbar-inverse navbar-fixed-bottom">
  &lt;div class="container-fluid">
    &lt;div class="navbar-header">
      &lt;a class="navbar-brand" href="#">WebSiteName&lt;/a>
    &lt;/div>
    &lt;ul class="nav navbar-nav">
      &lt;li class="active">&lt;a href="#">Home&lt;/a>&lt;/li>
      &lt;li>&lt;a href="#">Page 1&lt;/a>&lt;/li>
      &lt;li>&lt;a href="#">Page 2&lt;/a>&lt;/li>
      &lt;li>&lt;a href="#">Page 3&lt;/a>&lt;/li>
    &lt;/ul>
  &lt;/div>
&lt;/nav>

<a class="navbar-brand" href="#">WebSiteName</a>

</div>

</ul>

</div>

</nav>

Collapsing The Navigation Bar

نوار ناوبری اغلب فضای زیادی را بر روی یک صفحه کوچک می گیرد.

ما باید نوار ناوبری را مخفی کنیم و فقط زمانی که مورد نیاز است نشان داده شود.

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

مثال:

&lt;nav class="navbar navbar-inverse">
  &lt;div class="container-fluid">
    &lt;div class="navbar-header">
      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        &lt;span class="icon-bar">&lt;/span>
        &lt;span class="icon-bar">&lt;/span>
        &lt;span class="icon-bar">&lt;/span> 
      &lt;/button>
      &lt;a class="navbar-brand" href="#">WebSiteName&lt;/a>
    &lt;/div>
    &lt;div class="collapse navbar-collapse" id="myNavbar">
      &lt;ul class="nav navbar-nav">
        &lt;li class="active">&lt;a href="#">Home&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#">Page 1&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#">Page 2&lt;/a>&lt;/li> 
        &lt;li>&lt;a href="#">Page 3&lt;/a>&lt;/li> 
      &lt;/ul>
      &lt;ul class="nav navbar-nav navbar-right">
        &lt;li>&lt;a href="#">&lt;span class="glyphicon glyphicon-user">&lt;/span> Sign Up&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#">&lt;span class="glyphicon glyphicon-log-in">&lt;/span> Login&lt;/a>&lt;/li>
      &lt;/ul>
    &lt;/div>
  &lt;/div>
&lt;/nav>

</button>

<a class="navbar-brand" href="#">WebSiteName</a>

</div>

</ul>

<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

</ul>

</div>

</nav>

5/5 - (1 امتیاز)

منو ناوبری بوت استرپ – Bootstrap Navigation Bar

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

نوار ناوبری با کشیدن

نوار ناوبری راست

Navbar Forms

نوشته ناوبری Navbar Text

منو ناوبری چسپیده Fixed Navigation Bar

Collapsing The Navigation Bar

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

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

نوار ناوبری با کشیدن

نوار ناوبری راست

Navbar Forms

نوشته ناوبری Navbar Text

منو ناوبری چسپیده Fixed Navigation Bar

Collapsing The Navigation Bar

مطالب زیر را حتما مطالعه کنید

افزونه و کلاس Carousel در بوت استرپ bootstrap

کلاس collapse در بوت استرپ bootstrap

کلاس jumbotron در بوت استرپ

فیلترهای بوت استرپ

افزونه Affix بوت استرپ

افزونه Scrollspy بوت استرپ

دیدگاهتان را بنویسید لغو پاسخ