آموزش هشدارها در بوت استرپ

4 سال پیش

امتیاز دهید post

آموزش هشدارها در بوت استرپ

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش هشدارها در بوت استرپ خواهیم پرداخت.

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

برای هشدار می توانید یک نماد بسته اختیاری اضافه کنید. برای اخراج مستقیم از افزونه Alerts jQuery استفاده کنید.

با ایجاد یک پوشه <div> و افزودن یک کلاس از .alert و یکی از چهار کلاس متنی می توانید یک هشدار ابتدایی را اضافه کنید . مثال زیر این را نشان می دهد –

&lt;div class = "alert alert-success"&gt;Success! Well done its submitted.&lt;/div&gt;
&lt;div class = "alert alert-info"&gt;Info! take this info.&lt;/div&gt;
&lt;div class = "alert alert-warning"&gt;Warning ! Dont submit this.&lt;/div&gt;
&lt;div class = "alert alert-danger"&gt;Error ! Change few things.&lt;/div&gt;

<div class = "alert alert-success">Success! Well done its submitted.</div>

<div class = "alert alert-warning">Warning ! Dont submit this.</div>

<div class = "alert alert-danger">Error ! Change few things.</div>

هشدارهای اخراج

برای ایجاد هشدار اخراج –

با ایجاد یک پوشه <div> و اضافه کردن یک کلاس از .alert و یکی از چهار کلاس متنی ، یک هشدار اساسی اضافه کنید
همچنین .alert-removeable اختیاری را به کلاس <div> اضافه کنید.
دکمه بستن را اضافه کنید.

مثال زیر این را نشان می دهد –

&lt;div class = "alert alert-success alert-dismissable"&gt;
   &lt;button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true"&gt;
      &amp;times;
   &lt;/button&gt;
    
   Success! Well done its submitted.
&lt;/div&gt;

&lt;div class = "alert alert-info alert-dismissable"&gt;
   &lt;button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true"&gt;
      &amp;times;
   &lt;/button&gt;
    
   Info! take this info.
&lt;/div&gt;

&lt;div class = "alert alert-warning alert-dismissable"&gt;
   &lt;button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true"&gt;
      &amp;times;
   &lt;/button&gt;
    
   Warning ! Dont submit this.
&lt;/div&gt;

&lt;div class = "alert alert-danger alert-dismissable"&gt;
   &lt;button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true"&gt;
      &amp;times;
   &lt;/button&gt;
    
   Error ! Change few things.
&lt;/div&gt;

&times;

</button>

Success! Well done its submitted.

</div>

&times;

</button>

Info! take this info.

</div>

&times;

</button>

Warning ! Dont submit this.

</div>

&times;

</button>

Error ! Change few things.

</div>

حتماً از عنصر <button> به همراه ویژگی data-remove = “alert” استفاده کنید.

لینک ها در هشدارها

برای دریافت لینک ها در هشدارها –

با ایجاد یک پوشه <div> و اضافه کردن یک کلاس از .alert و یکی از چهار کلاس متنی ، یک هشدار اساسی اضافه کنید
برای ارائه سریع لینکهای رنگی منطبق در هر هشدار ، از کلاس ابزار .alert-link استفاده کنید.

&lt;div class = "alert alert-success"&gt;
   &lt;a href = "#" class = "alert-link"&gt;Success! Well done its submitted.&lt;/a&gt;
&lt;/div&gt;

&lt;div class = "alert alert-info"&gt;
   &lt;a href = "#" class = "alert-link"&gt;Info! take this info.&lt;/a&gt;
&lt;/div&gt;

&lt;div class = "alert alert-warning"&gt;
   &lt;a href = "#" class = "alert-link"&gt;Warning ! Dont submit this.&lt;/a&gt;
&lt;/div&gt;

&lt;div class = "alert alert-danger"&gt;
   &lt;a href = "#" class = "alert-link"&gt;Error ! Change few things.&lt;/a&gt;
&lt;/div&gt;

<a href = "#" class = "alert-link">Success! Well done its submitted.</a>

</div>

</div>

<a href = "#" class = "alert-link">Warning ! Dont submit this.</a>

</div>

<a href = "#" class = "alert-link">Error ! Change few things.</a>

</div>

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

برچسب ها : آموزش بوت استرپ آموزش طراحی وب سایت

نویسنده مطلب saber

آموزش هشدارها در بوت استرپ

آموزش هشدارها در بوت استرپ

هشدارهای اخراج

لینک ها در هشدارها

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

آموزش هشدارها در بوت استرپ

هشدارهای اخراج

لینک ها در هشدارها

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه