با سلام خدمت همراهان همیشگیه وب سایت پرنیان طرح
در این آموزش قصد داریم تا کلاسهای دکمه در بوت استرپ را آموزش دهیم.
استایل های دکمه (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]
مانند تصویر زیر:
طرح کلی دکمه (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]
دکمه های چرخشی (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 مانند تصویر هستند.
ممنونیم که در این ٖآموزش همراه ما بودید تا آموزشی دیگر خدانگهدار.