کار با رنگ ها و تصاویر در بوت استرپ bootstrap

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

رنگ ها در بوت استرپ (از نظر پیاده سازی) به دو دسته ی رنگ های متن و رنگ های پس زمینه تقسیم می شوند. همانطور که در قسمت های قبلی گفتیم رنگ های بوت استرپ معمولا دارای معنای خاصی هستند و ما قصد داریم این رنگ ها را ابتدا در متون بررسی کنیم؛ این رنگ ها عبارت اند از:

.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (که معمولا سیاه است body رنگ پیش فرض) and .text-light

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

مشاهده ی خروجی در JSBin

کلمات کلیدی در مثال بالا از این قرار اند:

muted (غیر فعال)
important (مهم)
success (موفقیت یا موفقیت آمیز بودن)
information (اطلاعات)
warning (هشدار)
danger (خطر)

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

مشاهده ی خروجی در JSBin

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

مشاهده ی خروجی در JSBin

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

مشاهده ی خروجی در JSBin

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

مشاهده ی خروجی در JSBin

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

مشاهده ی خروجی در JSBin

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

مشاهده ی خروجی در JSBin

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

مشاهده ی خروجی در JSBin

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

مشاهده ی خروجی در JSBin

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

مشاهده ی خروجی در JSBin

آموزش رنگها و تصاویر در بوت استرپ به پایان رسید. امیدوارم از این قسمت لذت برده باشید.