illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

29 2160 ۲۹ تیر ۹۴
در جلسه نهم این دوره آمورشی می پردازیم به مبحث استایل دهی و ایجاد آیکون برای فرم ها توسط 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
 
این مطلب یک جلسه از دوره آموزش جامع فریمورک بوت استرپ (پایه تا پیشرفته) است و برای دیدن آن باید در این دوره ثبت نام کنید .
توضیحات : با توجه به افزایش تولید و فراگیر شدن استفاده از اسمارت فون ها و تبلت ها در چند سال اخیر و رابطه مستقیم آنها با دنیای مجازی و اینترنت مدیران و طراحان وب سایت ها ناچار به تعامل مطلوب با این نوع دستگاها شده اند. اما با استفاده از متدها و روش های طراحی سنتی این تعامل با چالش بزرگی روبرو شد و آن عدم ثبات در تطبیق المان ها موجود در قالب وب سایت ها با سایز های متفاوت صفحه نمایش این دستگاه ها بود که این امر باعث عدم پوشش صحیح تمام یا بخش های مختلف یک سایت بصورت استاندارد توسط این دستگاه ها می شد.به لطف این چالش و بخصوص صفحه نمایش هایی با ابعاد متفاوت تکنولوژی جدیدی با عنوان Responsive Design پا به عرضه ظهور گذاشت و تحول بسیار مطلوبی را در عرصه طراحی وب بوجود آورد. در راستای چنین تحولی و با توجه به کمبود و منابع آموزشی کامل در این زمینه در عرصه وب فارسی تصمیم گرفته ایم تا با یک دوره آموزشی بسیار کامل در زمینه تکنولوژی Responsive Design تحت یکی از فریم ورک های بسیار محبوب و البته قدرتمند در این زمینه با نام Bootstrap در خدمت علاقمندان به مبحث طراحی وب بخصوص طراحی واکنشگرا باشیم تا بتوانیم قدمی دیگر در راستای افزایش سطح علمی علاقمندان به مبحث وب و طراحی آن برداریم...
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 29 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    mehdi karimi(۲۹ تیر ۱۳۹۴)

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

    • ‏‏
      وحید صالحی(۲۹ تیر ۱۳۹۴)

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

      • ‏‏
        mehdi karimi(۲۹ تیر ۱۳۹۴)

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

        • ‏‏
          وحید صالحی(۳۱ تیر ۱۳۹۴)

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

        • ‏‏
          mehdi karimi(۳۱ تیر ۱۳۹۴)

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

        • ‏‏
          وحید صالحی(۳۱ تیر ۱۳۹۴)

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

  • ‏‏
    حمید رضا مصطفی زاده(۱۹ مهر ۱۳۹۴)

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

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

    • ‏‏
      وحید صالحی(۲۱ مهر ۱۳۹۴)

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

      • ‏‏
        حمید رضا مصطفی زاده(۲۳ مهر ۱۳۹۴)

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

        • ‏‏
          وحید صالحی(۲۵ مهر ۱۳۹۴)

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

  • ‏‏
    sara salami(۱۸ آبان ۱۳۹۴)

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

  • ‏‏
    sara salami(۱۹ آبان ۱۳۹۴)

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

  • ‏‏
    رضا قاسم نژادیان(۸ اسفند ۱۳۹۴)

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

    • ‏‏
      وحید صالحی(۸ اسفند ۱۳۹۴)

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

  • ‏‏
    سید احسان عظیمی(۲۲ فروردین ۱۳۹۵)

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

  • ‏‏
    سید احسان عظیمی(۲۲ فروردین ۱۳۹۵)

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

    • ‏‏
      وحید صالحی(۲۲ فروردین ۱۳۹۵)

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

      • ‏‏
        سید احسان عظیمی(۲۲ فروردین ۱۳۹۵)

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

        • ‏‏
          وحید صالحی(۲۲ فروردین ۱۳۹۵)

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

  • ‏‏
    Somayeh Shams(۲۳ تیر ۱۳۹۵)

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

  • ‏‏
    فاطمه صنیعی(۳۱ مرداد ۱۳۹۵)

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

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

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

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram