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



visibility  
mode_comment   ۴۰

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

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

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

  • بررسی کلاس 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
  • نحوه ایجاد باکس جستجو در منو
  • نحوه ایجاد لینک های منو و زیر منوها
info توجه

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

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

comment دیدگاه کاربران
افشین زندی replyپاسخ

سلام استاد
این جلسه خیلی عالی بود مخصوصا قسمت تب ها که خیلی ساده و کامل توضیح دادید. پروژم رو قدم به قدم خیلی راحت تکمیل کردم تا اینجا.
فقط استاد اگه میشه تو جلسات بعدی یه 10 دیقه رو به گرید بندی داخل تب ها اختصاص بدید. اینکه تب رو داخل 4بخش درست کنم رو میدونم، ولی اینکه خود 4بخش اصلی رو به 12 بخش تقسیم کنم. مثلا محتوای تب یه تگ p و یه عکس باشه که p بیاد8قسمت بگیره و عکس 4 بخش و عکس به صورت ریسپانسیو باشه!
ممنون

وحید صالحی

افشبن جان نیازی به بخش بندی درون تب نیست با تگ li میتونی لیست دروست کنی و کنارش هم تصویر رو قرار بدی در پروزه دوم یه قسمتی رو برای نمایس آخرین نظرات همراه با تصویر نویسنده در نظر گرفتیم اونجا توضیح بدم بیشتر متوجه میشی و میتونی درون تب ها هم به همون صورت استفاده کنی

افشین زندی

باشه استاد ممنون
فعلا خودم با میدیا کوئری ها درستش کردم . بعد اون جلسه تغییرش میدم

hojat replyپاسخ

سلام
چرا توی مرورگر کروم وقتی منوی رسپانسیو رو میسازیم فیلد جستجو در سایزهای بزرگ به خط دوم میره و یه خط رو اشغال میکنه؟توی موزیلا مشکلی نداره.
عکس رو ضمیمه قرار دادم
http://s6.picofile.com/file/8206194634/Untitled_1.jpg

وحید صالحی

خوب باید از یک فایل css reset یا normalize استفاده کنید اگر مشکل برطرف نشد همین کدهایی رو که زدید بفرستید تا بررسی بشه

حسین صانعی

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

میوند بارکزی replyپاسخ

سلام استاد
خسته نباشید 🙂
این جلسه هم خیلی خوب بود به قالب یه نگاه بیااندازید ببینید چطوره ؟ البته در مورد خود طرح هم یه نظر بدید تو وب هر چی گشتم یه قالب درست حسابی بود اونم افشین گرفته بود واسه همین خودم یه طرح زدم.
و دو تا سوال دارم
-بوت استرپ با کدوم عرض منو ها رو collapse میکنه؟ ایا به صورت خودکار با جاوااسکریپت و یا مدیاکویری تعریف کرده واسش؟
-الان من میخوام همین collapse منو ها رو سفارشی سازی کنم دقیقا چیکار کنم؟
دانلود قالب (لینک مسقیم)
ممنون استاد

وحید صالحی

سلام خیلی خوبه برای تغییر عرض زیر منو اگر منظورت رو درست فهمیده باشم میتونی توسط اینسپکتور کلاسش رو پیدا کنی و یه عرض دلخواه براش در نظر بگیری در پروژه دوم این مورد رو بررسی خواهیم کرد

میوند بارکزی

نه استاد منظورم اینه که با کدوم عرض منو ها پنهان میشن و اون دکمه سه خطه میاد و آیا میتونیم اونو سفارشی سازی کنیم که در این مدیاکویری تغییر کنه؟
و یه درخواست دیگه بوت استرپ ۴ هم اومد لطفا در جلسه آخر به تغییراتش یه اشاره کنید ممنون.

وحید صالحی

سلام میوند جان عرض کمتر از 768px توی هسته مدیا کوئری 768 رو پیدا کن (@media (min-width: 718px)) تعدادشون زیاده اونی که کلاسnavbar-collapse و سایر کلاس های مشابه درشه مربوط به همین حالت collapse هستش که اگر عدد رو تغییر بدی collapse هم در همون عدد و مدیا جدید تغییر میکنه که در فایل custom.css همه رو کپی کنی و عدد مدیا کودری رو تغییر بدی بوت استرپ 4 هم چند روزی هست منتشر شده که البته نسخه آلفا و ازمایشی هست که چند کلاس جدید و تغییر در چند کلاس ایجاد شده و هنوز کامل نیست و ممکنه تغییرات بیشتری داشته باشه در جلسه پایانی اشاره کوچیکی می کنیم اما اگر به همین نسخه 3 مسلط بشید براحتی میتونید از ورژن جدید هم استفاده کنید چون در ساختار سیستم شبکه بندی تغییرات عمده ای ایجاد نشده

salmanuser replyپاسخ

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

وحید صالحی

سلام دوست عزیز
دراپ دان رو که همون قسمت زیر منو هست رو کلاسش روپیدا کنید و بهش عرض 100 درصد بدید مشکل برطرف میشه

salmanuser

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

وحید صالحی

خوب خدا رو شکر 🙂

مرتضی replyپاسخ

سلام و خسته نباشید .
توی بحثnav لینک ها برای من فعال نمی شه.
یعنی با کلیک بر روی سایر لینک ها تغییری داده نمی شه و فقط روی لینک یک می مونه.

وحید صالحی

احتمالا ساختار کد ها رو رعایت نکردید و موردی رو اشتباه قرار دادید کدها تون رو با دقت بررسی کنید

mohamad mohamadi replyپاسخ

salam bebakhshid man menu hamo responsive mikonam va kamel kar mikonan
vali vaghti miram to page e site am yani safe asli nistam ya miram to mataleb ke safe asli nis ro icona mizanam kar nemikonan

وحید صالحی

حتما منو توی صفحه مورد نظرتون وجود نداره !!!

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

وحید صالحی

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

سید احسان عظیمی replyپاسخ

آقای صالحی ممنون عالی بود

وحید صالحی

خواهش می کنم خوشحالیم که مقبول افتاده موفق باشید

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

با عرض شرمندگی نسبت به سوال بی ربطم و تشکر نسبت به پشتیبانی سریع و عالیتون،در مورد پروفایلم در وبسایت سون لرن …کجای پروفایل میتونم عکسم رو لود کنم،هرچی گشتم پیدا نشد…

وحید صالحی

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

سید احسان عظیمی replyپاسخ

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

فاطمه صنیعی replyپاسخ

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

وحید صالحی

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

فاطمه صنیعی

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

وحید صالحی

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

فاطمه صنیعی

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

وحید صالحی

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

فاطمه صنیعی

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

وحید صالحی

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

هادی replyپاسخ

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

وحید صالحی

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

PAS.PSK PSK replyپاسخ

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

وحید صالحی

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

PAS.PSK PSK

مچکرم

Mogtaba Mazroei replyپاسخ

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

وحید صالحی

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

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.