برگه تقلب

اصلی

badge text-bg-primary

                               
                <span >اصلی</span>

ثانویه

badge text-bg-secondary

                               
                <span >ثانویه</span>

موفق

badge text-bg-success

                               
               <span >موفق</span>

خطرناک

badge text-bg-danger

                               
                <span >خطرناک</span>

اخطار

badge text-bg-warning

                               
                <span >اخطار</span>

اطلاعات

badge text-bg-info

                               
                <span >اطلاعات</span>

روشن

badge text-bg-light

                               
               <span >روشن</span>

تاریک

badge text-bg-dark

                               
                <span >تاریک</span>

اصلی حاشیه دار

badge text-outline-primary

                               
                <span >اصلی حاشیه دار</span>

ثانویه حاشیه دار

badge text-outline-secondary

                               
                <span >ثانویه حاشیه دار</span>

موفق حاشیه دار

badge text-outline-success

                               
                <span >موفق حاشیه دار</span>

خطرناک حاشیه دار

badge text-outline-danger

                               
                <span >خطرناک</span>

اخطار حاشیه دار

badge text-outline-warning

                               
                <span >اخطار</span>

اطلاعات حاشیه دار

badge text-outline-info

                               
                <span >اطلاعات</span>

تاریک حاشیه دار

badge text-outline-dark

                               
                <span >تاریک</span>

روشن اصلی

badge text-light-primary

                               
                <span >اصلی</span>

روشن ثانویه

badge text-light-secondary

                               
                <span >ثانویه</span>

روشن موفق

badge text-light-success

                               
                <span >موفق</span>

روشن خطرناک

badge text-light-danger

                               
                <span >خطرناک</span>

روشن اخطار

badge text-light-warning

                               
                <span >اخطار</span>

روشن اطلاعات

badge text-light-info

                               
                <span >اطلاعات</span>

روشن

badge text-light-light

                               
                <span >روشن</span>

تاریک

badge text-light-dark

                               
                <span >تاریک</span>

هشدارها

هشدار اصلی

alert alert-primary

                               
                                 <div class="alert alert-primary" role="alert"> این یک هشدار است  </div>

هشدار ثانویه

alert alert-secondary

                               
                                 <div class="alert alert-secondary" role="alert"> این یک هشدار است  </div>

هشدار موفق

alert alert-success

                               
                                   <div class="alert alert-success" role="alert">  این یک هشدار است  </div>

هشدار خطرناک

alert alert-danger

                               
                                   <div class="alert alert-danger" role="alert"> این هشدار است  </div>

هشدار اخطار

alert alert-warning

                               
                                  <div class="alert alert-warning " role="alert"> این یک هشدار است  </div>

هشدار اطلاعات

alert alert-info

                               
                                 <div class="alert alert-info " role="alert"> این یک هشدار است  </div>

هشدار روشن

alert alert-light

                               
                               <div class="alert alert-light " role="alert">این یک هشدار است  </div>

هشدار تاریک

alert alert-dark

                               
                              <div class="alert alert-dark " role="alert"> این یک هشدار است  </div>

هشدار حاشیه دار اصلی

alert alert-outline-primary

                               
                                <div class="alert alert-outline-primary" role="alert"> این یک هشدار است  </div>

هشدار ثانویه حاشیه دار

alert alert-outline-secondary

                               
                                <div class="alert alert-outline-secondary" role="alert"> این یک هشدار است  </div>

هشدار موفقیت حاشیه دار

alert alert-outline-success

                               
                                <div class="alert alert-outline-success" role="alert"> این یک هشدار است  </div>

هشدار خطرناک حاشیه دار

alert alert-outline-danger

                               
                                <div class="alert alert-outline-danger" role="alert"> این یک هشدار است  </div>

اخطار حاشیه دار

alert alert-outline-warning

                               
                                <div class="alert alert-outline-warning" role="alert">  این یک هشدار است  </div>

هشدار اطلاعات حاشیه دار

alert alert-outline-info

                               
                                <div class="alert alert-outline-info" role="alert"> این یک هشدار است  </div>

هشدار حاشیه دار روشن

alert alert-outline-light

                               
                                <div class="alert alert-outline-light" role="alert">  این یک هشدار است  </div>

هشدار حاشیه دار تاریک

alert alert-outline-dark

                               
                                <div class="alert alert-outline-dark" role="alert">  این یک هشدار است  </div>

هشدار روشن اصلی

alert alert-light-primary

                               
                                <div class="alert alert-light-primary" role="alert"> این یک هشدار است  </div>

هشدار روشن ثانویه

alert alert-light-secondary

                               
                                <div class="alert alert-light-secondary" role="alert">  این یک هشدار است  </div>

هشدار روشن موفقیت

alert alert-light-success

                               
                                <div class="alert alert-light-success" role="alert"> این یک هشدار است  </div>

هشدار روشن خطرناک

alert alert-light-danger

                               
                                <div class="alert alert-light-danger" role="alert"> این یک هشدار است  </div>

هشدار روشن اخطار

alert alert-light-warning

                               
                                <div class="alert alert-light-warning" role="alert">  این یک هشدار است  </div>

هشدار روشن اطلاعات

alert alert-light-info

                               
                                <div class="alert alert-light-info" role="alert"> این یک هشدار است  </div>

هشدار روشن

alert alert-light-light

                               
                                <div class="alert alert-light-light" role="alert"> این یک هشدار است  </div>

هشدار تاریک

alert alert-light-dark

                               
                                <div class="alert alert-light-dark" role="alert"> این یک هشدار است  </div>

هشدار روشن حاشیه دار اصلی

alert alert-light-border-primary

                               
                                <div class="alert alert-light-border-primary" role="alert"> این یک هشدار است  </div>

هشدار روشن حاشیه دار ثانویه

alert alert-light-border-secondary

                               
                                <div class="alert alert-light-border-secondary" role="alert"> این یک هشدار است  </div>

هشدار حاشیه دار روشن موفقیت

alert alert-light-border-success

                               
                                <div class="alert alert-light-border-success" role="alert"> این یک هشدار است  </div>

هشدار روشن حاشیه دار خطرناک

alert alert-light-border-danger

                               
                                <div class="alert alert-light-border-danger" role="alert"> این یک هشدار است  </div>

هشدار روشن حاشیه دار اخطار

alert alert-light-border-warning

                               
                                <div class="alert alert-light-border-warning" role="alert"> این یک هشدار است  </div>

هشدار حاشیه دار روشن اطلاعات

alert alert-light-border-info

                               
                                <div class="alert alert-light-border-info" role="alert"> این یک هشدار است  </div>

هشدار روشن حاشیه دار

alert alert-light-border-light

                               
                                <div class="alert alert-light-border-light" role="alert"> این یک هشدار است  </div>

هشدار حاشیه دار تاریک

alert alert-light-border-dark

                               
                                <div class="alert alert-light-border-dark" role="alert"> این یک هشدار است  </div>

هشدار حاشیه دار اصلی

alert alert-border-primary

                               
                                <div class="alert alert-border-primary" role="alert">  این یک هشدار است!  </div>

هشدار حاشیه دار ثانویه

alert alert-border-secondary

                               
                                <div class="alert alert-border-secondary" role="alert">  این یک هشدار است  </div>

هشدار حاشیه دار موفقیت

alert alert-border-success

                               
                                <div class="alert alert-border-success" role="alert">  این یک هشدار است  </div>

هشدار حاشیه دار خطرناک

alert alert-border-danger

                               
                                <div class="alert alert-border-danger" role="alert">  این یک هشدار است  </div>

هشدار حاشیه دار اخطار

alert alert-border-warning

                               
                                <div class="alert alert-border-warning" role="alert">  این یک هشدار است!  </div>

هشدار حاشیه دار اطلاعات

alert alert-border-info

                               
                                <div class="alert alert-border-info" role="alert">   این یک هشدار است  </div>

هشدار حاشیه دار روشن

alert alert-border-light

                               
                                <div class="alert alert-border-light" role="alert"> این یک هشدار است  </div>

هشدار حاشیه دار تاریک

alert alert-border-dark

                               
                                <div class="alert alert-border-dark" role="alert">  این یک هشدار است!  </div>

هشدار همراه با لیبل اصلی

alert alert-label alert-label-primary

                               
                                <div class="alert alert-label alert-label-primary" role="alert">
                          <p class="mb-0">
                            <i class="ti ti-download label-icon label-icon-primary"></i>
                            این یک هشدار است!
                          </p>
                        <div>

هشدار همراه با لیبل ثانویه

alert alert-label alert-label-secondary

                               
                                <div class="alert alert-label alert-label-secondary" role="alert">
                          <p class="mb-0">
                            <i class="ti ti-download label-icon label-icon-secondary"></i>
                            این یک هشدار است
                          </p>
                        <div>

هشدار لیبل دار موفقیت

alert alert-label alert-label-success

                               
                                <div class="alert alert-label alert-label-success" role="alert">
                          <p class="mb-0">
                            <i class="ti ti-download label-icon label-icon-success"></i>
                            این یک هشدار است!
                          </p>
                        <div>

هشدار لیبل دار خطرناک

alert alert-label alert-label-danger

                               
                                <div class="alert alert-label alert-label-danger" role="alert">
                          <p class="mb-0">
                            <i class="ti ti-download label-icon label-icon-danger"></i>
                            این یک هشدار است!
                          </p>
                        <div>

هشدار لیبل دار اخطار

alert alert-label alert-label-warning

                               
                                <div class="alert alert-label alert-label-warning" role="alert">
                          <p class="mb-0">
                            <i class="ti ti-download label-icon label-icon-warning"></i>
                           این یک هشدار است
                          </p>
                        <div>

هشدار لیبل دار اطلاعات

alert alert-label alert-label-info

                               
                                <div class="alert alert-label alert-label-info" role="alert">
                          <p class="mb-0">
                            <i class="ti ti-download label-icon label-icon-info"></i>
                            این یک هشدار است!
                          </p>
                        <div>

