باسلام. در این قسمت از اموزش های بوت استرپ به بررسی انواع رنگ های متنی و پس زمینه ها در بوت استرپ خواهیم پرداخت.
شما میتوانید با مراجعه به دوره ی جامع بوت استرپ از سایر قسمت های اموزش استفاده کنید.
برای سهولت استفاده میتوانید بر روی لینک های زیر کلیک کنید تا به تیترمورد نظر در مقاله هدایت شوید:
رنگهای متن
بوت استرپ 4 کلاس هایی برای شناسایی و معنی دادن به تکست ها از طریق رنگ دادن دارد:
رنگهای بوت استرپ به صورت ربرو تعریف میشوند : .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body(رنگ پیش فرض بدنه به رنگ سیاه) و .text-light
برای درک بهتر رنگ های بوت استرپ به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="container"> <h2>رنگ های متنی</h2> <p class="text-muted">متن سایلنت شده.</p> <p class="text-primary">متن های مهم.</p> <p class="text-success">متن های موفق.</p> <p class="text-info">متن های گزارش اطلاعات.</p> <p class="text-warning">متن های گزارش دهنده هشدار.</p> <p class="text-danger">متن های خطا.</p> <p class="text-secondary">رنگ ثانویه.</p> <p class="text-dark">متن خاکستری تیره.</p> <p class="text-body">رنگ پیش فرض اغلب با زمینه مشکی.</p> <p class="text-light">متن خاکستری روشن (در پس زمینه سفید).</p> <p class="text-white">متن رنگ سفید (در پس زمینه سفید).</p> </div> |
کلاس های متن همچنین میتوانند برای لینک ها استفاده شوند ، به این شرح که هنگام اشاره شدن با موس یا اصطلاحا هاور شدن به رنگ تیره تر نمایش داده میشوند ، برای درک این موضوع به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="container"> <h2>رنگ لینک</h2> <a href="#" class="text-muted">لینک سایلنت.</a> <a href="#" class="text-primary">لینک اولیه.</a> <a href="#" class="text-success">لینک موفق.</a> <a href="#" class="text-info">لینک اطلاعات.</a> <a href="#" class="text-warning">لینک هشدار.</a> <a href="#" class="text-danger">لینک خطر.</a> <a href="#" class="text-secondary">لینک ثانویه.</a> <a href="#" class="text-dark">رنگ خاکستری تیره.</a> <a href="#" class="text-body">لینک مشکی .</a> <a href="#" class="text-light">خاکستری روشن.</a> </div> |
شما همچنین این قابلیت را خواهید داشت تا شفافیت 50 درصد به رنگهای سیاه یا سفید را با کلاس های .text-black-50 یا .text-white-50 اضافه کنید. برای درک این موضوع به مثال زیر توجه کنید :
|
1 2 3 4 5 |
<div class="container"> <h2>رنگ های شفاف</h2> <p class="text-black-50">رنگ سیاه با 50 درصد شفافیف برای پس زمینه</p> <p class="text-white-50 bg-dark">رنگ سفید با 50 درصد شفافیت برای پس زمینه با پس زمینه مشکی</p> </div> |
رنگ های پس زمینه
کلاس هایی که برای شناسایی رنگ پس زمینه استفاده میشوند بصورت ربرو هستند : .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark و .bg-light.
این نکته را به یاد داشته باشید که کلاس های رنگهای پس زمینه فقط برای پس زمینه خواهند بود و برای استفاده کردن کلاس های متنی حتما باید از کلاس .text-* استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="container"> <h2>رنگ های پس زمینه</h2> <p class="bg-primary text-white">پس زمینه مهم.</p> <p class="bg-success text-white">پس زمینه موفق.</p> <p class="bg-info text-white">Tپس زمینه ی اطلاعات.</p> <p class="bg-warning text-white">پس زمینه هشدار.</p> <p class="bg-danger text-white">پس زمینه خطر.</p> <p class="bg-secondary text-white">پس زمینه ثانویه.</p> <p class="bg-dark text-white">پس زمینه خاکستری تیره.</p> <p class="bg-light text-dark">پس زمینه خاکستری روشن.</p> </div> |
ویدیوی قسمت چهارم
توضیحات کامل تر به همراه درک کردن استفاده از هر طرح و رنگبندی خاص را در ویدیوی زیر قرار دادیم.
همانطور که میدانید برای مطالعه بیشتر موارد میتوانید به سایت getbootstrap مراجعه کنید.
امیدوارم این اموزش برای شما عزیزان مفید واقع شده باشد ، لطفا درصورت داشتن هرگونه سوال نظر یا انتقاد از قسمت کامنتها و یا شبکه های اجتماعی با ما در ارتباط باشید.
موفق و پیروز باشید.
2 Comments
Join the discussion and tell us your opinion.
با عرض سلام و خسته نباشید خدمت شما مدرس گرامی .
جا داره از زحمات شما برای گرد آوری این مطالب آموزشی تشکر کنم چرا که هماهنگ با آخرین نسخه آماده شده و جای تشکر ویژه داره که به صورت رایگان برای افراد قرار داده شده .
کیفیت مناسب صدا و تصویر ، جامع بودن مطالب آموزشی و کامل بودن آموزش از مزایای این دوره آموزشی است که اغلب در آموزش های رایگان کم تر دیده می شود .
یک دنیا ممنون .
خواهش میکنم باعث افتخار که از دوره رایگان بوت استرپ 4 رضایت داشتید ، بابت اینکه یک مقدار دیرتر از قبل جلو میره عذرخواهی میکنم به امید خدا به روند برگردیم و بتونیم باقدرت مطالب رو دراختیارتون قرار بدیم.