هشدار

هشدار ساده
    
      <div class="alert alert-primary" role="alert"> هشدار اصلی ساده - بررسی کنید  </div>
      <div class="alert alert-secondary " role="alert"> هشدار ثانویه ساده - بررسی کنید  </div>
      <div class="alert alert-success " role="alert"> هشدار موفقیت ساده - بررسی کنید  </div>
      <div class="alert alert-danger " role="alert"> هشدار خطرناک ساده - بررسی کنید  </div>
      <div class="alert alert-warning " role="alert"> هشدار اخطار ساده - بررسی کنید  </div>
      <div class="alert alert-info " role="alert"> هشدار اطلاعات ساده - بررسی کنید  </div>
      <div class="alert alert-light " role="alert"> هشدار روشن ساده - بررسی کنید  </div>
      <div class="alert alert-dark " role="alert"> هشدار تاریک ساده - بررسی کنید  </div>
هشدار جاشیه دار 
    
      <div class="alert alert-outline-primary" role="alert"> هشدار حاشیه دار اصلی - بررسی کنید  </div>
      <div class="alert alert-outline-secondary " role="alert"> هشدار حاشیه دار ثانویه - بررسی کنید  </div>
      <div class="alert alert-outline-success " role="alert"> هشدار حاشیه دار موفقیت - بررسی کنید  </div>
      <div class="alert alert-outline-danger " role="alert"> هشدار حاشیه دار خطرناک - بررسی کنید  </div>
      <div class="alert alert-outline-warning " role="alert"> هشدار حاشیه دار اخطار - بررسی کنید  </div>
      <div class="alert alert-outline-info " role="alert"> هشدار حاشیه دار اطلاعات - بررسی کنید  </div>
      <div class="alert alert-outline-light " role="alert"> هشدار حاشیه دار روشن - بررسی کنید  </div>
      <div class="alert alert-outline-dark " role="alert"> هشدار حاشیه دار تاریک - بررسی کنید  </div>
هشدار روشن همراه با لینک رنگی
   
     <div class="alert alert-light-primary" role="alert"> هشدار رنگی روشن اصلی   </div>
     <div class="alert alert-light-secondary " role="alert"> هشدار رنگی روشن ثانویه   </div>
     <div class="alert alert-light-success " role="alert"> هشدار رنگی روشن موفقیت   </div>
     <div class="alert alert-light-danger " role="alert"> هشدار رنگی روشن خطرناک   </div>
     <div class="alert alert-light-warning " role="alert"> هشدار رنگی روشن اخطار   </div>
     <div class="alert alert-light-info " role="alert"> هشدار رنگی روشن اطلاعات   </div>
     <div class="alert alert-light-light " role="alert"> هشدار رنگی روشن روشن   </div>
     <div class="alert alert-light-dark " role="alert"> هشدار رنگی روشن تاریک   </div>
هشدارها با آیکن
                      
                        <div class="light-border-primary" role="alert"> هشدار - بررسی کنید  </div>
                        <div class="light-border-secondary " role="alert"> هشدار - بررسی کنید  </div>
                        <div class="light-border-success " role="alert"> هشدار - بررسی کنید  </div>
                        <div class="light-border-danger " role="alert">  هشدار - بررسی کنید  </div>
                        <div class="light-border-warning " role="alert"> هشدار - بررسی کنید  </div>
                        <div class="light-border-info " role="alert"> هشدار - بررسی کنید  </div>
                        <div class="light-border-light " role="alert"> هشدار - بررسی کنید  </div>
                        <div class="light-border-dark " role="alert"> هشدار - بررسی کنید  </div>
هشدارها با حاشیه راست
                      
            
             <div role="alert">
                هشدار با چاشیه سمت راست
              </div>
              <div role="alert">
                هشدار با چاشیه سمت راست
              </div>
              <div role="alert">
                هشدار با چاشیه سمت راست
              </div>
هشدارها با لیبل آیکن
                      
                      <div class="alert alert-label alert-label-primary" role="alert">
                        <p class="mb-0">
                          <i class="ti ti-download label-icon label-icon-primary"></i>
                         هشدار با لیبل و آیکن
                        </p>
                      <div>
                      <div class="alert alert-label alert-label-secondary" role="alert">
                        <p class="mb-0">
                          <i class="ti ti-download label-icon label-icon-secondary"></i>
                         هشدار با لیبل و آیکن
                        </p>
                      <div>
                      <div class="alert alert-label alert-label-success" role="alert">
                        <p class="mb-0">
                          <i class="ti ti-download label-icon label-icon-success"></i>
                         هشدار با لیبل و آیکن
                        </p>
                      <div>
هشدارهای سفارشی قابل محو
  
  
   <div role="alert">
    <div >
      <img src="https://demos.sypna.ir/kiadmin_res/assets/images/alert/cookie-.png" alt="توضیحات تصویر">
      <p >
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
      </p>
      <button type="button" data-bs-dismiss="alert" aria-label="بستن"></button>
    </div>
    </div>

    <div role="alert">
    <p >
      <i ></i>
      لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
    </p>
    <button type="button" data-bs-dismiss="alert"> پذیرش</button>
    </div>

    <div role="alert">
    <h6>
      <i ></i>
      لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
    </h6>
    <p>
      لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
    </p>
    <div >
      <a href="" data-bs-dismiss="alert">عدم پذیرش</a>
      <a href="" >Allow</a>
    </div>
    </div>

    <div role="alert">
    <div >
      <button type="button" data-bs-dismiss="alert" aria-label="بستن"></button>
    </div>
    <div >
    <h4 >
      <img src="https://demos.sypna.ir/kiadmin_res/assets/images/alert/warning.png" alt="توضیحات تصویر">
      Under maintenance
    </h4>
    <p >
      لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
      لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
    </p>
    <div >
      <button type="button" >اطلاعات بیشتر</button>
    </div>
    </div>
هشدارها با محتوای اضافی
  
  
    <div role="alert">
   <h4 >بسیار خوب ! <i 
       data-bs-dismiss="alert"></i></h4>
   <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
   </p>
   <hr>
   <p >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
   </div>
   <div role="alert">
    <h4 >بسیار خوب ! <i 
        data-bs-dismiss="alert"></i></h4>
    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
    </p>
    <hr>
    <p >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
   </div>
   <div role="alert">
   <h4 >بسیار خوب ! <i 
       data-bs-dismiss="alert"></i></h4>
   <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
   </p>
   <hr>
   <p >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
   </div>
   </div>
هشدار زنده
                    
         
            <div id="liveAlert"></div>
            <button type="button" id="liveAlertBtn">نمایش هشدار زنده</button>