هشدار لیبل دار روشن

alert alert-label alert-label-light

                               
                                <div class="alert alert-label alert-label-light" role="alert">
                          <p class="mb-0">
                            <i class="ti ti-download label-icon label-icon-light"></i>
                            این یک هشدار است!
                          </p>
                        <div>

هشدار لیبل دار تاریک

alert alert-label alert-label-dark

                               
                                <div class="alert alert-label alert-label-dark" role="alert">
                          <p class="mb-0">
                            <i class="ti ti-download label-icon label-icon-dark"></i>
                            این یک هشدار است!
                          </p>
                        <div>

دکمه ها

دکمه اصلی

btn-primary

                               
                <button type="button" >اصلی</button>

دکمه ثانویه

btn-secondary

                               
                <button type="button" >ثانویه</button>

دکمه موفقیت

btn-success

                               
                <button type="button" >موفقیت</button>

خطرناک

btn-danger

                               
                <button type="button" >خطرناک</button>

اخطار

btn-warning

                               
                <button type="button" >اخطار</button>

اطلاعات

btn-info

                               
                <button type="button" >اطلاعات</button>

روشن

btn-light

                               
                <button type="button" >روشن</button>

تاریک

btn-dark

                               
                <button type="button" >تاریک</button>

اصلی حاشیه دار

btn-outline-primary

                               
                <button type="button" >اصلی</button>

ثانویه حاشیه دار

btn-outline-secondary

                               
                <button type="button" >ثانویه</button>

موفقیت حاشیه دار

btn-outline-success

                               
                <button type="button" >موفقیت</button>

حاشیه دار خطرناک

btn-outline-danger

                               
                <button type="button" >خطرناک</button>

حاشیه دار اخطار

btn-outline-warning

                               
                <button type="button" >اخطار</button>

حاشیه دار اطلاعات

btn-outline-info

                               
                <button type="button" >اطلاعات</button>

حاشیه دار روشن

btn-outline-light

                               
                <button type="button" >روشن</button>

حاشیه دار تاریک

btn-outline-dark

                               
                <button type="button" >تاریک</button>

روشن اصلی

btn-light-primary

                               
                <button type="button" >اصلی</button>

ثانویه روشن

btn-light-secondary

                               
                <button type="button" >ثانویه</button>

موفقیت روشن

btn-light-success

                               
                <button type="button" >موفقیت</button>

روشن خطرناک

btn-light-danger

                               
                <button type="button" >خطرناک</button>

روشن اخطار

btn-light-warning

                               
                <button type="button" >اخطار</button>

روشن اطلاعات

btn-light-info

                               
                <button type="button" >اطلاعات</button>

روشن

btn-light-light

                               
                <button type="button" >روشن</button>

تاریک

btn-light-dark

                               
                <button type="button" >تاریک</button>

آیکن

icon-btn

                               
                <button type="button" > <i
                ></i></button>

                <button type="button" ><i
                ></i></button>

                <button type="button" > <i
                 ></i></button>

                <button type="button" ><i
                 ></i></button>

                <button type="button" >
                 <i ></i></button>

                <button type="button" ><i
                 ></i></button>

فیسبوک

btn-facebook

                               
                <button type="button" ><i
                ></i></button>

توییتر

btn-twitter

                               
                <button type="button" ><i
                ></i></button>

پینترست

btn-pinterest

                               
                <button type="button" ><i
                ></i></button>

لینکدین

btn-linkedin

                               
                <button type="button" ><i
                ></i></button>

ردیت

btn-reddit

                               
                <button type="button" ><i
                ></i></button>

واتساپ

btn-whatsapp

                               
                <button type="button" ><i
                ></i></button>

جیمیل

btn-gmail

                               
                <button type="button" ><i
                ></i></button>

تلگرام

btn-telegram

                               
                <button type="button" ><i
                ></i></button>

یوتیوب

btn-youtube

                               
                <button type="button" ><i
                ></i></button>

ویمو

btn-vimeo

                               
                <button type="button" ><i
                ></i></button>

بیهنس

btn-behance

                               
                <button type="button" ><i
                ></i></button>

گیتهاب

btn-github

                               
                <button type="button" ><i
                ></i></button>

اسکایپ

btn-skype

                               
                <button type="button" ><i
                ></i></button>

اسنپ چت

btn-snapchat

                               
                <button type="button" ><i
                ></i></button>

کارت ها

کارت

                               
  <div >
  <div >
   <h6 >پروفایل من</h6>
  </div>
  <div >
   <p>
   ....
   </p>
  </div>
  <div >
   <div >
   <div >
    <i > </i>
    <span> 60 پسند </span>
   </div>
   <div >
    <ul >
    <li 
     >
     <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/4.png" alt="توضیحات تصویر" >
    </li>
    <li 
     >
     <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/3.png" alt="توضیحات تصویر" >
    </li>
    <li 
     >
     5+
    </li>
    </ul>
   </div>
   </div>
  </div>

کارت اصلی

card-primary

                              
  <div >
      <div >
       <h5>کارت اصلی</h5>
      </div>
      <div >
        <h6>متن بدنه کارت</h6>
        <p>...</p>
      </div>
  </div>

کارت ثانویه

card-secondary

                              
  <div >
      <div >
       <h5>کارت ثانویه</h5>
      </div>
      <div >
        <h6>متن بدنه کارت</h6>
        <p>...</p>
      </div>
  </div>

کارت موفقیت

card-success

                              
  <div >
      <div >
       <h5>کارت موفقیت</h5>
      </div>
      <div >
        <h6>متن بدنه کارت</h6>
        <p>...</p>
      </div>
  </div>

کارت خطرناک

card-danger

                              
  <div >
      <div >
       <h5>کارت خطرناک</h5>
      </div>
      <div >
        <h6>متن بدنه کارت</h6>
        <p>...</p>
      </div>
  </div>

کارت اخطار

card-warning

                              
  <div >
      <div >
       <h5>کارت اخطار</h5>
      </div>
      <div >
        <h6>متن بدنه کارت</h6>
        <p>...</p>
      </div>
  </div>

کارت اطلاعات

card-info

                              
  <div >
      <div >
       <h5>کارت اطلاعات</h5>
      </div>
      <div >
        <h6>متن بدنه کارت</h6>
        <p>...</p>
      </div>
  </div>

کارت روشن

card-light

                              
  <div >
      <div >
       <h5>کارت روشن</h5>
      </div>
      <div >
        <h6>متن بدنه کارت</h6>
        <p>...</p>
      </div>
  </div>

کارت تاریک

card-dark

                              
  <div >
      <div >
       <h5>کارت تاریک</h5>
      </div>
      <div >
        <h6>متن بدنه کارت</h6>
        <p>...</p>
      </div>
  </div>

کارت اصلی حاشیه دار

card-outline-primary

                              
                <div >
                 <div >
                  <h5>کارت اصلی حاشیه دار</h5>
                 </div>
                 <div >
                   <h6>متن بدنه کارت</h6>
                  <p>...</p>
                 </div>
                </div>

کارت حاشیه دار ثانویه

card-outline-secondary

                              
                <div >
                 <div >
                  <h5>کارت حاشیه دار ثانویه</h5>
                 </div>
                 <div >
                   <h6>متن بدنه کارت</h6>
                  <p>...</p>
                 </div>
                </div>

کارت حاشیه دار موفقیت

card-outline-success

                              
                <div >
                 <div >
                  <h5>کارت حاشیه دار موفقیت</h5>
                 </div>
                 <div >
                   <h6>متن بدنه کارت</h6>
                  <p>...</p>
                 </div>
                </div>

کارت حاشیه دار خطرناک

card-outline-danger

                              
                <div >
                 <div >
                  <h5>کارت حاشیه دار خطرناک</h5>
                 </div>
                 <div >
                   <h6>متن بدنه کارت</h6>
                  <p>...</p>
                 </div>
                </div>

کارت حاشیه دار اخطار

card-outline-warning

                              
                <div >
                 <div >
                  <h5>کارت حاشیه دار اخطار</h5>
                 </div>
                 <div >
                   <h6>متن بدنه کارت</h6>
                  <p>...</p>
                 </div>
                </div>

کارت حاشیه دار اطلاعات

card-outline-info

                              
                <div >
                 <div >
                  <h5>کارت حاشیه دار اطلاعات</h5>
                 </div>
                 <div >
                   <h6>متن بدنه کارت</h6>
                  <p>...</p>
                 </div>
                </div>

کارت حاشیه دار روشن

card-outline-light

                              
                <div >
                 <div >
                  <h5>کارت حاشیه دار روشن</h5>
                 </div>
                 <div >
                   <h6>متن بدنه کارت</h6>
                  <p>...</p>
                 </div>
                </div>

کارت حاشیه دار تاریک

card-outline-dark

                              
                <div >
                 <div >
                  <h5>کارت حاشیه دار تاریک</h5>
                 </div>
                 <div >
                   <h6>متن بدنه کارت</h6>
                  <p>...</p>
                 </div>
                </div>

پس زمینه آیکن

icon-bg

                              
   <div >
  <div >
  <div >
   <i ></i>
   <h6>کارت با آیکن</h6>
   <p>متن بدنه کارت.</p>
  </div>
  </div>
 </div>

حاشیه اصلی بالا

border-primary border-top

                              
                <div >
                     <div >
                     <h6>حاشیه اصلی بالا</h6>
                     <p>متن بدنه کارت.</p>
                     </div>
                    </div>

حاشیه ثانویه پایین

border-secondary border-bottom

                              
                <div >
                     <div >
                     <h6>حاشیه ثانویه پایین</h6>
                     <p>متن بدنه کارت.</p>
                     </div>
                    </div>

حاشیه موفقیت ابتدا

border-success border-start

                              
                <div >
                     <div >
                     <h6>حاشیه موفقیت ابتدا</h6>
                     <p>متن بدنه کارت.</p>
                     </div>
                    </div>

