آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

مثال

مقیاس مدالها برای مطابقت با اندازه عنصر اصلی بلافاصله با استفاده از اندازه فونت و اندازه EM است.

Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New

 

 <h1>Example heading <span class="badge badge-secondary">New</span></h1> <h2>Example heading <span class="badge badge-secondary">New</span></h2> <h3>Example heading <span class="badge badge-secondary">New</span></h3> <h4>Example heading <span class="badge badge-secondary">New</span></h4> <h5>Example heading <span class="badge badge-secondary">New</span></h5> <h6>Example heading <span class="badge badge-secondary">New</span></h6>

 

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

 

 <button type="button" class="btn btn-primary"> Notifications <span class="badge badge-light">4</span> </button>

 

توجه داشته باشید که بسته به نحوه استفاده از آنها، مدالها ممکن است برای کاربران خوانندگان صفحه نمایش و تکنولوژی های مشابه کمک کننده باشد. در حالی که ظاهر مدالها یک نشانه بصری برای اهدافشان فراهم می کند، این کاربران به سادگی با محتوای نشان ارائه می شوند. بسته به وضعیت خاص، این مدالها ممکن است به عنوان کلمات یا عبارات اضافی تصادفی در پایان یک جمله، لینک یا دکمه ظاهر شوند.
 
 <button type="button" class="btn btn-primary"> Profile <span class="badge badge-light">9</span> <span class="sr-only">unread messages</span> </button>

 

تغییرات متنی

هر یک از کلاس های اصلاح کننده زیر را اضافه کنید تا ظاهر یک نشان را تغییر دهید.

Primary Secondary Success Danger Warning Info Light Dark

 <span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span> <span class="badge badge-success">Success</span> <span class="badge badge-danger">Danger</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-info">Info</span> <span class="badge badge-light">Light</span> <span class="badge badge-dark">Dark</span>

 

مدال های قرص

با استفاده از کلاس اصلاح کننده bugge-pill.، مدالها را گرد می کنید. اگر از برچسب V3 از دست رفته باشید، مفید است.

Primary Secondary Success Danger Warning Info Light Dark

 <span class="badge badge-pill badge-primary">Primary</span> <span class="badge badge-pill badge-secondary">Secondary</span> <span class="badge badge-pill badge-success">Success</span> <span class="badge badge-pill badge-danger">Danger</span> <span class="badge badge-pill badge-warning">Warning</span> <span class="badge badge-pill badge-info">Info</span> <span class="badge badge-pill badge-light">Light</span> <span class="badge badge-pill badge-dark">Dark</span>

 

لینک ها

با استفاده از کلاسهای -*badge. متنی در یک عنصر <a> علامت های عملیاتی را با حالت های شناور و تمرکز به سرعت ارائه می دهد.

Primary Secondary Success Danger Warning Info Light Dark

 <a href="#" class="badge badge-primary">Primary</a> <a href="#" class="badge badge-secondary">Secondary</a> <a href="#" class="badge badge-success">Success</a> <a href="#" class="badge badge-danger">Danger</a> <a href="#" class="badge badge-warning">Warning</a> <a href="#" class="badge badge-info">Info</a> <a href="#" class="badge badge-light">Light</a> <a href="#" class="badge badge-dark">Dark</a>