با سلام خدمت شما عزیزان ، حالتون چطوره ؟درموردایجاد دکمه بابوت استراپ مطلبی براتون اماده کردم .همانطورکه میدانیددکمه ها بخش داخلی یک فرم HTML هستند چه یک لاگین یا یک فرم تماس ساده باشد. دکمه ها برای اهداف مختلفی استفاده می شوند از جمله پذیرفتن یا بازسازی مجدد یک فرم، نشان دادن یک فعالیت مهم و یا به راه انداختن یک رویداد برای انجام کاری روی صفحه ی وب. استایل های مختلفی برای دکمه ها در تویتر بوت استرپ وجود دارند که وضعیت های مختلف مربوط به آن دکمه را نشان می دهند. استایل های مربوط به دکمه ها روی هر عنصری به کار گرفته می شوند. به هرحال به طور معمول برای بهترین اجرا روی عنصرهای a و input و button به کار گرفته می شوند. جدول زیر لیست دکمه های مختلفی را نشان می دهد که در تویتر بوت استرپ موجود هستند.
Description
Class
Button
دکمه ی پیش فرض خاکستری با گرادینت.
btn btn-default
تجسم وزن بصری اضافه را ارائه می دهد تا فعالیت اولیه ی مربوط به دکمه را در مجموعه ای از دکمه ها نشان دهد.
btn btn-primary
می تواند به عنوان یک گزینه برای دکمه ی پیش فرض استفاده شود.
btn btn-info
یک فعالیت موفق یا مثبت را نشان می دهد.
btn btn-success
نشان می دهد که طی انجام این فعالیت باید احتیاط شود.
btn btn-warning
یک فعالیت خطرناک یا منفی را نشان می دهد.
btn btn-danger
دکمه با رنگ خاکستری تیره،که به عملیات Semantic متصل نمی باشد.
btn btn-inverse
با شبیه ساختن یک دکمه به یک لینک در هنگام اجرای رفتار دکمه، تاکید را از روی آن دکمه بر می دارد.
btn btn-link
مثال زیر این دکمه ها را در عمل به شما نشان خواهد داد.
۱
توجه:
اینترنت اکسپلورر ۹ گرادیانت های زمینه را روی گوشه های گرد قطع نمی کند، بنابراین گرادیانت از دکمه ها حذف می شود.
تغییر اندازه دکمه ها
بوت استرپ به شما انتخاب بیشتری برای مقیاس گذاری دکمه به بالا یا پایین می دهد. شما می توانید با اضافه کردن گروه های فوق العاده ی .btn-lg، .btn-sm، یا .btn-xsدکمه ها را کوچکتر یا بزرگتر سازید.
مثال :
۲
خروجی مثال بالا مانند تصویر زیر می باشد.
Bootstrap
شما همچنین می توانید با اضافه کردن گروه فوق العاده ی .btn-blockدکمه های سطح بلوک ایجاد کنید. (دکمه هایی هستند که کل عرض عناصر اصلی را پوشش می دهند.)
خروجی مثال بالا مانند تصویر زیر خواهد بود.
Bootstrap
دکمه های غیرفعال تویتر بوت استرپ
گاهی اوقات لازم است بنا به دلایلی دکمه ای غیرفعال کنیم. به عنوان مثال یک یوزر مجاز به انجام فعالیت مربوط به دکمه نیست و یا اینکه می خواهیم اطمینان حاصل کنیم که یوزر همه ی فعالیت های لازم را تا رسیدن به این فعالیت خاص انجام داده است.
ایجاد دکمه های غیرفعال با استفاده از لینک ها
دکمه هایی که از طریق برچسب a ایجاد شده اند می توانند با اضافه کردن گروه .disabled غیرفعال شوند.
مثال :
۳
خروجی مثال بالا مانند تصویر زیر خواهد بود.
Bootstrap
نکته:
گروه .disabled تنها وضعیت ظاهری لینک را با خاکستری کردن آن یا حذف تاثیر hover تغییر می دهد، به هرحال لینک قابل کلیک شدن باقی می ماند، مگر اینکه شما ویژگی “href” را حذف کنید. پی در پی می توانید از custom java script استفاده کنید تا از آن کلیک ها جلوگیری کنید.
ایجاد دکمه های غیرفعال با استفاده از دکمه و عنصر ورودی
دکمه های ایجاد شده از طریق برچسب های button یا inputبه وسیله ی اضافه کردن ویژگی .disabled به عنصر مربوطه غیرفعال می شوند.
مثال :
۴
خروجی مثال بالا مانند تصویر زیر خواهد بود.
Bootstrap
ایجاد دکمه های با وضعیت
می توانید وضعیت یک دکمه را با اضافه کردن ویژگی داده ی data-loading-text=”Loading…” به دکمه به یک وضعیت بارگذاری تبدیل کنید.
ایجاد دکمه های غیرفعال با استفاده از دکمه و عنصر ورودی
۵
خروجی مثال بالا مانند تصویر زیر خواهد بود.
Bootstrap
نکته:
موزیلا فایرفاکس در بارگذاری صفحه برروی وضعیت غیرفعال پافشاری می کند، برای جلوگیری از این رفتار autocomplete=”off” را روی فرم یا مستقیما روی ورودی یا عنصر دکمه تنظیم کنید که شامل دکمه ها می شود.
ایجاد دکمه ی انفرادی پوشاننده
شما می توانید با اضافه کردن ویژگی داده ی data-toggle=”button” هم پوشانی را فعال کنید( به عنوان مثال تغییر وضعیت عادی یک دکمه به وضعیت push و بالعکس).
۶
خروجی مثال بالا مانند تصویر زیر خواهد بود.
Bootstrap
گرو های دکمه ی تویتر بوت استرپ
مولفه ی گروه دکمه ی تویتر بوت استرپ به شما اجازه می دهد تا مجموعه ای از دکمه ها را در یک خط هم گروه کنید. برای ایجاد گروه های دکمه مجموعه ای از دکمه ها را در div قرار دهید و گروه.btn-group را روی آن به کار برید:
ایجاد دکمه ی انفرادی پوشاننده
شما می توانید با اضافه کردن ویژگی داده ی data-toggle=”button” هم پوشانی را فعال کنید( به عنوان مثال تغییر وضعیت عادی یک دکمه به وضعیت push و بالعکس).
مثال :
۷
خروجی مثال بالا مانند تصویر زیر خواهد بود.
Bootstrap
گرو های دکمه ی تویتر بوت استرپ
مولفه ی گروه دکمه ی تویتر بوت استرپ به شما اجازه می دهد تا مجموعه ای از دکمه ها را در یک خط هم گروه کنید. برای ایجاد گروه های دکمه مجموعه ای از دکمه ها را در
قرار دهید و گروه.btn-group را روی آن به کار برید:
مثال :
۸
خروجی مثال بالا مانند تصویر زیر خواهد بود.
Bootstrap
همچنین می توانید گروه های دکمه ها را به طور عمودی قرار دهید. برای انجام این کار تنها گروه.btn-group را با گروه .btn-group-vertical جایگزین کنید.
مثال :
۹
گرو های دکمه ی تویتر بوت استرپ
شما می توانید برای اجرای روش هم پوشانی روی گروه های دکمه ویژگی data-toggle=”buttons”را به گروه چک باکس ها اضافه کنید، مانند مثال زیر:
مثال :
۱۰
خروجی مثال بالا مانند تصویر زیر خواهد بود.
Bootstrap
اگر می خواهید به طور پیش فرض گزینه ها از قبل چک شوند، گروه .activ را به برچسب عنصر ورودی اضافه کنید.
مثال :
۱۱
ایجاد دکمه های رادیو
مشابها شما می توانید ویژگی data-toggle=”buttons” را به گروهی از ورودی های رادیو اضافه کنید تا روش همپوشانی رادیو را روی گروه های دکمه ها به کار برید.
مثال :
۱۲
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
اگر می خواهید گزینه ای به طور پیش فرض از قبل انتحاب شده باشد، گروه .active را روی برچسب عنصر ورودی اضافه کنید.
مثال :
۱۳
ایجاد ابزارهای دکمه
شما می توانید برای ایجاد مولفه های پیچیده تری مانند تواپلبار دکمه، مجموعه هایی از گروه های دکمه را با هم ترکیب کنید. برای ایجاد تولبار دکمه فقط مجموعه ای از گروه های دکمه را در یک عنصر
قرار دهید و گروه .btn-toolbar را روی آن به کار گیرید.
۱۴
خروجی مثال بالا مانند زیر خواهد بود.
Bootstrap
اندازه گیری ارتفاع گروه های دکمه
شما همچنین می توانید گروه های اندازه گیری دکمه ها مانند .btn-group-lg یا .btn-group-sm یا .btn-group-xs را روی گروه های دکمه ها به کار برید تا گروه های کوچکتر یا بزرگتری ایجاد کنید. فقط این گروه های اندازه گیری را به جای به کار گرفتن روی هر دکمه، مستقیما روی .btn-group به کار برید.
مثال :
۱۵
خروجی مثال بالا مانند تصویر زیر خواهد بود.
Bootstrap
ایجاد گروه های دکمه ی هم راستا
می توانید گروهی دکمه ایجاد کنید که دارای سایز یکسان می باشند تا اینکه کل عرض منبع آن را با به کار بردن گروه .btn-group-justifiedروی گروه پایه ی .btn-group محدود کنید. مثال زیر با استفاده از عنصر a یک گروه دکمه ی همتراز ایجاد می کند.
مثال :
۱۶
به هرحال برای ایجاد گروه های هم تراز دکمه ها با استفاده از عنصر button ، باید هر دکمه را به طور مجزا در یک گروه .btn-group قرار دهید که در غیر اینصورت کار نخواهد کرد.
۱۷
دکمه های فعال از طریق جاوا اسکریپت
شما ممکن است از طریق جاوا اسکریپت نیز دکمه ها را فعال کنید.
مثال :
۱۸
روش ها
این ها روش های استاندارد دکمه های بوت استرپ می باشند. این روش وضعیت push دکمه را در هم می پیچد. این روش وضعیت ظاهری دکمه را تغییر می دهد و آن را شبیه به یک دکمه ی فعال شده می کند. همچنین می توانید با استفاده از ویژگی “data-toggle” درهم پیچیدگی خود کار را نیز فعال کنید.
مثال :
۱۹
این روش وضعیت دکمه را برای بارگذاری تنظیم می کند. در هنگام بارگذاری دکمه غیرفعال است و متن با مقدار “data-loading-text”از عنصر دکمه عوض می شود.
مثال :
۲۰
این روش وضعیت دکمه را با عوض کردن متن با متن اصلی دوباره بازسازی می کند.
مثال :
۲۱
این روش با جابه جا کردن متن با هر داده ی تعریف شده ای از وضعیت متن، وضعیت دکمه را بازسازی می کند.
مثال :
