في هذا الجزء سوف نتعلم بعض الحيل حول كيفية استخدام الصور مع Bootstrap.
الصور مع Bootstrap
في هذا الجزء سوف نتعلم بعض الحيل حول كيفية استخدام الصور مع Bootstrap.
- صور مستجيبة - تناسب حجم الشاشة تلقائيًا
- محاذاة الصور - محاذاة وسط ، يسار ، محاذاة لليمين
- أشكال الصور - حواف مستديرة ، إلخ.
أسهل طريقة لتضمين الصور في موقع الويب هي كما يلي.
أدخل الصور
<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
إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا
COMMENTS