.timeline با گزینه های مختلفی ارائه می شود تا به نظر می رسد منحصر به فرد و چند منظوره تایم لاین.
<div class="timeline timeline-1">
<div class="timeline-sep bg-primary-opacity-20"></div>
<div class="timeline-item">
<div class="timeline-label">6:00 am</div>
<div class="timeline-badge">
<i class="flaticon2-image-file text-primary "></i>
</div>
<div class="timeline-content text-muted font-weight-normal">
"پاسخ های الکسا" آمازون است
<a href="#" class="text-primary font-weight-bold">hot mess</a>, surprising exactly no one.
</div>
</div>
<div class="timeline-item">
<div class="timeline-label">7:45 am</div>
<div class="timeline-badge">
<i class="flaticon2-layers text-success "></i>
</div>
<div class="timeline-content text-muted font-weight-normal">
سرور پایگاه داده 80٪ بیش از حد بارگذاری شده و نیاز به راه اندازی مجدد سریع دارد.
<span class="label label-inline label-light-primary font-weight-bolder">new</span>
</div>
</div>
<div class="timeline-item">
<div class="timeline-label">1 ساعت</div>
<div class="timeline-badge">
<i class="flaticon2-pin text-warning "></i>
</div>
<div class="timeline-content text-muted font-weight-normal">
خطای سیستم رخ داده است و هارد دیسک خاموش شده است.
<span class="label label-inline label-light-success font-weight-bolder">pending</span>
</div>
</div>
<div class="timeline-item">
<div class="timeline-label">2 روز</div>
<div class="timeline-badge">
<i class="flaticon2-sms text-danger "></i>
</div>
<div class="timeline-content text-muted font-weight-normal">
سفارش جدید درج شده است و در انتظار پردازش است.
</div>
</div>
<div class="timeline-item">
<div class="timeline-label">3 هفته</div>
<div class="timeline-badge">
<i class="flaticon2-paper-plane text-primary "></i>
</div>
<div class="timeline-content text-muted font-weight-normal">
این مجموعه 50+ برنامه جایگزین تمام ابزارهای تجاری شما خواهد شد.
<span class="label label-inline label-light-danger font-weight-bolder">در حال انجام</span>
</div>
</div>
<div class="timeline-item">
<div class="timeline-label">2 هفته</div>
<div class="timeline-badge">
<i class="flaticon2-fax text-success "></i>
</div>
<div class="timeline-content text-muted font-weight-normal">
این برنامه به شما در مورد بلیط های ارزان قیمت ایمیل می دهد ، بنابراین شما ارزان پرواز می کنید.
</div>
</div>
</div>
<div class="timeline timeline-2">
<div class="timeline-bar"></div>
<div class="timeline-item">
<div class="timeline-badge"></div>
<div class="timeline-content d-flex align-items-center justify-content-between">
<span class="mr-3">
<a href="#">12 کاربر جدید ثبت نام کرده اند و در انتظار فعال سازی هستند</a> <span class="label label-light-success font-weight-bolder">8</span>
</span>
<span class="text-muted text-right">3 ساعت قبل</span>
</div>
</div>
<div class="timeline-item">
<span class="timeline-badge bg-success"></span>
<div class="timeline-content d-flex align-items-center justify-content-between">
<span class="mr-3">
راه اندازی مجدد سیستم برنامه تکمیل شد.
<span class="label label-inline label-light-primary font-weight-bolder">new</span>
<span class="label label-inline label-light-danger font-weight-bolder">hot</span>
</span>
<span class="text-muted font-italic text-right">6 ساعت قبل</span>
</div>
</div>
<div class="timeline-item">
<span class="timeline-badge"></span>
<div class="timeline-content d-flex align-items-center justify-content-between">
<span class="mr-3">
سفارش جدید درج شده است و در انتظار پردازش است.
</span>
<span class="text-muted text-right">2</span>
</div>
</div>
<div class="timeline-item">
<span class="timeline-badge bg-danger"></span>
<div class="timeline-content d-flex align-items-center justify-content-between">
<span class="mr-3">
سرور پایگاه داده 80٪ بیش از حد بارگذاری شده و نیاز به راه اندازی مجدد سریع دارد <span class="label label-inline label-danger font-weight-bolder">pending</span>
</span>
<span class="text-muted text-right">3</span>
</div>
</div>
<div class="timeline-item">
<span class="timeline-badge bg-warning"></span>
<div class="timeline-content d-flex align-items-center justify-content-between">
<span class="mr-3">
خطای سیستم رخ داده است و هارد دیسک خاموش شده است.
</span>
<span class="text-muted font-italic text-right">5</span>
</div>
</div>
<div class="timeline-item">
<span class="timeline-badge bg-success"></span>
<div class="timeline-content d-flex align-items-center justify-content-between">
<span class="mr-3">
راه اندازی مجدد سرور تولید.
</span>
<span class="text-muted text-right">1 ماه قبل</span>
</div>
</div>
</div>
این متن تست است, در این قسمت می توانید توضیحات دلخواه خود را قرار دهید.
این متن تست است, در این قسمت می توانید توضیحات دلخواه خود را قرار دهید.
این متن تست است, در این قسمت می توانید توضیحات دلخواه خود را قرار دهید.
این متن تست است, در این قسمت می توانید توضیحات دلخواه خود را قرار دهید.
<div class="timeline timeline-3">
<div class="timeline-items">
<div class="timeline-item">
<div class="timeline-media">
<img alt="Pic" src="<?php echo Page::getMediaPath();?>users/300_25.jpg"/>
</div>
<div class="timeline-content">
<div class="d-flex align-items-center justify-content-between mb-3">
<div class="mr-2">
<a href="#" class="text-dark-75 text-hover-primary font-weight-bold">
سفارش جدید درج شده است
</a>
<span class="text-muted ml-2">
امروز
</span>
<span class="label label-light-success font-weight-bolder label-inline ml-2">new</span>
</div>
<div class="dropdown ml-2" data-toggle="tooltip" title="اقدامات سریع" data-placement="left">
<a href="#" class="btn btn-hover-light-primary btn-sm btn-icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ki ki-more-hor font-size-lg text-primary"></i>
</a>
<div class="dropdown-menu p-0 m-0 dropdown-menu-md dropdown-menu-right">
...
</div>
</div>
</div>
<p class="p-0">
...
</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-media">
<i class="flaticon2-shield text-danger"></i>
</div>
<div class="timeline-content">
<div class="d-flex align-items-center justify-content-between mb-3">
<div class="mr-2">
<a href="#" class="text-dark-75 text-hover-primary font-weight-bold">
عضو درخواستی ارسال کرده است.
</a>
<span class="text-muted ml-2">
8:30PM 20 ژوئن
</span>
<span class="label label-light-danger font-weight-bolder label-inline ml-2">pending</span>
</div>
<div class="dropdown ml-2" data-toggle="tooltip" title="اقدامات سریع" data-placement="left">
<a href="#" class="btn btn-hover-light-primary btn-sm btn-icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ki ki-more-hor font-size-lg text-primary"></i>
</a>
<div class="dropdown-menu p-0 m-0 dropdown-menu-md dropdown-menu-right">
...
</div>
</div>
</div>
<p class="p-0">
...
</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-media">
<i class="flaticon2-layers text-warning"></i>
</div>
<div class="timeline-content">
<div class="d-flex align-items-center justify-content-between mb-3">
<div class="mr-2">
<a href="#" class="text-dark-75 text-hover-primary font-weight-bold">
استقرار سیستم به پایان رسیده است.
</a>
<span class="text-muted ml-2">
11:00AM 30 ژوئن
</span>
<span class="label label-light-warning font-weight-bolder label-inline ml-2">done</span>
</div>
<div class="dropdown ml-2" data-toggle="tooltip" title="اقدامات سریع" data-placement="left">
<a href="#" class="btn btn-hover-light-primary btn-sm btn-icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ki ki-more-hor font-size-lg text-primary"></i>
</a>
<div class="dropdown-menu p-0 m-0 dropdown-menu-md dropdown-menu-right">
...
</div>
</div>
</div>
<p class="p-0">
...
</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-media">
<i class="flaticon2-notification fl text-primary"></i>
</div>
<div class="timeline-content">
<div class="d-flex align-items-center justify-content-between mb-3">
<div class="mr-2">
<a href="#" class="text-dark-75 text-hover-primary font-weight-bold">
تهیه نسخه پشتیبان از پایگاه داده تکمیل شد.
</a>
<span class="text-muted ml-2">
2 ماه قبل
</span>
<span class="label label-light-primary font-weight-bolder label-inline ml-2">delivered</span>
</div>
<div class="dropdown ml-2" data-toggle="tooltip" title="اقدامات سریع" data-placement="left">
<a href="#" class="btn btn-hover-light-primary btn-sm btn-icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ki ki-more-hor font-size-lg text-primary"></i>
</a>
<div class="dropdown-menu p-0 m-0 dropdown-menu-md dropdown-menu-right">
...
</div>
</div>
</div>
<p class="p-0">
...
</p>
</div>
</div>
</div>
</div>
<div class="timeline timeline-5">
<div class="timeline-item">
<div class="timeline-label">10:00</div>
<div class="timeline-badge"><span class="bg-primary"></span></div>
<div class="timeline-content">
...
</div>
</div>
<div class="timeline-item">
<div class="timeline-label">1 ساعت</div>
<div class="timeline-badge"><span class="bg-success"></span></div>
<div class="timeline-content">
...
</div>
</div>
<div class="timeline-item">
<div class="timeline-label">2 ساعت</div>
<div class="timeline-badge"><span class="bg-warning"></span></div>
<div class="timeline-content">
...
</div>
</div>
<div class="timeline-item">
<div class="timeline-label">3 روز</div>
<div class="timeline-badge"><span class="bg-danger"></span></div>
<div class="timeline-content">
...
</div>
</div>
</div>
<div class="timeline timeline-4">
<div class="timeline-bar"></div>
<div class="timeline-items">
<div class="timeline-item timeline-item-left">
<div class="timeline-badge">
<div class="bg-danger"></div>
</div>
<div class="timeline-label">
<span class="text-primary font-weight-bold">11:35 AM</span>
</div>
<div class="timeline-content">
...
</div>
</div>
<div class="timeline-item timeline-item-right">
<div class="timeline-badge">
<div class="bg-success"></div>
</div>
<div class="timeline-label text-primary">
<span class="text-primary font-weight-bold">2:20 PM</span>
</div>
<div class="timeline-content">
...
</div>
</div>
<div class="timeline-item timeline-item-left">
<div class="timeline-badge">
<div class="bg-danger"></div>
</div>
<div class="timeline-label">
<span class="text-primary font-weight-bold">11:35 AM</span>
</div>
<div class="timeline-content">
...
</div>
</div>
</div>
</div>
<div class="timeline timeline-justified timeline-4">
<div class="timeline-bar"></div>
<div class="timeline-items">
<div class="timeline-item">
<div class="timeline-badge">
<div class="bg-danger"></div>
</div>
<div class="timeline-label">
<span class="text-primary font-weight-bold">11:35 AM</span>
</div>
<div class="timeline-content">
...
</div>
</div>
<div class="timeline-item">
<div class="timeline-badge">
<div class="bg-success"></div>
</div>
<div class="timeline-label text-primary">
<span class="text-primary font-weight-bold">2:20 PM</span>
</div>
<div class="timeline-content">
...
</div>
</div>
<div class="timeline-item">
<div class="timeline-badge">
<div class="bg-primary"></div>
</div>
<div class="timeline-label text-primary">
<span class="text-primary font-weight-bold">2:20 PM</span>
</div>
<div class="timeline-content">
...
</div>
</div>
</div>
</div>
<div class="timeline timeline-5">
<div class="timeline-item">
<div class="timeline-label">10:00</div>
<div class="timeline-badge"><span class="bg-primary"></span></div>
<div class="timeline-content">
...
</div>
</div>
<div class="timeline-item">
<div class="timeline-label">1 ساعت</div>
<div class="timeline-badge"><span class="bg-success"></span></div>
<div class="timeline-content">
...
</div>
</div>
<div class="timeline-item">
<div class="timeline-label">2 ساعت</div>
<div class="timeline-badge"><span class="bg-warning"></span></div>
<div class="timeline-content">
...
</div>
</div>
<div class="timeline-item">
<div class="timeline-label">3 روز</div>
<div class="timeline-badge"><span class="bg-danger"></span></div>
<div class="timeline-content">
...
</div>
</div>
</div>