حاشیه موفقیت انتها

border-danger border-end

                              
                <div >
                     <div >
                     <h6>حاشیه اخطار</h6>
                     <p>متن بدنه کارت.</p>
                     </div>
                    </div>

دراپ داون

app-dropdown

                               
                <div >
                <div >
                <div >
                <button type="button" data-bs-toggle="dropdown"
                data-bs-auto-close="outside" aria-expanded="false">
                منوی قابل کلیک
                </button>
                <div >
                <a href="#" >
                <span> عملیات</span>
                <i ></i>
                </a>
                <hr >
                <a role="button" data-bs-toggle="dropdown" aria-expanded="false">
                <span>عملیات بیشتر</span>
                <i ></i>
                </a>
                <div >
                <a href="#" >
                <span> عملیات</span>
                <i ></i>
                </a>
                <a href="#" >
                <span>عملیاتی دیگر</span>
                <i ></i>
                </a>
                </div>
                </div>
                </div>

                <div >
                <button data-bs-toggle="dropdown"
                data-trigger="hover" aria-expanded="false">
                دراپ داون
                </button>
                <ul >
                <li >
                <a href="#">
                <span> عملیات</span>
                </a>
                <i ></i>
                </li>
                <li >
                <a href="#">
                <span>عملیاتی دیگر</span>
                </a>
                <i ></i>
                </li>
                <li >
                <a href="#">
                <span>موردی دیگر</span>
                </a>
                <i ></i>
                </li>
                <li>
                <hr >
                </li>
                <li >
                <a role="button" data-bs-toggle="dropdown"
                data-trigger="hover" aria-expanded="false">
                موردی دیگر
                </a>
                <ul >
                <li >
                <a href="#">
                <span> عملیات</span>
                </a>
                <i ></i>
                </li>
                <li >
                <a href="#">
                <span>عملیاتی دیگر</span>
                </a>
                <i ></i>
                </li>
                <li >
                <a href="#">
                <span>موردی دیگر</span>
                </a>
                <i ></i>
                </li>
                </ul>
                </li>

                </ul>
                </div>

                </div>
                </div>

دراپ داون اصلی

btn btn-primary

                               
                <div >
                <button type="button" data-bs-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                primary <i ></i>
                </button>
                <div >
                <!-- item-->
                <a href="#">عملیات</a>
                <a href="#">عملیاتی دیگر</a>
                <a href="#">موردی دیگر</a>
                </div>
                </div>

دراپ داون ثانویه

btn btn-secondary

                               
                <div >
                <button type="button" data-bs-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                secondary <i ></i>
                </button>
                <div >
                <!-- item-->
                <a href="#">عملیات</a>
                <a href="#">عملیاتی دیگر</a>
                <a href="#">موردی دیگر</a>
                </div>
                </div>

دراپ داون موفقیت

btn btn-success

                               
                <div >
                <button type="button" data-bs-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                success <i ></i>
                </button>
                <div >
                <!-- item-->
                <a href="#">عملیات</a>
                <a href="#">عملیاتی دیگر</a>
                <a href="#">موردی دیگر</a>
                </div>
                </div>

دراپ داون خطرناک

btn btn-danger

                               
                <div >
                <button type="button" data-bs-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                danger <i ></i>
                </button>
                <div >
                <!-- item-->
                <a href="#">عملیات</a>
                <a href="#">عملیاتی دیگر</a>
                <a href="#">موردی دیگر</a>
                </div>
                </div>

دراپ داون اخطار

btn btn-warning

                               
                <div >
                <button type="button" data-bs-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                warning <i ></i>
                </button>
                <div >
                <!-- item-->
                <a href="#">عملیات</a>
                <a href="#">عملیاتی دیگر</a>
                <a href="#">موردی دیگر</a>
                </div>
                </div>

دراپ داون اطلاعات

btn btn-info

                               
                <div >
                <button type="button" data-bs-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                info <i ></i>
                </button>
                <div >
                <!-- item-->
                <a href="#">عملیات</a>
                <a href="#">عملیاتی دیگر</a>
                <a href="#">موردی دیگر</a>
                </div>
                </div>

دراپ داون روشن

btn btn-light

                               
                <div >
                <button type="button" data-bs-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                light <i ></i>
                </button>
                <div >
                <!-- item-->
                <a href="#">عملیات</a>
                <a href="#">عملیاتی دیگر</a>
                <a href="#">موردی دیگر</a>
                </div>
                </div>

دراپ داون تاریک

btn btn-dark

                               
                <div >
                <button type="button" data-bs-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                dark <i ></i>
                </button>
                <div >
                <!-- item-->
                <a href="#">عملیات</a>
                <a href="#">عملیاتی دیگر</a>
                <a href="#">موردی دیگر</a>
                </div>
                </div>

دراپ دان منو اصلی

btn btn-primary

                               
                <div >
                  <button type="button" data-bs-toggle="dropdown"
                   data-bs-auto-close="true" aria-expanded="false">
                   <i ></i>
                  </button>
                  <ul >
                   <li >
                   <span> عملیات</span>
                   <i ></i>
                   </li>
                   <li >
                   <span>عملیاتی دیگر</span>
                   <i ></i>
                   </li>
                   <li >
                   <span>موردی دیگر</span>
                   <i ></i>
                   </li>
                   <li ></li>
                   <li >
                   <span>تنظیمات</span>
                   <i ></i>
                   </li>
                  </ul>
                  </div>

دراپ داون منوی ثانویه

btn btn-secondary

                               
                <div >
                  <button type="button" data-bs-toggle="dropdown"
                   data-bs-auto-close="true" aria-expanded="false">
                   <i ></i>
                  </button>
                  <ul >
                   <li >
                   <span> عملیات</span>
                   <i ></i>
                   </li>
                   <li >
                   <span>عملیاتی دیگر</span>
                   <i ></i>
                   </li>
                   <li >
                   <span>موردی دیگر</span>
                   <i ></i>
                   </li>
                   <li ></li>
                   <li >
                   <span>تنظیمات</span>
                   <i ></i>
                   </li>
                  </ul>
                  </div>

دراپ داون منوی موفقیت

btn btn-success

                               
                <div >
                  <button type="button" data-bs-toggle="dropdown"
                   data-bs-auto-close="true" aria-expanded="false">
                   <i ></i>
                  </button>
                  <ul >
                   <li >
                   <span> عملیات</span>
                   <i ></i>
                   </li>
                   <li >
                   <span>عملیاتی دیگر</span>
                   <i ></i>
                   </li>
                   <li >
                   <span>موردی دیگر</span>
                   <i ></i>
                   </li>
                   <li ></li>
                   <li >
                   <span>تنظیمات</span>
                   <i ></i>
                   </li>
                  </ul>
                  </div>

دراپ داون منوی خطرناک

btn btn-danger

                               
                <div >
                  <button type="button" data-bs-toggle="dropdown"
                   data-bs-auto-close="true" aria-expanded="false">
                   <i ></i>
                  </button>
                  <ul >
                   <li >
                   <span> عملیات</span>
                   <i ></i>
                   </li>
                   <li >
                   <span>عملیاتی دیگر</span>
                   <i ></i>
                   </li>
                   <li >
                   <span>موردی دیگر</span>
                   <i ></i>
                   </li>
                   <li ></li>
                   <li >
                   <span>تنظیمات</span>
                   <i ></i>
                   </li>
                  </ul>
                  </div>

دراپ داون منوی اخطار

btn btn-warning

                               
                <div >
                  <button type="button" data-bs-toggle="dropdown"
                   data-bs-auto-close="true" aria-expanded="false">
                   <i ></i>
                  </button>
                  <ul >
                   <li >
                   <span> عملیات</span>
                   <i ></i>
                   </li>
                   <li >
                   <span>عملیاتی دیگر</span>
                   <i ></i>
                   </li>
                   <li >
                   <span>موردی دیگر</span>
                   <i ></i>
                   </li>
                   <li ></li>
                   <li >
                   <span>تنظیمات</span>
                   <i ></i>
                   </li>
                  </ul>
                  </div>

دراپ داون منوی اطلاعات

btn btn-info

                               
                <div >
                  <button type="button" data-bs-toggle="dropdown"
                   data-bs-auto-close="true" aria-expanded="false">
                   <i ></i>
                  </button>
                  <ul >
                   <li >
                   <span> عملیات</span>
                   <i ></i>
                   </li>
                   <li >
                   <span>عملیاتی دیگر</span>
                   <i ></i>
                   </li>
                   <li >
                   <span>موردی دیگر</span>
                   <i ></i>
                   </li>
                   <li ></li>
                   <li >
                   <span>تنظیمات</span>
                   <i ></i>
                   </li>
                  </ul>
                  </div>

دراپ داون منوی روشن

btn btn-light

                               
                <div >
                  <button type="button" data-bs-toggle="dropdown"
                   data-bs-auto-close="true" aria-expanded="false">
                   <i ></i>
                  </button>
                  <ul >
                   <li >
                   <span> عملیات</span>
                   <i ></i>
                   </li>
                   <li >
                   <span>عملیاتی دیگر</span>
                   <i ></i>
                   </li>
                   <li >
                   <span>موردی دیگر</span>
                   <i ></i>
                   </li>
                   <li ></li>
                   <li >
                   <span>تنظیمات</span>
                   <i ></i>
                   </li>
                  </ul>
                  </div>

دراپ داون منوی تاریک

btn btn-dark

                               
                <div >
                  <button type="button" data-bs-toggle="dropdown"
                   data-bs-auto-close="true" aria-expanded="false">
                   <i ></i>
                  </button>
                  <ul >
                   <li >
                   <span> عملیات</span>
                   <i ></i>
                   </li>
                   <li >
                   <span>عملیاتی دیگر</span>
                   <i ></i>
                   </li>
                   <li >
                   <span>موردی دیگر</span>
                   <i ></i>
                   </li>
                   <li ></li>
                   <li >
                   <span>تنظیمات</span>
                   <i ></i>
                   </li>
                  </ul>
                  </div>

