Navbar ها در بوت استرپ

دسته بندی :اخبار سایت 7 می 2023 علیرضا بابامرادی 291

Navigation تب دار

نه تنها می توانید یک ناوبری تب دار ایجاد کنید، بلکه با استفاده از افزونه جاوا اسکریپت می توانید
همچنین با باز کردن پنجره های مختلف محتوا، تعامل را اضافه کنید (شکل 3-18 را ببینید). ساختن
برگه‌های ناوبری، یک tab-pane با یک شناسه منحصربه‌فرد برای هر برگه ایجاد کنید و سپس آنها را
در tab-content بیندازید.
اگر می‌خواهید برگه‌ها هنگام جابجایی محو شوند، .fade را به هر tab-pane اضافه کنید.
تب ها کاملاً قابل position گرفتن هستند. می توانید آنها را در بالا، پایین یا در طرفین داشته باشید.

Navbar

نوار ناوبری یک ویژگی خوب است و یکی از ویژگی های برجسته سایت های بوت استرپ است. در هسته خود، نوار ناوبری شامل یک ظاهر طراحی برای نام سایت و ناوبری اولیه است.
بعداً می‌توان آن را با افزودن کنترل‌های خاص فرم و فهرست‌های کشویی تخصصی گسترش داد.
برای اطمینان از اینکه نوار ناوبری به عرض محتوای صفحه نیز محدود شده است
آن را در یک کلاس .span12 یا .container قرار دهید.

برای افزودن پیوندها به نوار ناوبری، به سادگی یک لیست نامرتب با یک کلاس اضافه کنید
از .nav. اگر می خواهید یک تقسیم کننده به لینک های خود اضافه کنید، می توانید این کار را با اضافه کردن یک آیتم لیست خالی با کلاس .divider-vertical انجام دهید.

فرم های مبتنی بر Navbar

به جای استفاده از فرم های پیش فرض مبتنی بر کلاس از فصل 2، فرم هایی که در
navbar از کلاس .navbar-form استفاده می کند. این را تضمین می کند که حاشیه های فرم به درستی باشد و
استایل های ناو را تنظیم و مطابقت میدهد . قابل توجه، کلاس‌های کمکی pull-left و .pullright ممکن است به انتقال فرم به موقعیت مناسب کمک کنند.
برای افزودن گوشه های گرد، همانطور که در ورودی های جستجوی دستگاه های iOS دیده می شود،
از کلاس .navbar-search به جای .navbar-form استفاده کنید

تغییرات منوی Navbar

نوار ناوبری Bootstrap می تواند dynamic باشد در موقعیت خود. که بطور پیش فرض display block است ،
عنصری که موقعیت خود را بر اساس قرارگیری در HTML می گیرد. با کمک چندین کلاس ، می‌توانید آن را در بالا یا پایین صفحه قرار دهید، یا می‌توانید آن را اسکرول کنید ،
به صورت ایستا با صفحه.
اگر می‌خواهید نوار ناوبری در بالا ثابت شود، .navbar-fixed-top را به کلاس .navbar اضافه کنید.
برای جلوگیری از قرار گرفتن نوار ناوبری بر روی محتوای دیگر در بدنه صفحه، اضافه کنید
حداقل 40 پیکسل از padding به تگ <body> بدهید.
برای چسباندن نوار ناوبری به پایین صفحه، کافی است .fixed-navbar-bottom را اضافه کنید.
کلاس به نوار ناوبری یک بار دیگر، برای جلوگیری از همپوشانی، حداقل 40 پیکسل padding به آن اضافه کنید در تگ <body>.
برای ایجاد نوار ناوبری که با صفحه پیمایش می کند، کلاس .navbar-static-top را اضافه کنید. این
کلاس نیازی به اضافه کردن padding به <body ندارد.

Navbar ریسپانسیو

مانند بقیه Bootstrap، نوار ناوبری می تواند کاملاً ریسپانسیو باشد. برای افزودن ویژگی‌های واکنش‌گرا، محتوایی که می‌خواهید جمع شود
باید در یک <div> با .nav-collapse.collapse به عنوان یک کلاس گذاشته شود. دکمه ای دارای .btn-navbar و سپس دارای دو پراپرتی است
اولین پراپرتی، data-toggle است که برای گفتن اینکه با جاوا اسکریپت چه کاری انجام دهد استفاده می شود
و دومی، data-target است که نشان می دهد که کدام عنصر را تغییر دهید. سه
<spans> با یک کلاس .icon-bar ایجاد کنید که که به ان دکمه همبرگری میگویند. این
عناصر موجود در div با کلاس .nav-collapse را تغییر می دهد. برای اینکه این ویژگی کار کند،
bootstrap-responsive.css و فایل های collapse.js یا bootstrap.js کامل باید در پروژه باشند.

برچسب‌ها:استخدام برنامه نویس, استخدام گرافیست, انیمیشن سازی, تبلیغ انیمیشنی, خرید سایت آماده, خرید قالب وردپرس, طراحی بنر, طراحی کارت ویزیت, طراحی لوگو, موشن گرافیک, نهال آی تی

علیرضا بابامرادی

تاریخ عضویت:19 سپتامبر 2022

راه آسان‌تری برای ارتباط با کاربران‌مان پیدا کرده‌ایم :) عضویت در کانال

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

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

دیدگاهتان را بنویسید لغو پاسخ

لینک کوتاه:

Navbar ها در بوت استرپ

Navigation تب دار

Navbar

فرم های مبتنی بر Navbar

تغییرات منوی Navbar

Navbar ریسپانسیو

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

دیدگاهتان را بنویسید لغو پاسخ

مزایای عضویت در سیگما:

نوشته‌های تازه

آخرین دیدگاه‌ها

دسته بندی مطالب

لینک های کمکی

خدمات اداری

خدمات تیم نهال آی تی

خدمات تیم نهال آی تی

نماد اعتماد الکترونیکی