کلاس های کمکی در بوت استرپ | کلاس utilities در bootstrap

به قسمت دوم از مقاله ی بررسی کلاس های کمکی در بوت استرپ 4 خوش آمدید! در قسمت قبل بسیاری از این کلاس ها را بررسی کردیم اما هنوز تعدادی باقی مانده است. بنابراین بهتر است بدون مقدمه شروع به بررسی کلاس های باقی مانده کنیم.

عناصر embed به صورت واکنش گرا

ممکن است بخواهید در سایت خود از ویدیوهای embed استفاده کنید (مانند آپارات و یوتیوب) اما این ویدیوها را طوری تنظیم کنید که بر اساس عرض عنصر پدرشان تغییر کنند. شما می توانید کلاس embed-responsive-item. را به هر عنصر embed ای (مانند <iframe> و <video>) اضافه کنید و به عنصر پدرش نیز کلاس embed-responsive. را بدهید. در آخر نیز نسبت طول و عرض تصویر را مشخص می کنید. به مثال زیر دقت کنید:

<!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 mt-3">
  <h2>Responsive Embed</h2>
  <p>Create a responsive video and scale it nicely to the parent element.</p>
  
  <h2>Aspect ratio 1:1</h2>
  <div class="embed-responsive embed-responsive-1by1">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
  </div>
  <br>
  
  <h2>Aspect ratio 4:3</h2>
  <div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
  </div> 
  <br>
  
  <h2>Aspect ratio 16:9</h2>
  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
  </div>
  <br>
    
  <h2>Aspect ratio 21:9</h2>
  <div class="embed-responsive embed-responsive-21by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
  </div>
</div>

</body>
</html>

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

در مثال های بالا 1by1 یعنی نسبت طول و عرض ویدیو 1 به 1 باشد یا به طور مثال 4by3 یعنی این نسبت 4 به 3 باشد.

تنظیم visibility

همانطور که می دانید visibility ظاهر یا پنهان بودن عنصر را مشخص می کند. شما می توانید با استفاده از کلاس های visible. (نمایان) و invisible. (نامرئی) با مبحث visibility کار کنید. حواستان باشد که این کلاس ها به مقدار display دست نمی زنند بلکه مقدار visibility را به صورت visibility:visible یا visibility:hidden تنظیم می کنند. به مثال زیر توجه کنید:

<!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">
  <h1>Visibility</h1>
  <p>Use the .visible or .invisible classes to control the visibility of elements. Note: These classes do not change the CSS display value. They only add visibility:visible or visibility:hidden to an element:</p>
  <div class="visible bg-success">I am visible</div>
  <div class="invisible bg-warning">I am invisible</div>
</div>

</body>
</html>

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

تعیین موقعیت عناصر

کلاس fixed-top. هر عنصری را به بالای صفحه میچسباند:

<!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 style="height:1500px">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</nav>

<div class="container-fluid" style="margin-top:80px">
  <h3>Top Fixed Navbar</h3>
  <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
  <h1>Scroll this page to see the effect</h1>
</div>

</body>
</html>

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

در مثال بالا با اسکرول کردن صفحه منو از بالای صفحه جدا نشده و به آن چسبیده است.

همین کار را می شود برای پایین صفحات انجام داد، کافی است از کلاس fixed-bottom. استفاده کنید:

<!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 style="height:1500px">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="javascript:void(0)">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="javascript:void(0)">Link</a>
    </li>
  </ul>
</nav>

<div class="container-fluid"><br>
  <h3>Bottom Fixed Navbar</h3>
  <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
  <h1>Scroll this page to see the effect</h1>
</div>

</body>
</html>

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

اگر به عنصری کلاس sticky-top. را بدهید باعث می شود زمانی که اسکرول صفحه به آن عنصر برسد، آن عنصر به بالای صفحه بچسبد بنابراین تفاوت آن با fixed-top این است که از ابتدا به بالای صفحه نچسبیده و با اسکرول کار می کند. مثال:

<!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 style="height:1500px">

<div class="container-fluid">
  <br>
  <h3>Sticky Navbar</h3>
  <p>A sticky navigation bar stays fixed at the top of the page when you scroll past it.</p>
  <p>Scroll this page to see the effect. <strong>Note:</strong> sticky-top does not work in IE11 and earlier.</p>
</div>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</nav>

<div class="container-fluid"><br>
  <p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>
  <p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>
  <p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>
  <p>Some example text. Some example text. Some example text. Some example text. Some example text.</p>
</div>

</body>
</html>

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

نکته: این قابلیت در internet explorer 11 و نسخه های قبل تر آن کار نمی کند.

عناصر قابل حذف

اگر می خواهید عنصری را برای کاربر قابل حذف کنید، از کلاس close. استفاده کنید تا ضربدر شما را استایل دهی کند. این قابلیت معمولا در هشدار ها، اعلانات و modal ها استفاده می شود. ما از ;times& به جای حرف انگلیسی x استفاده کرده ایم چرا که ضربدر بزرگی ایجاد می کند:

<!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">
  <h1>Close Icon</h1>
  <p>Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the times; symbol to create the actual icon (a better lookiong "x"). Also note that it is right-aligned by default:</p>
  <div class="clearfix">
    <button type="button" class="close">&times;</button>
  </div>
</div>

</body>
</html>

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

توجه داشته باشید که این کلاس علامت ضربدر را به صورت خودکار به سمت راست منتقل می کند.

Screenreader

کلاس sr-only. به هر عنصری اضافه شود آن را برای همه مخفی می کند به غیر از Screen reader ها! شما نباید در مثال زیر چیزی مشاهده کنید:

<!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 mt-3">
  <h2>Screen readers</h2>
  <p>Use the .sr-only class to hide an element on all devices, except screen readers:</p>
  <span class="sr-only">I will be hidden on all screens except for screen readers.</span>
</div>

</body>
</html>

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

رنگ ها

اگر یادتان باشد در قسمت های قبلی به طور کامل در مورد رنگ ها صحبت کردیم. بنابراین تنها جهت یادآوری مثالی از رنگ های متنی (برای متون) برایتان می آوریم:

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

این کلاس ها روی لینک ها هم قابل استفاده هستند. همچنین می توانید با استفاده از کلاس های 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

به این نکته توجه داشته باشید که رنگ های متن با رنگ های پس زمینه متفاوت هستند. بنابراین می توانید آن ها را با هم ترکیب کنید:

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

تایپوگرافی

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

متون را bold می کند	`.font-weight-bold`
متون را italic (مورب) می کند	`.font-italic`
متن را کوچک می کند (85 درصد اندازه‌ی متن عنصر پدری)	`.small`
متن را ترازبندی می کند	`.text-justify`
استایل دهی پیش فرض آیتم های یک لیست و margin چپ را حذف می کند	`.list-unstyled`
به عنصر <pre> قابلیت اسکرول می دهد	`.pre-scrollable`
متن را با حروف بزرگ انگلیسی می نویسد	`.text-capitalize`
متون را به سمت راست می برد	`.text-right`
به متن اجازه ی wrap (شکستن) نمی دهد	`.text-nowrap`
از فونت های Monospaced استفاده می کند.	`.text-monospace`

این لیست به همین جا ختم نمی شود بلکه بسیار طولانی تر از جدول بالا است! برای مشاهده ی کامل آن می توانید به این مقاله از سایت quackit سر بزنید.

عناصر block

اگر قصد دارید عنصری را به یک عنصر block تبدیل کنید می توانید از کلاس d-block. استفاده کنید. همچنین با استفاده از کلاس های d-*-block. می توان تعیین کرد که بر اساس سایز صفحه چه زمانی عنصر 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 mt-3">
  <h2>Display Utilities</h2>
  <p>To create a block element, add the d-block class. Use any of the d-*-block classes to control WHEN the element should be a block element on a specific screen width.</p>
  <p>Resize the browser window to see the effect.</p>
  <span class="d-block bg-success">d-block</span>
  <span class="d-sm-block bg-success">d-sm-block</span>
  <span class="d-md-block bg-success">d-md-block</span>
  <span class="d-lg-block bg-success">d-lg-block</span>
  <span class="d-xl-block bg-success">d-xl-block</span>
</div>

</body>
</html>

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

استفاده از مدل Flexbox

اگر دوست دارید از مدل flexbox استفاده کنید، می توانید کلاس *-flex. را به سند خود اضافه کنید:

<!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 mt-3">
  <h2>Flex</h2>
  <p>To create a flexbox container and transform direct children into flex items, use the d-flex class:</p>
  <div class="d-flex p-3 bg-secondary text-white">  
    <div class="p-2 bg-info">Flex item 1</div>
    <div class="p-2 bg-warning">Flex item 2</div>
    <div class="p-2 bg-primary">Flex item 3</div>
  </div>
</div>

</body>
</html>

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

اما این موضوع یک مقاله ی جداگانه نیاز دارد. بنابراین در قسمت بعدی از این سری آموزشی به سراغ مبحث flexbox در بوت استرپ 4 می رویم.