استدارة الحواف والأشكال الدائرية | الحدود والأبعاد والظلال في بوتستراب 5

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

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

تحدد زوايا العناصر شخصية التصميم بين الطابع الرسمي الحاد والطابع العصري الودود. يقدم بوتستراب 5.3 ست درجات قياسية لاستدارة الحواف تبدأ من .rounded-0 لإلغاء الاستدارة تماماً، ثم تتدرج من .rounded-1 إلى .rounded-5 لإعطاء زوايا كبيرة وناعمة للبطاقات العصرية.

وللأشكال الهندسية الخاصة، يصنع كلاس .rounded-circle دائرة مثالية بشرط تساوي عرض العنصر وارتفاعه (مربع متساوي الأضلاع)، بينما يمنح .rounded-pill أي عنصر مستطيل حواف كبسولة دائرية أنيقة، مع دعم تدوير جهة واحدة مثل .rounded-top أو .rounded-end-4.

الصف 2 كود برمجي

HTML

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <img src="/images/examples/studio-desk-3x2.webp"
      width="64" height="64" class="rounded-circle"
      alt="Square cropped icon">
  </div>
  <div class="col">
    <div class="px-3 py-2 text-bg-primary rounded-pill">
      Capsule Pill Banner (.rounded-pill)
    </div></div></div>

جرّب بنفسك

Border Radius and Pills استدارة الحواف والأشكال الدائرية

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

جميع فقرات هذا الدرس (الحدود والأبعاد والظلال في بوتستراب 5)