الصور مع Bootstrapn

في هذا الجزء سوف نتعلم بعض الحيل حول كيفية استخدام الصور مع Bootstrap.

الصور مع Bootstrap

تم تحديث هذه الصفحة لتغطية Bootstrap 4 .

في هذا الجزء سوف نتعلم بعض الحيل حول كيفية استخدام الصور مع Bootstrap.

• صور مستجيبة - تناسب حجم الشاشة تلقائيًا
• محاذاة الصور - محاذاة وسط ، يسار ، محاذاة لليمين
• أشكال الصور - حواف مستديرة ، إلخ.

إذا لم تقم بعد بدمج Bootstrap في مشروعك ، فالرجاء قراءة كيفية استخدام Bootstrap Framework في دروس HTML  .

أسهل طريقة لتضمين الصور في موقع الويب هي كما يلي.

أدخل الصور

<img src = "my-image.png" alt = "صورتي" >

صور مستجيبة

عندما يتم عرض صفحة ويب على شاشات مختلفة ، سيتعين عليك تقليص الصور على الشاشات الأصغر.

يوفر Bootstrap فئة CSS img-fluidتقوم تلقائيًا بضبط الصور لتلائم حجم الحاوية (اقرأ عن الصور المتجاوبة في وثائق Bootstrap ).

أدخل صورة سريعة الاستجابة

<img src = "my-image.png" alt = "صورتي" class = "img-fluid" >

أحجام الصورة

على الرغم من أنه يمكنك تقليص الصورة أو تكبيرها باستخدام قاعدة CSS مثل width: 200px;، إلا أن هذا غالبًا ليس ما تريده. يجب أن تحاول دائمًا تحسين حجم تنزيل صفحة الويب الخاصة بك. إذا سمحت للمستخدم بتنزيل صورة بعرض 400 بكسل وعرضها بدقة 200 بكسل ، فقد يكون ذلك مضيعة لعرض النطاق الترددي.

تبديل القرار

إذا كنت ترغب في مزيد من التحسين ، فيمكنك نقل الصور الصغيرة إلى شاشات صغيرة أثناء عرض الصور الكبيرة على الشاشات الكبيرة. يسمى هذا بتبديل الدقة للصور سريعة الاستجابة. في هذه المقالة حول الصور المتجاوبة ، يمكنك معرفة كيفية القيام بذلك باستخدام srcsetالسمة.

محاذاة الصور

راجع أيضًا محاذاة الصور في وثائق Bootstrap الرسمية.

Center

باستخدام فئة CSS ، mx-autoيمكنك توسيط الصور في Bootstrap. الصور هي عناصر مضمنة بشكل افتراضي. لا يمكن توسيطها إلا إذا جعلناها عنصر كتلة بإضافة الفئة d-block.

 

 

  

توسيط الصورة

<img src = "..." alt = "..." class = "mx-auto d-block" >

ملاحظة: الطبقة mx-autoيمكن أن تستخدم أيضا لمركز أي عناصر HTML. ولكن النص والعناصر المضمنة الأخرى التي يجب أن تستخدم text-centerبدلا من ذلك (انظر تمركز الأفقي و محاذاة النص ).

اليسار واليمين محاذاة

يمكن محاذاة الصور إلى اليسار أو اليمين. ثم يتدفق النص حول الصورة. للقيام بذلك ، نستخدم ما يسمى بالعوامات (اقرأ عن Float

في وثائق Bootstrap).

تعويم: اليسار

<img src = "..." alt = "..." class = "float-left" >

تعويم لليمين

<img src = "..." alt = "..." class = "float-right" >

سطر جديد بعد تعويم (كليرفيكس)

عند الانتقال إلى اليسار أو اليمين ، يتم عرض جميع العناصر التالية بجوار الصورة. إذا كنت تريد أن تبدأ في سطر جديد ، فعليك استخدام clearfixالفصل. عادةً ما يتم إضافة هذه الفئة إلى <div>عنصر أصلي (مزيد من المعلومات حول clearfix في وثائق Bootstrap).

<div class = "clearfix" > <img src = "..." alt = "..." class = "float-left" > <p> يظهر هذا النص بجوار الصورة. </p> </div> <p> يظهر هذا النص أسفل الصورة. </p>
 
 

الهامش حول الصورة

عادة ما تريد بعض الهامش بين الصورة والنص أو أي محتوى آخر. طريقة بسيطة للقيام بذلك هي استخدام Bootstrap Spacing Classes مثل mr-2. ولكن يمكنك أيضًا تحديده marginsفي CSS الخاص بك.

HTML من أجل Gap Right

<img src = "..." alt = "..." class = "pull-left mr-2" >

أشكال الصور

يوفر Bootstrap طرقًا لبعض أنماط الصور البسيطة. يمكنك تدوير الزوايا أو قطع دائرة أو إضافة إطار دقيق .

يمكنك إضافة فئات CSS التالية إلى صورك:

أشكال الصور مع Bootstrap

<img src = "..." alt = "..." class = "rounded" > <img src = "..." alt = "..." class = "rounded-circle" > <img src = "..." alt = "..." class = "img-thumbnail" >

مقالات أخرى للصور

قد تكون المقالات التالية حول الصور ممتعة أيضًا بالنسبة لك:

 تعديل الصوره .

مصادر الصور المجانية.

wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا