انتقل إلى محتوى الدرس

BootStrap Border الاطار في bootstrap

ستتعلم في هذا الدرس عمل styling لكثير من elements العناصر وجعلها more responsive اكثر تجاوبا بدون كتابة كود CSS وذلك باستخدام اطار عمل bootstrap.

1 صفوف تعليمية
Bootstrap
3,170 مشاهدة

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

الصف 1 شرح توضيحي
  • من الكلاسات المساعدة في bootsrap هو كلاس border, الذي يستخدم في اضافة او ازالة border من اي عنصر.
  • كلاس border وحده يعطي border: 1px solid black.
  • لعمل border في احد الجوانب فقط يمكن استخدام كلاس *-border حيث * هي top او bottom او start او end بدلا من كلاس border.
  • لتحديد سمك border يتم اضافة كلاس $-border بجانب كلاس border, حيث $ هي رقم من 1 الى 5.
  • لتغيير لون border يتم اضافة احد contextual classes الكلاسات السياقية بجانب كلاس border.
border-primary border-secondary border-success
border-info border-danger border-warning
border-dark border-light border-white



Utility Border

عمل border بتصميمات مختلفة باستخدام bootstrap utilities.

HTML
<span class="border"> border</span>
<span class="border border-0"> border border-0 </span>
<span class="border border-0"> border border-0 </span>
<span class="border border-1"> border border-1 </span>
<span class="border border-primary"> border-primary </span>