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

هدایت عباسی آموزش بوت استرپ

در این بخش ، دکمه ها در بوت استرپ 4 و 3 همراه با مثال آموزش می دهیم. با انواع دکمه ها در بوت استرپ آشنا می شوید. با کلاس های btn و outline و btn-block و Spinner و غیره آشنا می شوید.

کدهای زیر را در یک فایل html ذخیره کرده ، فایل های بوت استرپ 4 را فراخوانی کرده و نتیجه را ببینید. کدها همه تست شده می باشند.

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

در این بخش از آموزش بوت استرپ از تاپ سایت 98 به سراغ انواع دکمه ها در بوت استرپ می رویم.

در زیر می توانید با انواع دکمه ها آشنا شوید و بر اساس رنگ بندی قالب خود ، از آنها استفاده کنید.

در بوت استرپ 3 دکمه ها وجود دارند ولی در بوت استرپ 4 چند کلاس دیگر اضافه شده است.

<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>

کلاس btn در تگ های مختلف

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

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

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

دکمه outline

در زیر با دکمه outline در بوت استرپ 4 آشنا می شویم.

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

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>

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

سایز دکمه در بوت استرپ می توانید بزرگ ، متوسط و کوچک باشد.

کلاس btn-lg یعنی بزرگ

کلاس btn-md یعنی متوسط که پیش فرض است.

کلاس btn-sm یعنی کوچک

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

کلاس btn-block

کلاس btn-block عرض دکمه را به اندازه عرض صفحه می کند.

<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>

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

اگر می خواهید رنگ دکمه فعال با بقیه دکمه ها فرق کند می توانید کلاس active را به دکمه بدهید و رنگ آن آبی پررنگ می شود.

اگر می خواهید یک دکمه غیرفعال باشد می توانید به آن کلاس disabled اضافه کنید.

<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>

دکمه Spinner

دکمه Spinner یکی دیگر از دکمه های جدید در بوت استرپ 4 می باشد.

در مثال زیر کلاس spinner-border را به span داده ایم.

همچنین می توانیم سایز spinner را نیز مشخص کنیم.

از این کلاس می توانید برای دکمه های loading استفاده کنید.

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

<div class="container">
<button class="btn btn-primary">
<span class="spinner-border spinner-border-md"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-lg"></span>
Loading..
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary">
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
</div>

امیدواریم این آموزش برای شما مفید باشد.

موفق باشید.

این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید