الصور والأشكال

<!-- صورة متجاوبة --> <img src="example.jpg" class="img-fluid" alt="صورة متجاوبة"> <!-- صورة عادية (غير متجاوبة) --> <img src="example.jpg" alt="صورة عادية"> <!-- صورة متجاوبة في حاوية --> <div class="container"> <div class="row"> <div class="col-md-6"> <img src="photo1.jpg" class="img-fluid" alt="صورة 1"> </div> <div class="col-md-6"> <img src="photo2.jpg" class="img-fluid" alt="صورة 2"> </div> </div> </div>

<!-- صورة مصغرة --> <img src="profile.jpg" class="img-thumbnail" alt="صورة الملف الشخصي"> <!-- صورة مصغرة متجاوبة --> <img src="product.jpg" class="img-thumbnail img-fluid" alt="منتج"> <!-- معرض من الصور المصغرة --> <div class="container"> <div class="row g-3"> <div class="col-6 col-md-4 col-lg-3"> <img src="thumb1.jpg" class="img-thumbnail" alt="مصغرة 1"> </div> <div class="col-6 col-md-4 col-lg-3"> <img src="thumb2.jpg" class="img-thumbnail" alt="مصغرة 2"> </div> <div class="col-6 col-md-4 col-lg-3"> <img src="thumb3.jpg" class="img-thumbnail" alt="مصغرة 3"> </div> <div class="col-6 col-md-4 col-lg-3"> <img src="thumb4.jpg" class="img-thumbnail" alt="مصغرة 4"> </div> </div> </div>

<!-- طفو لليسار --> <img src="example.jpg" class="float-start" alt="طفو لليسار"> <p>يتدفق النص حول الصورة على الجانب الأيمن...</p> <!-- طفو لليمين --> <img src="example.jpg" class="float-end" alt="طفو لليمين"> <p>يتدفق النص حول الصورة على الجانب الأيسر...</p> <!-- مسح الطفو --> <div class="clearfix"> <img src="example.jpg" class="float-start" alt="صورة طافية"> <p>المحتوى هنا...</p> </div> <!-- توسيط الصورة بالهامش التلقائي --> <img src="example.jpg" class="d-block mx-auto" alt="صورة في الوسط"> <!-- طفو متجاوب --> <img src="example.jpg" class="float-md-start" alt="طفو على شاشات متوسطة+"> <p>يطفو لليسار على التابلت وسطح المكتب، يكدس على الموبايل</p>

<!-- زوايا مستديرة --> <img src="example.jpg" class="rounded" alt="زوايا مستديرة"> <!-- مستدير من الأعلى فقط --> <img src="example.jpg" class="rounded-top" alt="مستدير من الأعلى"> <!-- مستدير من النهاية (اليمين في LTR) --> <img src="example.jpg" class="rounded-end" alt="مستدير من النهاية"> <!-- مستدير من الأسفل فقط --> <img src="example.jpg" class="rounded-bottom" alt="مستدير من الأسفل"> <!-- مستدير من البداية (اليسار في LTR) --> <img src="example.jpg" class="rounded-start" alt="مستدير من البداية"> <!-- صورة دائرية --> <img src="profile.jpg" class="rounded-circle" alt="ملف شخصي دائري"> <!-- شكل حبة --> <img src="badge.jpg" class="rounded-pill" alt="شكل حبة"> <!-- بدون تدوير --> <img src="example.jpg" class="rounded-0" alt="بدون زوايا مستديرة"> <!-- زوايا مستديرة كبيرة --> <img src="example.jpg" class="rounded-3" alt="زوايا مستديرة كبيرة">

<!-- شكل أساسي --> <figure class="figure"> <img src="photo.jpg" class="figure-img img-fluid rounded" alt="صورة خلابة"> <figcaption class="figure-caption">تسمية للصورة.</figcaption> </figure> <!-- تسمية محاذاة لليمين --> <figure class="figure"> <img src="photo.jpg" class="figure-img img-fluid rounded" alt="صورة"> <figcaption class="figure-caption text-end"> صورة بواسطة أحمد محمد </figcaption> </figure> <!-- شكل في الشبكة --> <div class="row"> <div class="col-md-6"> <figure class="figure"> <img src="image1.jpg" class="figure-img img-fluid rounded" alt="صورة 1"> <figcaption class="figure-caption"> هذه هي الصورة الأولى في معرضنا. </figcaption> </figure> </div> <div class="col-md-6"> <figure class="figure"> <img src="image2.jpg" class="figure-img img-fluid rounded" alt="صورة 2"> <figcaption class="figure-caption"> هذه هي الصورة الثانية في معرضنا. </figcaption> </figure> </div> </div> <!-- شكل منسق --> <figure class="figure border p-3 rounded bg-light"> <img src="diagram.jpg" class="figure-img img-fluid" alt="مخطط"> <figcaption class="figure-caption text-center mt-2"> <strong>الشكل 1:</strong> مخطط بنية النظام </figcaption> </figure>

<!-- صورة متجاوبة بمصادر متعددة --> <picture> <source media="(min-width: 768px)" srcset="desktop-image.jpg"> <source media="(min-width: 576px)" srcset="tablet-image.jpg"> <img src="mobile-image.jpg" class="img-fluid" alt="صورة متجاوبة"> </picture> <!-- WebP مع احتياطي --> <picture> <source srcset="image.webp" type="image/webp"> <source srcset="image.jpg" type="image/jpeg"> <img src="image.jpg" class="img-fluid" alt="صورة بدعم WebP"> </picture>

<!-- صورة مع تراكب نصي --> <div class="position-relative"> <img src="hero.jpg" class="img-fluid" alt="صورة البطل"> <div class="position-absolute top-50 start-50 translate-middle text-white"> <h2 class="display-4">مرحباً</h2> <p class="lead">في موقعنا الرائع</p> </div> </div> <!-- صورة مع شارة --> <div class="position-relative d-inline-block"> <img src="product.jpg" class="img-fluid rounded" alt="منتج"> <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"> تخفيض </span> </div> <!-- صورة مع تراكب متدرج --> <div class="position-relative overflow-hidden rounded"> <img src="background.jpg" class="img-fluid" alt="خلفية"> <div class="position-absolute bottom-0 start-0 w-100 p-4 text-white" style="background: linear-gradient(transparent, rgba(0,0,0,0.8));"> <h3>عنوان الصورة</h3> <p class="mb-0">وصف الصورة</p> </div> </div> <!-- صورة بتأثير التمرير --> <div class="overflow-hidden rounded"> <img src="photo.jpg" class="img-fluid transition" alt="صورة" style="transition: transform 0.3s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"> </div>

<!-- Object Fit Cover (افتراضي لمعظم الحالات) --> <img src="photo.jpg" class="object-fit-cover" style="width: 300px; height: 200px;" alt="تغطية"> <!-- Object Fit Contain --> <img src="photo.jpg" class="object-fit-contain" style="width: 300px; height: 200px;" alt="احتواء"> <!-- Object Fit Fill --> <img src="photo.jpg" class="object-fit-fill" style="width: 300px; height: 200px;" alt="ملء"> <!-- Object Fit Scale Down --> <img src="photo.jpg" class="object-fit-scale" style="width: 300px; height: 200px;" alt="تصغير"> <!-- Object Fit None --> <img src="photo.jpg" class="object-fit-none" style="width: 300px; height: 200px;" alt="لا شيء">

<div class="container py-5"> <h2 class="text-center mb-4">معرض الصور</h2> <div class="row g-4"> <!-- عنصر المعرض 1 --> <div class="col-lg-4 col-md-6"> <figure class="figure mb-0"> <div class="position-relative overflow-hidden rounded"> <img src="gallery1.jpg" class="figure-img img-fluid mb-0" alt="مشهد طبيعي"> <div class="position-absolute top-0 end-0 m-2"> <span class="badge bg-primary">جديد</span> </div> </div> <figcaption class="figure-caption mt-2"> منظر طبيعي جميل </figcaption> </figure> </div> <!-- عنصر المعرض 2 --> <div class="col-lg-4 col-md-6"> <figure class="figure mb-0"> <div class="rounded overflow-hidden"> <img src="gallery2.jpg" class="figure-img img-fluid mb-0" alt="منظر المدينة"> </div> <figcaption class="figure-caption mt-2"> العمارة الحضرية </figcaption> </figure> </div> <!-- عنصر المعرض 3 --> <div class="col-lg-4 col-md-6"> <figure class="figure mb-0"> <div class="rounded overflow-hidden"> <img src="gallery3.jpg" class="figure-img img-fluid mb-0" alt="صورة شخصية"> </div> <figcaption class="figure-caption mt-2"> تصوير الصور الشخصية </figcaption> </figure> </div> </div> <!-- قسم الصورة المميزة --> <div class="row mt-5"> <div class="col-12"> <div class="card border-0 shadow-lg"> <div class="position-relative"> <img src="featured.jpg" class="card-img-top" alt="مميز"> <div class="position-absolute bottom-0 start-0 w-100 p-4 text-white" style="background: linear-gradient(transparent, rgba(0,0,0,0.9));"> <h3 class="mb-2">الصورة المميزة</h3> <p class="mb-0">هذه صورتنا الفوتوغرافية المميزة لهذا الشهر</p> </div> </div> </div> </div> </div> </div>