آموزش تصویری ایجاد دکمه در بوت استرپ

آموزش تصویری ایجاد دکمه در بوت استرپ

می دانیم که در دنیای وب و طراحی سایت ، دکمه ها معمولا نفش رابط کاربر و سرور هستند و وظیفه دارند دستور دهند امروز در آموزش تصویری ایجاد دکمه در بوت استرپ می خواهیم یاد بگیریم که به وسیله تگ a  یا تگ button در HTML  چگونه می توانیم یک دکمه بسازیم که نقش بپذیرد یا فرمان دهد.

در بوت استرپ ، آن چیزی که برای دکمه ها از اهمیت بالایی برخوردار است ، ساختار ریسپانسیو دکمه ها می باشد و به ما کمک می کند تا بنوانیم دکمه هایی ایجاد کنید که همواره آنها را واکنش گرا کنیم.

ما در کلاس آموزش HTML- CSS ، اشاره کرده بودیم که دکمه ها را چگونه ایجاد می کنیم و حتی برای نمونه ، برای شما دکمه خرید دیجی کالا را نیز طراحی کردیم.

حالا امروز در آموزش تصویری ایجاد دکمه در بوت استرپ از مجموعه آموزش تصویری بوت استرپ ، قرار است کار با دکمه ها و انواع دکمه ها را آموزش ببینیم که از شما می خواهیم با ما همراه باشید.

کلاس آموزش بوت استرپ ، یکی از کلاس هایی هست که معمولا دانشجویان پس از گذراندن کلاس آموزش Html  در آن شرکت می کنند و اگر فکر می کنید با استفاده از فیلم های آموزش تصویری نمی توانید موفقیت آنچنانی را کسب کنید ، به شما توصیه می کنیم در کلاس های حضوری شرکت نمایید.

مهندس مهدی موسوی ، مدرس این دوره آموزشی می باشند که می توانید سئوالات خود را از ایشان بپرسید .

ما در آکادمی پرتو ، در کنار شما هستیم.

آموزش تصویری ایجاد دکمه دربوت استرپ

