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

دسته‌ها: دوره آموزش رایگان bootstrap4، دوره‌های رایگان

سه شنبه 6 آبان 1399

با استفاده از کلاس‌هایی که در بوت استرپ فراهم آمده است، می‌توانید کارهایی مانند گرد کردن گوشه‌های عکس، بیضوی کردن عکس، انداختن کادر دور تصویر را بر روی تصاویر دلخواه خود انجام داد. همچنین با استفاده از رنگ‌ها در بوت‌استرپ می‌توانید هر متن و پس‌زمینه‌ای را به طرح و رنگ دلخواهتان دربیاورید. در این قسمت از دوره آموزشی رایگان bootstrap4 با نحوه‌ی کار با تصاویر در بوت‌استرپ و رنگ‌ها آشنا خواهید شد.

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

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

.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
, .text-secondary
.text-white
.text-dark
.text-body
.text-light

به مثال زیر توجه کنید:

<div class="container">
  <h2>Contextual Colors</h2>
  <p>Use the contextual classes to provide "meaning through colors":</p>
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
  <p class="text-secondary">Secondary text.</p>
  <p class="text-dark">This text is dark grey.</p>
  <p class="text-body">Default body color (often black).</p>
  <p class="text-light">This text is light grey (on white background).</p>
  <p class="text-white">This text is white (on white background).</p>
</div>

<h2>Contextual Colors</h2>

<p>Use the contextual classes to provide "meaning through colors":</p>

<p class="text-muted">This text is muted.</p>

<p class="text-primary">This text is important.</p>

<p class="text-success">This text indicates success.</p>

<p class="text-info">This text represents some information.</p>

<p class="text-warning">This text represents a warning.</p>

<p class="text-danger">This text represents danger.</p>

<p class="text-secondary">Secondary text.</p>

<p class="text-body">Default body color (often black).</p>

<p class="text-light">This text is light grey (on white background).</p>

<p class="text-white">This text is white (on white background).</p>

</div>

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

<div class="container">
  <h2>Contextual Link Colors</h2>
  <p>Hover over the links.</p>
  <a href="#" class="text-muted">Muted link.</a>
  <a href="#" class="text-primary">Primary link.</a>
  <a href="#" class="text-success">Success link.</a>
  <a href="#" class="text-info">Info link.</a>
  <a href="#" class="text-warning">Warning link.</a>
  <a href="#" class="text-danger">Danger link.</a>
  <a href="#" class="text-secondary">Secondary link.</a>
  <a href="#" class="text-dark">Dark grey link.</a>
  <a href="#" class="text-body">Body/black link.</a>
  <a href="#" class="text-light">Light grey link.</a>
</div>

<h2>Contextual Link Colors</h2>

<p>Hover over the links.</p>

<a href="#" class="text-muted">Muted link.</a>

<a href="#" class="text-primary">Primary link.</a>

<a href="#" class="text-success">Success link.</a>

<a href="#" class="text-warning">Warning link.</a>

<a href="#" class="text-danger">Danger link.</a>

<a href="#" class="text-secondary">Secondary link.</a>

<a href="#" class="text-body">Body/black link.</a>

<a href="#" class="text-light">Light grey link.</a>

</div>

همچنین می‌توانید با استفاده از کلاس‌های text-black-50. و text-white-50. مقدار شفافیت (opacity) را برای متون سیاه یا سفید تنظیم کنید. به مثال زیر توجه کنید:

<div class="container">
  <h2>Opacity Text Colors</h2>
  <p>Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:</p>
  <p class="text-black-50">Black text with 50% opacity on white background</p>
  <p class="text-white-50 bg-dark">White text with 50% opacity on black background</p>
</div>

<h2>Opacity Text Colors</h2>

<p>Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:</p>

<p class="text-black-50">Black text with 50% opacity on white background</p>

<p class="text-white-50 bg-dark">White text with 50% opacity on black background</p>

</div>

تا اینجا در مورد متون حرف زدیم ولی حالا می توان در رابطه با رنگ‌های پس زمینه نیز صحبت کرد. کلاس های رنگ های پس زمینه عبات اند از:

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light

به مثال زیر توجه کنید:

<div class="container">
  <h2>Contextual Backgrounds</h2>
  <p>Use the contextual background classes to provide "meaning through colors".</p>
  <p>Note that you can also add a .text-* class if you want a different text color:</p>
  <p class="bg-primary text-white">This text is important.</p>
  <p class="bg-success text-white">This text indicates success.</p>
  <p class="bg-info text-white">This text represents some information.</p>
  <p class="bg-warning text-white">This text represents a warning.</p>
  <p class="bg-danger text-white">This text represents danger.</p>
  <p class="bg-secondary text-white">Secondary background color.</p>
  <p class="bg-dark text-white">Dark grey background color.</p>
  <p class="bg-light text-dark">Light grey background color.</p>
</div>

<h2>Contextual Backgrounds</h2>

<p>Use the contextual background classes to provide "meaning through colors".</p>

<p>Note that you can also add a .text-* class if you want a different text color:</p>

<p class="bg-primary text-white">This text is important.</p>

<p class="bg-success text-white">This text indicates success.</p>

<p class="bg-info text-white">This text represents some information.</p>

<p class="bg-warning text-white">This text represents a warning.</p>

<p class="bg-danger text-white">This text represents danger.</p>

<p class="bg-secondary text-white">Secondary background color.</p>

<p class="bg-dark text-white">Dark grey background color.</p>

<p class="bg-light text-dark">Light grey background color.</p>

</div>

نکته ی قابل توجه این است که این کلاس ها رنگ خود متن را تغییر نمی دهند بنابراین اگر رنگ پس زمینه با رنگ متن همخوانی نداشت (به طور مثال قهوه ای و سیاه روی هم قابل خواندن نیستند) می توانید با کلاس های مربوط به متون رنگ را خواناتر کنید.

تصاویر در بوت‌استرپ

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

<div class="container">
  <h2>Rounded Corners</h2>
  <p>The .rounded class adds rounded corners to an image:</p>            
  <img src="https://www.w3schools.com/bootstrap4/cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236"> 
</div>

<h2>Rounded Corners</h2>

<p>The .rounded class adds rounded corners to an image:</p>

</div>

اگر به گوشه های تصویر بالا نگاه کنید متوجه خواهید شد که گوشه ها اصلا تیز نیستند بلکه زاویه دار هستند. البته این زاویه بسیار کم است؛ شما می توانید با استفاده از کلاس rounded-circle. زاویه را در حد یک دایره قرار دهید. به مثال زیر توجه کنید:

<div class="container">
  <h2>Circle</h2>
  <p>The .rounded-circle class shapes the image to a circle:</p>            
  <img src="https://www.w3schools.com/bootstrap4/cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236"> 
</div>

<h2>Circle</h2>

<p>The .rounded-circle class shapes the image to a circle:</p>

</div>

برای ایجاد تصاویر بند انگشتی (thumbnail) می توانیم از کلاس img-thumbnail. استفاده کنیم. این کلاس به تصویر حاشیه نیز می دهد:

<div class="container">
  <h2>Thumbnail</h2>
  <p>The .img-thumbnail class creates a thumbnail of the image:</p>            
  <img src="https://www.w3schools.com/bootstrap4/cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
</div>

<h2>Thumbnail</h2>

<p>The .img-thumbnail class creates a thumbnail of the image:</p>

</div>

از طرفی با استفاده از کلاس های float-right. و float-left. می توان خاصیت float را برای تصاویر در نظر گرفت. به مثال زیر نگاه کنید:

<div class="container">
  <h2>Aligning images</h2>
  <p>Use the float classes to float the image to the left or to the right:</p> 
  <img src="https://www.w3schools.com/bootstrap4/paris.jpg" class="float-left" alt="Paris" width="304" height="236"> 
  <img src="https://www.w3schools.com/bootstrap4/paris.jpg" class="float-right" alt="Paris" width="304" height="236"> 
</div>

<h2>Aligning images</h2>

<p>Use the float classes to float the image to the left or to the right:</p>

</div>

در صفحه ی خروجی عرض قسمت خروجی (سمت راست) را بزرگتر کنید تا متوجه Float راست یا چپ دو تصویر بشوید.

برای قرار دادن تصویر در وسط صفحه باید از کلاس mx-auto. (برای تعیین margin:auto) و کلاس d-block. (برای تعیین display:block) استفاده کنید. ما این کار را در مثال زیر انجام داده ایم:

<div class="container">
  <h2>Centered Image</h2>
  <p>Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image:</p> 
  <img src="https://www.w3schools.com/bootstrap4/paris.jpg" class="mx-auto d-block" style="width:50%"> 
</div>

<h2>Centered Image</h2>

<p>Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image:</p>

</div>

در آخر نیز برای اضافه کردن تصاویر واکنش گرا کلاس img-fluid. را روی <img> قرار می دهیم. در این حالت تصویر به مقیاس عنصر پدر خود در می آید تا زیباتر دیده شود. کلاس img-fluid. مقادیر ;max-width: 100% و ;height: auto را روی تصویر ما تنظیم می کند. مثال زیر را ببینید:

<div class="container">
  <h2>Image</h2>
  <p>The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
  <img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_chania.jpg" alt="Chania" width="460" height="345"> 
</div>

<h2>Image</h2>

<p>The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>

</div>

hadi گفت:

۹ آبان ۱۳۹۹ در ۸:۲۵ ب٫ظ

سلام. در یک carousel دیدم که از role=”listbox” استفاده شده، این کد رو حذف کردم، دیدم هیچ تاثیری روی carousel نداشت! اصلاً این کد برای چی هست؟

مریم جعفرپور گفت:
۱۰ آبان ۱۳۹۹ در ۱۰:۱۷ ق٫ظ
سلام این یه ویژگی‌ایه که دسترسی به المان‌ها رو برای کدها و کاربرها ساده‌تر میکنه. بهتره حذف نشه.

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

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

تصاویر در بوت‌استرپ

دیدگاهتان را بنویسید

2 پاسخ به “آموزش کار با رنگ‌ها و تصاویر در بوت‌استرپ”

دیدگاهتان را بنویسید لغو پاسخ