داکتو - قالب اچ‌تی‌ام‌ال داکیومنشن

رنگ ها

با تعداد کمی کلاس کاربردی رنگ ، معنی را از طریق رنگ منتقل کنید.

رنگهای متنی

پر کردن پس زمینه را می توان با استفاده از یکی از ظرف ها به یک ظرف اعمال کرد.bg-[color]

اصلی
.bg-primary

ثانوی
.bg-secondary

موفقیت
.bg-success

اطلاعات
.bg-info

هشدار
.bg-warning

خطر
.bg-danger


<div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-primary rounded ml-4"></div>
    <div>
        <strong>اصلی</strong><br />
        <code>.bg-primary</code>
    </div>
</div>
<div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-secondary rounded ml-4"></div>
    <div>
        <strong>ثانوی</strong><br />
        <code>.bg-secondary</code>
    </div>
</div>
<div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-success rounded ml-4"></div>
    <div>
        <strong>موفقیت</strong><br />
        <code>.bg-success</code>
    </div>
</div>
<div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-info rounded ml-4"></div>
    <div>
        <strong>اطلاعات</strong><br />
        <code>.bg-info</code>
    </div>
</div>
<div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-warning rounded ml-4"></div>
    <div>
        <strong>هشدار</strong><br />
        <code>.bg-warning</code>
    </div>
</div>
<div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-danger rounded ml-4"></div>
    <div>
        <strong>خطر</strong><br />
        <code>.bg-danger</code>
    </div>
</div>

Other colors

Instead of using contextual classes you can use ordinary color names.

آبی
.bg-blue

آژر
.bg-azure

ایندیگو
.bg-indigo

بنفش
.bg-purple

صورتی
.bg-pink

قرمز
.bg-red

نارنجی
.bg-orange

زرد
.bg-yellow

لیمویی
.bg-lime

سبز
.bg-green

سبزآبی
.bg-teal

فیروزه ای
.bg-cyan

Gray
.bg-gray


<div class="row">
<div class="col-4">
        <div class="d-flex align-items-center mb-4">
        <div class="w-3 h-3 bg-blue rounded ml-4"></div>
        <div>
            <strong>آبی</strong><br />
            <code>.bg-blue</code>
        </div>
    </div>
    <div class="d-flex align-items-center mb-4">
        <div class="w-3 h-3 bg-azure rounded ml-4"></div>
        <div>
            <strong>آژر</strong><br />
            <code>.bg-azure</code>
        </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-indigo rounded ml-4"></div>
    <div>
        <strong>ایندیگو</strong><br />
        <code>.bg-indigo</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-purple rounded ml-4"></div>
    <div>
        <strong>بنفش</strong><br />
        <code>.bg-purple</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-pink rounded ml-4"></div>
    <div>
        <strong>صورتی</strong><br />
        <code>.bg-pink</code>
    </div>
    </div>
    </div>
    <div class="col-4">
    <div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-red rounded ml-4"></div>
    <div>
        <strong>قرمز</strong><br />
        <code>.bg-red</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-orange rounded ml-4"></div>
    <div>
        <strong>نارنجی</strong><br />
        <code>.bg-orange</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-yellow rounded ml-4"></div>
    <div>
        <strong>زرد</strong><br />
        <code>.bg-yellow</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-lime rounded ml-4"></div>
    <div>
        <strong>لیمویی</strong><br />
        <code>.bg-lime</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-green rounded ml-4"></div>
    <div>
        <strong>سبز</strong><br />
        <code>.bg-green</code>
    </div>
    </div>
    </div>
    <div class="col-4">
    <div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-teal rounded ml-4"></div>
    <div>
        <strong>سبزآبی</strong><br />
        <code>.bg-teal</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-cyan rounded ml-4"></div>
    <div>
        <strong>فیروزه ای</strong><br />
        <code>.bg-cyan</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-gray rounded ml-4"></div>
    <div>
        <strong>Gray</strong><br />
        <code>.bg-gray</code>
    </div>
    </div>
    <div class="d-flex align-items-center mb-4">
    <div class="w-3 h-3 bg-gray-dark rounded ml-4"></div>
    <div>
        <strong>Dark gray</strong><br />
        <code>.bg-gray-dark</code>
    </div>
    </div>
    </div>
</div>

رنگ ها

ناوبری

رنگ ها

رنگهای متنی

Other colors