آموزش کار با نوار هدایتی-مسیریابی بوت استرپ

۱ دیدگاه
آموزش کار با نوار هدایتی-مسیریابی بوت استرپ

آموزش کار با نوار هدایتی-مسیریابی بوت استرپ

توی این پست در خدمت دوستان هستیم با جلسه چهاردهم دوره آموزش متنی بوت استرپ به زبان فارسی. اینبار از وب سایت سورس باران در جلسه چهاردهم آموزش بوت استرپ آموزش کار با نوار هدایتی-مسیریابی بوت استرپ رو به اشتراک گذاشته ایم. و در این بخش با نوار هدایتی – مسیریابی بوت استرپ به خوبی آشنا خواهید شد.

نوار هدایتی-مسیریابی بوت استرپ :

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

1

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

یک نوار مسیریابی استاندارد توسط <nav class=”navbar navbar-default”> ساخته میشود. مثال زیر چگونگی اضافه کردن نوار مسیریابی ب بالای صفحه را نشان میدهد :

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <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>
  </div>
</nav>
...

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

این مشکل(در رابطه با صفحه نمایش های کوچک) در مثال آخر این مجموعه اموزشی ، حل خواهد شد.

 

نوار مسیریابی برعکس در بوت استرپ :

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

2

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

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <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>
  </div>
</nav>

 

نوار مسیریابی ثابت در بوت استرپ :

نوار مسیریابی را میتوان در بالا یا پایین صفحه ثابت قرار داد. یک نوار مسیریابی ثابت صرف نظر از اینکه در کجای صفحه قرار دارید در بالا یا پایین آن ثابت میماند .

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

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <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>
  </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="#">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>

 

نوار مسیر یابی با منوی کشویی در بوت استرپ :

3

نوار های مسیریابی نیز میتوانند دارای منوهای کشویی باشند، مثال بالا در قسمت page1 یک منوی کشویی استفاده میکند

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <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>
  </div>
</nav>

 

نوار مسیریابی راست چین شده در بوت استرپ :

4

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

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

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <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>
      <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>

 

نوار مسیریابی نزولی در بوت استرپ :

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

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

<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="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <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>
      <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>

لینک منبع : http://www.w3schools.com/bootstrap/bootstrap_navbar.asp

موفق و پیروز باشید

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

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات
برچسب ها: , , , , , , , , , ,
پکیج صفر تا صد جوملا به همراه آموزش طراحی وب سایت خبری

دسته بندی موضوعات

آخرین محصولات فروشگاه

آموزش پایتون و جنگوآموزش پروژه محور طراحی سایت با پایتون و جنگو مختص بازار کار 480 هزارتومان
طراحی سایت بدون کدنویسیپکیج آموزش صفر تا صد طراحی فروشگاه اینترنتی بدون کدنویسی 96 هزارتومان
پکیج صفر تا صد آموزش سئو و بهینه سازی بصورت عملی 180 هزارتومان
دوره آموزش پروژه محور طراحی وب سایت پزشک یاب با بوت استرپ 4 93 هزارتومان
پکیج آموزش پیشرفته ASP.NET Core + طراحی فروشگاه اینترنتی 128 هزارتومان
پکیج آموزش برنامه نویسی اندروید+ساخت اپلیکیشن مشابه دیجی کالا 89 هزارتومان
مشاهده همه

نظرات

  1. سلام، اگه این قبیل آموزش ها هم به صورت PDF باشند بهتر است.
    ممنون.

بازخوردهای خود را برای ما ارسال کنید

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.