دليل أساسي لـ Bootstrap4

الأزرار في Bootstrap4 Jumbotron في Bootstrap4

نافذة الإشعارات في Bootstrap4

يمكن لـ Bootstrap 4 تحقيق نافذة الإشعار بسهولة.

يمكن استخدام نوع الكائن .alert، ثم إضافة .alert-success، .alert-info، .alert-warning، باستخدام أنواع الكائنات .alert-danger، .alert-primary، .alert-secondary، .alert-light أو .alert-dark:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>نافذة الإشعار</h2>
　　<p>يمكن استخدام نوع الكائن .alert، ثم إضافة نوع الكائن المخصص للحصول على لون معين:</p>
　　<div　class="alert　alert-success">
　　　　<strong>نجاح!</strong> معلومة نجاح لعملية معينة.
　　</div>
　　<div　class="alert　alert-info">
　　　　<strong>معلومات!</strong> انتبه لهذه المعلومات.
　　</div>
　　<div　class="alert　alert-warning">
　　　　<strong>تحذير!</strong> معلومة تحذيرية.
　　</div>
　　<div　class="alert　alert-danger">
　　　　<strong>خطأ!</strong> عملية فاشلة
　　</div>
　　<div　class="alert　alert-primary">
　　　　<strong>أفضل!</strong> هذا هو معلومة مهمة.
　　</div>
　　<div　class="alert　alert-secondary">
　　　　<strong>ثانوي!</strong> عرض بعض المعلومات غير المهمة.
　　</div>
　　<div　class="alert　alert-dark">
　　　　<strong>اللون الداكن!</strong> نافذة إشعارات لون داكن.
　　</div>
　　<div　class="alert　alert-light">
　　　　<strong>اللون الفاتح!</strong> نافذة إشعارات لون فاتح.
　　</div>
</div>
</body>
</html>

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

إضافة رابط إلى نافذة الإشعار

في نافذة الإشعار، أضف نوع الكائن alert-link إلى علامة التتبع للإشارة إلى لينك يتطابق مع لون الإشعار:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>إضافة رابط إلى المنبه</h2>
　　<p>إضافة صفتي <strong>alert-link</strong> إلى علامة التبويب في الروابط لضبط الألوان التي تتطابق مع لون المنبه:</p>
　　<div　class="alert　alert-success">
　　　　<strong>نجاح!</strong> يجب أن تقرأ هذا الرسالة <a　href="#"　class="alert-link">هذا الرابط</a> بعناية.
　　</div>
　　<div　class="alert　alert-info">
　　　　<strong>معلومات!</strong> يجب أن تقرأ هذا الرسالة <a　href="#"　class="alert-link">هذا الرابط</a> بعناية.
　　</div>
　　<div　class="alert　alert-warning">
　　　　<strong>تحذير!</strong> يجب أن تقرأ هذا الرسالة <a　href="#"　class="alert-link">هذا الرابط</a> بعناية.
　　</div>
　　<div　class="alert　alert-danger">
　　　　<strong>خطأ!</strong> يجب أن تقرأ هذا الرسالة <a　href="#"　class="alert-link">هذا الرابط</a> بعناية.
　　</div>
　　<div　class="alert　alert-primary">
　　　　<strong>مفضل!</strong> يجب أن تقرأ هذا الرسالة <a　href="#"　class="alert-link">هذا الرابط</a> بعناية.
　　</div>
　　<div　class="alert　alert-secondary">
　　　　<strong>ثانوي!</strong> يجب أن تقرأ هذا الرسالة <a　href="#"　class="alert-link">هذا الرابط</a> بعناية.
　　</div>
　　<div　class="alert　alert-dark">
　　　　<strong>لون أرجواني!</strong> يجب أن تقرأ هذا الرسالة <a　href="#"　class="alert-link">هذا الرابط</a> بعناية.
　　</div>
　　<div　class="alert　alert-light">
　　　　<strong>أزرق!</strong> يجب عليك قراءة <a href="#" class="alert-link">هذه المعلومات</a> بعناية.
　　</div>
</div>
</body>
</html>

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

إغلاق النافذة النصية

يمكننا إضافة كلاس .alert-dismissible إلى div في نافذة النصية ، ثم إضافة كلاس "close" و "data-dismiss="alert" لضبط عملية إغلاق النافذة النصية.

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>إغلاق النافذة النصية</h2>
　　<p>يمكننا إضافة كلاس .alert-dismissible إلى div في نافذة النصية، ثم إضافة كلاس "close" و "data-dismiss="alert" إلى رابط زر الإغلاق لضبط عملية إغلاق النافذة النصية.</p>
　　<div class="alert alert-success alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>نجاح!</strong> معلومة نجاح لعملية معينة.
　　</div>
　　<div class="alert alert-info alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>معلومات!</strong> انتبه لهذه المعلومات.
　　</div>
　　<div class="alert alert-warning alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>تحذير!</strong> معلومة تحذيرية.
　　</div>
　　<div class="alert alert-danger alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>خطأ!</strong> عملية فاشلة.
　　</div>
　　<div class="alert alert-primary alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>أفضل!</strong> هذا هو معلومة مهمة.
　　</div>
　　<div class="alert alert-secondary alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>ثانوي!</strong> عرض بعض المعلومات غير المهمة.
　　</div>
　　<div class="alert alert-dark alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>اللون الداكن!</strong> نافذة إشعارات لون داكن.
　　</div>
　　<div class="alert alert-light alert-dismissible">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>اللون الفاتح!</strong> نافذة إشعارات لون فاتح.
　　</div>
</div>
</body>
</html>

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

تنبيه: × (×) هو رمز HTML الخاص، يستخدم لتمثيل عملية الإغلاق وليس الحرف "x".

تأثيرات النافذة النصية

استخدام .fade و .show للتحكم في تأثيرات الظهور والانقسام عند إغلاق النافذة النصية:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>حركات النافذة</h2>
　　<p>.fade و .show كلاهما يستخدمان لضبط تأثيرات الظهور والاختفاء للتعبيرات عند إغلاقها:</p>
　　<div class="alert alert-success alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>نجاح!</strong> معلومة نجاح لعملية معينة.
　　</div>
　　<div class="alert alert-info alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>معلومات!</strong> انتبه لهذه المعلومات.
　　</div>
　　<div class="alert alert-warning alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>تحذير!</strong> معلومة تحذيرية.
　　</div>
　　<div class="alert alert-danger alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>خطأ!</strong> عملية فاشلة.
　　</div>
　　<div class="alert alert-primary alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>أفضل!</strong> هذا هو معلومة مهمة.
　　</div>
　　<div class="alert alert-secondary alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>ثانوي!</strong> عرض بعض المعلومات غير المهمة.
　　</div>
　　<div class="alert alert-dark alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>اللون الداكن!</strong> نافذة إشعارات لون داكن.
　　</div>
　　<div class="alert alert-light alert-dismissible fade show">
　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　<strong>اللون الفاتح!</strong> نافذة إشعارات لون فاتح.
　　</div>
</div>
</body>
</html>

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

الأزرار في Bootstrap4 Jumbotron في Bootstrap4