نوار پیمایشی navbar

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

مثال

در زیر یک نمونه از نوار پیمایشی را مشاهده میکنید که در یک محدوده قرار داده شده است.

LTR

RTL

سمت برند

برای نمایش برند یا نام سایت، شما میتوانید از هر موضوعی استفاده کنید، ولیکن کلاس navbar-brand حالت بهتری برای نمایش ایجاد میکند.
شما میتوانید از متن، یا تصویر و یا هر گزینه دیگری استفاده کنید.
استفاده از لینک برای برند و آدرس به صفحه اصلی، میتواند باعث حذف شدن، کلید خانه در ناوگان پیمایشی باشد، البته شما میتوانید، آن را لینکدار نکنید، و یا اگر کردید، به هر آدرسی که مد نظر است، منتقل کنید.

LTR

RTL

محفظه جمع شونده

مهمترین خصوصیت یک نوار پیمایشی، تشخیص اندازه تصویر و نمایش مناسب ناوگان پیمایشی و فرمهاست، برای این منظور، شما باید به سیستم بگویید، در صورتیکه اندازه مرورگر حداکثر در اندازه s یعنی 576px قرار گرفت، بایستی چه قسمتی را مخفی نماید.

در هر صورت باید برند نمایش داده شود، پس بعد از تعریف برند یک div با کلاس navbar-collapse تعریف کنید، هر آنچه در این محفظه قرار گیرد، وضعیت نمایش آن در اندازه های مختلف تغییر خواهد کرد.

اگر اندازه مرورگر کوچک شد و محفظه منو ها مخفی شد، چگونه میتوان به آنها دسترسی داشت؟ اینجاست که به کمک یک کمه و خصوصت collapse به منظور مورد نظر خود خواهیم رسید.

همانطور که در بالاتر گفته شد، برای تعریف محفظه یک div با کلاس navbar-collapse لازم است، این کلاس وظیفه مدیریت نمایش ناوگان به صورت عمودی یا افقی را در اندازه های مختلف دارد.
برای تعریف دکمه باز کننده و جمع کننده یک button با نوع wn-type="collapse" نیاز است، سپس در خصوصیت target="navbar-collapse-id" بایستی id محفظه یا کلاس مرتبط با آن آورده شود.
تا اینجا یک دکمه دارید که همیشه نمایان است و با کلیک بر روی آن محفظه مخفی و نمایان میشود.
چون نیاز نیست همیشه این دکمه نمایان باشد و همچنین اندازه و شکل آن متفاوت باشد، بایستی حتما کلاس navbar-toggler به آن نسبت داده شود.
اگر میخواهید آیکون خاص یا متنی داشته باشید میتوانید درون دکمه آن شکل یا متن را وارد کنید، ولی اگر میخواهید به صورت پیش فرض علامت سه خط نمایش داده شود، از کلاس toggler-icon استفاده کنید.

با تغییر اندازه مرورگر، نحوه عملکرد را مشاهده کنید.

LTR

RTL

ناوگان پیمایشی

برای نمایش ناوگان پیمایشی کافیست یک ناوگان داشته باشید. موارد را طبق استانداردهای گفته شده پیاده سازی کنید.
اگر میخواهید چند ناوگان داشته باشید، یا ناوگان و یک متن و یا فرم ورودی اطلاعات مثلا جستجو، یا مجموعه ای از دکمه ها داشته باشید و بین آنها فاصله قرار گیرد، از سیستم فاصله گذاری استفاده کنید، برای مثال m-ie-auto به صورت خودکار فاصله بین ناوگان و محفظه بعدی را تنظیم خواهد کرد.

با تغییر اندازه مرورگر، نحوه عملکرد را مشاهده کنید.

LTR

RTL

انواع محفظه نمایشی

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

Normal

Middle

Small

رنگ و اندازه

این موضوع نیز همانند دیگر موضوعات با تنظیم اندازه و تم، تغییرات را میتوان اعمال کرد.

primary s-m

secondary s-s

محل ثابت

اگر میخواهید این نوار در یک محل ثابت بنماند، آن را درون یک محفظه دیگر قرار داده و آن محفظه را به صورت ثابت در بالا یا پایین قرار دهید. توجه داشته باشید، در صورت ثابت نگه داشتن آن در بالا، ممکن است، متن اصلی سایت زیر آن قرار بگیرد، پس باید با توجه به تکنیک های فاصله گذاری فاصله ای مناسب از بالا به کادر خود دهید تا هیچ گاه زیر این نوار قرار نگیرد..


    <div class="fixed-top">
        <div class="navbar light">
            ...
        </div>
    </div>

    <div class="fixed-bottom">
        <div class="navbar light">
            ...
        </div>
    </div>

    <div class="sticky-top">
        <div class="navbar light">
            ...
        </div>
    </div>

    <div class="sticky-bottom">
        <div class="navbar light">
            ...
        </div>
    </div>

اگر میخواهید از محل ثابت استفاده کنید و زمانیکه صفحه اسکرول خورد، نوار شفافتر شود، میتوانید از جاوا اسکریپت و ماژول پیاده سازی شده استفاده کنید.
برای آنکه بتوانید به راحتی این عمل را انجام دهید، ابتدا یک bidi با کلاس sticky-top یا sticky-bottom و wn-type='sticky' تعریف کنید.
زمانیکه محفظه از جای خود جدا شد، سیستم کلاس sticky-onfly را اضافه میکند، و ما نیز برای nav آن کلاس را پیاده سازی کردیم. اگر شما نیز برای موضوعات دیگر میخواهید کافیست آن کلاس را برای هر موضوعی پیاده سازی کنید.


    <div class="sticky-top" wn-type="sticky">
        <div class="navbar light">
            ...
        </div>
    </div>