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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

12 2243 ۲۲ تیر ۹۴
در این جلسه و در قسمت هفتم دوره آموزشی فریم ورک بوت استرپ می پرداریم به مبحث css و کامپوننت ها و فرم کنترلر ها در بوت استرپ و توسط کلاس های پیش فرض بوت استرپ المان های موجود در صفحات وب رو استایل دهی و واکنشگرا خواهیم کرد این جلسه قسمت اول این مبحث هست و چند جلسه ای به این مورد خواهیم پرداخت ... مطالب مطرح شده در این جلسه عبارتند از : معرفی کامپونت ها و کلاس ها در بوت استرپ برسی فرم کنترلر ها و استایل دهی آنها توسط کلاس های بوت استرپ
  • معرفی کلاس form group
  • معرفی کلاس form control
  • کار با کنترل input
  • کار با کنترل textarea
  • کار با کنترل radio
  • کار با کنترل checkbox
  • کار با کنترل select
  • کار با button ها
  • معرفی کلاس btn
  • معرفی کلاس btn-default
  • معرفی کلاس btn-info
  • معرفی کلاس btn-success
  • معرفی کلاس btn-danger
  • معرفی کلاس btn-primary
  • معرفی کلاس btn-warning
  • معرفی کلاس btn-xs
  • معرفی کلاس btn-sm
  • معرفی کلاس btn-md
  • معرفی کلاس btn-lg
  • معرفی کلاس btn-block
  • معرفی کلاس disable
  • معرفی کلاس active
