تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده
سبد (0)

تبلیغات

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

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

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>

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

دیدگاه‌ها  

+2 # saeid ebrahimi 1396-04-26 23:26
با سلام و خسته نباشید.
میخاستم ازتون راهنمایی بگیرم که در بوت استرپ چجوری میتونم وقتی روی یک دکمه یا لینک a میرم، اون لینک یا دکمه به رنگ دیگه ای دربیاد.
میدونم که باید قسمت hover رو تنظیم کنم ولی در بوت استرپ نتونستم کاری انجام بدم. ممنون میشم .مرسی
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1396-04-27 08:44
سلام، رنک دکمه های شما بواسطه استفاده از کلاس 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*/
}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # saravandadi 1395-11-12 16:29
سلام ببخشید میشه بگید واسه اینکه نوار هدایتی از سمت راست شروع بشه جه کدی باید اضافه کنیم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-11-12 17:24
سلام. اگه کد css راست چین کننده بوت استرپ رو بهش اضافه کنید، راست چین میشه. این کد در آدرس زیر قرار داره:
http://beyamooz.com/try_it_yourself/bootstrap/bootstrap-rtl.min_.css
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # ali bayervand 1394-08-20 17:34
سلام و خسته نباشید
این دستور چه کاربردی دارد
div class="clearfix visible-lg"
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-08-20 20:09
کلاس visible-lg باعث نمایش عنصر موردنظر در صفحات بزرگ میباشد.
کلاس clearfix هم باعث میشه که اگر عنصر قبل و بعد دارای float بود، اون رو ندید بگیره و به قول معروف تمیز کنه. و باعث بشه که عنصر بعدی، به صورت صحیح در جایی که باید قرار بگیره.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی