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

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

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

• کلاس btn : این کلاس دکمه ای با متن مشکی و رنگ پس زمینه خاکستری ایجاد می کند . حاشیه های این دکمه نرم شده است.
• کلاس btn-default: این کلاس دکمه ای با متن مشکی و bordeer خاکستری و رنگ پس زمینه سفیدایجاد می کند.حاشیه های این دکمه نرم شده است.
• کلاس btn-primary : این کلاس دکمه ای با متن سفید و رنگ پس زمینه آبی ایجاد می کند.حاشیه های این دکمه نرم شده است.
• کلاسbtn-success : این کلاس دکمه ای با متن سفید و رنگ پس زمینهسبز ایجاد می کند.حاشیه های این دکمه نرم شده است.
• کلاسbtn-info: این کلاس دکمه ای با متن سفید و رنگ پس زمینه آبی آسمانی ایجاد می کند.حاشیه های این دکمه نرم شده است.
• کلاسbtn-warning: این کلاس دکمه ای با متن سفید و رنگ پس زمینهنارنجی ایجاد می کند.حاشیه های این دکمه نرم شده است.
• کلاسbtn-danger: این کلاس دکمه ای با متن سفید و رنگ پس زمینه قرمز ایجاد می کند.حاشیه های این دکمه نرم شده است.
• کلاسbtn-link: این کلاس نوشته ای را به صورت لینک با متن هم رنگ با رنگ لینک های صفحه را ایجاد می کندکه با کلیک روی آن به آدرس مد نظر منتقل می شوید.

به نحوه استفاده از این کلاس ها دقت کنید.

<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</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-link">Link</button>

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

<div class="container">
<h2>Button Tags</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>

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

دربوت استرپ به طور پیش فرض ۴ سایز برای دکمه ها تعریف می شود.

این سایز ها توسط کلاس های زیر در بوت استرپ به دکمه ها اعمال می شوند.

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

btn – lg : کلاسی است که بزرگترین دکمه در لوت استرپ را ایجاد می کند.

.کلاسی است که یک دکمه با سایزمدیوم ایجاد می کند : btn-md

. کلاسی است که یک دکمه با سایز کوچک در بوت استرپ ایجاد می کند : btn-sm

.کلاسی است که کوچکترین سایز دکمه را در بوت استرپ ایجاد می کند : btn-xs

دکمه های BLOCK LEVEL :

همانطور که دردوره آموزشی html برتون توضیح دادیم عناصر Block Level عناصری هستند که تمام عرض عنصر والد را در بر می گیرند.دربوت استرپ کلاس هایی فراهم شده که به وسیله آن ها می توان دکمه های Block level ایجاد کرد.این دکمه ها را می توان در سایز های مختلف ایجاد کرد.دکمه های Block level تمام عرض عنصر والد را در بر می گیرند.به مثال زیر دقت کنید.به قاعده ایجاد دکمه های Block Level دقت کنید:

بیشتر بخوانید : بررسی روش های مختلف کسب درآمد با طراحی سایت

<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-default btn-block">Button 2</button><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-default btn-lg btn-block">Button 2</button><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-default btn-sm btn-block">Button 2</button>
</div>

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

کلاس هایی در بوت استرپ تعریف شده است که به طور پیش فرض می توان در بوت استرپ دکمه های فعال و غیر فعال ایجاد کرد.

<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>
</div>

به راحتی و بدون اینکه وقت برای نوشتن کلاس ها بگذاریم می توانیم دکمه های بوت استرپی فعال و غیر فعال جذابی ایجاد کرد.

همین الان می خوام محصول رو تهیه کنم