campaign-Ghorban-to-Ghadir

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



visibility  
mode_comment   ۳۵

در جلسه نهم این دوره آمورشی می پردازیم به مبحث استایل دهی و ایجاد آیکون برای فرم ها توسط Gliphicons ها ,به بررسی نحوه واکنشگرا کردن تصاویر خواهیم پرداخت و همچنین توضیحی در مورد نحوه تزریق کلاس های بوت استرپ مثل کلاس img-responsive رو از طریق جاوااسکریپ به المانها بررسی خواهیم کرد و در مورد نحوه ایجاد جداول هم بحث میکنم

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

  • بررس کلاس input group
  • بررسی کلاس input-group-addon
  • نحوه ایجاد تصاویر واکنشگرا
  • بررسی کلاس img-responsive
  • بررسی کلاس img-rounded
  • بررسی کلاس img-circle
  • بررسی کلاس img-thumbnail
  • تزریق کلاس img-responsive توسط جاوااسکریپت برای اعمال این کلاس به تصاویر مورد نظر
  • نحوه ایجاد dropdown منو ها
  • بررسی کلاس dropdown
  • نحوه ایجاد زیر منوها
  • بررسی کلاس dropdown-header
  • بررسی کلاس dropup
  • نحوه فراخوانی و اجرای زیر منون توسط جاوااسکریپت و اتریبیوت data-toggle

 

info توجه

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

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

comment دیدگاه کاربران
mehdi karimi replyپاسخ

سلام
استاد کاش از فایل rtl جلسات آخر استفاده میکردید و فعلا خودمون هسته بوت استرپ رو rtl میکردیم که دستمون هم راه بیفته

وحید صالحی

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

mehdi karimi

به غیر از مواردی که گفتید یه سری از کلاس هارو که من استفاده کردم این راست و چپ بودنشون مشکل داشت مثل مبحث validation states تو فرم ها

وحید صالحی

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

mehdi karimi

خواهش میکنم ناراحتی چرا ، حرفتون کاملا درسته
چون قبلا ازتون پرسیده بودم و گفته بودید از فایل rtl در جلسات آخر استفاده میکنید من فکر کردم این روند رو خودتون ادامه میدید
البته اینم بگم من از اون افرادی نیستم که منتظر لقمه حاظر آماده هستن سوتفاهم پیش نیاد:D از وقتی دوره جاوا متوقف شده بوت استرپ رو شروع کردم و باور کنید شبانه روز دارم بوت استرپ رو کار میکنم و همون موردی هم که مثال زدم تو کامنت اول میتونه نشون بده که واقعا پیگیرم و دارم کار میکنم
در کل حرفای خیلی خوبی زدید و امیدوارم بقیه کاربرا هم استفاده ببرن ازشون ❓

وحید صالحی

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

حمید رضا مصطفی زاده replyپاسخ

سلام استاد
چرا زمانی که از table-striped استفاده کردید به صورت لیست بار در قسمت های table نبود؟ همون حالتی که جداول رو یکی در میون رنگی میکرد؟ در صورتی که شما از هر کلاس دیگه ای از table ها استفاده میکردید تا حرفی رو انتخاب میکردی سریع خودش پیشنهاد میکرد!!!
(منظور من اینه که ممکنه کلاسی مثل کلاس فوق داشته باشیم اما به ما پیشنهاد نکنه phpstorm و یا dreamweaver؟ اگر پاسخ مثبت هست ما باید اون کلاس ها رو که پیشنهاد نمیکنه رو حفظ کنیم؟)

سوال دوم اینکه
چرا سون لرن از فاندنشن استفاده کرده سبک تره؟چرا از همین بوت استرپ استفاده نکردید؟
با تشکر

وحید صالحی

سلام آقا حمید کلاس اگر در فایل استایل باشه در over load هم نمایش داده میشه اگر نمایش نمیده پس موجود نیست این کلاس هم جدید و در هسته 3.3.1 که ما استفاده کردیم موجود نیست که قرار شد خودتون از ورژن جدید کپی کنید و در فیال استایل بوت استرپی که کار می کنید قرارش بدید کار سختی نیست فقط باید در نسخه جدید سرپ و پیداش کنید
موفق باشید

حمید رضا مصطفی زاده

استاد
شما دقیقه 45 تا 46 این جلسه رو نگاه کنید هنگام تایپ در over load این کلاس نمایش داده نمیشه و به قول شما موجود نیس!!
پس چطور اعمال شده و جداول یکی در میون راه راه شده؟؟

وحید صالحی

از کلاس قبلیش استفاده شده این کلاس جدید و در ورژن های جدید جدا شده از سایر کلاس ها و برای مثال و آشنایی بیان کردیم قرار ندادی هم مهم نیست استایل اعمال میشه

sara salami replyپاسخ

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

وحید صالحی

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

sara salami

سلام استاد اوایل جلسه هشتم .ممنون میشم قراربدید لینک دانلودرو .

وحید صالحی

خدمت شما : لینک

sara salami replyپاسخ

سلام استاد من فایل های جلسه 22رو بازکردم ولی اون چیزی که مدنظرم بود رو توش ندیدم.من اون فایل زیپ که بازکردید اول جلسه وبخشی ازاونو توی فایل ها گذاشتیدمدنظرم بود.ممنونم اگه لینکشو برای دانلودقراربدید.bootstrap.zip-RTL.

وحید صالحی

جلسه چندم بود من الان حضور ذهن ندارم توی کدام جلسه این کار رو کردیم

رضا قاسم نژادیان replyپاسخ

سلام استاد خسته نباشین
ممنون از آموزش فوق العادتون . فقط کلاس های موجود در بوت استرپ و همچنین کاربردشون رو از کجا میتونیم تهییه کنیم ؟ و به صورت لیست داشته باشیم ؟
تشکر 😛

وحید صالحی

سلامت باشید کاربرد تمامشون رو که در این دوره توضیح می دیم همرا با مثال برای داشتن یکجای اونها هم به لینک زیر مراجعه کنید
https://gist.github.com/geksilla/6543145

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

با سلام. چرا در ادیتور PhpStorm کلاسهای table-striped و table-condensed و table-hover به صورت OverLoad نشون داده نشد؟

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

!!!!!!!!! 😎

وحید صالحی

سلام دوست عزیز این مورد بر می گرده به ide که ازش استفاده می کنید و phpstorm بعضی از کلاس هایی که در هسته یکی دو بار بیشتر استفاده و نوشته نشده ور برای جلوگیری از شلوغی overload نمایش نمیده که در سایر ide ها ممکنه این اتفاق نیوفته…

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

در مورد کلاس dropdown-backdrop میشه ی توضیح مختصر بدین؟

وحید صالحی

دوست عزیز این کلاس رو شما از کجا آوردین؟

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

از همین نسخه بوت استرپی که در جلسه 9 ازش استفاده کردین،خط 3103

وحید صالحی

خیلی خوبه که به ساختار هسته دقت می کنید دوست عزیز منظور بنده از این که از کجا آوردین این بود که در موردش در این جلسه صحبتی نکردیم در کل این کلاس برای حالتی هست که به ندرت پیش میاد ولی در کل فرض کنید ما در قالب 2 تا دراپ دان داریم که به صورت عمودی زیر هم هستند و اگر بخوایم زمانی که زیر منوی دارپ دان بالایی باز میشه زیر دراپ دان زیرش نباشه و روی اون قرار بگیره ازش استفاده میشه به پراپرتی positon و بخصوص مقدار z-index دقت کنید اما زمانی که از هسته جاوااسکریپت بوت استرپ استفاده می کنیم خودش بصورت خودکار این مورو رو در نظر میگیره…

Somayeh Shams replyپاسخ

سلام استاد. وقتتون بخیر
این کلاس dropdown-backdrop رو باید به ul بدیم یا به دکمه ای که شامل زیرمنو میشه؟ من تست کردم در هر دو مورد جواب نداد

وحید صالحی

نیازی به استفده ازش نیست و در نسخه جدید حذف شده فقط خواستیم توضیح داده باشیدم که اگر جایی دیدی تعجب نکنید که چی هست 🙂

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

سلام
من این کد رو $(document).ready(function() {
$(‘img’).addClass(‘img-responsive img-thumbnail’);

});
در قسمت custom.js وارد کردم ولی عکس ریسپانسیو نمیشه

وحید صالحی

بین این دو باید img-responsive img-thumbnail کاما , بزارید

محمد صباغی replyپاسخ

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

وحید صالحی

از چه کلاسی استفاده می کنید؟

محمد صباغی

سلام
از این دستور در فایل سی اس اس

وحید صالحی

دوست عزیز شما دارید توی فایل css تصویر رو لود می کنید قاعدتا نمیشه از کلاس رسپانسیو بوت استرپ در اینجا استفاده کرد مگه اینکه توسط تگ img در سندتون تصویر رو لود کنید و کلاس img-responsive رو براش قرار بدید برای رسپانسیو سازی تصویر در فایل css در گوگل جستجو کنید لینک زیر هم میتونه کمکتون کنه
https://www.w3schools.com/css/css_rwd_images.asp

موفق باشید

Sohrab Gosheh replyپاسخ

سلام من با جاوا اسکریپت زیاد آشنایی ندارم به نظرتون میشه با همین آموزش هایی که شما تو دوره بوت استرپ دادین نیاز هارو برطرف کرد با توجه به اینکه دوره جاوا اسکریپت شما نزدیک 60ساعته و به نظرم خیلی زیاد هست
راستی درسته زمان دوره VIP من تموم شده ولی دلیل بر این نمیشه که سوال من رو جواب ندین
(قبلا یه سوال در مورد یکی بوت استرپ کرده بودم خبری نشد)

کیوان علی محمدی

سلام به شکل محدود می تونید برطرف کنید و حتما بهتره خود js رو یاد بگیرید.

ارسال نظرات

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