آدرس : تهران میدان فردوسی خیابان ایرانشهر بین سمیه و طالقانی مجتمع تجاری میلاد واحد 9

پشتیبانی 24 ساعته : 02188867940 – 09927674217

برای مشاهده لیست علاقه مندی ها وارد شوید!

مشاهده محصولات فروشگاه
0

هیچ محصولی در سبد خرید نیست.

منوی ناوبری (Navigation) در بوت استرپ

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

برای افزودن یک منوی کشویی به یک دکمه ، به سادگی دکمه را بپیچید و dropdown Menu در یک گروه btn. قرار دهید همچنین می توانید از <span class=”caret”></span> استفاده کنید که
نشان می دهد که دکمه کشویی است.
می‌توانید از منوهای کشویی با هر اندازه دکمه استفاده کنید: btn-large، .btn، .btn-small،
یا .btn-mini.
split button های dropdown menu، از همان سبک کلی به عنوان کشویی استفاده میکنند ،
اما یک اکشن اصلی را به همراه کشویی اضافه میکند. split button دارای ویژگی primary در سمت چپ و یک toggleدر سمت راست که کشویی میباشد.

منوی dropUp

منوها را نیز می توان به گونه ای ساخت که به جای پایین بالا بیایند. برای ساختن این
باید تغییراتی ایجاد کنید، به سادگی .dropup را به .btn-group اضافه کنید. برای اینکه دکمه بالا بیاید
از سمت راست، pull-right را به منوی کشویی اضافه کنید (توجه داشته باشید: caret
اکنون به سمت بالا نشان داده شده است زیرا منو به جای پایین، بالا می رود)

Navigation المنت

بوت استرپ چند گزینه مختلف برای استایل دادن به عناصر ناوبری ارائه می دهد. همه آنها
به اشتراک میگذارند نشانه گذاریها و کلاس پایه را، .nav.
Bootstrap همچنین یک کلاس کمکی به نام .active ارائه می دهد. در اصل، به طور کلی تمایز را اضافه می کند به عنصر فعلی و آن را از بقیه عناصر ناوبری جدا می کند. شما
می تواند این کلاس را به لینک های صفحه اصلی یا به لینک های صفحه ای که در حال حاضر کاربر در ان است اضافه کنید.

ناوبری جدولی

برای ایجاد یک منوی پیمایش زبانه‌دار (شکل 3-10 را ببینید)، با یک لیست نامرتب اولیه شروع کنید.
با کلاس پایه .nav و اضافه کردن .nav-tab
برای تبدیل tab ها به pill ، به جای .nav-tabs از .nav-pills استفاده کنید.
برای هر یک از کلاس های .nav، اگر کلاس .disabled را اضافه کنید، یک پیوند خاکستری ایجاد می کند که
حالت :hover را نیز غیرفعال می کند.

ناوبری قابل انباشته (Stackable Navigation)
هر دو tabs و pills به طور پیش فرض افقی هستند. برای اینکه آنها را به صورت عمودی روی هم قرار دهید،
فقط کلاس .nav-stacked را اضافه کنید.

منوهای پیمایش(navigation menu) یک نحو مشابه با منوهای کشویی(dropdown menu) به اشتراک می گذارند. مثلا
به طور پیش فرض، شما یک آیتم لیست دارید که دارای یک لنگر است که در ارتباط با برخی ویژگی های داده کار می کند تا یک لیست نامرتب را با یک کلاس منوی کشویی فعال کند.
برای انجام همین کار با tabها، به سادگی کلاس .nav-tabs را تعویض کنید
با .nav-pills.

لیست های ناوبری(Navigation List)

لیست های پیمایش (Navigation List) زمانی مفید هستند که شما نیاز به نمایش گروهی از پیوندهای پیمایش دارید. این
نوع عنصر هنگام ساخت رابط های مدیریت(پنل ادمین) رایج است. در مدیریت MAKE در
UI، برای مثال، من یکی از اینها را در نوار کناری هر صفحه با پیوندهای سریع دارم
همراه با صفحات مشترک، توسعه دهندگان بوت استرپ از شکلی از این برای مستندات خود استفاده می کنند
. مانند همه لیست هایی که تا کنون در مورد آنها بحث کرده ایم، لیست های ناوبری لیست های نامرتبی هستند که همراه کلاس .nav. اند. برای اینکه استایل خاصی به آن بدهیم، کلاس .navlist را اضافه می کنیم.

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

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

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

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

لینک کوتاه:
0