به قسمت دوم از مقاله ی بررسی کلاس های کمکی در بوت استرپ 4 خوش آمدید! در قسمت قبل بسیاری از این کلاس ها را بررسی کردیم اما هنوز تعدادی باقی مانده است. بنابراین بهتر است بدون مقدمه شروع به بررسی کلاس های باقی مانده کنیم.
عناصر embed به صورت واکنش گرا
ممکن است بخواهید در سایت خود از ویدیوهای embed استفاده کنید (مانند آپارات و یوتیوب) اما این ویدیوها را طوری تنظیم کنید که بر اساس عرض عنصر پدرشان تغییر کنند. شما می توانید کلاس embed-responsive-item. را به هر عنصر embed ای (مانند <iframe> و <video>) اضافه کنید و به عنصر پدرش نیز کلاس embed-responsive. را بدهید. در آخر نیز نسبت طول و عرض تصویر را مشخص می کنید. به مثال زیر دقت کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!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>Createaresponsive video andscale it nicely tothe parentelement.</p>
<h2>Aspect ratio1: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 ratio4: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 ratio16: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 ratio21: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 تنظیم می کنند. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!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>Usethe.visible or.invisible classes tocontrol the visibility of elements.Note:These classes donotchange the CSS display value.They only add visibility:visible orvisibility:hidden toan element:</p>
<div class="visible bg-success">Iam visible</div>
<div class="invisible bg-warning">Iam invisible</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تعیین موقعیت عناصر
کلاس fixed-top. هر عنصری را به بالای صفحه میچسباند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!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">
<aclass="navbar-brand"href="#">Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
</ul>
</nav>
<div class="container-fluid"style="margin-top:80px">
<h3>Top Fixed Navbar</h3>
<p>Afixed navigation bar stays visible inafixed position(top orbottom)independent of the page scroll.</p>
<h1>Scroll thispage tosee the effect</h1>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در مثال بالا با اسکرول کردن صفحه منو از بالای صفحه جدا نشده و به آن چسبیده است.
همین کار را می شود برای پایین صفحات انجام داد، کافی است از کلاس fixed-bottom. استفاده کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!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">
<aclass="navbar-brand"href="#">Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<aclass="nav-link"href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="javascript:void(0)">Link</a>
</li>
</ul>
</nav>
<div class="container-fluid"><br>
<h3>Bottom Fixed Navbar</h3>
<p>Afixed navigation bar stays visible inafixed position(top orbottom)independent of the page scroll.</p>
<h1>Scroll thispage tosee the effect</h1>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اگر به عنصری کلاس sticky-top. را بدهید باعث می شود زمانی که اسکرول صفحه به آن عنصر برسد، آن عنصر به بالای صفحه بچسبد بنابراین تفاوت آن با fixed-top این است که از ابتدا به بالای صفحه نچسبیده و با اسکرول کار می کند. مثال:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!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>Asticky navigation bar stays fixed at the top of the page when you scroll past it.</p>
<p>Scroll thispage tosee the effect.<strong>Note:</strong>sticky-top does notwork inIE11 andearlier.</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<aclass="navbar-brand"href="#">Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="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 استفاده کرده ایم چرا که ضربدر بزرگی ایجاد می کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!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>Usethe.close classtostyleaclose icon.Thisisoften used foralerts andmodals.Note that we usethe times;symbol tocreate the actual icon(abetter lookiong"x").Also note that it isright-aligned by default:</p>
<div class="clearfix">
<button type="button"class="close">×</button>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
توجه داشته باشید که این کلاس علامت ضربدر را به صورت خودکار به سمت راست منتقل می کند.
Screenreader
کلاس sr-only. به هر عنصری اضافه شود آن را برای همه مخفی می کند به غیر از Screen reader ها! شما نباید در مثال زیر چیزی مشاهده کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!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>Usethe.sr-only classtohide an element on all devices,except screen readers:</p>
<span class="sr-only">Iwill be hidden on all screens except forscreen readers.</span>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
رنگ ها
اگر یادتان باشد در قسمت های قبلی به طور کامل در مورد رنگ ها صحبت کردیم. بنابراین تنها جهت یادآوری مثالی از رنگ های متنی (برای متون) برایتان می آوریم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!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>Usethe contextual classes toprovide"meaning through colors":</p>
<pclass="text-muted">Thistext ismuted.</p>
<pclass="text-primary">Thistext isimportant.</p>
<pclass="text-success">Thistext indicates success.</p>
<pclass="text-info">Thistext represents some information.</p>
<pclass="text-warning">Thistext representsawarning.</p>
<pclass="text-danger">Thistext represents danger.</p>
<pclass="text-secondary">Secondary text.</p>
<pclass="text-dark">Thistext isdark grey.</p>
<pclass="text-body">Defaultbody color(often black).</p>
<pclass="text-light">Thistext islight grey(on white background).</p>
<pclass="text-white">Thistext iswhite(on white background).</p>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
این کلاس ها روی لینک ها هم قابل استفاده هستند. همچنین می توانید با استفاده از کلاس های text-black-50. و text-white-50. برای متون سیاه یا سفید opacity تعیین کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!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>Add50%opacity forblack orwhite text with the.text-black-50or.text-white-50classes:</p>
<pclass="text-black-50">Black text with50%opacity on white background</p>
<pclass="text-white-50 bg-dark">White text with50%opacity on black background</p>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
به این نکته توجه داشته باشید که رنگ های متن با رنگ های پس زمینه متفاوت هستند. بنابراین می توانید آن ها را با هم ترکیب کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!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>Usethe contextual background classes toprovide"meaning through colors".</p>
<p>Note that you can also adda.text-*classifyou wantadifferent text color:</p>
<pclass="bg-primary text-white">Thistext isimportant.</p>
<pclass="bg-success text-white">Thistext indicates success.</p>
<pclass="bg-info text-white">Thistext represents some information.</p>
<pclass="bg-warning text-white">Thistext representsawarning.</p>
<pclass="bg-danger text-white">Thistext represents danger.</p>
<pclass="bg-secondary text-white">Secondary background color.</p>
<pclass="bg-dark text-white">Dark grey background color.</p>
<pclass="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 شود و چه زمانی غیر از آن! به مثال زیر دقت کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!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>Tocreateablock element,add thed-block class.Useany of thed-*-block classes tocontrol WHEN the element should beablock element onaspecific screen width.</p>
<p>Resize the browser window tosee 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. را به سند خود اضافه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!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>Tocreateaflexbox container andtransform direct children into flex items,usethed-flex class:</p>
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item1</div>
<div class="p-2 bg-warning">Flex item2</div>
<div class="p-2 bg-primary">Flex item3</div>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اما این موضوع یک مقاله ی جداگانه نیاز دارد. بنابراین در قسمت بعدی از این سری آموزشی به سراغ مبحث flexbox در بوت استرپ 4 می رویم.
چطور از فشرده ساز Winrar استفاده کنیم؟