آواتار

اصلی

bg-primary h-45 w-45 d-flex-center b-r-50

ثانویه

bg-secondary h-45 w-45 d-flex-center b-r-50

موفقیت

bg-success h-45 w-45 d-flex-center b-r-50

خطرناک

bg-danger h-45 w-45 d-flex-center b-r-50

اخطار

bg-warning h-45 w-45 d-flex-center b-r-50

اطلاعات

bg-info h-45 w-45 d-flex-center b-r-50

روشن

bg-light h-45 w-45 d-flex-center b-r-50

تاریک

bg-dark h-45 w-45 d-flex-center b-r-50

اصلی حاشیه دار

text-outline-primary h-45 w-45 d-flex-center b-r-50

حاشیه دار ثانویه

text-outline-secondary h-45 w-45 d-flex-center b-r-50

حاشیه دار موفقیت

text-outline-success h-45 w-45 d-flex-center b-r-50

حاشیه دار خطرناک

text-outline-danger h-45 w-45 d-flex-center b-r-50

حاشیه دار اخطار

text-outline-warning h-45 w-45 d-flex-center b-r-50

حاشیه دار اطلاعات

text-outline-info h-45 w-45 d-flex-center b-r-50

حاشیه دار روشن

text-outline-light h-45 w-45 d-flex-center b-r-50

حاشیه دار تاریک

text-outline-dark h-45 w-45 d-flex-center b-r-50

تصاویر آواتار

                               
                <div >
                <div >
                 <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/1.png" alt="توضیحات تصویر" >
                </div>
                <div >
                 <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/2.png" alt="توضیحات تصویر" >
                </div>
                <div >
                 <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/3.png" alt="توضیحات تصویر" >
                </div>
                <div >
                 <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/4.png" alt="توضیحات تصویر" >
                </div>
                <div >
                 <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/5.png" alt="توضیحات تصویر" >
                </div>
                <div >
                 <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/6.png" alt="توضیحات تصویر" >
                </div>
                </div>

اندازه آواتار

                               
                <div >
                 <span >
                 <i ></i>
                 </span>
                 <span >
                 <i ></i>
                 </span>
                 <span >
                 <i ></i>
                 </span>
                 <span >
                 <i ></i>
                 </span>
                 <span >
                 <i ></i>
                 </span>
                </div>
                </div>

متن روشن اصلی

text-light-primary h-45 w-45 d-flex-center b-r-50

متن روشن ثانویه

text-light-secondary h-45 w-45 d-flex-center b-r-50

متن روشن موفقیت

text-light-success h-45 w-45 d-flex-center b-r-50

متن روشن خطرناک

text-light-danger h-45 w-45 d-flex-center b-r-50

متن روشن اخطار

text-light-warning h-45 w-45 d-flex-center b-r-50

متن روشن اطلاعات

text-light-info h-45 w-45 d-flex-center b-r-50

متن روشن

text-light-light h-45 w-45 d-flex-center b-r-50

متن تاریک

text-light-dark h-45 w-45 d-flex-center b-r-50

شعاع آواتار

                               

                 <div >
                 <span >
                  <i ></i>
                 </span>

                 <span >
                  <i ></i>
                 </span>

                 <span >
                  <i ></i>
                 </span>

                 <span >
                  <i ></i>
                 </span>

                 <span >
                  <i ></i>
                 </span>

                 <span >
                  <i ></i>
                 </span>
                 </div>

گروهبندی آواتار

                               

                 <div >

                <ul >
                <li 
                >
                <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/4.png" alt="توضیحات تصویر" >
                </li>
                <li 
                >
                <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/5.png" alt="توضیحات تصویر" >
                </li>
                <li 
                >
                <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/6.png" alt="توضیحات تصویر" >
                </li>
                <li >
                10+
                </li>
                 </ul>
                 <ul >
                <li 
                >
                <span
                 ></span>
                <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/4.png" alt="توضیحات تصویر" >
                </li>
                <li 
                >
                <span
                 ></span>
                <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/1.png" alt="توضیحات تصویر" >
                </li>
                <li 
                >
                <span
                 ></span>
                <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/2.png" alt="توضیحات تصویر" >
                </li>
                <li 
                >
                <span
                 ></span>
                <img src="https://demos.sypna.ir/kiadmin_res/assets/images/avatar/3.png" alt="توضیحات تصویر" >
                </li>
                <li >
                5+
                </li>

                 </ul>
                 </div>

تب ها

تب های اصلی

app-tabs-primary

                               
   <div >
       <div >
    <ul role="tablist">
    <li role="presentation">
     <button id="html-tab" data-bs-toggle="tab"
     data-bs-target="#html-tab-pane" type="button" role="tab" aria-controls="html-tab-pane"
     aria-selected="true">اچ تی امل ال</button>
    </li>
    <li role="presentation">
     <button id="css-tab" data-bs-toggle="tab" data-bs-target="#css-tab-pane"
     type="button" role="tab" aria-controls="css-tab-pane" aria-selected="false">سی اس اس</button>
    </li>
    <li role="presentation">
     <button id="php-tab" data-bs-toggle="tab" data-bs-target="#php-tab-pane"
     type="button" role="tab" aria-controls="php-tab-pane" aria-selected="false">پی اچ پی</button>
    </li>
    </ul>
    <div id="BasicContent">
    <div id="html-tab-pane" role="tabpanel"
     aria-labelledby="html-tab" tabindex="0">
     <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است..</p>
    </div>
    <div id="css-tab-pane" role="tabpanel" aria-labelledby="css-tab"
     tabindex="0">
     <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است..</p>
     <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است..</p>
    </div>
    <div id="php-tab-pane" role="tabpanel" aria-labelledby="php-tab"
     tabindex="0">
     <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است..</p>
     </div>
     </div>
   </div>
  </div>

تب حاشیه دار اصلی

tab-outline-primary

                               
                <div >
                   <div >
                    <ul role="tablist">
                    <li role="presentation">
                   <button id="connect-tab" data-bs-toggle="tab"
                    data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
                    aria-selected="true">تماس</button>
                    </li>
                    <li role="presentation">
                   <button id="discover-tab" data-bs-toggle="tab"
                    data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
                    aria-selected="false">کاوش</button>
                    </li>
                    <li role="presentation">
                   <button id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
                    type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">سفارشات</button>
                    </li>
                    </ul>
                    <div id="OutlineContent">
                    <div id="connect-tab-pane" role="tabpanel"
                   aria-labelledby="connect-tab" tabindex="0">
                   <h6 >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است..</h6>
                   ...
                    </div>
                    <div id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
                   tabindex="0">
                   <h6 >محتوای تب دوم.</h6>
                   ...
                    </div>
                    <div id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
                   tabindex="0">
                   <h6 >محتوای تب سوم.</h6>
                   ...
                  </div>
                 </div>
                </div>
               </div>

تب اصلی روشن

tab-light-primary

            
    <div >
    <div >
     <ul role="tablist">
     <li role="presentation">
    <button id="connect-tab" data-bs-toggle="tab"
     data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
     aria-selected="true">تماس</button>
     </li>
     <li role="presentation">
    <button id="discover-tab" data-bs-toggle="tab"
     data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
     aria-selected="false">کاوش</button>
     </li>
     <li role="presentation">
    <button id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
     type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">سفارش</button>
     </li>
     </ul>
     <div id="OutlineContent">
     <div id="connect-tab-pane" role="tabpanel"
    aria-labelledby="connect-tab" tabindex="0">
    <h6 >این محتوای تب اول است.</h6>
    ...
     </div>
     <div id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
    tabindex="0">
    <h6 >محتوای تب دوم.</h6>
    ...
     </div>
     <div id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
    tabindex="0">
    <h6 >محتوای تب سوم.</h6>
    ...
   </div>
     </div>
    </div>
   </div>

تب عمودی

vertical-tab

            
    <div >
    <div >
     <ul role="tablist">
     <li role="presentation">
    <button id="connect-tab" data-bs-toggle="tab"
     data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
     aria-selected="true">تماس</button>
     </li>
     <li role="presentation">
    <button id="discover-tab" data-bs-toggle="tab"
     data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
     aria-selected="false">کاوش</button>
     </li>
     <li role="presentation">
    <button id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
     type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">سفارش</button>
     </li>
     </ul>
     <div id="OutlineContent">
     <div id="connect-tab-pane" role="tabpanel"
    aria-labelledby="connect-tab" tabindex="0">
    <h6 >این محتوای تب اول است.</h6>
    ...
     </div>
     <div id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
    tabindex="0">
    <h6 >محتوای تب دوم.</h6>
    ...
     </div>
     <div id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
    tabindex="0">
    <h6 >محتوای تب سوم.</h6>
    ...
   </div>
     </div>
    </div>
   </div>

تب عمودی سمت راست

vertical-right-tab

            
    <div >
    <div >
     <ul id="Outline" role="tablist">
     <li role="presentation">
    <button id="connect-tab" data-bs-toggle="tab"
     data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
     aria-selected="true">تماس</button>
     </li>
     <li role="presentation">
    <button id="discover-tab" data-bs-toggle="tab"
     data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
     aria-selected="false">کاوش</button>
     </li>
     <li role="presentation">
    <button id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
     type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">سفارش</button>
     </li>
     </ul>
     <div id="OutlineContent">
     <div id="connect-tab-pane" role="tabpanel"
    aria-labelledby="connect-tab" tabindex="0">
    <h6 >این محتوای تب اول است.</h6>
    ...
     </div>
     <div id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
    tabindex="0">
    <h6 >محتوای تب دوم.</h6>
    ...
     </div>
     <div id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
    tabindex="0">
    <h6 >محتوای تب سوم.</h6>
    ...
   </div>
     </div>
    </div>
   </div>

تب پس زمینه

                              
                <ul id="bg" role="tablist">
                <li role="presentation">
                 <button id="features-tab" data-bs-toggle="tab"
                 data-bs-target="#features-tab-pane" type="button" role="tab" aria-controls="features-tab-pane"
                 aria-selected="true"> <i ></i> ویژگی ها</button>
                </li>
                <li role="presentation">
                 <button id="history-tab" data-bs-toggle="tab"
                 data-bs-target="#history-tab-pane" type="button" role="tab" aria-controls="history-tab-pane"
                 aria-selected="false"><i ></i>تاریخ</button>
                </li>
                <li role="presentation">
                 <button id="reviews-tab" data-bs-toggle="tab"
                 data-bs-target="#reviews-tab-pane" type="button" role="tab" aria-controls="reviews-tab-pane"
                 aria-selected="false"><i ></i>بازبینی ها</button>
                </li>

                </ul>
                <div id="bgContent">
                <div id="features-tab-pane" role="tabpanel"
                 aria-labelledby="features-tab" tabindex="0">
                 <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
.</p>
                </div>

                <div id="history-tab-pane" role="tabpanel" aria-labelledby="history-tab"
                 tabindex="0">
                 <p>
                 لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                 </p>
                </div>

                <div id="reviews-tab-pane" role="tabpanel" aria-labelledby="reviews-tab"
                 tabindex="0">
                 <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
</p>
              </div>
             </div>

تب پایین

bottom-tab

            
    <div >
    <div >
     <ul role="tablist">
     <li role="presentation">
    <button id="connect-tab" data-bs-toggle="tab"
     data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
     aria-selected="true">تماس</button>
     </li>
     <li role="presentation">
    <button id="discover-tab" data-bs-toggle="tab"
     data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
     aria-selected="false">کاوش</button>
     </li>
     <li role="presentation">
    <button id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
     type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">سفارش</button>
     </li>
     </ul>
     <div id="OutlineContent">
     <div id="connect-tab-pane" role="tabpanel"
    aria-labelledby="connect-tab" tabindex="0">
    <h6 >این محتوای تب اول است.</h6>
    ...
     </div>
     <div id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
    tabindex="0">
    <h6 >محتوای تب دوم.</h6>
    ...
     </div>
     <div id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
    tabindex="0">
    <h6 >محتوای تب سوم.</h6>
    ...
   </div>
     </div>
    </div>
   </div>

ترازبندی محتوا

justify-content-around

            
    <div >
    <div >
     <ul role="tablist">
     <li role="presentation">
    <button id="connect-tab" data-bs-toggle="tab"
     data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
     aria-selected="true">تماس</button>
     </li>
     <li role="presentation">
    <button id="discover-tab" data-bs-toggle="tab"
     data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
     aria-selected="false">کاوش</button>
     </li>
     <li role="presentation">
    <button id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
     type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">سفارش</button>
     </li>
     </ul>
     <div id="OutlineContent">
     <div id="connect-tab-pane" role="tabpanel"
    aria-labelledby="connect-tab" tabindex="0">
    <h6 >این محتوای تب اول است.</h6>
    ...
     </div>
     <div id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
    tabindex="0">
    <h6 >محتوای تب دوم.</h6>
    ...
     </div>
     <div id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
    tabindex="0">
    <h6 >محتوای تب سوم.</h6>
    ...
   </div>
     </div>
    </div>
   </div>

تصویر بعنوان لینک

                              
                <ul id="lang-Light" role="tablist">
                 <li role="presentation">
                 <button id="lang-home-tab" data-bs-toggle="tab"
                  data-bs-target="#lang-home-tab-pane" type="button" role="tab"
                  aria-controls="lang-home-tab-pane" aria-selected="true">
                  <i ></i>
                  ایالات متحده
                 </button>
                 </li>
                 <li role="presentation">
                 <button id="lang-profile-tab" data-bs-toggle="tab"
                  data-bs-target="#lang-profile-tab-pane" type="button" role="tab"
                  aria-controls="lang-profile-tab-pane" aria-selected="false">
                  <i ></i>
                  اروپا
                 </button>
                 </li>
                 <li role="presentation">
                 <button id="lang-contact-tab" data-bs-toggle="tab"
                  data-bs-target="#lang-contact-tab-pane" type="button" role="tab"
                  aria-controls="lang-contact-tab-pane" aria-selected="false">
                  <i ></i>
                  آلمان
                 </button>
                 </li>


                </ul>
                <div id="lang-LightContent">
                 <div id="lang-home-tab-pane" role="tabpanel"
                 aria-labelledby="lang-home-tab" tabindex="0">
                 <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
.</p>
                 </div>

                 <div id="lang-profile-tab-pane" role="tabpanel"
                 aria-labelledby="lang-profile-tab" tabindex="0">
                 <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                 </p>
                 </div>

                 <div id="lang-contact-tab-pane" role="tabpanel"
                 aria-labelledby="lang-contact-tab" tabindex="0">
                 <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
.</p>
                 </div>

                </div>

اکوردیون

اکوردیون اصلی

accordion-primary

                               
                <div >
                   <div >
                   <div >
                    <div >
                    <h2 >
                     <button type="button" data-bs-toggle="collapse"
                     data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                     آیتم اکوردیون #1
                     </button>
                    </h2>
                    <div id="collapseOne" 
                     data-bs-parent="#accordionExample">
                     <div >
                     ...
                     </div>
                    </div>
                    </div>
                    <div >
                    <h2 >
                     <button type="button" data-bs-toggle="collapse"
                     data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                     آیتم اکوردیون #2
                     </button>
                    </h2>
                    <div id="collapseTwo" data-bs-parent="#accordionExample">
                     <div >
                     ...
                     </div>
                    </div>
                    </div>
                    <div >
                    <h2 >
                     <button type="button" data-bs-toggle="collapse"
                     data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                     آیتم اکوردیون #3
                     </button>
                    </h2>
                    <div id="collapseThree" data-bs-parent="#accordionExample">
                     <div >
                     ...
                    </div>
                   </div>
                  </div>
                 </div>
                </div>
               </div>

اکوردیون حاشیه دار

accordion-outline-secondary

                               
   <div >
    <div >
     <div >
     <div >
      <h2 >
      <button type="button" data-bs-toggle="collapse"
       data-bs-target="#collapseOneOutline" aria-expanded="true"
       aria-controls="collapseOneOutline">
       آیتم اکوردیون #1
      </button>
      </h2>
      <div id="collapseOneOutline" 
      data-bs-parent="#accordionExampleoutlineoutline">
      <div >
       ...
      </div>
      </div>
     </div>
     <div >
      <h2 >
      <button type="button" data-bs-toggle="collapse"
       data-bs-target="#collapseTwooutline" aria-expanded="false"
       aria-controls="collapseTwooutline">
       آیتم اکوردیون #2
      </button>
      </h2>
      <div id="collapseTwooutline" 
      data-bs-parent="#accordionExampleoutlineoutline">
      <div >
       ...
      </div>
      </div>
     </div>
     <div >
      <h2 >
      <button type="button" data-bs-toggle="collapse"
       data-bs-target="#collapseThreeoutline" aria-expanded="false"
       aria-controls="collapseThreeoutline">
       آیتم اکوردیون #3
      </button>
      </h2>
      <div id="collapseThreeoutline" 
      data-bs-parent="#accordionExampleoutlineoutline">
      <div >
       ...
      </div>
    </div>
   </div>
   </div>
  </div>
 </div>

اکوردیون روشن موفقیت

accordion-light-success

                               
      <div id="accordionFlushExample">
      <div >
       <h2 >
       <button type="button" data-bs-toggle="collapse"
        data-bs-target="#flush-collapseOne" aria-expanded="true" aria-controls="flush-collapseOne">
        آیتم اکوردیون #1
       </button>
       </h2>
       <div id="flush-collapseOne" 
       data-bs-parent="#accordionFlushExample">
       <div >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
.</div>
       </div>
      </div>
      <div >
       <h2 >
       <button type="button" data-bs-toggle="collapse"
        data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
        آیتم اکوردیون #2
       </button>
       </h2>
       <div id="flush-collapseTwo" 
       data-bs-parent="#accordionFlushExample">
       <div >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
.</div>
       </div>
      </div>
      <div >
       <h2 >
       <button type="button" data-bs-toggle="collapse"
        data-bs-target="#flush-collapseThree" aria-expanded="false"
        aria-controls="flush-collapseThree">
        آیتم اکوردیون #3
       </button>
       </h2>
       <div id="flush-collapseThree" 
       data-bs-parent="#accordionFlushExample">
       <div >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
.</div>
     </div>
    </div>
   </div>

اکوردیون فلاش

accordion-flush

                               
  <div >
    <div >
     <div 
     id="accordionappflushExample">
     <div >
    <h2 >
     <button type="button" data-bs-toggle="collapse"
     data-bs-target="#appflush-collapseOne" aria-expanded="true"
     aria-controls="appflush-collapseOne">
     آیتم اکوردیون #1
     </button>
    </h2>
    <div id="appflush-collapseOne" 
     data-bs-parent="#accordionappflushExample">
     <div >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
.</div>
    </div>
     </div>
     <div >
    <h2 >
     <button type="button" data-bs-toggle="collapse"
     data-bs-target="#appflush-collapseTwo" aria-expanded="false"
     aria-controls="appflush-collapseTwo">
     آیتم اکوردیون #2
     </button>
    </h2>
    <div id="appflush-collapseTwo" 
     data-bs-parent="#accordionappflushExample">
     <div >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
.</div>
    </div>
     </div>
     <div >
    <h2 >
     <button type="button" data-bs-toggle="collapse"
     data-bs-target="#appflush-collapseThree" aria-expanded="false"
     aria-controls="appflush-collapseThree">
     آیتم اکوردیون #3
     </button>
    </h2>
    <div id="appflush-collapseThree" 
     data-bs-parent="#accordionrealExample">
     <div >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
.</div>
     </div>
     </div>
   </div>
  </div>
  </div>

اکوردیون آیکن

app-accordion-icon-left

                               
  <div >

  <div >
   <div
   
   id="accordionlefticonExample">
   <div >
    <h2 >
    <button type="button" data-bs-toggle="collapse"
     data-bs-target="#lefticon-collapseOne" aria-expanded="true"
     aria-controls="lefticon-collapseOne">
    لورم ایپسوم متن ساختگی
    </button>
    </h2>
    <div id="lefticon-collapseOne" >
    <div >
    ...
    </div>
    </div>
   </div>
   <div >
    <h2 >
    <button type="button" data-bs-toggle="collapse"
     data-bs-target="#lefticon-collapseTwo" aria-expanded="false"
     aria-controls="lefticon-collapseTwo">
     لورم ایپسوم متن ساختگی
    </button>
    </h2>
    <div id="lefticon-collapseTwo" >
    <div >
     ...
    </div>
    </div>
   </div>
   <div >
    <h2 >
    <button type="button" data-bs-toggle="collapse"
     data-bs-target="#lefticon-collapseThree" aria-expanded="false"
     aria-controls="lefticon-collapseThree">
     لورم ایپسوم متن ساختگی
    </button>
    </h2>
    <div id="lefticon-collapseThree" >
    <div >
    ...
    </div>
    </div>
   </div>
   </div>
  </div>
  </div>

اکوردیون پلاس

app-accordion-plus

                               
  <div >

  <div >
   <div
   
   id="accordionlefticonExample">
   <div >
    <h2 >
    <button type="button" data-bs-toggle="collapse"
     data-bs-target="#lefticon-collapseOne" aria-expanded="true"
     aria-controls="lefticon-collapseOne">
     لورم ایپسوم متن ساختگی
    </button>
    </h2>
    <div id="lefticon-collapseOne" >
    <div >
    ...
    </div>
    </div>
   </div>
   <div >
    <h2 >
    <button type="button" data-bs-toggle="collapse"
     data-bs-target="#lefticon-collapseTwo" aria-expanded="false"
     aria-controls="lefticon-collapseTwo">
     لورم ایپسوم متن ساختگی
    </button>
    </h2>
    <div id="lefticon-collapseTwo" >
    <div >
     ...
    </div>
    </div>
   </div>
   <div >
    <h2 >
    <button type="button" data-bs-toggle="collapse"
     data-bs-target="#lefticon-collapseThree" aria-expanded="false"
     aria-controls="lefticon-collapseThree">
     لورم ایپسوم متن ساختگی
    </button>
    </h2>
    <div id="lefticon-collapseThree" >
    <div >
    ...
    </div>
    </div>
   </div>
   </div>
  </div>
  </div>

بدون آیکن

                               
                <div >

                <div >
                <div 
                id="accordionnoiconExample">
                <div >
                <h2 >
                <button type="button" data-bs-toggle="collapse"
                data-bs-target="#noicon-collapseOne" aria-expanded="true"
                aria-controls="noicon-collapseOne">
                <i ></i> لورم ایپسوم متن ساختگی
                </button>
                </h2>
                <div id="noicon-collapseOne" >
                <div >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
.
                </div>
                </div>
                </div>
                <div >
                <h2 >
                <button type="button" data-bs-toggle="collapse"
                data-bs-target="#noicon-collapseTwo" aria-expanded="false"
                aria-controls="noicon-collapseTwo">
                <i ></i> لورم ایپسوم متن ساختگی
                </button>
                </h2>
                <div id="noicon-collapseTwo" >
                <div >
                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است..
                </div>
                </div>
                </div>
                <div >
                <h2 >
                <button type="button" data-bs-toggle="collapse"
                data-bs-target="#noicon-collapseThree" aria-expanded="false"
                aria-controls="noicon-collapseThree">
                <i ></i> 
                لورم ایپسوم متن ساختگی
                </button>
                </h2>
                <div id="noicon-collapseThree" >
                <div >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است..
                </div>
                </div>
                </div>
                </div>
                </div>
                </div>

پس زمینه

پس زمینه اصلی

bg-primary

                             
               <button type="button" >پس زمینه اصلی</button>

پس زمینه ثانویه

bg-secondary

                             
               <button type="button" >پس زمینه ثانویه</button>

پس زمینه موفقیت

bg-success

                             
               <button type="button" >پس زمینه موفقیت</button>

پس زمینه خطرناک

bg-danger

                             
               <button type="button" >پس زمینه خطرناک</button>

پس زمینه اخطار

bg-warning

                             
               <button type="button" >پس زمینه اخطار</button>

پس زمینه اطلاعات

bg-info

                             
               <button type="button" >پس زمینه اطلاعات</button>

پس زمینه روشن

bg-light

                             
               <button type="button" >پس زمینه روشن</button>

پس زمینه تاریک

bg-dark

                             
               <button type="button" >پس زمینه تاریک</button>

پس زمینه اصلی -900

bg-primary-900

                             
               <button type="button" >پس زمینه اصلی -900</button>

پس زمینه اصلی-800

bg-primary-800

                             
               <button type="button" >پس زمینه اصلی-800</button>

پس زمینه اصلی-700

bg-primary-700

                             
               <button type="button" >پس زمینه اصلی-700</button>

پس زمینه اصلی-600

bg-primary-600

                             
               <button type="button" >پس زمینه اصلی-600</button>

پس زمینه اصلی-500

bg-primary-500

                             
               <button type="button" >پس زمینه اصلی-500</button>

پس زمینه اصلی -400

bg-primary-400

                             
               <button type="button" >پس زمینه اصلی -400</button>

پس زمینه اصلی-300

bg-primary-300

                             
               <button type="button" >پس زمینه اصلی-300</button>

پس زمینه حاشیه دار اصلی

bg-outline-primary

                             
               <button type="button" >پس زمینه حاشیه دار اصلی</button>

پس زمینه حاشیه دار ثانویه

bg-outline-secondary

                             
               <button type="button" >پس زمینه حاشیه دار ثانویه</button>

پس زمینه حاشیه دار موفقیت

bg-outline-success

                             
               <button type="button" >پس زمینه حاشیه دار موفقیت</button>

پس زمینه حاشیه دار خطرناک

bg-outline-danger

                             
               <button type="button" >پس زمینه حاشیه دار خطرناک</button>

پس زمینه حاشیه دار اخطار

bg-outline-warning

                             
               <button type="button" >پس زمینه حاشیه دار اخطار</button>

پس زمینه حاشیه دار اطلاعات

bg-outline-info

                             
               <button type="button" >پس زمینه حاشیه دار اطلاعات</button>

پس زمینه حاشیه دار روشن

bg-outline-light

                             
               <button type="button" >پس زمینه حاشیه دار روشن</button>

پس زمینه حاشیه دار تاریک

bg-outline-dark

                             
               <button type="button" >پس زمینه حاشیه دار تاریک</button>

پس زمینه روشن اصلی

bg-light-primary

                             
               <button type="button" >پس زمینه روشن اصلی</button>

پس زمینه روشن ثانویه

bg-light-secondary

                             
               <button type="button" >پس زمینه روشن ثانویه</button>

پس زمینه روشن موفقیت

bg-light-success

                             
               <button type="button" >پس زمینه روشن موفقیت</button>

پس زمینه روشن خطرناک

bg-light-danger

                             
               <button type="button" >پس زمینه روشن خطرناک</button>

پس زمینه روشن اخطار

bg-light-warning

                             
               <button type="button" >پس زمینه روشن اخطار</button>

پس زمینه روشن اطلاعات

bg-light-info

                             
               <button type="button" >پس زمینه روشن اطلاعات</button>

پس زمینه روشن

bg-light-light

                             
               <button type="button" >پس زمینه روشن</button>

پس زمینه تاریک

bg-light-dark

                             
               <button type="button" >پس زمینه تاریک</button>

پیشرفت ها

میله پیشرفت اصلی

progress-bar bg-primary

                             
               <div role="progressbar" aria-valuenow="0" aria-valuemin="0"
               aria-valuemax="100">
               <div ></div>
               </div>

میله پیشرفت ثانویه

progress-bar bg-secondary

                             
               <div role="progressbar" aria-valuenow="0" aria-valuemin="0"
               aria-valuemax="100">
               <div ></div>
               </div>

میله پیشرفت موفقیت

progress-bar bg-success

                             
               <div role="progressbar" aria-valuenow="0" aria-valuemin="0"
               aria-valuemax="100">
               <div ></div>
               </div>

میله پیشرفت خطرناک

progress-bar bg-danger

                             
               <div role="progressbar" aria-valuenow="0" aria-valuemin="0"
               aria-valuemax="100">
               <div ></div>
               </div>

میله پیشرفت اخطار

progress-bar bg-warning

                             
               <div role="progressbar" aria-valuenow="0" aria-valuemin="0"
               aria-valuemax="100">
               <div ></div>
               </div>

میله پیشرفت اطلاعات

progress-bar bg-info

                             
               <div role="progressbar" aria-valuenow="0" aria-valuemin="0"
               aria-valuemax="100">
               <div ></div>
               </div>

میله پیشرفت روشن

progress-bar bg-light

                             
               <div role="progressbar" aria-valuenow="0" aria-valuemin="0"
               aria-valuemax="100">
               <div ></div>
               </div>

میله پیشرفت تاریک

progress-bar bg-dark

                             
               <div role="progressbar" aria-valuenow="0" aria-valuemin="0"
               aria-valuemax="100">
               <div ></div>
               </div>

میله پیشرفت روشن اصلی

progress-bar bg-primary

                             
               <div role="progressbar" aria-valuenow="0" aria-valuemin="0"
               aria-valuemax="100">
               <div > 12.5% </div>
                </div>

میله پیشرفت روشن ثانویه

progress-bar bg-secondary

                             
               <div role="progressbar" aria-valuenow="25" aria-valuemin="0"
               aria-valuemax="100">
               <div > 25% </div>
                </div>

میله پیشرفت روشن موفقیت

