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

- visibility ۱۳ mode_comment

در این جلسه و در قسمت هفتم دوره آموزشی فریم ورک بوت استرپ می پرداریم به مبحث 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
info توجه

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

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

comment دیدگاه کاربران
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 باعث شده یکم کند جلو برم ولی تمرینم خیلی زیاده، اصولی یاد میگیرم که سر قول قالب حرفه ای آخر دوره باشم 🙂
راستش استاد کدهارو موقع دیدن فیلم برا هر کلاسی که معرفی میکنید بررسی میکنم ولی کلا بدون اون 15px به نظرم فاصله خودشون مناسب بود
سختی کشیدنش مشکلی نیست ولی اینترنت 128 مخابرات رو نمیشه تحمل کرد!
در هر صورت ممنون

وحید صالحی

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

میوند

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

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

وحید صالحی

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

میوند

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

وحید صالحی

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

amirfff

سلام به دوستان و اساتید محترم
این{}checkbox-inline + .checkbox-inline .
دقیقا چه نوع سلکتوری هستش که توی هسته ی بوت استرپ وجود داره ؟؟؟؟

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.