دوره مجازی بوت استرپ (جلسه 10): کامپوننت ها و css در بوت استرپ - تب ها و منو - بخش چهارم

دسته بندی: آموزش
زمان مطالعه: 1 دقیقه
۰۱ مرداد ۱۳۹۴

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

مطالب مطرح شده در این جلسه عبارتند از :

ایجاد انواع تب های واکنش گرا

  • بررسی کلاس list-inline
  • بررسی کلاس nav
  • بررسی کلاس nab-tabs
  • بررسی کلاس nav-pills
  • بررسی کلاس nav-stacked
  • بررسی کلاس nav-justified
  • نحوه ایجاد تب های پویا توسط جاوااسکریپت
  • بررسی کلاس nav-content
  • بررسی کلاس tab-pane
  • بررسی کلاس fade in

ایجاد منوی واکنشگرا

  • بررسی کلاس navbar
  • بررسی کلاس navbar default
  • بررسی کلاس navbar-header
  • بررسی کلاس navbar-brand
  • بررسی کلاس navbar-nav
  • بررسی کلاس navbar-inverse
  • بررسی کلاس navbar-fixed-top
  • بررسی کلاس navbar-fixed-bottom
  • بررسی کلاس navbar-left
  • نحوه ایجاد باکس جستجو در منو
  • نحوه ایجاد لینک های منو و زیر منوها
:: توجه

این مطلب یک جلسه از آموزش بوت استرپ 3 می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش بوت استرپ 3

چه امتیازی به این مقاله می دید؟
نویسنده
علاقمند به طراحی و برنامه نویسی وب هستم و چند سالی میشه که در این زمینه فعالیت می کنم. (ایمیل من: @) وب سایت من:

جلسات دوره

نظرات کاربران

Mogtaba Mazroei

سلام لطفا یه توضیحی بدهید برای ایجاد منو در کنار سایت مانند بخش مدیریت وردپرس چه کار کنیم

وحید صالحی

سلام این مورد رو باید با css و html ایجاد کنید البته توسط off-canvas ها هم که در پروژه دوم همین دوره توضیح دادیم میشه ایجادش کرد

PAS.PSK PSK

با سلام
آقای صالحی در برنامه من زمانی که می خواهم با navbarمنو ایجاد کنم، زیر کلمه های navbar در کد نویسی برنامه خط میکشه و استایل های مورد نظرم را بر روی navbar اعمال نمیکنه. به نظر شما مشکل کجاس؟ ممنون میشم راهنماییم کنید.
با تشکر

وحید صالحی

در انتهای پراپرتی مورد نظرتون از !important استفاده کنید

PAS.PSK PSK

مچکرم

هادی

سلام جناب صالحی
منوی های بوت استرپ به صورت پیش فرض در اندازه صفحه 768 پیکسل جمع می شوند و مانند یک دکمه قرار میگیرند ، آیا می توان تنظیم کرد که در اندازه 992 پیکسل یا اندازه ای دیگر این اتفاق صورت گیرد ، اگر این کار امکان پذیر است لطفا راهنمایی بفرمایید. با تشکر از جنابعالی

وحید صالحی

باید مدیا کوئری ها رو تغییر درش بدید در جلسات شلکه بندی در موردش صحبت کردیم که مدیا کوئری ها به چه صورتن کافیه در فایل استایل خودتون مدیا کوئری مورد نظر رو تعریف و تمام کلای هایی منون رو درش قرار بدید

فاطمه صنیعی

سلام
من تمام فایل های بوتسترپ رو در index.html لینک کردم
تمام کلاس ها فراخوانی میشن فقط کلاس data-toggle فراخوانی نمیشه
علت چیه؟

وحید صالحی

data-toggle کلاس نیست یک اتریبیوت هست و اگر تمام فایل ها رو بدرستی فراخوانی کرده باشید کار می کنه کما اینکه نمایشش نده

فاطمه صنیعی

آره data-toggle رو نمایش نمیده چیکار باید کرد؟

فاطمه صنیعی

آقای صالحی من هنوز مشکلم برطرف نشده کدهایی که نوشتم به ایمیل شما ارسال کردم لطفا بررسی کنید و ببینید مشکل از کجاست
البته من از دریم ویوور استفاده میکنم ممکن است مشکل از این باشه؟
من توی فایل هایی مربوط به شما هم امتحان کردم باز data-target data-toggle navbar-left نه نمایش داده میشه و نه کار میکنه
خواهشا کمکم کنید تا این مشکل رفع بشه

وحید صالحی

متاسفانه ایمیلی از شما دریافت نکردم

فاطمه صنیعی

اما کار هم نمیکنه مثلا میخوام منو رو درست کنم زیر منو ها رو نمایش نمیده یا برای قسمت تب ها ، روی تب های بعدی که کلیک میکنم اصلا فعال نمیشن و چیزی رو هم نمایش نمیدن
چکار باید کرد؟

وحید صالحی

دوست عزیز کد هاتون رو که نمی دونم به چه صورته که بتونم راهنماییتون کنم اگر طبق آموزش عمل کرده باشید نیاید مشکلی باشه حتما جایی رو اشتباه کرید

وحید صالحی

مشکلی نیست استفاده کنید کار میکنه این برمی گرده به IDE که داردی ازش استفاده می کنید و ممکنه بعضی اتذیبیوت ها رو نمایش نده

سید احسان عظیمی

سلام آقای صالحی عزیز،یک مشکلی در طراحی منو برام پیش اومده،به دلیل یکم پیچیده بودن کد و عکس مشکل و براتون از طریق ایمیل براتون فرستادم

حسین صانعی

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

وحید صالحی

سلام اول از همه چیز لطفا فینگلیش کامنت نزارید خوندنش مشکله 😉
دوم اینکه این مورد چند دلیل می تونه داشته باشه قبلا هم گفتم شاید هم فایل جاوااسکریپت هسته یا کتابخونه جی کوئری لود نمیشه و … همه این موارد رو امتحان کنید روی قالب به ای صورت که آپلود شده نمیشه خوب بررسی کرد.

mohamad mohamadi

salam vojod dare hata copy paste am kardam
in safe aslime
battleweb.ir
ke kar mikone inam 1 page ya postame nega konid
http://battleweb.ir/2016/04/17/%D8%B3%D9%84%D8%A7%D9%85-%D8%AF%D9%86%DB%8C%D8%A7/
lotfan komak konid

وحید صالحی

سلام خواهش می کنم اگر منظورتون تصویر آواتار هست باید در سایت گراواتار با همین ایمیلی که وارد سایت میشید ثبت نام کنید و برای ایمیلتون عکس موردنظرتون رو قرار بدید تا در سون لرن نمایش داده بشه برای این کار به آدرس زیر مراجعه کنید
https://fa.gravatar.com/
دقت کنید پس از انجام مراحل برای نمایش عکستون گزینه و کارکتر G رو در هنگام سوال نمایش در کدام سایت ها انتخاب کنید موفق باشید

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

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

نیاز به لاگین

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