آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

رنگ 

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>

 

کلاس های متنی متنی نیز با لنگرهای ارائه شده و تمرکز در لنگرها کار خوبی دارند. توجه داشته باشید که کلاس .text-white و text-muted دارای یک ظاهر جانبی نیست.

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Muted link

White link

 

 <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>

 

رنگ پس زمینه

همانند کلاس های رنگ متن، به راحتی پس زمینه یک عنصر را برای هر کلاس متنی تنظیم کنید. اجزاء لنگر در حوادث تار می کنند، درست مثل کلاس های متن. ابزار پس زمینه رنگ را تنظیم نمی کند، بنابراین در بعضی موارد می توانید از برنامه های -*text. استفاده کنید.

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white

 

 <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>

 

گرادیان سابقه

هنگامی که enable-gradients$ به درست است، شما قادر خواهید بود از کلاسهای bg-gradient-utility. استفاده کنید. به طور پیش فرض، گرادیان فعال $ غیر فعال است و مثال زیر عمدا خراب است. این برای سفارشی سازی ساده تر از لحظه ای که شما شروع به استفاده از بوت استرپ انجام می دهید. برای فعال کردن این کلاس ها و بیشتر، درباره گزینه های Sass ما اطلاعات بیشتری کسب کنید.
.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-success

 

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