input-group در بوت استرپ در واقع یک input عادی است با این تفاوت که در کنار آن متن یا چیز دیگری قرار دارد که به کاربر در پر کردن فرم کمک می کند. برای ایجاد این نوع از input ها باید از کلاس input-group. استفاده کنید.
ممکن است بپرسید این متن کمکی در کدام قسمت input می آید؟ اگر می خواهید متن کمکی به ابتدای input اضافه شود از کلاس input-group-prepend. و اگر می خواهید به انتهایش اضافه شود از کلاس input-group-append. استفاده کنید. در آخر برای استایل دهی این متن کمکی می توانید از input-group-text. استفاده کنید.
به مثال زیر توجه کنید:
|
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 mt-3">
<h3>Input Groups</h3>
<p>The.input-group classisacontainer toenhance an input by adding an icon,text orabutton infront(.input-group-prepend)orbehind(.input-group-append)the input field asa"help text".</p>
<p>Usethe.input-group-text classtostyle the specified help text.</p>
<form action="/action_page.php">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"class="form-control"placeholder="Username"id="usr"name="username">
</div>
<div class="input-group mb-3">
<input type="text"class="form-control"placeholder="Your Email"id="mail"name="email">
<div class="input-group-append">
<span class="input-group-text">@example.com</span>
</div>
</div>
<button type="submit"class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
|
ما در مثال بالا از کلاس mb-3. استفاده کرده ایم تا مطمئن شویم margin پایینی input group به اندازه ی کافی باشد.
اندازه ی input-group در بوت استرپ
از کلاس input-group-sm. برای تعیین input های کوچک و از input-group-lg. برای تعیین input های بزرگ استفاده می شود که بر اساس اندازه ی صفحه و محتویات وب سایت شما انتخاب می شود:
|
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
|
<!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 mt-3">
<h1>Input Group Size</h1>
<p>Usethe.input-group-sm classforsmall input groups and.input-group-lg forlarge inputs groups:</p>
<form>
<div class="input-group mb-3 input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">Small</span>
</div>
<input type="text"class="form-control">
</div>
</form>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Default</span>
</div>
<input type="text"class="form-control">
</div>
</form>
<form>
<div class="input-group mb-3 input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">Large</span>
</div>
<input type="text"class="form-control">
</div>
</form>
</div>
</body>
</html>
|
تعیین چندین متن کمکی
در صورت نیاز می توانید بیشتر از یک متن کمکی به input های خود اضافه کنید. در مثال زیر سه متن کمکی را در یک input قرار داده ایم:
|
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
|
<!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 mt-3">
<h3>Multiple Inputs andAddons</h3>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Person</span>
</div>
<input type="text"class="form-control"placeholder="First Name">
<input type="text"class="form-control"placeholder="Last Name">
</div>
</form>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">One</span>
<span class="input-group-text">Two</span>
<span class="input-group-text">Three</span>
</div>
<input type="text"class="form-control">
</div>
</form>
</div>
</body>
</html>
|
استفاده از Checkbox و Radio Button در متن کمکی
تا این قسمت در تمامی متن های کمکی تنها از متن خالی استفاده کرده ایم اما شما می توانید از radio button ها و Checkbox ها نیز استفاده کنید. به مثال زیر توجه کنید:
|
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
|
<!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 mt-3">
<h3>Input Group with Checkboxes andRadios</h3>
<p>You can also usecheckboxes orradio buttons instead of text:</p>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox">
</div>
</div>
<input type="text"class="form-control"placeholder="Some text">
</div>
</form>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio">
</div>
</div>
<input type="text"class="form-control"placeholder="Some text">
</div>
</form>
</div>
</body>
</html>
|
استفاده از دکمه ها در input group ها
بعضی اوقات input های ما نیاز به دکمه دارند (مانند input های جستجو). بوت استرپ نیز این مسئله را نادیده نگرفته است و به شما اجازه ی استفاده از دکمه ها را می دهد:
|
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
|
<!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 mt-3">
<h1>Input Group Buttons</h1>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-primary"type="button">Basic Button</button>
</div>
<input type="text"class="form-control"placeholder="Some text">
</div>
<div class="input-group mb-3">
<input type="text"class="form-control"placeholder="Search">
<div class="input-group-append">
<button class="btn btn-success"type="submit">Go</button>
</div>
</div>
<div class="input-group mb-3">
<input type="text"class="form-control"placeholder="Something clever..">
<div class="input-group-append">
<button class="btn btn-primary"type="button">OK</button>
<button class="btn btn-danger"type="button">Cancel</button>
</div>
</div>
</div>
</body>
</html>
|
این منوها می توانند از نوع آبشاری (drop down) نیز باشند. توجه داشته باشید که در این حالت، برخلاف همیشه، نیازی به استفاده از کلاس 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
34
35
|
<!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 mt-3">
<h3>Input Groups with Dropdown Button</h3>
<p>Addadropdown button inthe input group.Note that you don'tneed the.dropdown wrapper,asyou normally would.</p>
<form>
<div class="input-group mt-3 mb-3">
<div class="input-group-prepend">
<button type="button"class="btn btn-outline-secondary dropdown-toggle"data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<aclass="dropdown-item"href="#">Link1</a>
<aclass="dropdown-item"href="#">Link2</a>
<aclass="dropdown-item"href="#">Link3</a>
</div>
</div>
<input type="text"class="form-control"placeholder="Username">
</div>
</form>
</div>
</body>
</html>
|
نوشتن label برای input group ها
در صورتی که می خواهید از <label> استفاده کنید باید آن را بیرون از input group قرار دهید، همچنین مقدار for با آیدی input یکی باشد. در این صورت زمانی که روی label کلیک کنید، input فعال می شود:
|
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 mt-3">
<h2>Input Group Labels</h2>
<p>Put labels outside of the input group,andremember that the value of the forattribute should match the id of the input.</p>
<p>Click on the label andit will bring focus tothe input:</p>
<form>
<label for="demo">Write your email here:</label>
<div class="input-group mb-3">
<input type="text"class="form-control"placeholder="Email"id="demo"name="email">
<div class="input-group-append">
<span class="input-group-text">@example.com</span>
</div>
</div>
</form>
</div>
</body>
</html>
|
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