نوار منو در آریا بوت استرپ

طراحی منو بار با استفاده از آریا بوت استرپ برای سایتهای راست چین
آموزش کامپوننتهای بوت استرپ 1398/06/16 58 4 پیوند مستقیم

امروزه تقریبا اکثر وب سایتها از یک یا چندین نوار منو استفاده می‌کنند.

می‌توان با کامپوننت نوار منو در بوت استرپ 4، منوها را برای زمینه‌های مختلف طراحی نموده و طرح‌ها و جلوه‌های جذابی با استفاده از آن‌ها ایجاد نمود.

در نسخه‌ی جدید آریا بوب استرپ (نسخه 1.2 بر پایه بوت استرپ 4.3.1) می‌توانیم منوهای راست چین مناسب وب‌سایت‌های فارسی زبان طراحی نمود، به صورتی که نوشته‌ها در سمت راست و آیکون‌هایی مانند جستجو ثبت نام و ... در سمت چپ منو قرار گیرند، مانند تصویر زیر(فایل پیوست):

یکی دیگر از امکانات منوها در بوت استرپ واکنشگرا بودن منوها نسبت به سایز دستگاه‌هایی است که با آن وب سایت به نمایش در می‌آید و واکشنگرا بودن منوها به این معنا است که برای صفحات کوچکتر از مانیتورهای رومیزی (تبلت‌ها، موبایل‌ها و...) تبدیل به یک دکمه شده و نوار منو قرار می‌گیرد، در صورت کلیک روی آن، گزینه‌های منو به صورت لیست نمایش داده می‌شود، همانند تصویر زیر(فایل پیوست):

برای اضافه نمودن نوار منو راست چین و واکشنگرا بودن آن می‌توان از دستورات آریا بوت استرپ که در زیر آمده است استفاده نمود:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">نوار منو</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="true" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse show" id="navbarColor02" style="">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">صفحه نخست <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">ویژگی ها</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">قیمت</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">درباره</a>
            </li>
        </ul>
        <div class="form-inline my-2 my-lg-0">
            <input class="form-control ml-sm-2" type="text" placeholder="گزاره برای جستجو">
            <button class="btn btn-secondary my-2 my-sm-0" type="submit">جستجو</button>
        </div>
    </div>
</nav>

 

زیر منوها (DropDown)

برای ایجاد زیر منو می‌توانید از دستورات زیر استفاده نماید:

<nav class="navbar-dark bg-dark">
    <!-- Content here -->
    ...
    <li class="nav-item dropdown">
        <div class="dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria- expanded="false" href="#">
                ویژگی ها
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdown-menu">
                <a class="dropdown-item " href="#">لینک 1</a>
                <a class="dropdown-item " href="#">لینک 2</a>
                <a class="dropdown-item " href="#">لینک 3</a>
            </div>
        </div>
    </li>
</nav>

 

نمایش عکس یا لوگو در نوار منو

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

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">
        <img src="aryabootstrap.jpg" alt="Logo" style="width:40px;">
    </a>
    <!-- Content here --></nav>

 

کلام آخر

در این بخش از دوره های آموزش آریا بوت استرپ، شما را با نوار منو دربوت استرپ آشنا نمودیم و امیدواریم مطالب عنوان شده مورد استفاده قرار گیرد.


ثبت کننده:حسین خزائی تاریخ ثبت:1398/06/16
ویرایش کننده:آریا وندیداد تاریخ ویرایش:1398/06/16

موضوع: آموزش کامپوننتهای بوت استرپ
تعداد بازدید:58


تا کنون دیدگاهی نوشته نشده، اولین نفر باشید که دیدگاهش را بیان می کند.

دیدگاه شما

کاربر گرامی خواهشمند است به موارد زیر دقت فرمایید:
• لطفا فارسی تایپ کنید و با حروف لاتین (فینگلیش) ننویسید.
• دیدگاه های ارائه شده پس از بازبینی منتشر می‌شود.
• آدرس ایمیل در سایت نمایش داده نمی شود.