همراهان همیشگی آموزشگاه کامپیوتر پرتو سلام وقتتون بخیر باشه
امروز میخوایم در مورد دکمه ها در بوت استرپ باهاتون صحبت کنیم ببینیم که به چه صورت هست
یه توضیحی بهتون بدم ازمن پرسیده بودن این کدهایی که میبینید رومن جلسه اول درس دادم که ازکجا اومده یعنی ایناهستن واز
سورس اصلی هستن من فقط با تگ بادی کار دارم وتایتل روعوض میکنم مثلا امروز مینویسم آموزش کاربا دکمه ها در بوت استرپ
اینا هستن ولی بعدها شایداگه فرصت شد میگم که بایداینا پاک بشن یا نشن
میخوایم درمورد دکمه ها باهم صحبت بکنیم توی دوره های html/css اومده بودیم گفته بودیم برای ایجاد دکمه مثلا دکمه آکادمی
پرتو که اینجا تگ Aداره هم میتونیم از تگ A استفاده کنیم هم میتونیم ازتگی استفاده کنیم به نام تگ دکمه مثلا من اسم خودم رواینجا
مینویسم ویه br بینشون میزنم که ببینیم به چه صورت میشه خب الآن من عملا اینجا فقط دوتا دکمه ایجاد کردم حالاباز برای اینکه
بوت استرپ تر بشه یعنی مدل بوت استرپ بشه کلاس کانتینرهم میندازم که جذاب تر بشه برمیگردونم توی فایرفاکس میبینیم که دکمه
مون اومده دقت بفرمایید که اینجامن اینو چون زوم کرده بودم به این صورت نبود و تگ A به صورت لینک اومده وتگ button به
صورت یه دکمه.
اینکه این دوتا تگ به صورت کلی چه تفاوتی باهم دارن مفصلا توی html/css درموردشون صحبت کردم فقط یه اشاره میکنم
که تگ A وتگ Button ازنظرمفهومی خب شاید فرقی نداشته باشن تگA تگ لینک دهیه یعنی شما خیلی راحت میتونید توتگA
بیاین لینک بنویسید تگ Button هم همونه اما لینک روسخت ترمیگیره نقش بهتر میگیره جفت تگ A وButton توجاوااسکریپت
میتونن نقشهای مختلف بگیرن ما ازتگ A برای لینک دهی استفاده میکنیم و تگ Button برای دکمه درست کردن بعدها به این
نتیجه رسیدیم که بهتره دکمه رو با تگ A درست کنیم توی دوره html/css دلایلشم توی دوره ذکر کرده بودم اما من دوتاشو میگم با
این پیش فرض ذهنی که ممکنه بخواید ازهرکدوم استفاده کنیدخب مابرای اینکه بخوایم دکمه درست کنیم اینجا کلاسی داریم اولین
کلاسی که میدیم بهش کلاس، کلاس btn هستش کلاس btn رومن میام میدم به تگ A واینجا وقتی که اینومیارم رفرش میکنم میبینم
که هیچ اتفاق خاصی نیفتادوخط زیررفت و یه ذره هم حالت پدینگ به خودش گرفت ومیام همین کلاس Btn روبه تگ Button میدم
ورفرش میکنیم by default الآن من دکمه خیلی خوشگل دارم نسبت به کلیک موسم داره از خودش واکنش نشون میده این هم
همینطور،این رنگ داره این رنگ نداره خوبه که اینا روببینید چون که خیلی به دیدتون کمک میکنه مشکلی که ماالآن داریم و
مسئله ای که وجود داره بحث رنگ دادنه
رنگ دادن روجلسه پیش مفصلا درموردش صحبت کردم وخیلی ساده شما انقدر باهوش باشیدکه برید بگید استاد این btn مثلا دنجر
بیا به این بده ببینید دکمه من رنگ قرمزگرفت یااصلا استاد بیا به این بده کلاس btn space، btn مثلا info بهش بده ورفرش میکنیم
به این سادگی ، یعنی به همین سادگی من اومدم دکمه درست کردم دکمه ها کارمیکنن وشما به هرتعدادی هم که بخوای دکمه
هارودرست کنی چه داخل این وچه داخل این بخوای مثلا به این بدی primary چیزی که مفصلا درموردش صحبت کردیم بخوام
مثلا به این بدم info بخوام مثلا به این بدم danger یابه این بدم warning خیلی راحت میتونم ازشون استفاده بکنم ودکمه های
مختلف رو به حالتای مختلف ببینم. پس برای ایجاد دکمه دربوت استرپ ماازاین ترفند بدون مشکل میتونیم استفاده کنیم فقط کافیه
که بدونیم که کدوم دکمه کجامیتونه برامون استفاده داشته باشه.
این روهم بگم که ما معمولاازتگA استفاده میکنیم برای دکمه.اگرمیخوایم فوم درست کنیم که توی فرم اونجا اصلاbutton نمیدیم
A هم نمیدیم تگ input دادیم تو تگ فرم.این مبحث دیگه ایه واین روهم بگم پایین این آموزش که گاهی اوقات ممکنه که شما مباحثی
روکه من میگم رو متوجه نشید یا براتون گنگ باشه.
دوتا دلیل داره یا اینکه شاگردمن نبودید وبا کل محتویاتی که من دردوره های قبلی گفتم آشنا نیستیدیاروی html/scc خیلی
مسلط نیستید.
Html/css روخیلی از بچه ها ادعا میکنن که بلدند ولی وقتی توی کلاس قرار میگیرند متوجه میشن که بلد نیستن
Html/css واقعا درس مهمیه راحته ولی خیلی مهمه. به هرحال اگرلازمه سعی بکنید که این مهارت رویاد بگیرید
براتون آرزوی موفقیت میکنم وخوشحالم که خدا توفیق داده که بتونم درخدمتتون باشم.
به امیددیدار شما شادوموفق وپیروزباشید.