دليل أساسي Bootstrap4

نافذة العرض في Bootstrap4 نموذج مخصص في Bootstrap4

التحول في Bootstrap4

العرض المتكرر (يُسمى أيضًا شرائح أو عرض الصور المتحركة) هو واحد من أفضل الطرق لعرض كميات كبيرة من المحتوى في مساحة صغيرة جدًا على صفحة الويب. إنه تمثيل ديناميكي للمحتوى، حيث يمكن للمستخدمين رؤية أو الوصول إلى النصوص والصور من خلال التصفح المتكرر للمشاريع المتعددة.

العرض المتكرر هو عرض شرائح (عنوان:https://ar.oldtoolbag.com/run/html/bootstrap-carousel-example.html)

كيفية إنشاء عرض صور متحركة

في هذا المثال تم إنشاء تأثير عرض صور متحركة بسيط:

النموذج

<!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>
　　<style>
　　/* جعل الصورة متجاوبة بشكل كامل */
　　.carousel-inner img {
　　　　　　العرض: 100%;
　　　　　　الارتفاع: 100%;
　　}
　　</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
　
　　<!-- مؤشرات -->
　　<ul class="carousel-indicators">
　　　　<li data-target="#demo" data-slide-to="0" class="active"></li>
　　　　<li data-target="#demo" data-slide-to="1"></li>
　　　　<li data-target="#demo" data-slide-to="2"></li>
　　</ul>
　
　　<!-- صور العرض -->
　　<div class="carousel-inner">
　　　　<div class="carousel-item active">
　　　　　　<img src="https://ar.oldtoolbag.com/run/images/slide01.png">
　　　　</div>
　　　　<div class="carousel-item">
　　　　　　<img src="https://ar.oldtoolbag.com/run/images/slide02.png">
　　　　</div>
　　　　<div class="carousel-item">
　　　　　　<img src="https://ar.oldtoolbag.com/run/images/slide03.png">
　　　　</div>
　　</div>
　
　　<!-- زر التبديل إلى اليمين واليسار -->
　　<a class="carousel-control-prev" href="#demo" data-slide="prev">
　　　　<span class="carousel-control-prev-icon"></span>
　　</a>
　　<a class="carousel-control-next" href="#demo" data-slide="next">
　　　　<span class="carousel-control-next-icon"></span>
　　</a>
　
</div>
</body>
</html>

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

أضف وصف للصور المتحركة

في كل <div أضف <div> في داخل <class="carousel-item"> لتعيين نص وصف الصورة للعرض:

النموذج

<!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>
　　<style>
　　/* جعل الصورة متجاوبة بشكل كامل */
　　.carousel-inner img {
　　　　　　العرض: 100%;
　　　　　　الارتفاع: 100%;
　　}
　　</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
　
　　<!-- مؤشرات -->
　　<ul class="carousel-indicators">
　　　　<li data-target="#demo" data-slide-to="0" class="active"></li>
　　　　<li data-target="#demo" data-slide-to="1"></li>
　　　　<li data-target="#demo" data-slide-to="2"></li>
　　</ul>
　
　　<!-- صور العرض -->
　　<div class="carousel-inner">
　　　　<div class="carousel-item active">
　　　　　　<img src="https://ar.oldtoolbag.com/run/images/slide01.png">
　　　　　　<div class="carousel-caption">
　　　　　　　　<h2>عنوان وصف الصورة الأولى</h2>
　　　　　　　　<p>نص الوصف!</p>
　　　　　　</div>
　　　　</div>
　　　　<div class="carousel-item">
　　　　　　<img src="https://ar.oldtoolbag.com/run/images/slide02.png">
　　　　　　<div class="carousel-caption">
　　　　　　　　<h2>عنوان وصف الصورة الثانية</h2>
　　　　　　　　<p>نص الوصف!</p>
　　　　　　</div>
　　　　</div>
　　　　<div class="carousel-item">
　　　　　　<img src="https://ar.oldtoolbag.com/run/images/slide03.png">
　　　　　　<div class="carousel-caption">
　　　　　　　　<h2>عنوان وصف الصورة الثالثة</h2>
　　　　　　　　<p>نص الوصف!</p>
　　　　　　</div>
　　　　</div>
　　</div>
　
　　<!-- زر التبديل إلى اليمين واليسار -->
　　<a class="carousel-control-prev" href="#demo" data-slide="prev">
　　　　<span class="carousel-control-prev-icon"></span>
　　</a>
　　<a class="carousel-control-next" href="#demo" data-slide="next">
　　　　<span class="carousel-control-next-icon"></span>
　　</a>
　
</div>
</body>
</html>

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

تعريف الفئات المستخدمة في هذا المثال

الصفن	الوصف
.carousel	إنشاء عرض تحول
.carousel-indicators	إضافة مؤشر للاهتزاز، وهو مجموعة من النقاط في أسفل الصورة التحريرية، يمكن عرضها أثناء التحرير لمعرفة أي صورة يتم عرضها حاليًا
.carousel-inner	إضافة الصور التي تريد التبديل بينها
.carousel-item	تحديد محتوى كل صورة
.carousel-control-prev	إضافة زر في الجانب الأيسر، عند الضغط عليه سيتم العودة إلى الصورة السابقة
.carousel-control-next	إضافة زر في الجانب الأيمن، عند الضغط عليه سيتم التبديل إلى الصورة التالية
.carousel-control-prev-icon	استخدامها مع .carousel-control-prev لضبط الزر الموجود على الجانب الأيسر
.carousel-control-next-icon	استخدامها مع .carousel-control-next لضبط الزر الموجود على الجانب الأيمن
.slide	تغيير التحويل والتحرك في الصور، إذا لم تكن بحاجة إلى هذا التأثير، يمكنك حذف هذا الصنف.

نافذة العرض في Bootstrap4 نموذج مخصص في Bootstrap4