card ها در واقع باکس هایی هستند که دارای حاشیه و padding می باشند و در موقعیت های مختلف نیز انجام وظیفه می کنند. برای ساخت ساده ترین card در بوت استرپ باید از کلاس card. استفاده کنیم:
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 Card</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>Basic Card</h2>
<div class="card">
<div class="card-body">Basic card</div>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: اگر قبلا از بوت استرپ 3 استفاده می‌کردید باید بدانید که Card ها به جای panel ها، well ها و thumbnail ها ایجاد شده اند.
اضافه کردن header و footer به card در بوت استرپ
شما می توانید با استفاده از کلاس card-header. و کلاس card-footer. به card خود header و footer اضافه کنید. مثال زیر را ببینید:
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>Card Header andFooter</h2>
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
card های معنادار
مانند بسیاری دیگر از عناصر در بوت استرپ، Card ها نیز دارای رنگ بندی خاص به همراه معنی خاص هستند. کلاس های لازم برای اضافه کردن این کلاس ها عبارت اند از:
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark و .bg-light
می توانید این موارد را در مثال زیر ببینید:
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
44
45
46
47
48
49
50
51
52
53
54
|
<!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>Cards with Contextual Classes</h2>
<div class="card">
<div class="card-body">سادهcard</div>
</div>
<br>
<div class="card bg-primary text-white">
<div class="card-body">اولیهcard</div>
</div>
<br>
<div class="card bg-success text-white">
<div class="card-body">موفقیتcard</div>
</div>
<br>
<div class="card bg-info text-white">
<div class="card-body">اطلاعاتcard</div>
</div>
<br>
<div class="card bg-warning text-white">
<div class="card-body">هشدارcard</div>
</div>
<br>
<div class="card bg-danger text-white">
<div class="card-body">خطرcard</div>
</div>
<br>
<div class="card bg-secondary text-white">
<div class="card-body">ثانویهcard</div>
</div>
<br>
<div class="card bg-dark text-white">
<div class="card-body">تیرهcard</div>
</div>
<br>
<div class="card bg-light text-dark">
<div class="card-body">روشنcard</div>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
عنوان، متن و لینک ها در card
تصور کنید نیاز به card ای داریم تا اطلاعات کوتاهی را نمایش دهد، چیزی مانند قسمت «سوالات متداول» در دنیای وب. این نوع سوالات متداول معمولا بسیار کوتاه هستند اما در عین حال یک عنوان و توضیحاتی نیز دارند. ما می توانیم با استفاده از کلاس card-title. به card های خود عنوان بدهیم. همچنین کلاس card-text. کاری می کند که bottom margin برای آخرین عنصر <p> درون کلاس card-body. حذف شود (مبحث last-child). در آخر کلاس card-link.نیز به لینک های موجود رنگ آبی و یک اثر hover می دهد. مثال:
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>Card titles,text,andlinks</h2>
<p>Use.card-title toadd card titles toany heading element.The.card-text classisused toremove bottom margins forapelement ifit isthe last child(orthe only one)incard-body.The.card-link classaddsablue color toany link,andahover effect.</p>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<pclass="card-text">Some example text.Some example text.</p>
<ahref="#"class="card-link">Card link</a>
<ahref="#"class="card-link">Another link</a>
</div>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
card های تصویری
حتما card های تصویری را دیده اید؛ آن ها همان باکس هایی هستند که معمولا برای معرفی کالا یا افراد مورد استفاده قرار می گیرند. اگر کلاس card-img-top. یا کلاس card-img-bottom. را به عنصر <img> اضافه کنید، card خود را ایجاد کرده اید با این تفاوت که card-img-top. تصویر را بالای card و card-img-bottom. تصویر را پایین card قرار می دهد. البته در مثال ما توجه داشته باشید که تصویر را خارج از card-body. تعیین کرده ایم تا تمام عرض card را بگیرد:
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
|
<!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>Card Image</h2>
<p>Image at the top(card-img-top):</p>
<div class="card"style="width:400px">
<img class="card-img-top"src="https://www.w3schools.com/bootstrap4/img_avatar1.png"alt="Card image"style="width:100%">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<pclass="card-text">Some example text some example text.John Doe isan architect andengineer</p>
<ahref="#"class="btn btn-primary">See Profile</a>
</div>
</div>
<br>
<p>Image at the bottom(card-img-bottom):</p>
<div class="card"style="width:400px">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<pclass="card-text">Some example text some example text.Jane Doe isan architect andengineer</p>
<ahref="#"class="btn btn-primary">See Profile</a>
</div>
<img class="card-img-bottom"src="https://www.w3schools.com/bootstrap4/img_avatar6.png"alt="Card image"style="width:100%">
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
لینک دار شدن card
اگر بخواهید تمام card شما، و نه فقط یک لینک، لینک دار و قابل کلیک شود باید از کلاس stretched-link. استفاده کنید:
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>Stretched Link inCard</h2>
<p>Add the.stretched-link classtoalink inside the card,andit will make the whole card clickable(the card will act asalink):</p>
<div class="card"style="width:400px">
<img class="card-img-top"src="https://www.w3schools.com/bootstrap4/img_avatar1.png"alt="Card image"style="width:100%">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<pclass="card-text">Some example text some example text.John Doe isan architect andengineer</p>
<ahref="#"class="btn btn-primary stretched-link">See Profile</a>
</div>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
تبدیل تصاویر به Card
اگر تصویری داشته باشید که بخواهید به card تبدیل شود باید از کلاس card-img-overlay. استفاده کنید:
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>Card Image Overlay</h2>
<p>Turn an image intoacard background anduse.card-img-overlay tooverlay the card'stext:</p>
<div class="card img-fluid"style="width:500px">
<img class="card-img-top"src="https://www.w3schools.com/bootstrap4/img_avatar1.png"alt="Card image"style="width:100%">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<pclass="card-text">Some example text some example text.Some example text some example text.Some example text some example text.Some example text some example text.</p>
<ahref="#"class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
card های چند ستونه
کلاس card-columns. به شما اجازه می دهد شبکه ای ستونی از card ها را بسازید (چیزی شبیه وب سایت Pinterest) و بر اساس اینکه شما چند card اضافه کنید موقعیت card ها و چیدمانشان به صورت خودکار تغییر می کنند. همچنین اگر عرض صفحه از 576px کمتر باشد، Card ها به صورت عمودی نمایش داده می شوند بنابراین تمام این طرح واکنش گرا نیست می باشد. به این مثال توجه کنید:
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
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</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>Cards Columns</h2>
<p>The.card-columns classcreatesamasonry-like grid of cards.The layout will automatically adjust asyou insert more cards.</p>
<p><strong>Note:</strong>The cards are displayed vertically on small screens(less than576px):</p>
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<pclass="card-text">Some text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<pclass="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<pclass="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<pclass="card-text">Some text inside the fourth card</p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<pclass="card-text">Some text inside the fifth card</p>
</div>
</div>
<div class="card bg-info">
<div class="card-body text-center">
<pclass="card-text">Some text inside the sixth card</p>
</div>
</div>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نوعی دیگر از این دسته card ها با استفاده از کلاس card-deck. ایجاد می شوند. این نوع card ها عرض و ارتفاع یکسان دارند و واکنش گرا نیز می باشند:
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
44
45
46
47
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</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>Card Deck</h2>
<p>The.card-deck classcreates an<strong>equal height andwidth</strong>grid of cards.The layout will automatically adjust asyou insert more cards.</p>
<p>Inthisexample we have added extra content tothe first card,tomake it taller.Notice how the other cards follow.</p>
<p><strong>Note:</strong>The cards are displayed vertically on small screens(less than576px):</p>
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<pclass="card-text">Some text inside the first card</p>
<pclass="card-text">Some more text toincrease the height</p>
<pclass="card-text">Some more text toincrease the height</p>
<pclass="card-text">Some more text toincrease the height</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<pclass="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<pclass="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<pclass="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
card های گروهی
card هایی که با کلاس card-group. ایجاد می شوند دقیقا مانند card های کلاس card-deck. هستند با این تفاوت که card-group. خصوصیت margin را از بین card ها حذف می کند (margin left و margin right).
از آنجا که این دسته از card ها نیز واکنش گرا هستند بنابراین در صفحاتی با عرض کمتر از 576px به صورت عمودی نمایش داده شده و 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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</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>Card Group</h2>
<p>The.card-group classissimilar to.card-deck,which creates an<strong>equal height andwidth</strong>grid of cards.</p>
<p>However,the.card-group classremoves left andright margins between eachcard.</p>
<p>Inthisexample we have added extra content tothe first card,tomake it taller.Notice how the other cards follow.</p>
<p><strong>Note:</strong>The cards are displayed vertically on small screens(less than576px),<strong>WITH</strong>top andbottom margin:</p>
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<pclass="card-text">Some text inside the first card</p>
<pclass="card-text">Some more text toincrease the height</p>
<pclass="card-text">Some more text toincrease the height</p>
<pclass="card-text">Some more text toincrease the height</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<pclass="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<pclass="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<pclass="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