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

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

یک نوار هدایتی درواقع یک 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>
...

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

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

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

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

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

Wiki

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

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

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

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

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

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>

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

: نوشته شده توسط احسان عباسی; بازدید: 12483

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

دیدگاه‌ها

+4 # saeid ebrahimi

با سلام و خسته نباشید.
میخاستم ازتون راهنمایی بگیرم که در بوت استرپ چجوری میتونم وقتی روی یک دکمه یا لینک a میرم، اون لینک یا دکمه به رنگ دیگه ای دربیاد.
میدونم که باید قسمت hover رو تنظیم کنم ولی در بوت استرپ نتونستم کاری انجام بدم. ممنون میشم .مرسی

+3 # امیر پهلوان صادق

سلام، رنک دکمه های شما بواسطه استفاده از کلاس btn-x اعمال می شود (بعنوان مثال btn-primary, btn-success) اما اگر می خواهید رنگ مورد نظر خودتان را اعمال کنید، می توانید بصورت زیر عمل کنید:
.btn-primary {
color: #fff;
background-colo r: #0495c9;
border-color: #357ebd; /*set the color you want here*/
}
.btn-primary:hover, .btn-primary:fo cus, .btn-primary:ac tive, .btn-primary.ac tive, .open>.dropdown -toggle.btn-pri mary {
color: #fff;
background-colo r: #00b3db;
border-color: #285e8e; /*set the color you want here*/
}

+3 # saravandadi

سلام ببخشید میشه بگید واسه اینکه نوار هدایتی از سمت راست شروع بشه جه کدی باید اضافه کنیم

+3 # احسان عباسی

سلام. اگه کد css راست چین کننده بوت استرپ رو بهش اضافه کنید، راست چین میشه. این کد در آدرس زیر قرار داره:
beyamooz.com/try_it_yourself/bootstrap/bootstrap-rtl.min_.css

+4 # ali bayervand

سلام و خسته نباشید
این دستور چه کاربردی دارد
div class="clearfix visible-lg"

+4 # مهرداد صلاحی

کلاس visible-lg باعث نمایش عنصر موردنظر در صفحات بزرگ میباشد.
کلاس clearfix هم باعث میشه که اگر عنصر قبل و بعد دارای float بود، اون رو ندید بگیره و به قول معروف تمیز کنه. و باعث بشه که عنصر بعدی، به صورت صحیح در جایی که باید قرار بگیره.

بازآوری فهرست دیدگاه‌ها