اجزاء
عنوان پایپوگرافی
Ex. <h1> H1. Bootstrap heading </h1>
H1. عنوان بوت استرپ
H2. عنوان بوت استرپ
H3. عنوان بوت استرپ
H4. عنوان بوت استرپ
H5. عنوان بوت استرپ
H6. عنوان بوت استرپ
نمایش عنوان
Ex. <p class="display-1"> Display 1 </p>
نمایش 1
نمایش 2
نمایش 3
نمایش 4
نمایش 5
نمایش 6
رنگ پس زمینه
Ex. <div class="bg-primary"> Landrick Saas & Software Template </div>
رنگ پس زمینه نرم
Ex. <div class="bg-soft-primary"> Landrick Saas & Software Template </div>
رنگ متن
Ex. <div class="text-primary"> Landrick Saas & Software Template </div>
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-white
.text-white-50
.text-dark
دراپ داون
Ex.
<div class="btn-group dropdown-primary">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Primary
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Home</a>
<a class="dropdown-item" href="#">Services</a>
<a class="dropdown-item" href="#">About us</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact us</a>
</div>
</div>
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Primary
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Home</a>
<a class="dropdown-item" href="#">Services</a>
<a class="dropdown-item" href="#">About us</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact us</a>
</div>
</div>
نشان ها
Ex. <span class="badge bg-primary"> primary </span>
اصلی
ثانویه
موفق
خطر
هشدار
اطلاعات
روشن
تاریک
نشان های قرص
Ex. <span class="badge rounded-pill bg-primary"> primary </span>
اصلی
ثانویه
موفق
خطر
هشدار
اطلاعات
روشن
تاریک
نشان های نرم
Ex. <span class="badge bg-soft-primary"> primary </span>
اصلی
ثانویه
موفق
خطر
هشدار
اطلاعات
روشن
تاریک
نشان های قرص نرم
Ex. <span class="badge rounded-pill bg-soft-primary"> primary </span>
اصلی
ثانویه
موفق
خطر
هشدار
اطلاعات
روشن
تاریک
هشدار
Ex. <div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div>
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
لینک هشدار
Ex. <div class="alert alert-primary" role="alert"> A simple primary alert with <a href="#" class="alert-link"></a>. </div>
A simple primary alert with an link.
A simple secondary alert with an link.
A simple success alert with an link.
A simple danger alert with an link.
A simple warning alert with an link.
A simple info alert with an link.
A simple light alert with an link.
A simple dark alert with an link.
مطالب اضافی
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Dismissing Alert
Ex.
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button>
</div>
<strong>Well done!</strong> You successfully read this important alert message.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button>
</div>
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Holy guacamole! You should check in on some of those fields below.
Oh snap! Change a few things up and try submitting again.
هشدار پیشرفته
Ex.
<div class="alert alert-primary alert-pills" role="alert">
<span class="badge rounded-pill bg-danger"> New </span>
<span class="alert-content"> A Modern primary alert—check it out! </span>
</div>
<span class="badge rounded-pill bg-danger"> New </span>
<span class="alert-content"> A Modern primary alert—check it out! </span>
</div>
جدید
A Modern primary alert—check it out!
New
A Modern danger alert—check it out!
هشدار طرح کلی پیشرفته
Ex.
<div class="alert alert-outline-primary alert-pills" role="alert">
<span class="badge rounded-pill bg-danger"> New </span>
<span class="alert-content"> A Modern primary alert—check it out! </span>
</div>
<span class="badge rounded-pill bg-danger"> New </span>
<span class="alert-content"> A Modern primary alert—check it out! </span>
</div>
جدید
A Modern primary alert—check it out!
New
A Modern danger alert—check it out!
آکاردئون
انواع مختلفی از معابر Lorem Ipsum موجود است، اما اکثر آنها به نوعی دچار تغییر شده اند.
انواع مختلفی از معابر Lorem Ipsum موجود است، اما اکثر آنها به نوعی دچار تغییر شده اند.
انواع مختلفی از معابر Lorem Ipsum موجود است، اما اکثر آنها به نوعی دچار تغییر شده اند.
انواع مختلفی از معابر Lorem Ipsum موجود است، اما اکثر آنها به نوعی دچار تغییر شده اند.
کارت ها
کارت عمودی
<div class="card shadow rounded border-0 overflow-hidden>
<img src="assets/images/blog/01.jpg" class="img-fluid" alt=">
<div class="card-body">
<h5 class="card-title">Saas & Software : Landrick</h5>
<p class="text-muted mb-0">Due to its widespread use as filler text for layouts, non-readability is of great importance</p>
</div>
</div>
<img src="assets/images/blog/01.jpg" class="img-fluid" alt=">
<div class="card-body">
<h5 class="card-title">Saas & Software : Landrick</h5>
<p class="text-muted mb-0">Due to its widespread use as filler text for layouts, non-readability is of great importance</p>
</div>
</div>
Saas & Software : Landrick
Due to its widespread use as filler text for layouts, non-readability is of great importance
ادامه مطلبSaas & Software : Landrick
Due to its widespread use as filler text for layouts, non-readability is of great importance
ادامه مطلب
Horizontal Card
<div class="card shadow rounded border-0 overflow-hidden>
<img src="assets/images/blog/01.jpg" class="img-fluid" alt=">
<div class="card-body">
<h5 class="card-title">Saas & Software : Landrick</h5>
<p class="text-muted mb-0">Due to its widespread use as filler text for layouts, non-readability is of great importance</p>
</div>
</div>
<img src="assets/images/blog/01.jpg" class="img-fluid" alt=">
<div class="card-body">
<h5 class="card-title">Saas & Software : Landrick</h5>
<p class="text-muted mb-0">Due to its widespread use as filler text for layouts, non-readability is of great importance</p>
</div>
</div>
Saas & Software : Landrick
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
فرم
چکباکس
رادیو باتن
دکمه تغییر
Form Select Box
Subscribe Form
Google Map
Breadcrumb
Ex.
<nav aria-label="breadcrumb" class="d-inline-block">
<ul class="breadcrumb bg-white rounded shadow mb-0">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Pages</a></lt>
<li class="breadcrumb-item active" aria-current="page">Components</li>
</ul>
</div>
<ul class="breadcrumb bg-white rounded shadow mb-0">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Pages</a></lt>
<li class="breadcrumb-item active" aria-current="page">Components</li>
</ul>
</div>
Pagination
Ex.
<ul class="pagination mb-0">
<li class="page-item"><a class="page-link" href="javascript:void(0)" aria-label="Previous">Prev</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Next">Next</a></li>
</ul>
<li class="page-item"><a class="page-link" href="javascript:void(0)" aria-label="Previous">Prev</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#" aria-label="Next">Next</a></li>
</ul>
Default Avatars
Ex. <img src="assets/images/home/01.jpg" class="img-fluid avatar avatar-ex-sm rounded">
Circle Avatars
Ex. <img src="assets/images/home/01.jpg" class="img-fluid avatar avatar-ex-sm rounded-circle">
Progressbar
Ex.
<div class="progress-box">
<h6 class="title text-muted"> Progress</h6>
<div class="progress">
<div class="progress-bar position-relative bg-primary" style="width:84%;">
<div class="progress-value d-block text-muted h6">84%</div>
</div>
</div>
</div>
<h6 class="title text-muted"> Progress</h6>
<div class="progress">
<div class="progress-bar position-relative bg-primary" style="width:84%;">
<div class="progress-value d-block text-muted h6">84%</div>
</div>
</div>
</div>
وردپرس
PHP / MYSQL
جاوا
HTML
Offcanvas
Table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | هری | Potter | @hpt |
Blockquotes
" انواع مختلفی از قسمت‌های لورم ایپسوم در دسترس است، اما اکثریت آنها به نوعی دچار تغییر شده‌اند، با طنز تزریقی، یا کلمات تصادفی که حتی اندکی هم باورپذیر به نظر نمی‌رسند. "
Icons
نمادهای پر
There are 280+ feather icons and you can get all icons info from here: https://feathericons.com/
Ex. <i data-feather="mail" class="fea icon-sm"> </i>
Material Design Icons
There are 4400+ Material Design icons and you can get all icons info from here: https://materialdesignicons.com/
Ex. <i class="mdi mdi-home"> </i>
آیکن های فلت
There are Flaticon icons and you can get all icons info from here: https://www.flaticon.com/packs/basic-icon
Iconscout (Unicons) Icons
There are 1100+ Iconscout (Unicons) Icons and you can get all icons info from here: https://www.flaticon.com/packs/basic-icon
Ex.
<span class="h3 text-primary me-2">
<i class="uil uil-0-plus"></i>
</span>
<span class="h3 text-primary me-2">
<i class="uil uil-0-plus"></i>
</span>
