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

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>
...

<body>

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

</div>

<div>

</ul>

</div>

</nav>

...

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

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

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

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

کافیست کلاس .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>

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

</div>

<div>

</ul>

</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>

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

</div>

<div>

</ul>

</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>

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

</div>

</ul>

</div>

</nav>

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

نوار های مسیریابی نیز میتوانند دارای منوهای کشویی باشند، مثال بالا در قسمت 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>

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

</div>

<div>

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

</ul>

</li>

</ul>

</div>

</nav>

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

کلاس .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>

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

</div>

<div>

</ul>

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

</ul>

</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>

</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>

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

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

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

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

نظرات

برچسب ها: آموزش بوت استرپ به زبان فارسی, آموزش کامل بوت استرپ

صابر بوستانی

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

دوره آموزش طراحی وب سایت مدرسه با PHP و MySql

منبع : سورس باران
رمز فايل : www.sourcebaran.com
انتشار: ۲ تیر ۱۳۹۵

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

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

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

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

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

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

صابر بوستانی

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط