دليل أساسي Bootstrap

إضافات Bootstrap

شريط التقدم Bootstrap الشريطات Bootstrap

التنبيهات Bootstrap

في هذا الفصل سنناقش تنبيهات (Alerts) وكلاسات تنبيهات التي توفرها Bootstrap. تنبيهات (Alerts) توفر وسيلة لتحديد نمط الرسائل للمستخدم. إنها توفر ملاحظات سياقية مدمجة للمستخدمين عند تنفيذ عمليات معينة.

يمكنك إضافة زر إغلاق اختياري إلى نافذة التنبيه. لإنشاء تنبيه داخلي قابل للإلغاء، استخدم jQuery插件 تنبيهات (Alerts).

يمكنك إنشاء <div>، وإضافة .alert class و أربعة classes سياقية (أي .alert-success、.alert-info、.alert-warning、.alert-dangerمن بينها، لإضافة نافذة تنبيه أساسية، يرجى الرجوع إلى السطر التالي: <br>السطر التالي يوضح هذا:

مثال على الخط

مثال

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
　　　　<title>مثال Bootstrap - تنبيهات (Alerts)</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="alert　alert-success">نجاح! تم إكمال الإرسال بشكل جيد.</div>
<div　class="alert　alert-info">معلومات! يرجى الانتباه لهذه المعلومات.</div>
<div　class="alert　alert-warning">تحذير! لا تقم بتقديم الطلب.</div>
<div　class="alert　alert-danger">خطأ! يرجى إجراء بعض التغييرات.</div>
</body>
</html>

اختبار لرؤية ‹/›

النتيجة كما ترون:

تنبيهات قابلة للإلغاء (Dismissal Alerts)

إليك الخطوات لإنشاء تنبيه قابل للإلغاء (Dismissal Alert):

من خلال إنشاء <div>، وإضافة .alert class و أربعة classes سياقية (أي .alert-success、.alert-info、.alert-warning、.alert-danger()) واحد منها لإنشاء نافذة تنبيه أساسية.
إضافة ميزة اختيارية إلى <div> class في الأعلى .alert-dismissable.
إضافة زر إغلاق.

السطر التالي يوضح هذا:

مثال على الخط

مثال

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>مثال Bootstrap - تنبيهات قابلة للإلغاء (Dismissal Alerts)</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="alert　alert-success　alert-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	نجاح! تم إكمال الإرسال بشكل جيد.
</div>
<div　class="alert　alert-info　alert-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	معلومات! يرجى الانتباه لهذه المعلومات.
</div>
<div　class="alert　alert-warning　alert-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	تنبيه! لا تقم بإرسال.
</div>
<div　class="alert　alert-danger　alert-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	خطأ! يرجى إجراء بعض التغييرات.
</div>
</body>
</html>

اختبار لرؤية ‹/›

النتيجة كما ترون:

روابط تنبيهات (Alerts)

خطوات إنشاء روابط في تنبيهات (Alerts) كالتالي:

من خلال إنشاء <div>، وإضافة .alert class و أربعة classes سياقية (أي .alert-success、.alert-info、.alert-warning、.alert-danger()) واحد منها لإنشاء نافذة تنبيه أساسية.
استخدام .alert-link مثل الكائنات الفعلية لتقديم روابط بلون مطابق.

مثال على الخط

مثال

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>مثال Bootstrap - رابط تنبيه (Alerts)</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="alert　alert-success">
	<a　href="#"　class="alert-link">نجاح! تم إكمال الإرسال بشكل جيد.</a>
</div>
<div　class="alert　alert-info">
	<a　href="#"　class="alert-link">معلومات! الرجاء الانتباه لهذه المعلومات.</a>
</div>
<div　class="alert　alert-warning">
	<a href="#" class="alert-link">تحذير! لا تقم بتقديم.</a>
</div>
<div class="alert alert-danger">
	<a href="#" class="alert-link">خطأ! قم ببعض التغييرات.</a>
</div>
</body>
</html>

اختبار لرؤية ‹/›

النتيجة كما ترون:

شريط التقدم Bootstrap الشريطات Bootstrap