Bootstrapطراحی سایت
موضوعات داغ

آموزش بوت استرپ ، ( آلرت ها (Alert ها) در بوت استرپ)

آموزش بوت استرپ 4 ، (alert ها در بوت استرپ )

alert ها در بوت استرپ برای متن ها و دکمه ها مورد استفاده قرار میگیرد . شما میتوانید با استفاده از کلاس های زیر یک طراحی مناسب را تجربه کنید.

عکس 1

آلرت ها (Alert ها) در بوت استرپ

کد 1

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>

رنگ لینک

برای alert دادن  به لینک ها از شیوه زیر عمل میکنیم :

مثال :

alert ها در بوت استرپ
<div class="alert alert-primary" role="alert">
  This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Alert  ها همچنین می توانند شامل عناصر HTML اضافی مانند عنوان ها ، پاراگراف ها  و تقسیم کننده ها باشند.

مثال:

کلاس alert در بوت استرپ
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

برای آشنا شدن با مبحث سیستم grid در بوت استرپ بر روی لینک کلیک کنید

مهدی صالحی

مهدی صالحی هستم برنامه نویس فرانت اند و توسعه دهنده اپ موبایل ؛ از تخصص هایی که من توی این دنیای برنامه نویسی کسب کردم میشه به : html&css , bootstrap , Sass , Flexbox , Javascript , jquery , React js , Vue js , React native , pwa اشاره کرد.

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

همچنین ببینید
بستن
دکمه بازگشت به بالا