کلاس کمکی (utility) چیست؟
در بوت استرپ کلاس هایی از قبل تعریف شده است که به شما کمک می کند تا بدون استفاده از هیچ کد CSS ای بتوانید عناصر را سریعا استایل دهی کنید. به این کلاس ها، کلاس های کمکی (utility/helper classes) می گوییم. از آنجا که لیست این کلاس ها بسیار طولانی هستند آن ها را در دو مقاله به شما ارائه خواهیم کرد.
border ها
برای اضافه کردن یا حذف کردن border ها از همین کلاس استفاده کنید! به مثال زیر توجه کنید:
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
|
<!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>
<style>
.border {
display:inline-block;
width:70px;
height:70px;
margin:6px;
}
</style>
</head>
<body>
<div class="container">
<h2>Borders</h2>
<p>Usethe border classes toadd orremove borders from an element:</p>
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همانطور که می بینید با اضافه کردن کلاس border، یک حاشیه به عنصر اضافه می شود و با قرار دادن عدد صفر کنار آن همان حاشیه حذف می شود.
حالا باید رنگ border ها را مشخص کنیم. برای مشخص کردن رنگ border ها می توانید از رنگ های بوت استرپ (در قسمت های قبلی چندین بار اشاره شده است مانند این مقاله) استفاده کنید. به مثال زیر توجه کنید:
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
|
<!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>
<style>
.border {
display:inline-block;
width:70px;
height:70px;
margin:6px;
}
</style>
</head>
<body>
<div class="container">
<h2>Borders</h2>
<p>Useacontextual border color toaddacolor tothe border:</p>
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اضافه کردن Border Radius (گِرد کردن گوشه ها)
برای ایجاد border radius باید از کلاس rounded استفاده کنید و پسوند مورد نظر خود را به آن اضافه کنید. به طور مثال sm مخفف small (کوچک) و lg مخفف large (بزرگ) است. در مثال زیر این کلاس را به همراه پسوند هایش می بینید:
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
|
<!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>
<style>
span {
display:inline-block;
width:70px;
height:70px;
margin:6px;
background-color:#555;
}
</style>
</head>
<body>
<div class="container">
<h2>Borders</h2>
<p>Round the corner of an element with the rounded classes:</p>
<span class="rounded-sm"></span>
<span class="rounded"></span>
<span class="rounded-lg"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مبحث float و Clearfix
در این مسئله بوت استرپ و CSS تفاوت چندانی ندارند، تنها تفاوت آنجاست که بوت استرپ از کلاس های از پیش تعریف شده استفاده می‌کند؛ اگر می خواهید عنصری را به سمت راست ببرید از کلاس float-right.، اگر می خواهید عنصری را به سمت چپ ببرید از کلاس float-left. و اگر می خواهید از clearfix استفاده کنید باید کلاس clearfix. را اضافه کنید. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!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>Float</h2>
<p>Floatan element tothe right with the.float-right classortothe left with.float-left,andclear floats with the.clearfix class.</p>
<div class="clearfix">
<span class="float-left">Floatleft</span>
<span class="float-right">Floatright</span>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
استفاده از float های واکنش گرا
بوت استرپ با استفاده از قالب کلی float-*-left|right. به شما اجازه می دهد که بر اساس سایز صفحه عنصری را به راست یا چپ float کنید! برای این کار باید به جای علامت ستاره (*) در قالب کلی از sm برای صفحاتی با عرض مساوی یا بیشتر از 576px و md برای مساوی یا بیشتر از 768px و lg برای مساوی یا بیشتر از 992px و xl برای مساوی یا بیشتر از 1200px استفاده کنید. با مطالعه و تغییر سایز مثال زیر کاملا متوجه این موضوع خواهید شد:
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
|
<!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>Responsive Floats</h2>
<p>Floatan element tothe left ortothe right depending on screen width,with the responsive floatclasses.float-*-left|right(where *issm,md,lg orxl).</p>
<p>Resize the browser window tosee the effect.</p>
<div class="clearfix">
<div class="float-sm-right">Floatright on small screens orwider</div><br>
<div class="float-md-right">Floatright on medium screens orwider</div><br>
<div class="float-lg-right">Floatright on large screens orwider</div><br>
<div class="float-xl-right">Floatright on extra large screens orwider</div><br>
<div class="float-none">Floatnone</div>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
قرار گیری عنصر در وسط صفحه
برای قرار دادن عنصر در وسط یک صفحه می توانید از کلاس mx-auto. استفاده کنید. این کلاس margin-left و margin-right را برابر auto قرار می دهد:
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">
<h1>Horizontal Centering</h1>
<p>Center an element with the.mx-auto class:</p>
<div class="mx-auto bg-warning"style="width:150px">Centered</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تعیین عرض عناصر
بوت استرپ کلاس های خاصی برای تعیین عرض عناصر صفحه دارد. برای تعیین عرض عناصر باید از قالب کلی *-w پیروی کنید؛ یعنی به جای ستاره یکی از اعداد 25 یا 50 یا 75 یا 100 یا mw-100 را انتخاب کنید. این موارد در مثال زیر مشخص شده اند:
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">
<h1>Width Utilities</h1>
<p>Set the width of an element with thew-*classes:</p>
<div class="w-25 bg-warning">Width25%</div>
<div class="w-50 bg-warning">Width50%</div>
<div class="w-75 bg-warning">Width75%</div>
<div class="w-100 bg-warning">Width100%</div>
<div class="mw-100 bg-warning">Max Width100%</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: تفاوت w-100 و mw-100 در این است که w مخفف width و mw مخفف max-width است بنابراین اگر برای عنصری از mw استفاده کنید ممکن است عرضش کوچک تر شود (بیشترین مقدارش 100 خواهد بود، نه ثابت و فقط 100) اما 100-w یعنی فقط و فقط عرض 100 را قرار بده.
تعیین ارتفاع عناصر
همان چیزی که برای عرض عناصر گفتیم برای ارتفاع آن ها نیز صادق است منتهی باید از قالب کلی *-h استفاده کنید:
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
|
<!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>Height Utilities</h1>
<p>Set the height of an element with thew-*classes:</p>
<div style="height:200px;background-color:#ddd">
<div class="h-25 d-inline-block p-2 bg-warning">Height25%</div>
<div class="h-50 d-inline-block p-2 bg-warning">Height50%</div>
<div class="h-75 d-inline-block p-2 bg-warning">Height75%</div>
<div class="h-100 d-inline-block p-2 bg-warning">Height100%</div>
<div class="mh-100 d-inline-block p-2 bg-warning"style="height:500px">Max Height100%</div>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ایجاد فضای خالی (spacing)
منظور از spacing همان مقادیر margin و padding است که باعث ایجاد فضای خالی بین عناصر یا درون عناصر می شود. بوت استرپ 4 کلاس های margin و padding متعدد و واکنش گرا دارد که breakpoint (نقاط شکست) آن ها بدین صورت است:
xs یعنی extra small (بسیار کوچک): 576px و کمترsm یعنی small (کوچک): 576px و بیشترmd یعنی medium (متوسط): 768px و بیشترlg یعنی large (بزرگ): 992px و بیشترxl یعنی extra large (بسیار بزرگ): 1200px و بیشتر
اگر بخواهیم از این کلاس ها استفاده کنیم باید به این شکل عمل کنیم: برای استفاده از کلاس xs باید بر اساس دستور کلی{property}{sides}-{size} پیش برویم اما برای استفاده از بقیه ی کلاس ها باید بر اساس دستور کلی {property}{sides}-{breakpoint}-{size} پیروی کنیم.
در دستورات کلی بالا مقدار property باید یکی از مقادیر زیر باشد:
m (برای تعیین margin)p (برای تعیین padding)
مقدار sides نیز باید یکی از گزینه های زیر باشد:
t برای تعیین margin-top یا padding-topb برای تعیین margin-bottom یا padding-bottoml برای تعیین margin-left یا padding-leftr برای تعیین margin-right یا padding-rightx برای تعیین هر دو خصوصیت padding-left و padding-right یا خصوصیت های margin-left یاmargin-righty برای تعیین هر دو خصوصیت padding-top و padding-bottom یا خصوصیت های margin-top یاmargin-bottom- خالی قرار دادن این مقدرا برای تعیین
margin یا padding در هر چهار طرف عنصر
مقدار size نیز محدود به همین چند گزینه است:
0 مقدار margin یا padding را 0 قرار می دهد.1 مقدار margin یا padding را 25rem. قرار می دهد (یعنی 4px به شرطی که font-size برابر 16px باشد)2 مقدار margin یا padding را 5rem. قرار می دهد (یعنی 8px به شرطی که font-size برابر 16px باشد)3 مقدار margin یا padding را 1rem قرار می دهد (یعنی 16px به شرطی که font-size برابر 16px باشد)4 مقدار margin یا padding را 1.5rem قرار می دهد (یعنی 24px به شرطی که font-size برابر 16px باشد)5 مقدار margin یا padding را 3rem قرار می دهد (یعنی 48px به شرطی که font-size برابر 16px باشد)auto مقدار margin را برابر auto قرار می دهد.
نکته: اگر می خواهید margin هایتان منفی باشند کافیست حرف n را قبل از اندازه قرار دهید:
n1 مقدار margin را 25rem.- قرار می دهد (یعنی 4px- به شرطی که font-size برابر 16px باشد)n2 مقدار margin را 5rem.- قرار می دهد (یعنی 8px- به شرطی که font-size برابر 16px باشد)n3 مقدار margin را 1rem- قرار می دهد (یعنی 16px- به شرطی که font-size برابر 16px باشد)n4 مقدار margin را 1.5rem- قرار می دهد (یعنی 24px- به شرطی که font-size برابر 16px باشد)n5 مقدار margin را 3rem- قرار می دهد (یعنی 48px- به شرطی که font-size برابر 16px باشد)
به مثال زیر توجه کنید:
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>SpacingUtilities</h1>
<p>Setthespacingofanelementwiththe{property}{sides}-{breakpoint}-{size}classes.Omit breakpoint ifyou want the padding ormargin towork on all screen sizes.</p>
<div class="pt-4 bg-warning">Ionly haveatop padding(1.5rem=24px)</div>
<div class="p-5 bg-success">Ihaveapadding on all sides(3rem=48px)</div>
<div class="m-5 pb-5 bg-info">Ihaveamargin on all sides(3rem=48px)andabottom padding(3rem=48px)</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال های بیشتر:
| هر چهار طرف margin می گیرند |
.m-# / m-*-# |
| قسمت بالا margin می گیرد |
.mt-# / mt-*-# |
| قسمت پایین margin می گیرد |
.mb-# / mb-*-# |
| سمت چپ margin می گیرد |
.ml-# / ml-*-# |
| سمت راست margin می گیرد |
.mr-# / mr-*-# |
| سمت راست و چپ margin می گیرد |
.mx-# / mx-*-# |
| سمت بالا و پایین margin می گیرد |
.my-# / my-*-# |
| هر چهار طرف padding می گیرند |
.p-# / p-*-# |
| قسمت بالا padding می گیرد |
.pt-# / pt-*-# |
| قسمت پایین padding می گیرد |
.pb-# / pb-*-# |
| سمت چپ padding می گیرد |
.pl-# / pl-*-# |
| سمت راست padding می گیرد |
.pr-# / pr-*-# |
| سمت راست و چپ padding می گیرد |
.py-# / py-*-# |
| سمت بالا و پایین padding می گیرد |
.px-# / px-*-# |
یک مثال برای margin چپ و راست از این جدول:
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
|
<!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>Margin Left andRight Utilities</h1>
<p>MarginXutilities:</p>
<div class="mx-0 bg-warning">MarginX0</div>
<div class="mx-1 bg-warning">MarginX1</div>
<div class="mx-2 bg-warning">MarginX2</div>
<div class="mx-3 bg-warning">MarginX3</div>
<div class="mx-4 bg-warning">MarginX4</div>
<div class="mx-5 bg-warning">MarginX5</div>
<div class="mx-auto bg-warning"style="width:150px">MarginXAuto</div>
<br>
<p>Responsive marginxutilities.Resize the browser window tosee the effect:</p>
<div class="mx-sm-5 bg-warning">MarginX5on SM screens</div>
<div class="mx-md-5 bg-warning">MarginX5on MD screens</div>
<div class="mx-lg-5 bg-warning">MarginX5on LG screens</div>
<div class="mx-xl-5 bg-warning">MarginX5on XL screens</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
و یک مثال دیگر برای padding بالا و پایین:
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>
<div class="container">
<h1>Padding Top andBottom Utilities</h1>
<p>Paddingyutilities:</p>
<div class="py-0 bg-warning">PaddingY0</div>
<div class="py-1 bg-success">PaddingY1</div>
<div class="py-2 bg-danger">PaddingY2</div>
<div class="py-3 bg-primary">PaddingY3</div>
<div class="py-4 bg-light">PaddingY4</div>
<div class="py-5 bg-info">PaddingY5</div>
<br>
<p>Responsive paddingyutilities.Resize the browser window tosee the effect:</p>
<div class="py-sm-5 bg-warning">PaddingY5on SM screens</div>
<div class="py-md-5 bg-success">PaddingY5on MD screens</div>
<div class="py-lg-5 bg-danger">PaddingY5on LG screens</div>
<div class="py-xl-5 bg-primary">PaddingY5on XL screens</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
سایه ها
برای اضافه کردن سایه باید از دستور کلی -shadow استفاده کنید. به مثال زیر دقت کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!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>Shadows</h1>
<p>Usethe shadow-classes totoadd shadows toan element:</p>
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Defaultshadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تراز عمودی عناصر
برای ترازبندی عمودی عناصر باید از دستور کلی و قالب -align استفاده کنید. توجه داشته باشید که این کلاس تنها روی عناصر inline و inline-block و جداولی که inline باشند کار خواهد کرد و در غیر این صورت جواب نخواهد داد. مثال:
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">
<h1>Vertical Align</h1>
<p>Change the alignment of elements with the align classes(only works on inline,inline-block,inline-table andtable cell elements):</p>
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
این عناصر متنی هستند، بنابراین بر اساس baseline خودشان ترازبندی می شوند.
امیدوارم از این قسمت لذت برده باشید. در قسمت بعد به بررسی کلاس های کمکی بیشتری خواهیم پرداخت.
چطور از فشرده ساز Winrar استفاده کنیم؟