قسمت نهم bootstrap : نحوه ی تعریف دکمه ها در بوت استرپ 4

قسمت نهم bootstrap : نحوه ی تعریف دکمه ها در بوت استرپ ۴

دکمه ها اصولا یکی از کاربردی ترین مورد ها در طراحی سایت می باشند ، معمولا از دکمه ها یا Button ها در مکان های خاص سایت به عناوین مختلفی استفاده می شود ، در این قسمت از اموزش ها قصد داریم تا نحوه ی صحیح ساخت Button های بوت استرپ ۴ را به شما عزیزان اموزش دهیم پس تا انتهای این اموزش همراه ما باشید.

پیشنهاد میشود برای تکمیل کردن اطلاعاتتان سایر قسمت های دوره ی بوت استرپ را از سایت کدپز دنبال کنید.

استایل دکمه ها در بوت استرپ ۴

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

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

در حالت کلی HTML برای تعریف کردن انواع دکمه ها از تگ button با type یا نوع button استفاده میشود. ولی در حالت کلی تعریف button در بوت استرپ ۴ به شکل تگ button در HTML نیست بلکه با استفاده از تگ های input و a نیز قابل اجراست .

Button ها معمولا سه حالت اند ، یا لینک می شوند ، یا درون صفحه کاری را انجام میدهند ، یا برای فرم ها استفاده میشوند به مثال زیر توجه کنید :

چرا از # در لینک استفاده کردیم ؟

استفاده از # در لینک به این منظور بود که شما عزیزان در ابتدای امر به جای دیگری خارج از سایت هدایت نشوید ، در وهله ی دوم چون لینک جای خاصی مد نظرمان نبود پس تصمیم گرفتیم از شارپ استفاده کنیم تا شما نه به صفحه ی دیگری هدایت شوید و نه دچار مشکل شوید.

طرح دیگری از دکمه ها

Bootstrap 4 هشت دکمه طرح دار / مرزی را به شکل زیر در اختیار شما قرار می دهد:

برای درک بهتر این موضوع به مثال زیر توجه کنید.

سایز دکمه ها

خب به مرحله ای از کار رسیدیم که ابعاد برایمان شاید کاربردی و مهم باشد ، بوت استرپ ۴ سه حالت را در اختیار شما عزیزان قرار داده است حالت اولیه را در کدهای بالا اجرا کردیم و برای کوچکتر شدن سایز دکمه ها از کلاس .btn-sm و برای بزرگتر شدن از حالت اولیه از کلاس .btn-lg به شکل زیر استفاده میکنیم:

تمام عرض

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

در مثال بالا دیدیم که تنها با افزودن کلاس .btn-block تمام سطح پوشش داده شد.

فعال یا غیرفعال !

تا به حال شده است برایتان پیش بیاید تا فرمی را پر نکنید دکمه ی ارسال ان فعال نشود ؟ به نظر من رو مخ ترین Button ها ، Button های غیرفعال اند ! این نوع دکمه ها تنها از نظر من برای رو مخ بودن طراحی شده اند !

برای طراحی این نوع دکمه ها به مثال زیر توجه کنید :

به یاد داشته باشید که تنها تگ های a کلاس .disabled را نمی پذیرند و اگر از انها استفاده کنید تنها ظاهری به شما میدهند که در ظاهر غیرفعال باشد ! ولی در باطن عمل میکند!

دکمه های چرخش

برای حالت های مختلف لود نیز میتوانید از دکمه های زیر استفاده کنید ، در ادامه ی قسمت ها به توضیحات کاملتری در این باره خواهیم پرداخت.

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

خب به انتهای این قسمت از اموزش های بوت استرپ ۴ هم رسیدیم ، پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید و در صورت تمایل میتوانید سایر قسمت های دوره بوت استرپ را دنبال کنید.

موفق باشید.

برچسب ها : اموزش بوت استرپ، اموزش ساخت دکمه در بوت استرپ

دیدگاه تازه ای بنویسید