spinner ها (در لغت به معنی «چرخنده») همان علامت های بارگذاری و loading هستند که به کاربر نمایش داده می شوند تا بداند که سیستم در حال انجام پردازش کارهای موردنظر است. برای استفاده از spinner ها باید از کلاس spinner-border. استفاده کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<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>Spinners</h2>
<p>Tocreateaspinner/loader,usethe<code>.spinner-border</code>class:</p>
<div class="spinner-border"></div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
Spinner های رنگی
می توانید با استفاده از کلاس های رنگی که در جلسات قبل در موردشان صحبت کردیم، Spinner ها را بر اساس تم وب سایت خود به رنگ های مختلف در بیاورید.
به مثال زیر توجه کنید:
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>
<head>
<title>Bootstrap Example</title>
<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>Colored Spinners</h2>
<p>Useany<strong>text color utilites</strong>toaddacolor tothe spinner:</p>
<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
Spinner های بزرگ شونده (نبض دار)
Spinner های نبض دار، Spinner هایی هستند که به جای چرخیدن، مانند نبض بزرگ و سپس محو می شوند. برای استفاده از این دست Spinner ها از کلاس spinner-grow. استفاده کنید:
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>
<head>
<title>Bootstrap Example</title>
<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>Growing Spinners</h2>
<p>Usethe<code>.spinner-grow</code>classifyou want the spinner/loader togrow instead of"spin":</p>
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اندازه Spinner ها
می توانید با استفاده از کلاس های spinner-border-sm. و spinner-grow-sm. اندازه ی Spinner های خود را تغییر دهید:
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>
<head>
<title>Bootstrap Example</title>
<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>Spinner Size</h2>
<p>Use<code>.spinner-border-sm</code>or<code>.spinner-grow-sm</code>tocreateasmaller spinner:</p>
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
Spinner در دکمه ها
یکی از استفاده های بسیار رایج Spinner ها، استفاده از آن ها در دکمه هاست. به طور مثال زمانی که کاربر دکمه ای را کلیک می کند تا فرمی را ثبت و پردازش کنیم، به او یک Spinner در همان دکمه نمایش می دهیم تا بداند که باید صبر کند. به این مثال توجه کنید:
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>
<head>
<title>Bootstrap Example</title>
<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>Spinner Buttons</h2>
<p>Add spinners tobuttons:</p>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary"disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary"disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
صفحه بندی در بوت استرپ (Pagination)
اگر وب سایت شما دارای صفحات متعدد است (مانند یک وبلاگ و …) بهتر است مطالب خود را صفحه بندی کنید. برای ساخت یک صفحه بندی ساده با بوت استرپ باید کلاس pagination. را به یک <ul> اضافه کرده و سپس کلاسpage-item. را به هر <li> و کلاس page-link. را به هر لینکی که داخل <li> است، اضافه کنید. به مثال زیر توجه کنید:
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">
<h2>Pagination</h2>
<p>Tocreateabasic pagination,add the.pagination classtoan ul element.Thenadd the.page-item toeachli element anda.page-link classtoeachlink inside li:</p>
<ul class="pagination">
<li class="page-item"><aclass="page-link"href="#">Previous</a></li>
<li class="page-item"><aclass="page-link"href="#">1</a></li>
<li class="page-item"><aclass="page-link"href="#">2</a></li>
<li class="page-item"><aclass="page-link"href="#">3</a></li>
<li class="page-item"><aclass="page-link"href="#">Next</a></li>
</ul>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
صفحه فعلی
برای مشخص کردن صفحه ی فعلی که کاربر در آن است، باید از وضعیت active استفاده کنید. بنابراین باید کلاسactive. را به تگ li موردنظر اضافه کنید:
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">
<h2>Pagination-Active State</h2>
<p>Add class.active tolet the user know which page he/she ison:</p>
<ul class="pagination">
<li class="page-item"><aclass="page-link"href="#">Previous</a></li>
<li class="page-item"><aclass="page-link"href="#">1</a></li>
<li class="page-item active"><aclass="page-link"href="#">2</a></li>
<li class="page-item"><aclass="page-link"href="#">3</a></li>
<li class="page-item"><aclass="page-link"href="#">Next</a></li>
</ul>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
وضعیت غیرفعال
گاهی اوقات، برخی از دکمه ها در صفحه بندی ها غیرفعال هستند؛ به طور مثال اگر کاربر در صفحه ی اول قرار دارد، دکمه ی «صفحه ی قبل» بی معنی است. بنابراین باید غیرفعال باشد. برای انجام این کار از کلاس disabled. استفاده کنید:
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">
<h2>Pagination-Disabled State</h2>
<p>Add class.disabled ifapage forsome reason isdisabled:</p>
<ul class="pagination">
<li class="page-item disabled"><aclass="page-link"href="#">Previous</a></li>
<li class="page-item"><aclass="page-link"href="#">1</a></li>
<li class="page-item"><aclass="page-link"href="#">2</a></li>
<li class="page-item"><aclass="page-link"href="#">3</a></li>
<li class="page-item"><aclass="page-link"href="#">Next</a></li>
</ul>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اندازهدکمه های صفحه بندی
با استفاده از کلاس های pagination-lg. و pagination-sm. اندازه ی دکمه های مربوط به صفحه بندی را تغییر دهید:
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 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>Pagination-Sizing</h2>
<p>Add class.pagination-lg forlarger blocks or.pagination-sm forsmaller blocks.</p>
<p>Large:</p>
<ul class="pagination pagination-lg">
<li class="page-item"><aclass="page-link"href="#">Previous</a></li>
<li class="page-item"><aclass="page-link"href="#">1</a></li>
<li class="page-item"><aclass="page-link"href="#">2</a></li>
<li class="page-item"><aclass="page-link"href="#">3</a></li>
<li class="page-item"><aclass="page-link"href="#">Next</a></li>
</ul>
<p>Default:</p>
<ul class="pagination">
<li class="page-item"><aclass="page-link"href="#">Previous</a></li>
<li class="page-item"><aclass="page-link"href="#">1</a></li>
<li class="page-item"><aclass="page-link"href="#">2</a></li>
<li class="page-item"><aclass="page-link"href="#">3</a></li>
<li class="page-item"><aclass="page-link"href="#">Next</a></li>
</ul>
<p>Small:</p>
<ul class="pagination pagination-sm">
<li class="page-item"><aclass="page-link"href="#">Previous</a></li>
<li class="page-item"><aclass="page-link"href="#">1</a></li>
<li class="page-item"><aclass="page-link"href="#">2</a></li>
<li class="page-item"><aclass="page-link"href="#">3</a></li>
<li class="page-item"><aclass="page-link"href="#">Next</a></li>
</ul>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
هم ترازی و موقعیت
برای تراز کردن دکمه های صفحه بندی به سمت راست، چپ یا وسط باید از justify-content-center (برای وسط چین شدن) و justify-content-end (برای راست چین شدن) استفاده کنید. نیازی به استفاده از کلاسی برای چپ چین کردن ندارید چرا که حالت پیش فرض همان چپ چین است:
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>
</head>
<body>
<div class="container">
<h2>Pagination</h2>
<p>Useutilitiy classes tochange the alignment of the pagination:</p>
<ul class="pagination">
<li class="page-item"><aclass="page-link"href="javascript:void(0);">Previous</a></li>
<li class="page-item"><aclass="page-link"href="javascript:void(0);">1</a></li>
<li class="page-item"><aclass="page-link"href="javascript:void(0);">2</a></li>
<li class="page-item"><aclass="page-link"href="javascript:void(0);">Next</a></li>
</ul>
<ul class="pagination justify-content-center">
<li class="page-item"><aclass="page-link"href="javascript:void(0);">Previous</a></li>
<li class="page-item"><aclass="page-link"href="javascript:void(0);">1</a></li>
<li class="page-item"><aclass="page-link"href="javascript:void(0);">2</a></li>
<li class="page-item"><aclass="page-link"href="javascript:void(0);">Next</a></li>
</ul>
<ul class="pagination justify-content-end">
<li class="page-item"><aclass="page-link"href="javascript:void(0);">Previous</a></li>
<li class="page-item"><aclass="page-link"href="javascript:void(0);">1</a></li>
<li class="page-item"><aclass="page-link"href="javascript:void(0);">2</a></li>
<li class="page-item"><aclass="page-link"href="javascript:void(0);">Next</a></li>
</ul>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
صفحه بندی از نوع breadcrumb
نوع دیگری از صفحه بندی وجود دارد که به آن breadcrumb (به معنی «خرده نان») می گوییم. برای استفاده از آن باید از کلاس breadcrumb. و breadcrumb-item. استفاده کنید:
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>
<head>
<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>Breadcrumbs</h2>
<p>The.breadcrumb classindicates the current page'slocation withinanavigational hierarchy:</p>
<ul class="breadcrumb">
<li class="breadcrumb-item"><ahref="#">Photos</a></li>
<li class="breadcrumb-item"><ahref="#">Summer2017</a></li>
<li class="breadcrumb-item"><ahref="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>
</ul>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
امیدوارم از این قسمت از دوره آموزش کامل bootstrap 4 استفاده کرده باشید. در درس امروز spinner ها در بوت استرپ را شرح دادیم و توضیح دادیم چگونه می توانید از آن ها استفاده کنید. سپس به شرح صفحه بندی در بوت استرپ یا pagination پرداختیم. شما می توانید سوالات و ابهامات خود را از طریق قسمت نظرات با ما در میان بگذارید.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