Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

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

 

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت دوازدهم آموزش در زیر قرار داده شده است.

 

 

 

کار با منوی کاربردی Navigation Bars  در بوت استرپ                                       قسمت 12

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

با بوت استرپ می توانیم منویی داشته باشیم که علاوه بر زیبایی و کارایی سازگار با هر اندازه دستگاهی نیز می باشد یعنی کاملا ریسپانسیو و واکنش گرا

ما در این قسمت آموزش قصد داریم که با هم یک منوی Navigation Bars ایجاد کنیم

برای این کار ابتدا یک المان از نوع nav ایجاد کرده و کلاس "class="navbar navbar-default  را به آن اضافه میکنیم

 

<nav class="navbar navbar-default">

</nav>

مثال زیر نشان می دهد که چگونه یک Navigation Bars پیش فرض بوت استرپ را به صفحه وبمان اضافه کنیم

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

نتیجه اجرای مثال بالا :

 

6358266576402414981.png

 

 

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

برای این کار کافیست کلاس navbar-inverse. را جایگزین کلاس پیش navbar-default. فرض کنید

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

 نتیجه اجرای مثال بالا :

6358266595801024512.png

 

 

 

برای اینکه منو در زمان scroll صفحه از دید پنهان نشود میتوانیم آن را در بالا یا پایین صفحه ثابت(fix) کنیم

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

navbar-fixed-bottom. استفده می کنیم

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>

 

6358266612085355933.png

 

 

 

 

 

 

 

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

 

6358266631123944874.png

 

 

 

 

 

 

 

 

برای ایجاد زیر منو نیز می توانیم از کلاس Dropdown  استفاده کنیم که قبلا آموزش داده شده است

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

 نتیجه اجرای مثال بالا :

 

6358266643264739285.png

 

 

برای قرار دادن آیتم در سمت راست منو نیز می توانیم از کلاس navbar-right. استفاده می کنیم

برای این کار باید لیست جدا گانه ا بنویسیم و به آن کلاس navbar-right. را اختصاص بدهیم

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

 

 

6358266653648833226.png

 

 

 

برای اینکه بتوانیم در دستگاه هایی که سایز نمایشگر آن ها کوچک است از اشغال فضای اضافه توسط منو جلوگیری کنیم می توانیم از کلاس collapse. کمک بگیریم که در اینصورت منوی ما به صورت آیکنی کوچک نمایش داده خواهد شد که در صورت نیازبا کلیک بر روی آن می توانیم آیتم ها و زیر منو های خود را مشاهده کنیم

نکته : کلاس collapse. در قسمت های گذشته آموزش داده شده است لطفا برای یادآوری مراجعه کنید

به مثال زیر توجه کنید :

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

اجرا در حالت تمام صفحه در دستگاه های بزرگ مثل لپ تاپ :

 

6358266670494396737.png

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

 

6358266719538001878.png

 

 

 

 

 

 

 

 

 

 

 

 

 6358266722305460159.png

 

 پایان قسمت 12

 

 ادامه آموزش در قسمت سیزدهم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

 منبع : https://www.w3schools.com

 

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

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