آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش BootStrap Navigation Bar

دوره های مرتبط با این مقاله

Basic Navigation Bar

Navigation Bar عبارت است از یک عنوان یا سرفصلِ Navigation که در بالای صفحه قرار می گیرد:
با استفاده از BootStrap، یک ستونِ navigation بسته به سایزِ صفحه نمایشگر، می تواند extend یا collapse شود.
یک ستونِ navigation استاندارد با <nav class="navbar navbar-default"> ساخته می شود.
مثال پایین نشان می دهد که چگونه یک ستونِ navigation را بالای صفحه اضافه کنیم:

تمام مثال های این صفحه نشان می دهند که ستونِ navigation فضای بسیار بزرگی از مانیتوهای کوچک را اشغال می کند (هرچند که ستون navigation در صفحاتِ بزرگ بر روی یک خط مجزا قرار می گیرد، زیرا BootStrap دارای خاصیتِ responsive می باشد). این مشکلِ صفحاتِ کوچک، از طریقِ آخرین مثالِ این درس برطرف شده است.

ستونِ Navigation معکوس (Inverted Navigation Bar)

در صورتی که علاقه ای به استایلِ پیش فرضِ ستونِ navigation ندارید، BootStrap یک ستونِ جایگزینِ مشکی را فراهم نموده است.
برای این منظور، باید کلاسِ .navbar-default را درونِ .navbar-inverse قرار داد:

ستونِ Navigation با منوی کشویی (Dropdown)

ستونِ Navigation می تواند دارای منوی کشویی نیز باشد.
مثال پایین یک منوی کشویی (dropdown) را برای دکمه ی Page1 اضافه می کند:

ستونِ راست چین (Right-Aligned Navigation)

برای راست چین کردنِ ستونِ navigation از کلاسِ .navbar-right استفاده می شود.
در مثال زیر، یک دکمه ی Sign Up و یک دکمه ی Login را در سمتِ راستِ ستون وارد کرده ایم. همچنین بر روی این دو دکمه، یک glyphicon را اضافه کرده ایم:

دکمه ها (Buttons) در ستون Navigation

به منظور افزودن دکمه ها در ستون navigation، کلاس .navbar-btn را بر روی یکی از دکمه های Bootstrap اضاففه نمایید.

نمونه 5

<nav class="navbar navbar-inverse">
  <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="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    <button class="btn btn-danger navbar-btn">Button</button>
  </div>
</nav>

امتحان کنید

Form (فرم) ها در ستون Navigation

به منظور افزودن عنصر form در درون یک ستون پیمایش، کلاس .navbar-form را به عنصر یک فرم افزوده، و یک عنصر input(s) را نیز بیفزایید. توجه داشته باشید که کلاس .form-group را به یک ظرف div افزوده ایم که شامل input می باشد. در صورتی که خواستار بیش از یک input باشید، مقداری padding نیز افزوده می شود.

همچنین، به منظور افزودن یک آیکون و یا کمک به افزودن متن در کنار input field، می توانید دو کلاس .input-group و .input-group-addon را نیز اضافه نمایید. در فصل مربوط به Bootstrap Input بیشتر به این مبحث پرداخته خواهد شد.

Text (متن) در ستون Navigation

به منظور چینش عمودی هر عنصر غیر لینکی در درون ستون پیمایش، از کلاس .navbar-text استفاده نمایید:

نمونه 8

امتحان کنید

ستونِ Navigation ثابت (Fixed Navigation Bar)

ستونِ Navigation می تواند در بالا یا پایینِ صفحه نیز ثابت شود. بدونِ در نظر گرفتنِ page scroll، نوار navigation در یک position ثابت (بالا یا پایین)، به صورتِ visible باقی می ماند.
کلاسِ .navbar-fixed-top ستونِ navigation را در بالای صفحه fix می کند:

کلاسِ .navbar-fixed-bottom ستونِ navigation را در پایین صفحه fix می کند:

Collapse کردنِ ستونِ Navigation

ستونِ Navigation فضای زیادی از صفحه ی نمایش کوچک را در بر می گیرد. بنابراین، باید این ستون را hidden نموده و تنها در مواقع نیاز، آن را نمایش دهیم.
در مثال پایین، ستونِ navigation جایگزینِ یک دکمه در گوشه ی راستِ بالای صفحه می شود. تنها زمانی که بر روی دکمه کلیک می شود، ستونِ navigation نمایش داده خواهد شد:

نمونه 11

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

امتحان کنید
  • 2684
  •    904
  • تاریخ ارسال :   1395/10/14

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال
کاربر میهمان1395/10/14

تشکر

سایت بسیار عالی دارید.

پاسخ مدیر

ممنون از حسن انتخاب شما


آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .