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

593 بازدید
دوشنبه ۲۱ دی ۱۳۹۴
لیستی از بهترین مولد های دکمه های بوت استرپReviewed by جواد نبوی on Jan 11Rating: 5.0

حتما همه ی شما فواید استفاده از مولد (Generator) های بوت استرپ را می دانید. ابزار هایی که بدون نیاز به کد نویسی و توسط محیطی گرافیکی به شما اجازه ی ساخت عناصر بوت استرپ را می دهند. مثلا بعضی هایشان امکان ایجاد دکمه های شخصی بوت استرپ را بدون کد نویسی فراهم میکنند. و بعضی های دیگر هم امکان ایجاد چیز های دیگر بوت استرپ را. اما فایده این مولد ها یا ژنراتور ها چیست؟ خب, خیلی ساده است. این ژنراتور ها سرعت کد نویسی را افزایش می دهند و کار را راحت می کنند. اما بعضی ها ترجیح میدهند که به جای استفاده از این ابزار ها, خودشان دست به کار شوند و همه چیز را خودشان کد نویسی کنند. اما وقتی بحث مدیریت زمان به میان می آید, دیگر هیچ چیز نمیتواند جای ژنراتور ها را بگیرد. مثلا من به شخصه وقت کد نویسی همه چیز را ندارم. پس به سراغ ژنراتور ها میروم.

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

۱- Button Builder

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

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

۲- BBG

این سایت امکان ایجاد دکمه هایی با رنگ دلخواه را به شما میدهد. نحوه کار این سایت به این صورت است که رنگ قسمت های مختلف دکمه از جمله پس زمینه, حاشیه ها, رنگ متن و رنگ دکمه در حالت فعال را در آن انتخاب می کنید و سپس کد CSS ای که به شما میدهد را در انتهای فایل bootstrap.min.css خود قرار میدهید. در مرحله ی آخر , کلاسی که در قسمت Class Name تعیین کرده اید را در هر دکمه ای که میخواهید این استایل را داشته باشد قرار میدهید. برای ورود به این سایت اینجا کلیک کنید.

پس مراحل کار در این سایت به این صورت است:

۱- ابتدا تنظیمات دکمه را در قسمت Generate Button انجام میدهید.

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

۲- سپس کدی که در قسمت CSS Code به شما میدهد را کامل کپی کرده و به انتهای فایل bootstrap.min.css اضافه می کنید.

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

۳- در نهایت یک لینک با تگ <a> ایجاد می کنید و کلاس btn-sample را به آن میدهید. (البته نام این کلاس را میتوانید در همان قسمت تنظیمات تغییر دهید و از نام دلخواه خود استفاده کنید)

مولد بوت استرپ

۳- Bootstrap Button Generator

این سایت امکانات فراوانی برای ایجاد یک دکمه بوت استرپ به شما میدهد. از جمله این امکانات میتوان به قابلیت انتخاب نوع دکمه, اندازه, متن, فونت آیکون و … اشاره کرد. کار با این ابزار بسیار ساده است و فقط کافیست بعد از انجام تنظیمات کدی که در سمت راست صفحه قرار دارد را به پروژه تان اضافه کنید. فقط این نکته لازم به ذکر است که اگر در قسمت Button Style گزینه Custom را انتخاب کردید, باید تنظیمات مربوط به رنگ دکمه را نیز انجام دهید و در پایان دو کد به شما داده میشود. کد بالایی مربوط به html است که باید در سند html و در محل قرارگیری دکمه قرار بگیرد. و کد پایینی مربوط به استایل آن است که باید به انتهای فایل bootstrap.min.css یا فایل استایل قالبتان اضافه شود. برای ورود اینجا کلیک کنید.

ژنراتور دکمه های بوت استرپ

۴- Bootsbutton

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

ژنراتور Button های بوت استرپ

۵- Bootstrap 3 Button Generator

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

ژنراتور دکمه های بوت استرپ

۶- Beautiful Buttons for Bootstrappers

یکی از جالبترین ژنراتور ها همین ژنراتور است. فقط کافیست وارد آن شوید تا با نوع رنگ آمیزی خاص آن آشنا شوید. البته این نوع رنگ آمیزی در قسمتی از فتوشاپ هم وجود دارد. پس از رنگ آمیزی دکمه ی خود, کافیست کدی که در سمت راست صفحه به شما میدهد را در فایل استایل قالبتان قرار دهید. سپس کلاس btn-custom را به دکمه یا لینک مورد نظرتان اضافه کنید. ابزار در اینجا.

مولد دکمه های Bootstrap

۷- Bootstrap Button Code Generator

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

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

۸- Button X

این سایت بیشترین امکانات را در بین ژنراتور های موجود دارد. فقط کافیست وارد آن شوید و امکاناتش را ببینید. امکاناتی از قبیل تغییر اندازه قسمت های مختلف دکمه, ایجاد سایه و تعیین اندازه اش, تعیین متن, انتخاب نام کلاس دلخواه, نمونه های پیشفرض و … . بعد از انجام تنظیمات برای استفاده از دکمه کافیست روی دکمه ی Get HTML در پایین بخش پیش نمایش کلیک کنید. با کلیک روی این دکمه کد Html در کلیپ برد ذخیره می شود و میتوانید آن را در سند html تان پیست کنید. سپس روی دکمه Get CSS کلیک کنید و کد کپی شده را به فایل استایل قالبتان اضافه کنید. برای ورود به سایت اینجا کلیک کنید.

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

امیدواریم از این مطلب لذت برده باشید.

تبلیغات

نویسنده (مدیر سایت)

جواد نبوی هستم. حدود 7 سالی میشه در زمینه طراحی وب و گرافیک کار می کنم و بعد از توپ دیزاین، این دومین سایت آموزش طراحی وب و گرافیک هستش که راه انداختم. امیدوارم بتونم برای همه ی شما مفید باشم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *