رنگ‌ها در بوت استرپ

رنگ‌ها در بوت استرپ

دقت در رنگ‌بندی و انتخاب رنگ‌ها برای وب سایت و قالب از مهارت‌های یک طراح سایت است. در این اموزش به معرفی امکانات بوت استرپ برای استفاده از رنگ ها پرداخته شده است.
ابزارهای کمکی بوت استرپ 1398/04/03 34 1 پیوند مستقیم

رنگ‌ها در بوت استرپ
1

یکی از ویژگی‌های مهم که به جذابیت و زیبایی وب سایت‌ها و قالب‌ها می پردازد مبحث رنگ‌ها می باشد.

دقت در رنگ‌بندی و انتخاب رنگ‌ها برای وب سایت و قالب از مهارت‌های یک طراح سایت است.

رنگ‌ها در بوت استرپ برای استفاده به دو دسته ی اصلی تقسیم می شوند‌:

  • رنگ متن
  • رنگ پس زمینه

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

رنگ متن

کلاس رنگ‌ها برای متن وب سایت به صورت زیر می باشد:

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-muted

.text-white

برای استفاده از رنگ‌های بالا از دستورات زیر استفاده می‌کنیم:

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

 

رنگ پس زمینه

کلاس رنگ ها برای پس زمینه  وب سایت به صورت زیر می باشد:

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

 

برای استفاده از رنگ‌های پس زمینه بالا از دستورات زیر استفاده می‌کنیم:

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

 

نکته: برای متن لینک‌ها نیز می توان رنگ انتخاب نمود. رنگهای لینک نیز مانند رنگ های متن می باشد و برای استفاده از رنگ‌ها می توان از دستورات زیر استفاده نمود:

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

ثبت کننده:حسین خزائی تاریخ ثبت:1398/04/03
ویرایش کننده:حسین خزائی تاریخ ویرایش:1398/04/03

موضوع: ابزارهای کمکی بوت استرپ
تعداد بازدید:34


دیدگاه شما

کاربر گرامی خواهشمند است به موارد زیر دقت فرمایید:
• لطفا فارسی تایپ کنید و با حروف لاتین (فینگلیش) ننویسید.
• دیدگاه های ارائه شده پس از بازبینی منتشر می‌شود.
• آدرس ایمیل در سایت نمایش داده نمی شود.