این مطلب یک جلسه از دوره آموزش جامع فریمورک بوت استرپ (پایه تا پیشرفته) است و برای دیدن آن باید در این دوره ثبت نام کنید .
توضیحات : با توجه به افزایش تولید و فراگیر شدن استفاده از اسمارت فون ها و تبلت ها در چند سال اخیر و رابطه مستقیم آنها با دنیای مجازی و اینترنت مدیران و طراحان وب سایت ها ناچار به تعامل مطلوب با این نوع دستگاها شده اند. اما با استفاده از متدها و روش های طراحی سنتی این تعامل با چالش بزرگی روبرو شد و آن عدم ثبات در تطبیق المان ها موجود در قالب وب سایت ها با سایز های متفاوت صفحه نمایش این دستگاه ها بود که این امر باعث عدم پوشش صحیح تمام یا بخش های مختلف یک سایت بصورت استاندارد توسط این دستگاه ها می شد.به لطف این چالش و بخصوص صفحه نمایش هایی با ابعاد متفاوت تکنولوژی جدیدی با عنوان Responsive Design پا به عرضه ظهور گذاشت و تحول بسیار مطلوبی را در عرصه طراحی وب بوجود آورد. در راستای چنین تحولی و با توجه به کمبود و منابع آموزشی کامل در این زمینه در عرصه وب فارسی تصمیم گرفته ایم تا با یک دوره آموزشی بسیار کامل در زمینه تکنولوژی Responsive Design تحت یکی از فریم ورک های بسیار محبوب و البته قدرتمند در این زمینه با نام Bootstrap در خدمت علاقمندان به مبحث طراحی وب بخصوص طراحی واکنشگرا باشیم تا بتوانیم قدمی دیگر در راستای افزایش سطح علمی علاقمندان به مبحث وب و طراحی آن برداریم...
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

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

  • ‏‏
    mohammad nikkhah(۲۲ تیر ۱۳۹۴)

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

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

      سلام آقا محمد ممنون از شما حجم مباحث بالا هست با این حال سعی کردیم تایم جلسات رو بین 1 تا 1.5 ساعت کاهش بدیم بیشتر از این اگر کاهش بدیم طول دوره زیاد خواهد شد .

  • ‏‏
    amir rahimi morad(۲۴ تیر ۱۳۹۴)

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

  • ‏‏
    افشین زندی(۶ مرداد ۱۳۹۴)

    سلام استاد. خسته نباشید. این جلسه هم خیلی کامل بود. ممنون
    ببخشید 2تا سوال: یکی راجب استفاده از گرید بندی در این جلسه. بعد از کلاس col و well در داخلش از یه کلاس row استفاده کردید. من نفهمیدم این div آخری با کلاس row رو چرا نوشتید؟ دلیل خاصی داره یا اشتباه شد؟؟
    چون گفتید زمانی از کلاس row داخل col ها استفاده میکنیم که بخوایم اون col رو به بخش های دیگه تقسیم کنیم ولی در اینجا همچین کاری نکردید

    سوال دیگمم راجب به کلاس form-group هست. شما اومدید برای هر عنصر جدیدی که گذاشتید(input ها منظورمه) یه div با این کلاس ایجاد کردید، من تمامی این عناصر رو داخل یه div گذاشتم مشکلی نداشت. باید حتما برای هر کدوم این کار رو کنیم یا ن؟

    استاد اگه میشه از این به بعد جلسات رو اگه طولانی هستن به 2پارت تقسیم کنید 2تا پارت 300 مگی هستن که میزنم برا دانلود سیستمم هنگ میکنه! :) دیدن 2/5 فیلم آموزشی هم کار راحتی نیست. اگه 2تا پارت بود خیلی بهتر میشد

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

      به افشین خان کم پیدایی :-) درسته اشتباه تایپی هست البته بد هم نشد مورد جدید رو میشه تجربه کرد دراین حالت زمانی که عرض پنجره کم میشه بین عناصری که کلاس col دارن حاشیه از بالا و پایین ایجاد نمیشه چون در row های مجزا تعریف نشدن این سوال یکی از دوستان هم بود که با دیدن این موضوع پاسخ سوالش رو گرفتن.
      از کلاس form-group هم برای این استفاده میکنیم تا یه مقدار margin-bottom:15 پیکسلی بین فرم کنترل هامون ایجاد کنیم مثلا اگر 2 تا input روی هم داشتین بهم نچسبن کلاس form-group در هسته پراپرتیش و مقدارش رو ببین
      حجم جلسات بیشتر از 200 مگ نیستند به استشنای جلسه 11 و احتمالا پروژه ها اگر بخوایم خوردش کنیم نمیتونیم بصورت آنلاین هم نمایش بدیم و مجبوریم به عنوان دو یا چند جلسه منتشر کنیم که باعث افزایش جلسات در نتیجه افزایش طول دوره میشه از idm برای دانلود استفاده کنید نباید هنگ کنه
      برای جلساتی هم که تایمش زیاده لازم نیست به یکباره ببینید در ساعات مختلف رو قسمتیش رو مشاهد کنید تا کارت راحتر بشه البته یکم سختی کشیدن هم برای رسیدن به هدف بد نیست :-)
      موفق باشی

      • ‏‏
        افشین زندی(۶ مرداد ۱۳۹۴)

        ممنون استاد بابت جوابتون
        همزمانی 3تا دوره بوت استرپ و جاوااسکریپت و sass,less باعث شده یکم کند جلو برم ولی تمرینم خیلی زیاده، اصولی یاد میگیرم که سر قول قالب حرفه ای آخر دوره باشم :smile:
        راستش استاد کدهارو موقع دیدن فیلم برا هر کلاسی که معرفی میکنید بررسی میکنم ولی کلا بدون اون 15px به نظرم فاصله خودشون مناسب بود
        سختی کشیدنش مشکلی نیست ولی اینترنت 128 مخابرات رو نمیشه تحمل کرد!
        در هر صورت ممنون

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

          در کل روش اصولیش استفاده از کلاس form group هست …خیلی خوبه حتما با این پشتکاری که داری موفق خواهی شد دانلود ویدئو هات رو هم بزار برای شب تا صبح

  • ‏‏

    سلام استاد صالحی
    خسته نباشید
    این جلسه هم خیلی خوب بود ممنون
    فقط یه سوال دارم
    ـ افشین هم اینمورد رو گفت حالا منم با این کار راضی نیستم که هر input رو توی یه div قرار بدیم واسه همین رفتم هسته بوت استرپ رو ببینم تا دلیلش رو بفهمم و تنها مورد که باید اینکار رو کنیم همین فاصله 15px بود حالا من اومدم توی فایل custom.css اینجوری نوشتم:

    و بعدا هم همه ای input ها رو توی یه div با کلاس form-group گذاشتم و هیچ مشکلی هم پیش نیومد و قاصله ها هم ایجاد شدن حالا میخواستم بپرسم مشکلی نداره؟ استاندارد هست اینمورد؟
    موفق باشید. :smile:

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

      آره دیگه اینطور هم میشه شما دوتا مباحث سفارشی سازی رو جلو جلو دارید پیاده سازی می کنید :-) و این خیلی خوبه فقط حتما سعی کنید تغییرات رو درون هسته ایجاد نکنید و مثل الان در فایل custom ایجاد و اعمال کنید که هسته با مشکل مواجه نشه که پیدا کردن مشکل درون اون یکم دردسر سازه فقط فایل هایی که برای RTL سازی و از این قبیل هست رو که به مرور در طول دوره میگم اونها رو در هسته تغییر بدید
      موفق باشی

      • ‏‏

        ممنون استاد
        راستش ما دو تا خیلی کنجکاویم 😀 واسه همین اینقدر سوال میکنیم
        راستش خیلی سعی میکنم هسته رو تغییر ندم طوری که بعضی اوقات که فایل bootstrap.css رو باز میکنم فکر میکنم سازندگان بوت استرپ بالای سرم هست که اگه تغییرش دادم بزنه لهم کنه 😛
        موفق باشید

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

          مشکلی بابت سوال کردن نیست اتفاقا خوشحال میشم که واقعا پیگیرید شما 100 تا سوال هم داشته باشید بنده در خدمتتونم اتفاقا کنجکاوی توی مباحث آموزشی خیلی خوبه و کمک زیادی به پیشرفتتون میکنه .نه اتفاقا خیلی مهربونن که اجازه دسترسی به هسته رو به علاقه مندان و توسعه دهنده ها دادن :-) شاید شما ایده های جدیدی به ذهنوتن برسه که باعث توسعه فریم ورک بشه …

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram