انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: الصور والأشكال التوضيحية في بوتستراب 5

Image Thumbnails Styling الإطارات المصغرة للصور

تعلّم كيفية بناء الصور المتجاوبة في بوتستراب 5 عبر كلاس img-fluid، وتنسيق الإطارات المصغرة، ومحاذاة وتوسيط الصور في الواجهات العربية والإنجليزية، وإنشاء الأشكال التوضيحية الدلالية.
2 صفوف تعليمية
بوتستراب 5
2 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عند بناء معرض لقطات لمشروع برمجي أو صور منتجات مصغرة، يمنحك كلاس .img-thumbnail إطاراً جاهزاً أنيقاً يضيف حشواً داخلياً قدره 0.25rem وحدّاً رفيعاً بسمك 1px مع زوايا مستديرة ناعمة، فضلاً عن تضمينه تلقائياً لقواعد التجاوب max-width: 100% وheight: auto.

أما إذا رغبت في تنعيم زوايا الصورة الحادة دون إطار خارجي، فيكفي إضافة كلاس .rounded مباشرة إلى جانب .img-fluid.

الصف 2 كود برمجي
HTML 
<div class="row g-3">
  <div class="col-6">
    <img src="/images/examples/laptop-pro.webp"
         class="img-thumbnail" alt="Laptop workstation">
  </div>
  <div class="col-6">
    <img src="/images/examples/studio-desk-3x2.webp"
         class="img-thumbnail" alt="Studio desk">
  </div>
</div>
جرّب بنفسك

جميع فقرات هذا الدرس (الصور والأشكال التوضيحية في بوتستراب 5)