الحدود والظلال

<!-- إضافة حدود لجميع الجوانب --> <div class="border">حدود على جميع الجوانب</div> <!-- إضافة حدود لجوانب محددة --> <div class="border-top">حد علوي فقط</div> <div class="border-end">حد يميني فقط</div> <div class="border-bottom">حد سفلي فقط</div> <div class="border-start">حد يساري فقط</div> <!-- إزالة الحدود --> <div class="border border-0">بدون حد</div> <div class="border border-top-0">بدون حد علوي</div> <div class="border border-end-0">بدون حد يميني</div> <div class="border border-bottom-0">بدون حد سفلي</div> <div class="border border-start-0">بدون حد يساري</div>

<!-- حدود بألوان الموضوع --> <div class="border border-primary">حد Primary</div> <div class="border border-secondary">حد Secondary</div> <div class="border border-success">حد Success</div> <div class="border border-danger">حد Danger</div> <div class="border border-warning">حد Warning</div> <div class="border border-info">حد Info</div> <div class="border border-light">حد Light</div> <div class="border border-dark">حد Dark</div> <div class="border border-white">حد White</div>

<!-- عروض الحدود من 1 إلى 5 --> <div class="border border-1">عرض الحد 1px</div> <div class="border border-2">عرض الحد 2px</div> <div class="border border-3">عرض الحد 3px</div> <div class="border border-4">عرض الحد 4px</div> <div class="border border-5">عرض الحد 5px</div> <!-- دمج مع الألوان --> <div class="border border-primary border-3"> حد سميك Primary </div>

<!-- شفافية الحدود من 10 إلى 100 --> <div class="border border-primary border-opacity-100">شفافية 100%</div> <div class="border border-primary border-opacity-75">شفافية 75%</div> <div class="border border-primary border-opacity-50">شفافية 50%</div> <div class="border border-primary border-opacity-25">شفافية 25%</div> <div class="border border-primary border-opacity-10">شفافية 10%</div>

<!-- جميع الزوايا مستديرة --> <div class="rounded">زوايا مستديرة</div> <div class="rounded-0">بدون زوايا مستديرة</div> <div class="rounded-1">استدارة صغيرة (0.25rem)</div> <div class="rounded-2">استدارة متوسطة (0.375rem)</div> <div class="rounded-3">استدارة كبيرة (0.5rem)</div> <div class="rounded-4">استدارة كبيرة جداً (1rem)</div> <div class="rounded-5">استدارة كبيرة جداً جداً (2rem)</div> <!-- زوايا محددة --> <div class="rounded-top">زوايا علوية مستديرة</div> <div class="rounded-end">زوايا يمينية مستديرة</div> <div class="rounded-bottom">زوايا سفلية مستديرة</div> <div class="rounded-start">زوايا يسارية مستديرة</div> <!-- أشكال خاصة --> <div class="rounded-circle" style="width: 100px; height: 100px;"> دائرة </div> <div class="rounded-pill">شكل حبة</div>

<!-- أحجام ظلال مختلفة --> <div class="shadow-none">بدون ظل</div> <div class="shadow-sm">ظل صغير</div> <div class="shadow">ظل عادي</div> <div class="shadow-lg">ظل كبير</div> <!-- ظل مع خلفية --> <div class="bg-white shadow-lg rounded p-4"> بطاقة مع ظل كبير </div>

<!-- بطاقة مع حد وظل --> <div class="border border-2 border-primary rounded shadow-sm p-4"> <h5>بطاقة مميزة</h5> <p>هذه البطاقة لها حد ملون وزوايا مستديرة وظل خفيف.</p> </div> <!-- صندوق بنمط التنبيه --> <div class="border-start border-5 border-warning bg-warning bg-opacity-10 rounded-end shadow-sm p-3"> <strong>تحذير:</strong> يرجى مراجعة تغييراتك قبل الإرسال. </div> <!-- بطاقة مرتفعة --> <div class="bg-white rounded-3 shadow-lg p-4"> <h4>محتوى مرتفع</h4> <p>الظلال الكبيرة تخلق تأثير عائم.</p> </div> <!-- بطاقة ذات حد خفيف --> <div class="border border-light rounded-2 p-4"> <h5>بطاقة بسيطة</h5> <p>نظيفة وبسيطة مع حد فاتح.</p> </div>

<div class="container py-5"> <div class="row g-4"> <!-- بطاقة ملف شخصي أساسية --> <div class="col-md-6 col-lg-4"> <div class="bg-white rounded-3 shadow-sm overflow-hidden"> <div class="bg-primary" style="height: 120px;"></div> <div class="text-center" style="margin-top: -60px;"> <img src="avatar.jpg" class="rounded-circle border border-5 border-white shadow" width="120" height="120" alt="الملف الشخصي"> </div> <div class="p-4 text-center"> <h5 class="mb-1">أحمد علي</h5> <p class="text-muted mb-3">مطور ويب</p> <button class="btn btn-primary rounded-pill">متابعة</button> </div> </div> </div> <!-- بطاقة ملف شخصي مميزة --> <div class="col-md-6 col-lg-4"> <div class="border border-warning border-3 rounded-4 shadow-lg p-4 position-relative"> <span class="position-absolute top-0 start-50 translate-middle badge rounded-pill bg-warning text-dark"> مميز </span> <div class="text-center mt-3"> <img src="avatar2.jpg" class="rounded-circle shadow-sm" width="100" height="100" alt="الملف الشخصي"> <h5 class="mt-3 mb-1">سارة محمد</h5> <p class="text-muted mb-3">مصممة UI/UX</p> <button class="btn btn-outline-warning rounded-pill">تواصل</button> </div> </div> </div> <!-- بطاقة ملف شخصي بسيطة --> <div class="col-md-6 col-lg-4"> <div class="border-0 rounded-2 p-4"> <div class="d-flex align-items-center gap-3"> <img src="avatar3.jpg" class="rounded-circle border border-2 border-primary" width="80" height="80" alt="الملف الشخصي"> <div class="flex-grow-1"> <h6 class="mb-1">خالد حسن</h6> <p class="text-muted small mb-2">مدير منتجات</p> <button class="btn btn-sm btn-primary rounded-pill"> رسالة </button> </div> </div> </div> </div> </div> </div>

