حتما اسلایدرهای تصاویر را در دنیای وب دیده اید. اسلایدرها عناصری در طراحی وب هستند که وظیفه ی نمایش خودکار یک سری از تصاویر را بر عهده دارند. این تصاویر توسط شما انتخاب شده و اسلایدر، آن ها را با بازه های زمانی مشخص نمایش می دهد. یکی از ویژگی های اصلی اسلایدر ها جذب توجه و نگاه مخاطب است و می تواند برای سایت شما مفید باشد.
مثال زیر به شما نشان می دهد که چطور ساده ترین اسلایدر در بوت استرپ را بسازید:
|
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 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>
/* Make the image fully responsive */
.carousel-inner img {
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="demo"class="carousel slide"data-ride="carousel">
<!--Indicators-->
<ul class="carousel-indicators">
<li data-target="#demo"data-slide-to="0"class="active"></li>
<li data-target="#demo"data-slide-to="1"></li>
<li data-target="#demo"data-slide-to="2"></li>
</ul>
<!--The slideshow-->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg"alt="Los Angeles"width="1100"height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg"alt="Chicago"width="1100"height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg"alt="New York"width="1100"height="500">
</div>
</div>
<!--Left andright controls-->
<aclass="carousel-control-prev"href="#demo"data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<aclass="carousel-control-next"href="#demo"data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
|
در جدول زیر در مورد تک تک کلاس های استفاده شده در مثال بالا توضیح داده ایم:
| کلاس | توضیحات |
.carousel |
ایجاد کننده ی گالری |
.carousel-indicators |
برای گالری indicator می سازد؛ یعنی همان نقطه ها یا خط هایی که پایین گالری قرار دارند و نشان می دهند که چند تصویر در گالری وجود داشته و کابر در حال تماشای کدام است. |
.carousel-inner |
به گالری اسلاید های مختلف اضافه می کند. |
.carousel-item |
محتوای هر اسلاید را مشخص می کند. |
.carousel-control-prev |
دکمه ی سمت چپ (قبلی) را به گالری اضافه می کند که به کاربر اجازه می دهد به تصویر قبلی برود. |
.carousel-control-next |
دکمه ی سمت راست (بعدی) را به گالری اضافه می کند که به کاربر اجازه می دهد به تصویر بعدی برود. |
.carousel-control-prev-icon |
با کلاس carousel-control-prev. همراه می شود تا دکمه ی «قبلی» را بسازد. |
.carousel-control-next-icon |
با کلاس carousel-control-next. همراه می شود تا دکمه ی «بعدی» را بسازد. |
.slide |
یک انیمیشن و افکت CSS را به گالری اضافه می کند که هنگام تغییر تصاویر مشخص می شود. اگر دوست ندارید گالری تان این افکت را داشته باشد این کلاس را حذف کنید. |
اگر می خواهید برای هر اسلاید یک متن (caption) نیز بنویسید باید در هر <"div class="carousel-item> از کلاس<"div class="carousel-caption> استفاده کنید. مثال:
|
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
55
56
57
58
59
|
<!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>
/* Make the image fully responsive */
.carousel-inner img {
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="demo"class="carousel slide"data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo"data-slide-to="0"class="active"></li>
<li data-target="#demo"data-slide-to="1"></li>
<li data-target="#demo"data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg"alt="Los Angeles"width="1100"height="500">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had suchagreat time inLA!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg"alt="Chicago"width="1100"height="500">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you,Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg"alt="New York"width="1100"height="500">
<div class="carousel-caption">
<h3>NewYork</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<aclass="carousel-control-prev"href="#demo"data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<aclass="carousel-control-next"href="#demo"data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
|
پنجره های Modal
modal ها پنجره هایی هستند که روی صفحه ی اصلی باز می شوند و حاوی اطلاعات مختلفی هستند. بدون توجه به مورد استفاده ی modal ها نمی توان به طور کلی وظیفه ی خاصی برایشان تعریف کرد و نحوه ی استفاده از آن ها به شما بستگی خواهد داشت؛ برخی از modal ها به عنوان گالری تصویر استفاده می کنند، برخی برای نمایش اخطار ها و برخی برای گرفتن تاییدیه از کاربر.
مثال زیر به شما نشان می دهد:
|
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
|
<!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>Modal Example</h2>
<!--Button toOpen the Modal-->
<button type="button"class="btn btn-primary"data-toggle="modal"data-target="#myModal">
Open modal
</button>
<!--The Modal-->
<div class="modal"id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!--Modal Header-->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button"class="close"data-dismiss="modal">×</button>
</div>
<!--Modal body-->
<div class="modal-body">
Modal body..
</div>
<!--Modal footer-->
<div class="modal-footer">
<button type="button"class="btn btn-danger"data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
همچنین با اضافه کردن کلاس fade. می توانید باز شدن و بستن modal را نرم کنید:
|
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
|
<!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>Fading Modal</h2>
<p>Add the"fade"classtothe modal container ifyou want the modal tofade inon open andfade out on close.</p>
<!--Button toOpen the Modal-->
<button type="button"class="btn btn-primary"data-toggle="modal"data-target="#myModal">
Open modal
</button>
<!--The Modal-->
<div class="modal fade"id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!--Modal Header-->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button"class="close"data-dismiss="modal">×</button>
</div>
<!--Modal body-->
<div class="modal-body">
Modal body..
</div>
<!--Modal footer-->
<div class="modal-footer">
<button type="button"class="btn btn-danger"data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
اندازه ی Modal ها
برای تعیین اندازه ی Modal ها باید از کلاس های modal-sm. برای modal های کوچک و modal-lg. برای modal های بزرگ و modal-xl. برای modal های بسیار بزرگ استفاده کنید. زمانی که کلاس مورد نظر برای اندازه را انتخاب کردید باید آن را به یک عنصر <div> با کلاس modal-dialog. اضافه کنید. به مثال های زیر توجه کنید:
مثال از Modal کوچک:
|
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
|
<!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>Small Modal</h2>
<!--Button toOpen the Modal-->
<button type="button"class="btn btn-primary"data-toggle="modal"data-target="#myModal">
Open modal
</button>
<!--The Modal-->
<div class="modal fade"id="myModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!--Modal Header-->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button"class="close"data-dismiss="modal">×</button>
</div>
<!--Modal body-->
<div class="modal-body">
Modal body..
</div>
<!--Modal footer-->
<div class="modal-footer">
<button type="button"class="btn btn-secondary"data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
مثال از Modal بزرگ:
|
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
|
<!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>Large Modal</h2>
<!--Button toOpen the Modal-->
<button type="button"class="btn btn-primary"data-toggle="modal"data-target="#myModal">
Open modal
</button>
<!--The Modal-->
<div class="modal fade"id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!--Modal Header-->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button"class="close"data-dismiss="modal">×</button>
</div>
<!--Modal body-->
<div class="modal-body">
Modal body..
</div>
<!--Modal footer-->
<div class="modal-footer">
<button type="button"class="btn btn-secondary"data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
مثال از Modal بسیار بزرگ:
|
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
|
<!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>Extra Large Modal</h2>
<!--Button toOpen the Modal-->
<button type="button"class="btn btn-primary"data-toggle="modal"data-target="#myModal">
Open modal
</button>
<!--The Modal-->
<div class="modal fade"id="myModal">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<!--Modal Header-->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button"class="close"data-dismiss="modal">×</button>
</div>
<!--Modal body-->
<div class="modal-body">
Modal body..
</div>
<!--Modal footer-->
<div class="modal-footer">
<button type="button"class="btn btn-secondary"data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
نکته: در حالت پیش فرض Modal ها اندازه ی متوسط دارند.
قراردهی Modal در وسط صفحه
اگر می خواهید Modal شما دقیقا در وسط صفحه قرار گیرد، باید از کلاس modal-dialog-centered. استفاده کنید:
|
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
|
<!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 Modal Example</h2>
<p>Center the modal vertically andhorizontally within the page,with the.modal-dialog-centered class.</p>
<!--Button toOpen the Modal-->
<button type="button"class="btn btn-primary"data-toggle="modal"data-target="#myModal">
Open modal
</button>
<!--The Modal-->
<div class="modal fade"id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!--Modal Header-->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button"class="close"data-dismiss="modal">×</button>
</div>
<!--Modal body-->
<div class="modal-body">
Modal body..
</div>
<!--Modal footer-->
<div class="modal-footer">
<button type="button"class="btn btn-secondary"data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
اسکرول در modal ها
زمانی که محتوای درون modal زیاد باشد، modal اسکرول بار می گیرد بنابراین باید به این مسئله توجه کنید. مثال:
|
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 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>Modal Scroll Example</h2>
<!--Button toOpen the Modal-->
<button type="button"class="btn btn-primary"data-toggle="modal"data-target="#myModal">
Open modal
</button>
<!--The Modal-->
<div class="modal"id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!--Modal Header-->
<div class="modal-header">
<h1 class="modal-title">Modal Heading</h1>
<button type="button"class="close"data-dismiss="modal">×</button>
</div>
<!--Modal body-->
<div class="modal-body">
<h3>Some text toenable scrolling..</h3>
<p>Some text toenable scrolling..Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor inreprehenderit involuptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident,sunt inculpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Some text toenable scrolling..Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor inreprehenderit involuptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident,sunt inculpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Some text toenable scrolling..Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor inreprehenderit involuptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident,sunt inculpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--Modal footer-->
<div class="modal-footer">
<button type="button"class="btn btn-danger"data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
البته اگر می خواهید به جای تمام صفحه، فقط محتوای درون modal اسکرول بخورد باید کلاس modal-dialog-scrollable. را به modal-dialog. اضافه کنید:
|
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>Modal Scroll Example</h2>
<p>Usethe.modal-dialog-scrollable classtoenable scrolling inside the modal.</p>
<!--Button toOpen the Modal-->
<button type="button"class="btn btn-primary"data-toggle="modal"data-target="#myModal">
Open modal
</button>
<!--The Modal-->
<div class="modal"id="myModal">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<!--Modal Header-->
<div class="modal-header">
<h1 class="modal-title">Modal Heading</h1>
<button type="button"class="close"data-dismiss="modal">×</button>
</div>
<!--Modal body-->
<div class="modal-body">
<h3>Some text toenable scrolling..</h3>
<p>Some text toenable scrolling..Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor inreprehenderit involuptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident,sunt inculpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Some text toenable scrolling..Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor inreprehenderit involuptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident,sunt inculpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Some text toenable scrolling..Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor inreprehenderit involuptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident,sunt inculpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--Modal footer-->
<div class="modal-footer">
<button type="button"class="btn btn-danger"data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
امیدوارم این قسمت از سری آموزش جامع بوت استرپ 4 برایتان مفید بوده باشد.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