progress-bar bg-success

                             
               <div role="progressbar" aria-valuenow="37.5" aria-valuemin="0"
               aria-valuemax="100">
               <div > 37.5% </div>
                </div>

میله پیشرفت روشن خطرناک

progress-bar bg-danger

                             
               <div role="progressbar" aria-valuenow="50" aria-valuemin="0"
              aria-valuemax="100">
              <div > 50% </div>
              </div>

میله پیشرفت روشن اخطار

progress-bar bg-warning

                             
               <div role="progressbar" aria-valuenow="62.5" aria-valuemin="0"
               aria-valuemax="100">
               <div > 62.5% </div>
                </div>

میله پیشرفت روشن اطلاعات

progress-bar bg-info

                             
               <div role="progressbar" aria-valuenow="62.5" aria-valuemin="0"
               aria-valuemax="100">
               <div > 62.5% </div>
                </div>

میله پیشرفت روشن

progress-bar bg-info

                             
               <div role="progressbar" aria-valuenow="82.5" aria-valuemin="0"
               aria-valuemax="100">
               <div > 82.5% </div>
                </div>

میله پیشرفت تاریک

progress-bar bg-info

                             
               <div role="progressbar" aria-valuenow="95" aria-valuemin="0"
              aria-valuemax="100">
              <div > 95% </div>
              </div>

میله پیشرفت راه راه

progress-bar bg-primary progress-bar-striped

                             

               <div >
                <div role="progressbar" aria-valuenow="0" aria-valuemin="0"
                aria-valuemax="100">
                <div > 12.5% </div>
                </div>

                <div role="progressbar" aria-valuenow="25" aria-valuemin="0"
                aria-valuemax="100">
                <div 
                 > 25% </div>
                </div>

                <div role="progressbar" aria-valuenow="37.5" aria-valuemin="0"
                aria-valuemax="100">
                <div 
                 > 37.5% </div>
                </div>

                <div role="progressbar" aria-valuenow="50" aria-valuemin="0"
                aria-valuemax="100">
                <div 
                 > 50% </div>
                </div>

                <div role="progressbar" aria-valuenow="62.5" aria-valuemin="0"
                aria-valuemax="100">
                <div 
                 > 62.5% </div>
                </div>

                <div role="progressbar" aria-valuenow="75" aria-valuemin="0"
                aria-valuemax="100">
                <div 
                 > 75% </div>
                </div>

                <div role="progressbar" aria-valuenow="82.5" aria-valuemin="0"
                aria-valuemax="100">
                <div 
                 > 82.5% </div>
                </div>

                <div role="progressbar" aria-valuenow="95" aria-valuemin="0"
                aria-valuemax="100">
                <div 
                 > 95% </div>
                </div>

               </div>

اندازه های میله پیشرفت

                             
               <div >
               <div >
                <div role="progressbar" aria-valuenow="20" aria-valuemin="0"
                aria-valuemax="100" ></div>
               </div>

               <div >
                <div role="progressbar" aria-valuenow="40" aria-valuemin="0"
                aria-valuemax="100" >This is normal size</div>
               </div>

               <div >
                <div role="progressbar" aria-valuenow="40" aria-valuemin="0"
                aria-valuemax="100" >This is normal size</div>
               </div>

               <div >
                <div role="progressbar" aria-valuenow="50" aria-valuemin="0"
                aria-valuemax="100" > height 15px</div>
               </div>

               <div >
                <div role="progressbar" aria-valuenow="50" aria-valuemin="0"
                aria-valuemax="100" > height 15px</div>
               </div>

               <div >
                <div role="progressbar" aria-valuenow="60" aria-valuemin="0"
                aria-valuemax="100" > height 20px</div>
               </div>

               <div >
                <div role="progressbar" aria-valuenow="70" aria-valuemin="0"
                aria-valuemax="100" > height 25px</div>
               </div>
               </div>

کلاس های کمکی

رنگ متن

text-primary

                             
               <div >
                 <span > - .متن اصلی</span>
                 <span > - متن ثانویه</span>
                 <span > - متن موفقیت</span>
                 <span > - متن خطرناک</span>
                 <span > - متن اخطار</span>
                 <span > - متن اطلاعات</span>
                 <span > - متن روشن</span>
                 <span > - متن تاریک</span>
               </div>

لینک رنگی

link-primary

                             
               <div >
                 <span > - لینک اصلی</span>
                 <span > - لینک ثانویه</span>
                 <span > - لینک موفقیت</span>
                 <span > - لینک خطرناک</span>
                 <span > - لینک اخطار</span>
                 <span > - لینک اطلاعات</span>
                 <span > - لینک روشن</span>
                 <span > - لینک تاریک</span>
               </div>

پس زمینه متن

txt-bg-primary

                             
               <div >
                 <span > - پس زمینه اصلی</span>
                 <span > - پس زمینه ثانویه</span>
                 <span > - پس زمینه موفقیت</span>
                 <span > - پس زمینه خطرناک</span>
                 <span > - پس زمینه اخطار</span>
                 <span > - پس زمینه اطلاعات</span>
                 <span > - پس زمینه روشن</span>
                 <span > - پس زمینه تاریک</span>
               </div>

آپشن های متن

text-start

                             
                 <div >متن حروف کوچک</div>
                 <div >متن حروف بزرگ</div>
                 <div >متن حرف اول</div>
                 <div >- تراز متن وسط</div>
                 <div >- تراز متن ابتدا</div>
                 <div >- تراز متن انتها</div>

آپشن های متن

text-d-underline

                             
               <div >- آپشن متن<span > آندرلاین </span></div>
                 <div >- آپشن متن<span > خط دار </span></div>
                 <div >- آپشن متن<span > خط بالا</span></div>
                 <div >- آپشن متن<span >خط بالا و پایین</span></div>
                 <div >- آپشن متن<span >آندرلاین و وسط</span>

آپشن های استایل فونت

f-fs-normal

                             
                <div >- استایل فونت<span >نرمال</span></div>
                <div >- استایل فونت<span >ایتالیک</span></div>
                <div >- استایل فونت<span >آبلیک</span></div>
                <div >- استایل فونت<span >اولیه</span></div>
                <div >- استایل فونت<span >وراثت</span></div>

h1-h6

                             
 <div >اندازه متن h1</div>
  <div >اندازه متن h2</div>
  <div >اندازه متن h3</div>
  <div >اندازه متن h4</div>
  <div >اندازه متن h5</div>
  <div >اندازه متن h6</div>

وزن فونت متن

f-fw-500

                             
                <div >- وزن متن<span >f-fw-100* </span></div>
                <div >- وزن متن<span >f-fw-200* </span></div>
                <div >- وزن متن<span >f-fw-300* </span></div>
                <div >- وزن متن<span >f-fw-400* </span></div>
                <div >- وزن متن<span >f-fw-500* </span></div>
                <div >- وزن متن<span >f-fw-600* </span></div>
                <div >- وزن متن<span >f-fw-700* </span></div>
                <div >- وزن متن<span >f-fw-800* </span></div>
                <div >- وزن متن<span >f-fw-900* </span></div>

سایز فونت متن

f-s-14

                             
                  <div >سایز متن-10 </span></div>
                  <div >سایز متن-12 </span></div>
                  <div >سایز متن-14 </span></div>
                  <div >سایز متن-16 </span></div>
                  <div >سایز متن-18 </span></div>
                  <div >سایز متن-20 </span></div>
                  <div >سایز متن-24 </span></div>
                  <div >سایز متن-80 </span></div>

پدینگ متن

pd-0

                             
               <div >
                 <div >
                  <p >پدینگ-16</p>
                 </div>
                 <div >
                  <p >پدینگ-14</p>
                 </div>
                 <div >
                  <p >پدینگ-10</p>
                 </div>
                 <div >
                  <p >پدینگ-8</p>
                 </div>
                 <div >
                  <p >پدینگ-4</p>
                 </div>
               </div>

پدینگ بالا

pa-t-0

                             
               <div >
                 <div >
                  <p >پدینگ بالا-40</p>
                 </div>
                 <div >
                  <p >پدینگ بالا-35</p>
                 </div>
                 <div >
                  <p >پدینگ بالا-20</p>
                 </div>
                 <div >
                  <p >پدینگ بالا-15</p>
                 </div>
               </div>

پدینگ ابتدا

pa-s-0

                             
               <div >
                 <div >
                  <p >پدینگ ابتدا-40</p>
                 </div>
                 <div >
                  <p >پدینگ ابتدا-35</p>
                 </div>
                 <div >
                  <p >پدینگ ابتدا-20</p>
                 </div>
                 <div >
                  <p >پدینگ ابتدا-15</p>
                 </div>
               </div>

پدینگ پایین

pa-t-0

                             
               <div >
                 <div >
                  <p >پدینگ پایین-40</p>
                 </div>
                 <div >
                  <p >پدینگ پایین-35</p>
                 </div>
                 <div >
                  <p >پدینگ پایین-20</p>
                 </div>
                 <div >
                  <p >پدینگ پایین-15</p>
                 </div>
               </div>

پدینگ انتها

pa-e-0

                             
               <div >
                 <div >
                  <p >پدینگ انتها-40</p>
                 </div>
                 <div >
                  <p >پدینگ انتها-35</p>
                 </div>
                 <div >
                  <p >پدینگ انتها-20</p>
                 </div>
                 <div >
                  <p >پدینگ انتها-15</p>
                 </div>
               </div>

مارجین

pd-0

                             
              <div >
                 <div >
                  <div >
                  <div >مارجین-40</div>
                  </div>
                 </div>
                 <div >
                  <div >
                  <div >مارجین-34</div>
                  </div>
                 </div>
                 <div >
                  <div >
                  <div >مارجین-30</div>
                  </div>
                 </div>
                 <div >
                  <div >
                  <div >مارجین-28</div>
                  </div>
                 </div>
                 <div >
                  <div >
                  <div >مارجین-24</div>
                  </div>
                 </div>
                 <div >
                  <div >
                  <div >مارجین-20</div>
                  </div>
                 </div>
                 <div >
                  <div >
                  <div >مارجین-14</div>
                  </div>
                 </div>
                 <div >
                  <div >
                  <p >مارجین-10</p>
                  </div>
                 </div>
                 <div >
                  <div >
                  <p >مارجین-4</p>
                  </div>
               </div>

