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

بهاره حسنیبهاره حسنی
129 بازدید

دکمه ها در وب سایت نقش مهمی دارند که از آن ها برای اهداف مختلفی مثل 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]

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

bootstrap

 

عناصر دکمه (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]

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

button elements

نکته :

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

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

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

 

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

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

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

[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>

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

outline button

[/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]

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

block buttons

دکمه های فعال و غیر فعال (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]

btn states

دکمه های چرخشی (Spinner buttons) :

همچنین میتوان کلاس spinner را به یک دکمه اضافه کنید برای توضیح بیشتر به این مثال توجه کنید.

[php]

<body>

<div class=”container”>
<h2>Spinner Buttons</h2>
<p>Add spinners to buttons:</p>

<button class=”btn btn-primary”>
<span class=”spinner-border spinner-border-sm”></span>
</button>

<button class=”btn btn-primary”>
<span class=”spinner-border spinner-border-sm”></span>
Loading..
</button>

<button class=”btn btn-primary” disabled>
<span class=”spinner-border spinner-border-sm”></span>
Loading..
</button>

<button class=”btn btn-primary” disabled>
<span class=”spinner-grow spinner-grow-sm”></span>
Loading..
</button>
</div>

</body>

[/php]

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

spinner

ممنونیم که در این ٖآموزش همراه ما بودید تا آموزشی دیگر خدانگهدار.

دسته بندی آموزش bootstrap
اشتراک گذاری

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

دیدگاهتان را بنویسید

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

30+ محصولات
234+ سفارشات تکمیل شده
1701+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت