مجموعه دکمه ها یا button group ها همانطور که از نامشان مشخص است، مجموعه ای از چند دکمه هستند که در کنار هم قرار می گیرند. برای ساخت این دکمه ها باید از کلاس btn-group. استفاده کنید. به مثال زیر دقت کنید:
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">
<h2>Button Group</h2>
<p>The.btn-group classcreatesabutton group:</p>
<div class="btn-group">
<button type="button"class="btn btn-primary">Apple</button>
<button type="button"class="btn btn-primary">Samsung</button>
<button type="button"class="btn btn-primary">Sony</button>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
شاید از خودتان بپرسید این مجموعه دکمه ها به چه دردی می خورند؟ در واقع استفاده از این دکمه ها به سلیقه ی شما برمیگردد. یکی از مواردی که می توانیم در آن ها از مجموعه دکمه ها استفاده کنیم، زمانی است که چند گزینه به هم مربوط و متعلق به یک واحد می باشند. مثلا برنامه ای داریم که گزینه های Cancel و OK و Save کنار هم هستند؛ در این حالت می توان از مجموعه دکمه ها استفاده کرد.
برای آنکه اندازه ی این مجموعه دکمه ها بزرگتر یا کوچکتر شود می توان از کلاس های btn-group-lg. و btn-group-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
|
<!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>Button Groups Sizes</h2>
<p>Add class.btn-group-*tosize all buttons inabutton group.</p>
<h3>Large Buttons:</h3>
<div class="btn-group btn-group-lg">
<button type="button"class="btn btn-primary">Apple</button>
<button type="button"class="btn btn-primary">Samsung</button>
<button type="button"class="btn btn-primary">Sony</button>
</div>
<h3>DefaultButtons:</h3>
<div class="btn-group">
<button type="button"class="btn btn-primary">Apple</button>
<button type="button"class="btn btn-primary">Samsung</button>
<button type="button"class="btn btn-primary">Sony</button>
</div>
<h3>Small Buttons:</h3>
<div class="btn-group btn-group-sm">
<button type="button"class="btn btn-primary">Apple</button>
<button type="button"class="btn btn-primary">Samsung</button>
<button type="button"class="btn btn-primary">Sony</button>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
دکمه های عمودی
می توانید مجموعه دکمه ها را به صورت عمودی نیز قرار دهید. برای این کار از کلاس btn-group-vertical. استفاده کنید:
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">
<h2>Vertical Button Group</h2>
<p>Usethe.btn-group-vertical classtocreateavertical button group:</p>
<div class="btn-group-vertical">
<button type="button"class="btn btn-primary">Apple</button>
<button type="button"class="btn btn-primary">Samsung</button>
<button type="button"class="btn btn-primary">Sony</button>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
دکمه های آبشاری (Dropdown)
برخی اوقات ممکن است دکمه ی ما دارای زیر مجموعه هایی باشد. این زیر مجموعه ها را می توان در قالب منوهای آبشاری در خود آن دکمه نمایش داد:
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">
<h2>Nesting Button Groups</h2>
<p>Nest button groups tocreate dropdown menus:</p>
<div class="btn-group">
<button type="button"class="btn btn-primary">Apple</button>
<button type="button"class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<aclass="dropdown-item"href="#">Tablet</a>
<aclass="dropdown-item"href="#">Smartphone</a>
</div>
</div>
</div>
</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>Split Buttons</h2>
<div class="btn-group">
<button type="button"class="btn btn-primary">Sony</button>
<button type="button"class="btn btn-primary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<aclass="dropdown-item"href="#">Tablet</a>
<aclass="dropdown-item"href="#">Smartphone</a>
</div>
</div>
</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
32
|
<!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>Vertical Button Group with Dropdown</h2>
<div class="btn-group-vertical">
<button type="button"class="btn btn-primary">Apple</button>
<button type="button"class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<aclass="dropdown-item"href="#">Tablet</a>
<aclass="dropdown-item"href="#">Smartphone</a>
</div>
</div>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
سوال: اگر دو مجموعه دکمه را پشت سر هم بنویسیم، چه می شود؟
پاسخ: از آن جا که این دکمه ها در حالت پیش فرض 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
27
28
29
30
|
<!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>Button Group</h2>
<p>Button groups are"inline"by default,which makes them appear side by side when you have multiple groups:</p>
<div class="btn-group">
<button type="button"class="btn btn-primary">Apple</button>
<button type="button"class="btn btn-primary">Samsung</button>
<button type="button"class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
<button type="button"class="btn btn-primary">BMW</button>
<button type="button"class="btn btn-primary">Mercedes</button>
<button type="button"class="btn btn-primary">Volvo</button>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
Badge یا نشان در بوت استرپ
کلمه ی Badge در لغت به معنی نشان است اما در بوت استرپ معنای کاربردی دیگری دارند. آن ها در واقع نشان هایی هستند که برای اطلاع رسانی اضافی به کاربر در مورد جزئیات یک مسئله به وجود آمده اند. ما می توانیم برای ساخت آن ها از کلاس badge. به همراه یک کلاس دیگر مانند badge-secondary. استفاده کنیم. در مثال زیر این کار را در تگ <span>انجام داده ایم. در این مثال توجه کنید که اندازه ی badge به همراه عنصر نگه دارنده اش تغییر می کند:
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">
<h2>Badges</h2>
<h1>Example heading<span class="badge badge-secondary">New</span></h1>
<h2>Example heading<span class="badge badge-secondary">New</span></h2>
<h3>Example heading<span class="badge badge-secondary">New</span></h3>
<h4>Example heading<span class="badge badge-secondary">New</span></h4>
<h5>Example heading<span class="badge badge-secondary">New</span></h5>
<h6>Example heading<span class="badge badge-secondary">New</span></h6>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در مثال بالا badge ای به نام new به تیترهای ما اضافه شده است. از این نوع badge می توان در وبلاگ ها استفاده کرد تا به کاربر بگویند فلان چیز جدیدا و اخیرا نوشته شده است. البته این تنها نوع badge نیست بلکه می توان از badge های دیگر استفاده کرد، همچنین با استفاده از دسته کلاس های *-badge. می توان رنگ این badge ها را تغییر داد:
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>Contextual Badges</h2>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نشان های گرد
اگر می خواهید نشان هایتان به جای مستطیل، به شکل گردتری در بیایند می توانید از کلاس های badge-pill. استفاده کنید:
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>Pill Badges</h2>
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</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
|
<!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>Badge insideaButton</h2>
<button type="button"class="btn btn-primary">
Messages<span class="badge badge-light">4</span>
</button>
<button type="button"class="btn btn-danger">
Notifications<span class="badge badge-light">7</span>
</button>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
امیدوارم از این قسمت از مجموعه آموزش بوت استرپ لذت برده باشید.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