<Card>
<CardHeader>
<h5>Basic Alerts</h5>
</CardHeader>
<CardBody>
<Alert variant="primary" role="alert">هشدار ساده اصلی - نگاهی بینداز!</Alert>
<Alert variant="secondary" role="alert">هشدار ساده ثانویه - نگاهی بینداز!</Alert>
<Alert variant="success" role="alert">هشدار ساده موفقیت - نگاهی بینداز!</Alert>
<Alert variant="danger" role="alert">هشدار ساده خطر - نگاهی بینداز!</Alert>
<Alert variant="warning" role="alert">هشدار ساده هشدار - نگاهی بینداز!</Alert>
<Alert variant="info" role="alert">هشدار ساده اطلاعات - نگاهی بینداز!</Alert>
<Alert variant="light" role="alert">هشدار ساده روشن - نگاهی بینداز!</Alert>
<Alert variant="dark" role="alert">هشدار ساده تاریک - نگاهی بینداز!</Alert>
</CardBody>
</Card><Card>
<CardHeader>
<h5>هشدار روشن با رنگ لینک</h5>
</CardHeader>
<CardBody>
<Alert color="light-primary">
هشدار رنگ اصلی روشن با<Alert.Link href="#">یک لینک نمونه</Alert.Link> - بررسی کن!
</Alert>
<Alert color="light-secondary">
هشدار رنگ ثانویه روشن با<Alert.Link href="#">یک لینک نمونه</Alert.Link> - بررسی کن!
</Alert>
<Alert color="light-success">
هشدار رنگ موفقیت روشن با<Alert.Link href="#">یک لینک نمونه</Alert.Link> - بررسی کن!
</Alert>
<Alert color="light-danger">
هشدار رنگ خطر روشن با<Alert.Link href="#">یک لینک نمونه</Alert.Link> - بررسی کن!
</Alert>
<Alert color="light-warning">
هشدار رنگ هشدار روشن با<Alert.Link href="#">یک لینک نمونه</Alert.Link> - بررسی کن!
</Alert>
<Alert color="light-info">
هشدار رنگ اطلاعات روشن با<Alert.Link href="#">یک لینک نمونه</Alert.Link> - بررسی کن!
</Alert>
<Alert color="light-light">
هشدار رنگ روشن با<Alert.Link href="#">یک لینک نمونه</Alert.Link> - بررسی کن!
</Alert>
<Alert color="light-dark">
هشدار رنگ تیره روشن با<Alert.Link href="#">یک لینک نمونه</Alert.Link> - بررسی کن!
</Alert>
</CardBody>
</Card><Card>
<CardHeader>
<h5>هشدارهای خطی</h5>
</CardHeader>
<CardBody>
<Alert variant="outline-primary" role="alert">هشدار خطی رنگ اصلی - بررسی کن!</Alert>
<Alert variant="outline-secondary" role="alert">هشدار خطی رنگ ثانویه - بررسی کن!</Alert>
<Alert variant="outline-success" role="alert">هشدار خطی رنگ موفقیت - بررسی کن!</Alert>
<Alert variant="outline-danger" role="alert">هشدار خطی رنگ خطر - بررسی کن!</Alert>
<Alert variant="outline-warning" role="alert">هشدار خطی رنگ هشدار - بررسی کن!</Alert>
<Alert variant="outline-info" role="alert">هشدار خطی رنگ اطلاعات - بررسی کن!</Alert>
<Alert variant="outline-light" role="alert">هشدار خطی رنگ روشن - بررسی کن!</Alert>
<Alert variant="outline-dark" role="alert">هشدار خطی رنگ تیره - بررسی کن!</Alert>
</CardBody>
</Card>هشدار حاشیهای رنگ اصلی با آیکون - بررسی کن!
هشدار حاشیهای رنگ ثانویه با آیکون - بررسی کن!
هشدار حاشیهای رنگ موفقیت با آیکون - بررسی کن!
هشدار حاشیهای رنگ خطر با آیکون - بررسی کن!
هشدار حاشیهای رنگ هشدار با آیکون - بررسی کن!
هشدار حاشیهای رنگ اطلاعات با آیکون - بررسی کن!
هشدار حاشیهای رنگ روشن با آیکون - بررسی کن!
هشدار حاشیهای رنگ تیره با آیکون - بررسی کن!
<Card>
<CardHeader>
<h5>هشدار با آیکون</h5>
</CardHeader>
<CardBody>
<Alert variant="light-border-primary" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Download size={16} className="me-2" />
هشدار حاشیهای رنگ اصلی با آیکون - بررسی کن!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-secondary" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Wheelchair size={16} className="me-2" />
هشدار حاشیهای رنگ ثانویه با آیکون - بررسی کن!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-success" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<CheckCircle size={16} className="me-2" />
هشدار حاشیهای رنگ موفقیت با آیکون - بررسی کن!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-danger" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Power size={16} className="me-2" />
هشدار حاشیهای رنگ خطر با آیکون - بررسی کن!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-warning" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Warning size={16} className="me-2" />
هشدار حاشیهای رنگ هشدار با آیکون - بررسی کن!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-info" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Info size={16} className="me-2" />
هشدار حاشیهای رنگ اطلاعات با آیکون - بررسی کن!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-light" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<AlignBottom size={16} className="me-2" />
هشدار حاشیهای رنگ روشن با آیکون - بررسی کن!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
<Alert variant="light-border-dark" className="d-flex justify-content-between align-items-center">
<p className="mb-0 d-flex align-items-center">
<Globe size={16} className="me-2" />
هشدار حاشیهای رنگ تیره با آیکون - بررسی کن!
</p>
<X size={16} weight="bold" className="cursor-pointer" />
</Alert>
</CardBody>
</Card><Card>
<CardHeader>
<h5>Alert With Left Border (هشدار با کادر سمت چپ)</h5>
</CardHeader>
<CardBody>
<Alert variant="border-primary" role="alert">هشدار با نوار کناری سمت چپ - بررسی کنید</Alert>
<Alert variant="border-secondary" role="alert">هشدار با نوار کناری سمت چپ - بررسی کنید</Alert>
<Alert variant="border-success" role="alert">هشدار با نوار کناری سمت چپ - بررسی کنید</Alert>
</CardBody>
</Card>هشدار برچسبدار اصلی - نگاهی بینداز!
هشدار برچسبدار ثانویه - نگاهی بینداز!!
هشدار برچسبدار موفقیت - نگاهی بینداز!
<Card>
<CardHeader>
<h5>هشدار با آیکونهای برچسبدار</h5>
</CardHeader>
<CardBody>
<div className="alert alert-label alert-label-primary" role="alert">
<p className="mb-0 d-flex align-items-center gap-2">
<span className="label-icon label-icon-primary">
<DownloadSimple size={20} weight="bold" />
</span>
هشدار برچسبدار اصلی - نگاهی بینداز!
</p>
</div>
<div className="alert alert-label alert-label-secondary" role="alert">
<p className="mb-0 d-flex align-items-center gap-2">
<span className="label-icon label-icon-secondary">
<DownloadSimple size={20} weight="bold" />
</span>
هشدار برچسبدار ثانویه - نگاهی بینداز!!
</p>
</div>
<div className="alert alert-label alert-label-success" role="alert">
<p className="mb-0 d-flex align-items-center gap-2">
<span className="label-icon label-icon-success">
<DownloadSimple size={20} weight="bold" />
</span>
هشدار برچسبدار موفقیت - نگاهی بینداز!
</p>
</div>
</CardBody>
</Card>
کوکی داریم! از آن برای اطمینان از بهترین تجربه شما در وبسایت و خدمات ما استفاده میکنیم.
سفارش شما به تأخیر افتاده است
با این نسخه جدید، به امکانات سفارشیسازی بیشتر و گزینههای صادرات فایل دسترسی دارید.
تیم ما در حال بررسی برخی خطاها در این بخش است. توصیه نمیکنیم تا بهروزرسانی بعدی تنظیمات خود را تغییر دهید.
$ <Alert color="primary" dismissible>
<div className="d-flex justify-content-between">
<img src="/images/icons/cookie-.png" className="w-35 h-35 me-2" alt="icon" />
<p className="mb-0">کوکی داریم! از آن برای اطمینان از بهترین تجربه شما در وبسایت و خدمات ما استفاده میکنیم.</p>
<button type="button" className="btn-close" aria-label="Close"></button>
</div>
</Alert>
<Alert className="alert-label alert-label-success">
<div className="d-flex justify-content-between align-items-center w-100">
<p className="mb-0 d-flex align-items-center gap-2">
<span className="label-icon label-icon-success">
{/* Icon Placeholder */}
</span>
سفارش شما به تأخیر افتاده است
</p>
<button className="btn btn-sm btn-success" >Accept</button>
</div>
</Alert>
<Alert className="alert-border-warning">
<h6>
{/* Icon Placeholder */} نسخه جدید اکنون در دسترس است
</h6>
<p>با این نسخه جدید، به امکانات سفارشیسازی بیشتر و گزینههای صادرات فایل دسترسی دارید.</p>
<div className="text-end">
<a href="#" className="link-primary text-d-underline" >Don't allow</a>
<a href="#" className="link-primary text-d-underline ms-2">Allow</a>
</div>
</Alert>
<Alert className="custom-alert p-0">
<div className="alert-header">
<button type="button" className="btn-close" aria-label="Close"></button>
</div>
<div className="alert-body">
<h3 className="mb-3 text-center">
{/* Icon Placeholder */} در حال نگهداری
</h3>
<p className="mb-3">تیم ما در حال بررسی برخی خطاها در این بخش است. توصیه نمیکنیم تا بهروزرسانی بعدی تنظیمات خود را تغییر دهید.</p>
<div className="text-end">
<a href="#" className="btn btn-warning">Get more info</a>
</div>
</div>
</Alert>آفرین، شما با موفقیت این پیام هشدار مهم را خواندید. این متن نمونه کمی طولانیتر است تا بتوانید ببینید فاصلهگذاری درون هشدار با چنین محتوایی چگونه کار میکند.
هر زمان که نیاز داشتید، حتما از ابزارهای margin برای مرتب نگه داشتن استفاده کنید.
این یک هشدار دیگر است. این متن نمونه نحوه استفاده از فاصلهگذاری و چیدمان محتوا داخل هشدارها را نشان میدهد.
در صورت نیاز از ابزارهای margin استفاده کنید.
شما با موفقیت یک هشدار موفقیت را همراه با محتوای اضافی و ایکون بستن فعال کردید.
میتوانید این چیدمان را به دلخواه خودتان بیشتر سفارشی کنید.
<Card>
<CardHeader>
<h5>محتوای اضافی هشدار</h5>
</CardHeader>
<CardBody>
<Alert variant="primary">
<h3 className="alert-heading d-flex justify-content-between align-items-center">
خوبه انجام دادی!
<X size={21} weight="bold" className="cursor-pointer" />
</h3>
<p>آفرین، شما با موفقیت این پیام هشدار مهم را خواندید. این متن نمونه کمی طولانیتر است تا بتوانید ببینید فاصلهگذاری درون هشدار با چنین محتوایی چگونه کار میکند.</p>
<hr />
<p className="mb-0">هر زمان که نیاز داشتید، حتما از ابزارهای margin برای مرتب نگه داشتن استفاده کنید.</p>
</Alert>
<Alert variant="secondary">
<h3 className="alert-heading d-flex justify-content-between align-items-center">
توجه کن!
<X size={21} weight="bold" className="cursor-pointer" />
</h3>
<p>این یک هشدار دیگر است. این متن نمونه نحوه استفاده از فاصلهگذاری و چیدمان محتوا داخل هشدارها را نشان میدهد.</p>
<hr />
<p className="mb-0">در صورت نیاز از ابزارهای margin استفاده کنید.</p>
</Alert>
<Alert variant="success">
<h3 className="alert-heading d-flex justify-content-between align-items-center">
تبریک!
<X size={21} weight="bold" className="cursor-pointer" />
</h3>
<p>شما با موفقیت یک هشدار موفقیت را همراه با محتوای اضافی و ایکون بستن فعال کردید.</p>
<hr />
<p className="mb-0">میتوانید این چیدمان را به دلخواه خودتان بیشتر سفارشی کنید.</p>
</Alert>
</CardBody>
</Card>