در جلسه دهم دوره آمورشی فریم ورک بون استرپ می پردازیم به مبحث ایجاد تب ها,پیل ها و منوی واکنشگرا و در ابن جلسه بیشتر به مزیت استفاده از فریم ورک بوت استرپ برای ایجاد المان های نسبتا پیچیده بدون کدنویسی پی خواهیم برد المان هایی که برای ایجاد آنها خارج از محدوده فریم ورک نیازمند کدنویسی جاوااسکریپ هستند...
مطالب مطرح شده در این جلسه عبارتند از :
ایجاد انواع تب های واکنش گرا
ایجاد منوی واکنشگرا
این مطلب یک جلسه از آموزش بوت استرپ حرفه ای می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.
سلام استاد
این جلسه خیلی عالی بود مخصوصا قسمت تب ها که خیلی ساده و کامل توضیح دادید. پروژم رو قدم به قدم خیلی راحت تکمیل کردم تا اینجا.
فقط استاد اگه میشه تو جلسات بعدی یه 10 دیقه رو به گرید بندی داخل تب ها اختصاص بدید. اینکه تب رو داخل 4بخش درست کنم رو میدونم، ولی اینکه خود 4بخش اصلی رو به 12 بخش تقسیم کنم. مثلا محتوای تب یه تگ p و یه عکس باشه که p بیاد8قسمت بگیره و عکس 4 بخش و عکس به صورت ریسپانسیو باشه!
ممنون
افشبن جان نیازی به بخش بندی درون تب نیست با تگ li میتونی لیست دروست کنی و کنارش هم تصویر رو قرار بدی در پروزه دوم یه قسمتی رو برای نمایس آخرین نظرات همراه با تصویر نویسنده در نظر گرفتیم اونجا توضیح بدم بیشتر متوجه میشی و میتونی درون تب ها هم به همون صورت استفاده کنی
باشه استاد ممنون
فعلا خودم با میدیا کوئری ها درستش کردم . بعد اون جلسه تغییرش میدم
سلام
چرا توی مرورگر کروم وقتی منوی رسپانسیو رو میسازیم فیلد جستجو در سایزهای بزرگ به خط دوم میره و یه خط رو اشغال میکنه؟توی موزیلا مشکلی نداره.
عکس رو ضمیمه قرار دادم
http://s6.picofile.com/file/8206194634/Untitled_1.jpg
خوب باید از یک فایل css reset یا normalize استفاده کنید اگر مشکل برطرف نشد همین کدهایی رو که زدید بفرستید تا بررسی بشه
با سلام من هم به این مشکل برخوردم ، فیلد جستجو در تمام مرورگرها غیر از موزیلا به خط بعدی میره و تمام عرض صفحه رو اشغال میکنه ، با normalize کردن مشکل برطرف نشد . لطفا راهنمایی کنید. ممنون
سلام استاد
خسته نباشید 🙂
این جلسه هم خیلی خوب بود به قالب یه نگاه بیااندازید ببینید چطوره ؟ البته در مورد خود طرح هم یه نظر بدید تو وب هر چی گشتم یه قالب درست حسابی بود اونم افشین گرفته بود واسه همین خودم یه طرح زدم.
و دو تا سوال دارم
-بوت استرپ با کدوم عرض منو ها رو collapse میکنه؟ ایا به صورت خودکار با جاوااسکریپت و یا مدیاکویری تعریف کرده واسش؟
-الان من میخوام همین collapse منو ها رو سفارشی سازی کنم دقیقا چیکار کنم؟
دانلود قالب (لینک مسقیم)
ممنون استاد
سلام خیلی خوبه برای تغییر عرض زیر منو اگر منظورت رو درست فهمیده باشم میتونی توسط اینسپکتور کلاسش رو پیدا کنی و یه عرض دلخواه براش در نظر بگیری در پروژه دوم این مورد رو بررسی خواهیم کرد
نه استاد منظورم اینه که با کدوم عرض منو ها پنهان میشن و اون دکمه سه خطه میاد و آیا میتونیم اونو سفارشی سازی کنیم که در این مدیاکویری تغییر کنه؟
و یه درخواست دیگه بوت استرپ ۴ هم اومد لطفا در جلسه آخر به تغییراتش یه اشاره کنید ممنون.
سلام میوند جان عرض کمتر از 768px توی هسته مدیا کوئری 768 رو پیدا کن (@media (min-width: 718px)) تعدادشون زیاده اونی که کلاسnavbar-collapse و سایر کلاس های مشابه درشه مربوط به همین حالت collapse هستش که اگر عدد رو تغییر بدی collapse هم در همون عدد و مدیا جدید تغییر میکنه که در فایل custom.css همه رو کپی کنی و عدد مدیا کودری رو تغییر بدی بوت استرپ 4 هم چند روزی هست منتشر شده که البته نسخه آلفا و ازمایشی هست که چند کلاس جدید و تغییر در چند کلاس ایجاد شده و هنوز کامل نیست و ممکنه تغییرات بیشتری داشته باشه در جلسه پایانی اشاره کوچیکی می کنیم اما اگر به همین نسخه 3 مسلط بشید براحتی میتونید از ورژن جدید هم استفاده کنید چون در ساختار سیستم شبکه بندی تغییرات عمده ای ایجاد نشده
با سلام خدمت جناب صالحی عزیز
من به تازگی در دوره بوت استرپ ثبت نام کردم و کلیه جلسات رو هم دیدم و الان شروع به کار کردم، منتها در طراحی منو میخوام که زیر منوهام کل عرض صفحه رو بپوشونه، دقیقا مثل حالتی که منوی سایت دیجی کالا داره، قبل از اینکه اینجا سوالو مطح کنم خودم سعی کردم با دستکاری توسط اینسپکتور به جواب برسم ولی متاسفانه نتونستم، اگه راهنماییم کنید ممنون میشم
سلام دوست عزیز
دراپ دان رو که همون قسمت زیر منو هست رو کلاسش روپیدا کنید و بهش عرض 100 درصد بدید مشکل برطرف میشه
ممنون جناب صالحی
عرض رو در کلاس مربوطه صد در صد داده بودم، منتها بخاطر اینکه پوزیشن مربوط به li ریلیتیو بود تمام صفحه نمیشد که با تغییر حالت پوزیشن درست شد
خوب خدا رو شکر 🙂
سلام و خسته نباشید .
توی بحثnav لینک ها برای من فعال نمی شه.
یعنی با کلیک بر روی سایر لینک ها تغییری داده نمی شه و فقط روی لینک یک می مونه.
احتمالا ساختار کد ها رو رعایت نکردید و موردی رو اشتباه قرار دادید کدها تون رو با دقت بررسی کنید
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
حتما منو توی صفحه مورد نظرتون وجود نداره !!!
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 رو در هنگام سوال نمایش در کدام سایت ها انتخاب کنید موفق باشید
سلام آقای صالحی عزیز،یک مشکلی در طراحی منو برام پیش اومده،به دلیل یکم پیچیده بودن کد و عکس مشکل و براتون از طریق ایمیل براتون فرستادم
سلام
من تمام فایل های بوتسترپ رو در index.html لینک کردم
تمام کلاس ها فراخوانی میشن فقط کلاس data-toggle فراخوانی نمیشه
علت چیه؟
data-toggle کلاس نیست یک اتریبیوت هست و اگر تمام فایل ها رو بدرستی فراخوانی کرده باشید کار می کنه کما اینکه نمایشش نده
آره data-toggle رو نمایش نمیده چیکار باید کرد؟
مشکلی نیست استفاده کنید کار میکنه این برمی گرده به IDE که داردی ازش استفاده می کنید و ممکنه بعضی اتذیبیوت ها رو نمایش نده
اما کار هم نمیکنه مثلا میخوام منو رو درست کنم زیر منو ها رو نمایش نمیده یا برای قسمت تب ها ، روی تب های بعدی که کلیک میکنم اصلا فعال نمیشن و چیزی رو هم نمایش نمیدن
چکار باید کرد؟
دوست عزیز کد هاتون رو که نمی دونم به چه صورته که بتونم راهنماییتون کنم اگر طبق آموزش عمل کرده باشید نیاید مشکلی باشه حتما جایی رو اشتباه کرید
آقای صالحی من هنوز مشکلم برطرف نشده کدهایی که نوشتم به ایمیل شما ارسال کردم لطفا بررسی کنید و ببینید مشکل از کجاست
البته من از دریم ویوور استفاده میکنم ممکن است مشکل از این باشه؟
من توی فایل هایی مربوط به شما هم امتحان کردم باز data-target data-toggle navbar-left نه نمایش داده میشه و نه کار میکنه
خواهشا کمکم کنید تا این مشکل رفع بشه
متاسفانه ایمیلی از شما دریافت نکردم
سلام جناب صالحی
منوی های بوت استرپ به صورت پیش فرض در اندازه صفحه 768 پیکسل جمع می شوند و مانند یک دکمه قرار میگیرند ، آیا می توان تنظیم کرد که در اندازه 992 پیکسل یا اندازه ای دیگر این اتفاق صورت گیرد ، اگر این کار امکان پذیر است لطفا راهنمایی بفرمایید. با تشکر از جنابعالی
باید مدیا کوئری ها رو تغییر درش بدید در جلسات شلکه بندی در موردش صحبت کردیم که مدیا کوئری ها به چه صورتن کافیه در فایل استایل خودتون مدیا کوئری مورد نظر رو تعریف و تمام کلای هایی منون رو درش قرار بدید
با سلام
آقای صالحی در برنامه من زمانی که می خواهم با navbarمنو ایجاد کنم، زیر کلمه های navbar در کد نویسی برنامه خط میکشه و استایل های مورد نظرم را بر روی navbar اعمال نمیکنه. به نظر شما مشکل کجاس؟ ممنون میشم راهنماییم کنید.
با تشکر
در انتهای پراپرتی مورد نظرتون از !important استفاده کنید
مچکرم
سلام لطفا یه توضیحی بدهید برای ایجاد منو در کنار سایت مانند بخش مدیریت وردپرس چه کار کنیم
سلام این مورد رو باید با css و html ایجاد کنید البته توسط off-canvas ها هم که در پروژه دوم همین دوره توضیح دادیم میشه ایجادش کرد