دکمه ها (buttons) در بوت استرپ

دکمه ها در وب سایت نقش مهمی دارند که از آن ها برای اهداف مختلفی مثل submit کردن یک فرم در html بکار میرود.

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

با سلام خدمت همراهان همیشگیه وب سایت پرنیان طرح

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

استایل های دکمه (Button Styles):

bootstrap 4 دکمه های مختلفی را ارائه میدهد.

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

[php]

<body>

<div class=”container”>
<h2>Button Styles</h2>
<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>
</div>

</body>

[/php]

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

عناصر دکمه (Button Elements):

کلاسهای دکمه را میتوان در عناصر <button> , <a> یا <input> استفاده کرد.

[php]

<body>

<div class=”container”>
<h2>Button Elements</h2>
<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”>
</div>

</body>

[/php]

مانند تصویر زیر:

نکته :

چرا ما یک # را در ویژگی href از لینک قرار میدهیم؟

هنگامی که نمیخواهیم دکمه را به صفحه ی دیگری لینک کنیم و نمیخواهیم پیام ۴۰۴ دریافت کنیم ‌# را به عنوان پیوند قرار میدهیم.

در زندگی واقعی مطمئنا باید یک url واقعی برای صفحه ی جستجو قرار دهیم.

طرح کلی دکمه (Button outline) :

بوت استرپ 8 دکمه ی هاشیه دار را در اختیار شما میگذارد.

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

[php]

<body>

<div class=”container”>
<h2>Button Outline</h2>
<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>
</div>

</body>

مانند دکمه هایی که در تصویر زیر مشاهده میکنید:

[/php]

اندازه های دکمه (Button sizes):

از کلاس btn-lg. برای دکمه های بزرگ و از کلاس btn-sm. برای دکمه های کوچک استفاده کنید.

مثال زیر راببینید :

[php]

<body>

<div class=”container”>
<h2>Button Sizes</h2>
<button type=”button” class=”btn btn-primary btn-lg”>Large</button>
<button type=”button” class=”btn btn-primary btn-md”>Default</button>
<button type=”button” class=”btn btn-primary btn-sm”>Small</button>
</div>

</body>

[/php]

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

دکمه های بلاک ‌(Block level buttons) :

دکمه های بلاک تمام عرض عنصر والد خود را پوشش میدهند.

[php]

<body>

<div class=”container”>
<h2>Block Level Buttons</h2>
<button type=”button” class=”btn btn-primary btn-block”>Button 1</button>
<button type=”button” class=”btn btn-success btn-block”>Button 2</button>
<br>

<h2>Large Block Level Buttons</h2>
<button type=”button” class=”btn btn-primary btn-lg btn-block”>Button 1</button>
<button type=”button” class=”btn btn-success btn-lg btn-block”>Button 2</button>
<br>

<h2>Small Block Level Buttons</h2>
<button type=”button” class=”btn btn-primary btn-sm btn-block”>Button 1</button>
<button type=”button” class=”btn btn-success btn-sm btn-block”>Button 2</button>
</div>

</body>

[/php]

خروجی این مثال را در تصویر زیر ببینید.

دکمه های فعال و غیر فعال (Active/Disable Buttons):

یک دکمه را میتوان روی حالت فعال یا غیر فعال تنظیم کرد.

کلاس active باعث میشود که یک دکمه فشرده شود و ویژگی غیر فعال یک دکمه را غیر قابل کلیک میکند.

توجه داشته باشید که عناصر <a> از ویژگی غیر فعال پشتیبانی نمیکنند و بنابراین باید از کلاس disable استفاده کنند تا ویژگی بصری غیرفعال شود.

[php]

<body>

<div class=”container”>
<h2>Button States</h2>
<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>
</div>

</body>

[/php]