<style> .hover-card { transition: all 0.3s ease; } .hover-card:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important; } .hover-border:hover { border-color: var(--bs-primary) !important; } </style> <!-- بطاقة مع تأثير التحويم --> <div class="card border-0 shadow-sm hover-card"> <img src="image.jpg" class="card-img-top rounded-top" alt="..."> <div class="card-body"> <h5 class="card-title">بطاقة تفاعلية</h5> <p class="card-text">حوم لرؤية الظل وتأثير الرفع.</p> </div> </div> <!-- بطاقة تشبه الزر --> <div class="border border-2 border-light rounded-3 p-4 hover-border" style="cursor: pointer;"> <h6>خيار قابل للنقر</h6> <p class="small text-muted mb-0">يتغير لون الحد عند التحويم</p> </div>

<!-- فاصل أفقي --> <div class="border-bottom border-2 border-primary mb-4"></div> <!-- نص مع فاصل --> <div class="d-flex align-items-center my-4"> <div class="flex-grow-1 border-bottom"></div> <span class="px-3 text-muted">أو</span> <div class="flex-grow-1 border-bottom"></div> </div> <!-- فاصل عمودي --> <div class="d-flex"> <div class="p-3">محتوى يساري</div> <div class="border-start border-2"></div> <div class="p-3">محتوى يميني</div> </div> <!-- حد زخرفي --> <div class="border-start border-5 border-primary ps-3"> <h4>قسم مهم</h4> <p>الحد الأيسر يلفت الانتباه إلى هذا المحتوى.</p> </div>

<!-- صورة دائرية --> <img src="avatar.jpg" class="rounded-circle border border-3 border-primary" width="150" height="150" alt="الصورة الرمزية"> <!-- صورة مستديرة مع ظل --> <img src="photo.jpg" class="rounded-3 shadow-lg" width="300" alt="الصورة"> <!-- نمط المصغرة --> <img src="thumb.jpg" class="border border-2 border-light rounded" width="200" alt="المصغرة"> <!-- صورة شارة بشكل حبة --> <img src="badge.jpg" class="rounded-pill shadow-sm" width="250" height="80" alt="الشارة">

<!-- حد فقط على الشاشات الكبيرة --> <div class="border-0 border-lg shadow-none shadow-lg-lg rounded-0 rounded-lg-3 p-3"> بدون حد على الجوال، محدود على الشاشات الكبيرة </div> <!-- ملاحظة: قد تحتاج CSS مخصص للحدود المتجاوبة بالكامل --> <style> @media (min-width: 992px) { .border-lg { border: 1px solid var(--bs-border-color) !important; } .shadow-lg-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important; } .rounded-lg-3 { border-radius: 0.5rem !important; } } </style>

<div class="row g-4"> <!-- خطة أساسية --> <div class="col-lg-4"> <div class="border border-light rounded-3 shadow-sm p-4 h-100"> <h5 class="text-center mb-4">أساسي</h5> <div class="text-center mb-4"> <span class="h2">9$</span> <span class="text-muted">/شهرياً</span> </div> <ul class="list-unstyled"> <li class="mb-2">✓ ميزة واحدة</li> <li class="mb-2">✓ ميزة اثنين</li> <li class="mb-2 text-muted">✗ ميزة ثلاثة</li> </ul> <button class="btn btn-outline-primary w-100 rounded-pill"> اختر الخطة </button> </div> </div> <!-- خطة شائعة مع تركيز --> <div class="col-lg-4"> <div class="border border-primary border-3 rounded-4 shadow-lg p-4 h-100 position-relative"> <span class="position-absolute top-0 start-50 translate-middle badge rounded-pill bg-primary"> شائع </span> <h5 class="text-center mb-4 mt-2">احترافي</h5> <div class="text-center mb-4"> <span class="h2 text-primary">29$</span> <span class="text-muted">/شهرياً</span> </div> <ul class="list-unstyled"> <li class="mb-2">✓ ميزة واحدة</li> <li class="mb-2">✓ ميزة اثنين</li> <li class="mb-2">✓ ميزة ثلاثة</li> </ul> <button class="btn btn-primary w-100 rounded-pill shadow-sm"> اختر الخطة </button> </div> </div> <!-- خطة المؤسسات --> <div class="col-lg-4"> <div class="bg-dark text-white rounded-3 shadow p-4 h-100"> <h5 class="text-center mb-4">المؤسسات</h5> <div class="text-center mb-4"> <span class="h2">99$</span> <span class="text-white-50">/شهرياً</span> </div> <ul class="list-unstyled"> <li class="mb-2">✓ جميع ميزات الاحترافي</li> <li class="mb-2">✓ دعم ذو أولوية</li> <li class="mb-2">✓ حلول مخصصة</li> </ul> <button class="btn btn-light w-100 rounded-pill"> اتصل بالمبيعات </button> </div> </div> </div>