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

نوار منو در آریا بوت استرپامروزه تقریبا اکثر وب سایت‌ها از یک یا چندین نوار منو استفاده می‌کنند.می‌توان با کامپوننت نوار منو در بوت استرپ 4، منوها را برای زمینه‌های مختلف طراحی نموده و طرح‌ها و جلوه‌های جذابی با استفاده از آن‌ها ایجاد نمود.در نسخه‌ی جدید آریا بوب استرپ (نسخه 1.2 بر پایه بوت استرپ 4.3.1) می‌توانیم منوهای راست چین مناسب وب‌سایت‌های فارسی زبان طراحی نمود، به صورتی که نوشته‌ها در سمت راست و آیکون‌هایی مانند جستجو ثبت نام و ... در سمت چپ منو قرار گیرند، مانند تصویر زیر:تصویر 1 - نمونه نوار منوی ساده و تیره در آریا بوت استرپیکی دیگر از امکانات منوها در بوت استرپ واکنشگرا بودن منوها نسبت به سایز دستگاه‌هایی است که با آن وب سایت به نمایش در می‌آید و واکشنگرا بودن منوها به این معنا است که برای صفحات کوچکتر از مانیتورهای رومیزی (تبلت‌ها، موبایل‌ها و...) تبدیل به یک دکمه شده و نوار منو قرار می‌گیرد، در صورت کلیک روی آن، گزینه‌های منو به صورت لیست نمایش داده می‌شود، همانند تصویر زیر:تصویر 2- نمایش دکمه منو در صفحه نمایش کوچکتر از مانیتورهای رومیزی (وضعیت بسته بودن منو)تصویر 3- نمایش گزینه‌های منو در صفحه نمایش کوچکتر از مانیتورهای رومیزی (وضعیت باز شدن منو)برای اضافه نمودن نوار منو راست چین و واکشنگرا بودن آن می‌توان از دستورات آریا بوت استرپ که در زیر آمده است استفاده نمود:<nav class=&quotnavbar navbar-expand-lg navbar-dark bg-dark&quot> <a class=&quotnavbar-brand&quot href=&quot#&quot>نوار منو</a> <button class=&quotnavbar-toggler&quot type=&quotbutton&quot data-toggle=&quotcollapse&quot data-target=&quot#navbarColor02&quot aria-controls=&quotnavbarColor02&quot aria-expanded=&quottrue&quot aria-label=&quotToggle navigation&quot> <span class=&quotnavbar-toggler-icon&quot></span> </button> <div class=&quotnavbar-collapse collapse show&quot id=&quotnavbarColor02&quot style=&quot&quot> <ul class=&quotnavbar-nav ml-auto&quot> <li class=&quotnav-item active&quot> <a class=&quotnav-link&quot href=&quot#&quot>صفحه نخست <span class=&quotsr-only&quot>(current)</span></a> </li> <li class=&quotnav-item&quot> <a class=&quotnav-link&quot href=&quot#&quot>ویژگی ها</a> </li> <li class=&quotnav-item&quot> <a class=&quotnav-link&quot href=&quot#&quot>قیمت</a> </li> <li class=&quotnav-item&quot> <a class=&quotnav-link&quot href=&quot#&quot>درباره</a> </li> </ul> <div class=&quotform-inline my-2 my-lg-0&quot> <input class=&quotform-control ml-sm-2&quot type=&quottext&quot placeholder=&quotگزاره برای جستجو&quot> <button class=&quotbtn btn-secondary my-2 my-sm-0&quot type=&quotsubmit&quot>جستجو</button> </div> </div> </nav>زیر منوها (DropDown)برای ایجاد زیر منو می‌توانید از دستورات زیر استفاده نماید:<nav class=&quotnavbar-dark bg-dark&quot> <!-- Content here --> ... <li class=&quotnav-item dropdown&quot> <div class=&quotdropdown&quot> <a class=&quotnav-link dropdown-toggle&quot data-toggle=&quotdropdown&quot aria-haspopup=&quottrue&quot aria- expanded=&quotfalse&quot href=&quot#&quot> ویژگی ها </a> <div class=&quotdropdown-menu&quot aria-labelledby=&quotdropdown-menu&quot> <a class=&quotdropdown-item &quot href=&quot#&quot>لینک 1</a> <a class=&quotdropdown-item &quot href=&quot#&quot>لینک 2</a> <a class=&quotdropdown-item &quot href=&quot#&quot>لینک 3</a> </div> </div> </li> </nav>تصویر 4- زیرمنو با مدل DropDown در نوار منونمایش عکس یا لوگو در نوار منوبرای نمایش عکس یا لوگو در نوار منو از دستورات زیر استفاده می‌کنیم:<nav class=&quotnavbar navbar-expand-lg navbar-dark bg-dark&quot> <a class=&quotnavbar-brand&quot href=&quot#&quot> <img src=&quotaryabootstrap.jpg&quot alt=&quotLogo&quot style=&quotwidth:40px;&quot> </a> <!-- Content here --> … </nav>تصویر 5- نمایش عکس یا لوگو در نوار منوکلام آخردر این بخش از دوره های آموزش آریا بوت استرپ، شما را با نوار منو دربوت استرپ آشنا نمودیم و امیدواریم مطالب عنوان شده مورد استفاده قرار گیرد.(http://www.AryaVandidad.com) شرکت توسعه فناوری اریا وندیداد