آموزش بوت استرپ 4 ، (alert ها در بوت استرپ )
alert ها در بوت استرپ برای متن ها و دکمه ها مورد استفاده قرار میگیرد . شما میتوانید با استفاده از کلاس های زیر یک طراحی مناسب را تجربه کنید.
عکس 1
کد 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 دادن به لینک ها از شیوه زیر عمل میکنیم :
مثال :
<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 اضافی مانند عنوان ها ، پاراگراف ها و تقسیم کننده ها باشند.
مثال:
<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 در بوت استرپ بر روی لینک کلیک کنید
