آموزش بوت استرپ (گام 4) دکمه ها و کلاس های کمکی

دوره بوت استرپ آوریل 2015 20

ضمن عرض سلام ، چهارمین قسمت آموزش فریم ورک محبوب بوت استرپ را تقدیمتان میکنم . ویدئو این قسمت را میتوانید از باکس زیر دانلود کنید :

دانلود فیلم آموزشی
لینک دانلود47 مگابایت

 

اما چکیده این قسمت :

از طریق 3 تگ <a> , <input> و <button> میتوان دکمه های بوت استرپی تولید کرد . ابتدا کلاس btn را به آن نسبت میدهیم ، این کلاس به 3 تگ مذکور حاشیه اضافه میکند اما دکمه بوت اسرپی ما هنوز آماده نیست ؛ برای رنگبندی دکمه باید از یکی کلاس های btn-default , btn-primary , btn-success , btn-info , btn-warning , btn-danger استفاده میکنیم :

btn-bt-class

برای تغییر سایز دکمه ها در بوت استرپ میتوان از کلاس های btn-lg ، btn-sm و btn-xs استفاده کرد :

btn-bs-size

 

و اما چند کلاس برای عکس ها :

برای اینکه عکس درون صفحه ما از حاشیه بیرون نزند و رسپانسیو باشد کلاس img-responsive را به تگ <img> نسبت میدهیم :

برای جلوه دادن به عکس از کلاس های img-rounded ، img-circle و img-thumbnail استفاده میشود :

imges-bs-class

 

و اما کلاس های هشدار :

با اضافه کردن هرکدام از کلاس های text-muted ، text-primary ، text-success ، text-info ، text-warning و text-danger میتوان رنگ متن درون هر تگ را تغییر داد :

همچنین با اضافه کردن هر کدام از کلاس های bg-primary ، bg-success ، bg-info ، bg-warning ، و bg-danger متن تگ را درون یک باکس رنگی قرار داد :

 

یه سری کلاس دیگه هم هست که در انتهای ویدئو این قسمت توضیح داده شده است.

دیدگاه ها
  • danger1875 گفت:

    دمت گرررررررممممم……
    به امید آموزش بوت استرپی دیگر

    🙂

  • ali_nilofar گفت:

    آقای شفیعیان ممنون بابت زحماتتون
    مشتاقانه منتظر ادامه آموزش ها هستم
    لطفا وقتی این آموزش ها تمام شد یه آموزش پروژه محور از اول طراحی قالب تا انتهای بارگذاری در سایت هم به صورت بخش بخش آموزش بدید.
    ممنون از لطف و زحماتتون

    • ali_nilofar گفت:

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

    • حسین شفیعیان گفت:

      خواهش میکنم دوست گرامی
      بله چشم , در پایان چند نمونه پروژه با همدیگه کار خواهیم
      موفق باشید

  • سیدرضا سیدموسوی گفت:

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

  • شهرام گفت:

    Like

  • hamedshademan گفت:

    سلام بسیار متشکرم بابت این آموزش عالی هرچند خیلی دیر رسید ولی رسید بازهم ممنون

    • حسین شفیعیان گفت:

      سلام و تشکر از حمایت شما
      به امید خدا روند ادامه آموزش ها را دوباره آغازخواهم کرد

  • 88dream گفت:

    دست شما درد نکنه.کاش زود به زود آموزش بزارین

    • حسین شفیعیان گفت:

      مرسی , سعی میکنم برای آموزش های آینده تایمی را در طول هفته در نظر بگیرم

  • ghadirkiani گفت:

    سلام
    قسمت سوم رو که گذاشتید من دانلود کردم همون روز
    بعدش رفتم سربازی و امروز بعد از دو ماه اموزشی امدم میبینم فقط یک قسمت اضافه شده!!!!!!!!!!!!!!1
    اقا کارت درسته ما حسابی مشتری شدیم
    یکم زودتر اموزشا رو بزار اخویی
    یا حق

    • حسین شفیعیان گفت:

      سلام
      واقعا دو ماه گذشت ؟؟!!!! چقدر زود میگذره ! 😀
      مرسی از ارسال نظر و امیدوارم آش خوری بهت ساخته باشه

  • kavirpardaz گفت:

    مرسی حسین 🙂

  • mehran گفت:

    Thanks Hossein Jan

  • fatemeh-rad گفت:

    با تشکر از آموزش خوبتون

  • میلاد گفت:

    با سلام.
    با تشکر از زحمات فراوان شما.
    مطالبی بسیار مهم و آموزنده وکاربردی در اختیار کار بران گذاشتید اما حیف نیست بصورت رایگان انتشار میکنید؟؟؟

    • حسین شفیعیان گفت:

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

  • امین گفت:

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

    • حسین شفیعیان گفت:

      سلام
      بله دارم مقدمه چینی های لازم را انجام میدم که سایت دوباره نخوابه ، بزودی …
      در مورد قالب بنده گفتم احتمالش هست که رایگان منتشر کنم و قول صد در صد ندادم !

  • Monier گفت:

    واقعا عالی!

  • دانشجو گفت:

    سلام از آموزشای خوبتون ممنونم خدا خیرتون بده فقط ببخشید این فیلم دانلود نمیشه ….

  • اردلان گفت:

    آقا خدا خیر ت بده تا عمر دارم میدیونتم

  • حسین حیدری گفت:

    عالی بود حسین مرسی.

  • Saeed.N گفت:

    مثل همیشه عالی.
    مستدام باشید.

  • reza vahedi گفت:

    ممنون
    خیلی عالی بود واقعاً استفاده کردم.

  • منا گفت:

    خیلی عالیییییییییییییی.
    حرف نداره

  • mahshid گفت:

    ممنون از اموزشتون،
    من موفق به دریافت این فیلم نشدم.