031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » bootstrap » دکمه ها در بوت استرپ – قسمت اول

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

۵ام مهر ۱۳۹۶
مرضیه خیرخواه
114

دکمه ها در بوت استرپ – آموزش بوت استرپ

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

دکمه ها در bootstrap

همانطور که می دانید تگ button برای ایجاد دکمه استفاده می شود. حال برای این که استایلی را که بوت استرپ برای دکمه ها در نظر گرفته است، به تگ button اضافه کنیم، کافی است از کلاس های بوت استرپ برای دکمه ها استفاده کنیم. این کلاس ها به شرح زیر می باشد.

btn-default  : برای ایجاد یک دکمه ی پیش فرض به رنگ خاکستری است.

btn-primary  : برای مشخص کردن دکمه ی اصلی از این کلاس استفاده می شود.

btn-success  : این کلاس مشخص کننده ی یک عملیات موفقیت آمیز است.

btn-info  : از این کلاس می توان به عنوان یک گزینه برای دکمه ی پیش فرض استفاده کرد.

btn-warning  : این کلاس نشان می دهد که در این فعالیت باید احتیاط شود.

btn-danger  : استفاده از این کلاس نشان دهنده ی یک عملیات خطرناک یا منفی است.

btn-link : از این کلاس به این منظور استفاده می شود که شکل ظاهری دکمه به صورت لینک نمایش داده شود. اما همچنان ویژگی های دکمه را دارد.

قبل از همه ی این کلاس ها باید از کلاس btn استفاده شود. با دقت به کد زیر با نحوه ی استفاده از این کلاس ها آشنا می شوید.

<button type="button" class="btn">Basic Button</button>
<button type="button" class="btn btn-default">Default Button</button>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-link">Link Button</button>

خروجی این کد به صورت زیر است.

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

روش های مختلف ایجاد دکمه

برای ایجاد دکمه علاوه بر تگ button، می توان از تگ های input و a هم استفاده کرد. به کدهای زیر توجه کنید.

 <button type="button" class="btn btn-primary">Button</button>
 <input type="button" class="btn btn-success" value="Input Button">
 <a href="#" class="btn btn-warning" role="button">Link Button</a>
 <input type="submit" class="btn btn-danger" value="Submit Button">

اگر به کدها دقت کنید مشاهده می کنید که برای ایجاد دکمه می توان از تگ input ، هم از نوع submit و هم از نوع button استفاده کرد.

خروجی این کد در تصویر زیر نمایش داده شده است.

روش های مختلف ایجاد دکمه

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

بوت استرپ به شما اجازه می دهد تا با استفاده از کلاس های btn-md ، btn-sm ، btn-xs و btn-lg  سایز دکمه ها را تغییر دهید. این کلاس ها به ترتیب برای ایجاد دکمه ی خیلی کوچک، دکمه ی کوچک، متوسط و دکمه ی بزرگ استفاده می شوند. در کد زیر نحوه ی استفاده از این کلاس ها نشان داده شده است.

<button type="button" class="btn btn-info btn-xs">Xsmall</button>
<button type="button" class="btn btn-info btn-sm">Small</button>
<button type="button" class="btn btn-info btn-sm">Medium</button>
<button type="button" class="btn btn-info btn-lg">Large</button>

 

در تصویر زیر می توانید خروجی کد بالا را مشاهده کنید.

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

 

برای ایجاد دکمه با عرض کامل از کلاس btn-block استفاده می شود. به کد زیر دقت کنید.

<button type="button" class="btn btn-success btn-block">Button</button>
<button type="button" class="btn btn-success btn-lg btn-block">Large Button</button>
<button type="button" class="btn btn-success btn-md btn-block">Medium Button</button>
<button type="button" class="btn btn-success btn-sm btn-block">Small Button</button>
<button type="button" class="btn btn-success btn-xs btn-block">Xsmall Button</button>

خروجی کد بالا

کلاس btn-block

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

حتماً تا کنون با دکمه های غیرفعال در سایت ها مواجه شده اید. برای مثال تا زمانی که اطلاعات یک مرحله را وارد نکرده اید، دکمه ی رفتن به مرحله ی بعد غیر فعال است. اگر علاقمند هستید که بدانید چطور این دکمه ها غیر فعال شده اند، پاسخ آن خیلی ساده است. کافی است از کلاس disabled برای غیر فعال کردن دکمه استفاده کنید. از کلاس active هم برای فعال کردن دکمه استفاده می شود.
در کد زیر از این کلاس ها استفاده شده است.

<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-primary active">Primary Button</button>
<button type="button" class="btn btn-primary disabled">Primary Button</button>

خروجی کد بالا

کلاس disabled و active

 

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

دکمه ها در بوت استرپ – قسمت اول
تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
درباره نویسنده :
مرضیه خیرخواه

مطالب مرتبط

طراحی سایت فروشگاهی

طراحی سایت فروشگاهی میک رویال

طراحی سایت فروشگاه اینترنتی میک رویال طراحی سایت فروشگاهی میک رویال با رعایت اصول سئو در کدنویسی یکی از نمونه کارهای حرفه ای تیم طراحی سایت وب یار است. فروشگاه میک رویال در زمینه ی فروش قاب موبایل ، تیشرت ، گردنبند ، دستبند ، سرکلیدی ، کوسن ، بالشت و رو تختی فعالیت دارد. […]

نحوه ی ساخت پست تایپ سفارشی در وردپرس

نحوه ی ساخت پست تایپ سفارشی در وردپرس

نحوه ی ساخت پست تایپ سفارشی در وردپرس در طول سال های گذشته وردپرس به یک سیستم مدیریت محتوای قوی تبدیل شده است. به طور پیش فرض وردپرس دارای مجموعه ای پست تایپ می باشد. به عنوان مثال برگه ها یا نوشته ها در وردپرس نوعی پست تایپ محسوب می شوند. با این وجود شما […]

نکات مهم در طراحی سایت

طراحی سایت

اهمیت طراحی سایت طراحی سایت برای داشتن یک کسب و کار موفق و پردرآمد و برای به دست آوردن اعتبار در زمینه شغلی اهمیت ویژه ای دارد. برای بالا بردن ارزش یک ‌سایت و جذب بازدیدکنندگان به هیچ معجزه ای احتیاج ندارید فقط باید نکات و اصول طراحی سایت را رعایت کنید. در این مقاله […]

طراحی گرافیک سایت

طراحی گرافیک سایت

طراحی گرافیکی سایت: اگر همه سعی و تلاش خود را پای این موضوع که کاربران فقط به سایت شما وارد شوند بگذارید، باید بدانید که کاملا در اشتباه هستید. اگر طراحی سایت از گرافیک خوبی برخوردار نباشد و برای کاربر جذابیتی نداشته باشد کاربر به محض ورود به سایت از سایت خارج می گردد و […]

ارسال دیدگاه

*    

*    

ارتباط با تیم پشتیبانی وب یار

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

چه کمکی از تیم وب یار بر می آید ، با ما کاملا واضح در میان بگذارید

برای گفتگو کلید ENTER را بفشارید