H1. عنوان بوت استرپ

مثال : <div class="bg-primary"> Starty Multipurpose Template </div>

مثال : <div class="bg-soft-primary"> Starty Multipurpose Template </div>

مثال : <div class="text-primary"> Starty Multipurpose Template </div>

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-white

.text-white-50

.text-dark

مثال : <a href="#" class="btn btn-primary"> Primary </a>

مثال : <a href="#" class="btn btn-pills btn-primary"> Primary </a>

مثال : <a href="#" class="btn btn-soft-primary"> Primary </a>

مثال : <a href="#" class="btn btn-pills btn-soft-primary"> Primary </a>

مثال : <a href="#" class="btn btn-outline-primary"> Primary </a>

مثال : <a href="#" class="btn btn-outline-primary"> Primary </a>

مثال : <a href="#" class="btn btn-icon btn-primary"><i data-feather="facebook" class="fea icon-sm"></i></a>

مثال : <a href="#" class="btn btn-icon btn-outline-primary"><i data-feather="facebook" class="fea icon-sm"></i></a>

مثال : <a href="#" class="btn btn-icon btn-pills btn-primary"><i data-feather="facebook" class="fea icon-sm"></i></a>

مثال : <a href="#" class="btn btn-icon btn-pills btn-outline-primary"><i data-feather="facebook" class="fea icon-sm"></i></a>

مثال : <a href="#" class="btn btn-primary btn-sm"> Primary </a>

مثال : <a href="#" class="btn btn-primary btn-lg"> Primary </a>

مثال :
<div class="btn-group dropdown-primary">
   <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Primary
   </button>
   <div class="dropdown-menu">
     <a class="dropdown-item" href="#">Home</a>
     <a class="dropdown-item" href="#">Services</a>
     <a class="dropdown-item" href="#">About us</a>
     <div class="dropdown-divider"></div>
     <a class="dropdown-item" href="#">Contact us</a>
   </div>
</div>

مثال : <span class="badge bg-primary"> primary </span>

مثال : <span class="badge rounded-pill bg-primary"> primary </span>

مثال : <span class="badge bg-soft-primary"> primary </span>

مثال : <span class="badge rounded-pill bg-soft-primary"> primary </span>

مثال : <a href="#" class="badge bg-primary"> primary </a>

مثال : <div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div>

مثال : <div class="alert alert-primary" role="alert"> A simple primary alert with <a href="#" class="alert-link"></a>. </div>

مثال :
<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button>
</div>

مثال :
<div class="alert alert-primary alert-pills" role="alert">
   <span class="badge rounded-pill bg-danger"> New </span>
   <span class="alert-content"> A Modern primary alert—check it out! </span>
</div>

مثال :
<div class="alert alert-outline-primary alert-pills" role="alert">
   <span class="badge rounded-pill bg-danger"> New </span>
   <span class="alert-content"> A Modern primary alert—check it out! </span>
</div>

کارت عمودی
<div class="card shadow rounded overflow-hidden>
   <img src="images/blog/01.jpg" class="img-fluid" alt=">
   <div class="card-body">
     <h5 class="card-title">Multipurpose HTML5 Template: Starty</h5>
     <p class="text-muted mb-0">Due to its widespread use as filler text for layouts, non-readability is of great importance</p>
   </div>
</div>

قالب HTML5 چند منظوره: استارتی

به دلیل استفاده گسترده از آن به عنوان متن پرکننده برای چیدمان ها، ناخوانایی از اهمیت بالایی برخوردار است.

ادامه مطلب

قالب HTML5 چند منظوره: استارتی

به دلیل استفاده گسترده از آن به عنوان متن پرکننده برای چیدمان ها، ناخوانایی از اهمیت بالایی برخوردار است.

ادامه مطلب

قالب HTML5 چند منظوره: استارتی

این یک کارت گسترده تر با متن پشتیبانی در زیر به عنوان یک منبع طبیعی برای محتوای اضافی است. این محتوا کمی طولانی تر است.

آخرین به روز رسانی 3 دقیقه قبل

مثال :
<nav aria-label="breadcrumb" class="d-inline-block">
  <ul class="breadcrumb bg-white rounded shadow mb-0">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Pages</a></lt>
    <li class="breadcrumb-item active" aria-current="page">Elements</li>
  </ul>
</div>

مثال :
<ul class="pagination">
  <li class="page-item">
   <a class="page-link" href="#" aria-label="Previous">
    <span aria-hidden="true"><i class="mdi mdi-chevron-left mdi-18px"></i></span>
   </a>
  </li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link active" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item">
   <a class="page-link" href="#" aria-label="Next">
    <span aria-hidden="true"><i class="mdi mdi-chevron-right mdi-18px"></i></span>
   </a>
  </li>
</ul>


• 1
• 2
• 3

مثال : <img src="images/home/01.jpg" class="img-fluid avatar avatar-ex-sm rounded">

مثال : <img src="images/home/01.jpg" class="img-fluid avatar avatar-ex-sm rounded-circle">

مثال :
<div class="progress-box">
   <h6 class="title text-muted"> Progress</h6>
   <div class="progress">
     <div class="progress-bar position-relative bg-primary" style="width:84%;">
       <div class="progress-value d-block text-muted h6">84%</div>
     </div>
   </div>
</div>

مثال : <a href="#"class="btn btn-primary me-2 mb-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Top Tooltip" alt=""> Top Tooltip </a>

«تنوع‌های زیادی از قسمت‌های لورم ایپسوم در دسترس است، اما اکثریت آن‌ها به شکلی دچار تغییراتی شده‌اند، با شوخ طبعی تزریقی یا کلمات تصادفی‌سازی شده که حتی اندکی هم باورپذیر به نظر نمی‌رسند».

آیکون Feather

بیش از 280 آیکون Feather وجود دارد و شما می توانید تمام اطلاعات آیکون ها را از اینجا دریافت کنید: https://feathericons.com/

مثال : <i data-feather="mail" class="fea icon-sm"> </i>

آیکون های Material Design

بیش از 4400 آیکون Material Design وجود دارد و می توانید تمام اطلاعات آیکون ها را از اینجا دریافت کنید: https://materialdesignicons.com/

مثال : <i class="mdi mdi-home"> </i>

آیکون های Iconscout (Unicons)

بیش از 1100 آیکون Iconscout (Unicons) وجود دارد و می توانید تمام اطلاعات آیکون ها را از اینجا دریافت کنید: https://www.flaticon.com/packs/basic-icon

مثال :
<span class="h3 text-primary me-2">
  <i class="uil uil-0-plus"></i>
</span>