بوت استرپ دارای فرم هایی سفارشی است که ظاهر زشت و پیش فرض عناصر مرورگر را حذف می کنند. در این قسمت قصد داریم با این فرم های سفارشی در bootstrap آشنا شویم.
Checkbox ها
برای ساخت checkbox سفارشی خود باید به یک عنصر نگهدارنده مانند <div> کلاس های custom-control. وcustom-checkbox. را بدهید. سپس کلاس custom-control-input. را به آن input مربوط به checkbox بدهید. اگر برای input خود از label ها استفاده کردید باید به آن label کلاس custom-control-label. را بدهید، همچنین توجه داشته باشید که مقدار for باید با id مربوط به 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
|
<!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>Custom Checkbox</h2>
<p>Tocreateacustom checkbox,wrapacontainer element,like div,withaclassof.custom-control and.custom-checkbox around the checkbox.Thenadd the.custom-control-input tothe checkbox.</p>
<p><strong>Tip:</strong>Ifyou uselabels foraccompanying text,add the.custom-control-label classtoit.Note that the value of the forattribute should match the id of the checkbox:</p>
<form action="/action_page.php">
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox"class="custom-control-input"id="customCheck"name="example1">
<label class="custom-control-label"for="customCheck">Custom checkbox</label>
</div>
<input type="checkbox"id="defaultCheck"name="example2">
<label for="defaultCheck">Defaultcheckbox</label>
<br>
<button type="submit"class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
Switch ها
برای ساخت یک toggle switch (دکمه هایی که حالت روشن یا خاموش را نمایش می دهند – رجوع کنید به مثال) باید یک عنصر نگهدارنده با کلاس custom-control. و custom-switch. داشته باشید که درونش یک checkbox قرار داشته باشد. سپس به خود checkbox کلاس custom-control-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
|
<!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>Custom Switch</h2>
<p>Tocreateacustom"toggle switch",wrapacontainer element,like div,withaclassof.custom-control and.custom-switcharoundacheckbox.Thenadd the.custom-control-input classtothe checkbox:</p>
<form action="/action_page.php">
<div class="custom-control custom-switch">
<input type="checkbox"class="custom-control-input"id="switch1"name="example">
<label class="custom-control-label"for="switch1">Toggle me</label>
</div>
<br>
<button type="submit"class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
Radio button ها
برای ساخت Radio button های بوت استرپ باید یک input از نوع radio button نوشته و به آن کلاس custom-control-input. را بدهید. سپس آن را درون یک عنصر نگهدارنده مانند <div> بگذارید و به <div> کلاس های custom-control. و custom-radio. را دهید. در صورتی که برای radio button های خود label تعیین کردید باید به label موردنظر کلاس custom-control-label. را بدهید. همچنین توجه داشته باشید که مقدار for باید با id مربوط به Radio button یکی باشد. به مثال زیر توجه کنید:
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
|
<!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>Custom Radio Buttons</h2>
<p>Tocreateacustom radio button,wrapacontainer element,like div,withaclassof.custom-control and.custom-radio around the radio button.Thenadd the.custom-control-input tothe radio button.</p>
<p><strong>Tip:</strong>Ifyou uselabels foraccompanying text,add the.custom-control-label classtoit.Note that the value of the forattribute should match the id of the radio:</p>
<form action="/action_page.php">
<div class="custom-control custom-radio">
<input type="radio"class="custom-control-input"id="customRadio"name="example1">
<label class="custom-control-label"for="customRadio">Custom radio</label>
</div>
<input type="radio"id="defaultRadio"name="example2">
<label for="defaultRadio">Defaultradio</label>
<br>
<button type="submit"class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: اگر می خواهید عناصر فرم در کنار یکدیگر قرار بگیرند کلاس custom-control-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
31
|
<!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>Inline Custom Form Controls</h2>
<p>Ifyou want the custom form controls tosit side by side(inline),add the.custom-control-inline tothe wrapper/container:</p>
<form action="/action_page.php">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio"class="custom-control-input"id="customRadio1"name="example1">
<label class="custom-control-label"for="customRadio1">Custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio"class="custom-control-input"id="customRadio2"name="example2">
<label class="custom-control-label"for="customRadio2">Custom radio</label>
</div>
<button type="submit"class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
Select Menu ها
برای ایجاد Select Menu ها باید کلاس custom-select. را به <select> بدهید:
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 mt-3">
<h2>Custom Select Menu</h2>
<p>Tocreateacustom select menu,add the.custom-select classtothe select element:</p>
<form action="/action_page.php">
<select name="cars"class="custom-select mb-3">
<option selected>Custom Select Menu</option>
<option value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<button type="submit"class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
برای تعیین بزرگی یا کوچکی این select menu ها راه آسانی وجود دارد؛ کلاس custom-select-sm. برای منوهای کوچک و کلاس custom-select-lg. برای منوهای بزرگ است. به این مثال توجه کنید:
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">
<h2>Custom Select Menu Sizing</h2>
<p>Usethe.custom-select-sm classtocreateasmall select menu andthe.custom-select-lg classforalarge one:</p>
<form>
<select class="custom-select custom-select-sm mb-3">
<option selected>Small Custom Select Menu</option>
<option value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<select name="cars"class="custom-select mb-3">
<option selected>DefaultCustom Select Menu</option>
<option value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<select name="cars"class="custom-select custom-select-lg mb-3">
<option selected>Large Custom Select Menu</option>
<option value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
Range ها
range ها در واقع همان Slider هایی هستند که کاربر با آن ها تعامل دارد. از مثال های استفاده ی آن ها تعیین محدوده ی قیمت در فروشگاه های آنلاین است. با اضافه کردن کلاس custom-range. به input ای که range می باشد می توانیم یک range با استایل بوت استرپ بسازیم:
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 mt-3">
<h2>Custom Range</h2>
<p>Tocreateacustom range menu,add the.custom-range classtothe input element with type="range":</p>
<form action="/action_page.php">
<label for="customRange">Custom range</label>
<input type="range"class="custom-range"id="customRange"name="points1">
<label for="defaultRange">Defaultrange</label>
<input type="range"id="defaultRange"name="points2">
<p><button type="submit"class="btn btn-primary">Submit</button></p>
</form>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
input دریافت file
برای ساخت input آپلود فایل باز هم یک عنصر نگهدارنده با کلاس custom-file. ایجاد می کنیم و input اصلی را با کلاس custom-control-input. داخل آن می گذاریم. به label های این نوع input نیز باید کلاس custom-control-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
31
32
33
34
35
36
37
38
39
40
41
42
|
<!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>Custom File</h2>
<p>Tocreateacustom file upload,wrapacontainer element withaclassof.custom-file around the input with type="file".Thenadd the.custom-control-input toit:</p>
<form action="/action_page.php">
<p>Custom file:</p>
<div class="custom-file mb-3">
<input type="file"class="custom-file-input"id="customFile"name="filename">
<label class="custom-file-label"for="customFile">Choose file</label>
</div>
<p>Defaultfile:</p>
<input type="file"id="myFile"name="filename2">
<div class="mt-3">
<button type="submit"class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change",function(){
varfileName=$(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در مثال بالا کدهای جی کوئری نیز اضافه شده اند بنابراین اگر به صفحه ی خروجی مثال بالا در JSBin بروید و فایلی را برای آپلود انتخاب کنید متوجه تغییر نام input خواهید شد.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