مارجین بالا

mg-t-0

                             
               <div >
                 <div >
                  <p >مارجین بالا-40</p>
                 </div>
                 <div >
                  <p >مارجین بالا-35</p>
                 </div>
                 <div >
                  <p >مارجین بالا-20</p>
                 </div>
                 <div >
                  <p >مارجین بالا-15</p>
                 </div>
               </div>

مارجین ابتدا

mg-s-0

                             
               <div >
                 <div >
                  <p >مارجین ابتدا-40</p>
                 </div>
                 <div >
                  <p >مارجین ابتدا-35</p>
                 </div>
                 <div >
                  <p >مارجین ابتدا-20</p>
                 </div>
                 <div >
                  <p >مارجین ابتدا-15</p>
                 </div>
               </div>

مارجین پایین

mg-t-0

                             
               <div >
                 <div >
                  <p >مارجین پایین-40</p>
                 </div>
                 <div >
                  <p >مارجین پایین-35</p>
                 </div>
                 <div >
                  <p >مارجین پایین-20</p>
                 </div>
                 <div >
                  <p >مارجین پایین-15</p>
                 </div>
               </div>

مارجین انتها

mg-e-0

                             
               <div >
                 <div >
                  <p >مارجین انتها-40</p>
                 </div>
                 <div >
                  <p >مارجین انتها-35</p>
                 </div>
                 <div >
                  <p >مارجین انتها-20</p>
                 </div>
                 <div >
                  <p >مارجین انتها-15</p>
                 </div>
               </div>

کلاس های عرض

w-50

                             
                  <div > عرض-150 </div>
                  <div > عرض-80 </div>
                  <div > عرض-60 </div>
                  <div > عرض-50 </div>

کلاس های ارتفاع

h-50

                             
                  <div > ارتفاع-150 </div>
                  <div > ارتفاع-80 </div>
                  <div > ارتفاع-60 </div>
                  <div > ارتفاع-50 </div>

کلاس های حاشیه

border

                             
               <div >
                 <div >حاشیه</div>
                 <div >حاشیه بالا</div>
                 <div >حاشیه ابتدا</div>
                 <div >حاشیه انتها</div>
                 <div >حاشیه پایین</div>
               </div>

حاشیه رنگی

b-1-primary

                             
               <div >
                 <div >حاشیه رنگی اصلی</div>
                 <div >حاشیه رنگی ثانویه</div>
                 <div >حاشیه رنگی موفقیت</div>
                 <div >حاشیه رنگی خطرناک</div>
                 <div >حاشیه رنگی اخطارg</div>
                 <div >حاشیه رنگی اطلاعات</div>
                 <div >حاشیه رنگی روشن</div>
                 <div >حاشیه رنگی تاریک</div>
               </div>

حاشیه رنگی و اندازه ها

b-1-primary

                             
               <div >
                 <div >حاشیه 1 اصلی</div>
                 <div >حاشیه 3 ثانویه</div>
                 <div >حاشیه 5 موفقیت</div>
                 <div >حاشیه 7 خطرناک</div>
                 <div >حاشیه 9 اخطار</div>
                 <div >حاشیه 15 اطلاعات</div>
               </div>

حاشیه راست

b-r-5

                             
               <div >
                 <div >حاشبیه راست-5</div>
                 <div >حاشبیه راست-10</div>
                 <div >حاشبیه راست-15</div>
                 <div >حاشبیه راست-20</div>
                 <div >حاشبیه راست-25</div>
                 <div >حاشبیه راست-30</div>
                </div>

جداکننده

جداکننده عمودی

app-divider-v

                               
                <div ></div>

جداکننده عمودی نقطه ای

app-divider-v dotted

                               
                <div ></div>

جداکننده عمودی خط دار

app-divider-v dashed

                               
                <div ></div>

جداکننده افقی

app-divider-h

                               
                <div ></div>

جداکننده افقی نقطه دار

app-divider-h dotted

                               
                <div ></div>

جداکننده افقی خط دار

app-divider-h dashed

                               
                <div ></div>

جداکننده عمودی و محتوای ترازبندی ابتدا

app-divider-v

                               
                <div >
                <p> ترازبندی محتوا ابتدا </p>
                </div>

جداکننده عمودی و ترازبندی محتوا وسط

app-divider-v justify-content-center

                               
                <div >
                <p> ترازبندی محتوا وسط </p>
                </div>

جداکننده عمودی و ترازبندی محتوا انتها

app-divider-v justify-content-end

                               
                <div >
                <p> ترازبندی محتوا انتها </p>
                </div>

جداکننده افقی و ترازبندی محتوا ابتدا

app-divider-h

                               
                <div >
                 <div >
                  <div >
                   <p>Or</p>
                   </div>
                 </div>
                </div>

جداکننده افقی و ترازبندی محتوا وسط

app-divider-h align-items-center

                               
                <div >
                 <div >
                  <div >
                   <p>Or</p>
                   </div>
                 </div>
                </div>

جداکننده افقی و ترازبندی محتوا انتها

app-divider-h align-items-end

                               
                <div >
                 <div >
                  <div >
                   <p>Or</p>
                   </div>
                 </div>
                </div>

جداکننده عمودی اصلی

app-divider-v primary

                               
                <div >
                </div>

جداکننده عمودی ثانویه

app-divider-v secondary

                               
                <div >
                </div>

جداکننده عمودی موفقیت

app-divider-v success

                               
                <div >
                </div>

جداکننده عمودی خطرناک

app-divider-v danger

                               
                <div >
                </div>

جداکننده عمودی اخطار

app-divider-v warning

                               
                <div >
                </div>

جداکننده عمودی اطلاعات

app-divider-v info

                               
                <div >
                </div>

جداکننده عمودی روشن

app-divider-v light

                               
                <div >
                </div>

جداکننده عمودی تاریک

app-divider-v dark

                               
                <div >
                </div>

جداکننده افقی اصلی

app-divider-h primary

                               
                <div >
                </div>

جداکننده افقی ثانویه

app-divider-h secondary

                               
                <div >
                </div>

جداکننده افقی موفقیت

app-divider-h success

                               
                <div >
                </div>

جداکننده افقی خطرناک

app-divider-h danger

                               
                <div >
                </div>

جداکننده افقی اخطار

app-divider-h warning

                               
                <div >
                </div>

جداکننده افقی اطلاعات

app-divider-h info

                               
                <div >
                </div>

جداکننده افقی روشن

app-divider-h light

                               
                <div >
                </div>

جداکننده افقی تاریک

app-divider-h dark

                               
                <div >
                </div>

روبان

روبان چپ

ribbon ribbon-left ribbon-primary

روبان چپ سایه دار

cross-shadow-ribbon cross-left ribbon-primary

روبان چپ متفاوت

ribbon-shape shape-left ribbon-primary

روبان چپ فلش دار

arrow-ribbon arrow-left ribbon-primary

روبان کناری چپ

ribbon-side side-left ribbon-primary

روبان چپ راست

ribbon-top top-left ribbon-primary

                               
                <div >
                   <div >
                    <div >
                     <i ></i>
                    </div>
                   </div>

                   <div >
                    <div >
                     <i ></i>
                    </div>
                   </div>

                   <div >
                    <div >
                     <i ></i>
                    </div>
                   </div>

                   <div >
                    <div >
                     <i ></i>
                    </div>
                   </div>

                   <div >
                    <div >
                     <i ></i>
                    </div>
                   </div>

                   <div >
                    <div >
                     <i ></i>
                    </div>
                   </div>

                   <div >
                    <div >
                     <i ></i>
                    </div>
                   </div>

                   <div >
                    <div >
                     <i ></i>
                    </div>
                   </div>
                </div>

روبان دایره ای

circle-ribbon circle-left ribbon-primary

روبان فایل چپ

ribbon file-left ribbon-primary

روبان جعبه ای چپ

ribbon file-left ribbon-primary

                               
                <div >
                   <div >
                    <div >
                     <div > جعبه </div>
                    </div>
                   </div>

                   <div >
                    <div >
                     <div > جعبه </div>
                    </div>
                   </div>

                   <div >
                    <div >
                     <div > جعبه </div>
                    </div>
                   </div>

                   <div >
                    <div >
                     <div > جعبه </div>
                    </div>
                   </div>

                   <div >
                    <div >
                     <div > جعبه </div>
                    </div>
                   </div>

                   <div >
                    <div >
                     <div > جعبه </div>
                    </div>
                   </div>

                   <div >
                    <div >
                     <div > جعبه </div>
                    </div>
                   </div>

                   <div >
                   <div >
                    <div > جعبه </div>
                   </div>
                 </div>
                </div>

موقعیت های روبان

روبان با موقعیت های مختلف

موقعیت روبان فلش دار

روبان بالا

                               
                <div >
                   <div >
                    <div >
                     <i ></i>
                    </div>
                   </div>

                   <div >
                    <div >
                     <i ></i>
                    </div>
                   </div>

                   <div >
                    <div >
                     <i ></i>
                    </div>
                   </div>
                </div>

روبان کناری

روبان سایه دار

روبان دایره ای

روبان فایل

روبان جعبه ای

                               
                <div >
                   <div >
                    <div >
                     <div > جعبه </div>
                    </div>
                   </div>

                   <div >
                    <div >
                     <div > جعبه </div>
                    </div>
                   </div>

                   <div >
                    <div >
                     <div > جعبه </div>
                    </div>
                   </div>
                </div>

میانبر

سبد خرید

سبد خرید شما خالی است

کل 346800000

اعلان

اعلان ندارید

برگه تقلب