منوهای آبشاری (Dropdown) در بوت استرپ

          برنامه نویس 
            بازدید : 43
          سه شنبه 25 تیر 1398
           نظرات (0)
        

حتما با منوهای dropdown یا آبشاری آشنا هستید. این دسته از منوها که می توانند بخشی از دکمه ها بوده و یا مستقل از دیگر عناصر باشند، معمولا دارای چندین گزینه ی مخفی هستند و به محض کلیک کاربر روی دکمه یا اولین گزینه، دیگر گزینه ها نیز به صورت آبشار نمایش داده می شوند. در این قسمت می خواهیم منوی آبشاری در بوت استرپ و انواع آن را بررسی کنیم.

منوی dropdown ساده

برای ساخت یک منوی آبشاری ساده باید از کلاس dropdown. برای عنصر نگهدارنده و کلاس dropdown-menu. برای خود منوی آبشاری استفاده کنید:

 



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>
<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>Dropdowns</h2>
  <p>The.dropdown classisused toindicateadropdown menu.</p>
  <p>Usethe.dropdown-menu classtoactually build the dropdown menu.</p>
  <p>Toopen the dropdown menu,useabutton oralink withaclassof.dropdown-toggle anddata-toggle="dropdown".</p>                                          
  <div class="dropdown">
    <button type="button"class="btn btn-primary 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>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

در مثال بالا برای باز کردن منوی آبشاری از یک دکمه یا لینک با کلاس dropdown-toggle. استفاده کرده ایم و attribute ای به نام "data-toggle="dropdown را نیز به آن داده ایم. از طرفی باید به تک تک موارد این منوی آبشاری کلاسdropdown-item. را نیز اضافه کنید.

جدا سازی لینک ها

اگر بخواهید لینک های داخل منوی آبشاری را با استفاده از یک خط صاف از هم جدا کنید، می توانید از کلاس dropdown-divider. استفاده کنید. به مثال زیر توجه کنید:

 



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>
<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>Dropdowns</h2>
  <p>The.dropdown-divider classisused toseparate links inside the dropdown menu withathin horizontal line:</p>
  <div class="dropdown">
    <button type="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <aclass="dropdown-item"href="#">لینکاول</a>
      <aclass="dropdown-item"href="#">لینکدوم</a>
      <aclass="dropdown-item"href="#">لینکسوم</a>
      <div class="dropdown-divider"></div>
      <aclass="dropdown-item"href="#">لینکجداشده</a>
    </div>
  </div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

اگر بخواهیم به جای استفاده از یک خط صاف برای جداسازی لینک ها از نوشته ای جهت ارائه ی توضیحات به علاوه ی جداسازی استفاده کنیم، باید با کلاس dropdown-header. کار کنیم:

 



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>
<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>Dropdowns</h2>
  <p>The.dropdown-header classisused toadd headers inside the dropdown menu:</p>
  <div class="dropdown">
    <button type="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <h5 class="dropdown-header">توضیحاتدستهاوللینکها</h5>
      <aclass="dropdown-item"href="#">لینکاول</a>
      <aclass="dropdown-item"href="#">لینکدوم</a>
      <aclass="dropdown-item"href="#">لینکسوم</a>
      <h5 class="dropdown-header">توضیحاتدستهدوملینکها</h5>
      <aclass="dropdown-item"href="#">لینکجداشدهبعدی</a>
    </div>
  </div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

حالت های active و disabled

حالت disabled حالتی است که در آن اعلام می کنیم فلان مورد یا لینک غیرفعال است (می تواند به هر دلیلی باشد) و حالت active حالتی است که نشان دهنده ی فعال بودن (فشرده شدن لینک، قرار داشتن در صفحه ی مورد نظر لینک و …) آیتم منوی آبشاری ماست. برای ایجاد این حالت ها باید از کلاس های خودشان یعنی active. و 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
28
29
30

<!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>Dropdowns</h2>
  <p>The.active classaddsablue background color tothe active link.</p>
  <p>The.disabled classdisablesadropdown item(grey text color andano-parking-sign on hover).</p>
  <div class="dropdown">
    <button type="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <aclass="dropdown-item"href="#">Normal</a>
      <aclass="dropdown-item active"href="#">Active</a>
      <aclass="dropdown-item disabled"href="#">Disabled</a>
    </div>
  </div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

موقعیت دهی به منوی آبشاری در بوت استرپ

شما می توانید منوی خود را در سمت چپ یا راست صفحه قرار دهید؛ برای این کار از کلاس های dropright. وdropleft. استفاده کنید. البته توجه داشته باشید که علامت پیکان به صورت خودکار اضافه می شود:

 



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>
<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>Dropdowns-left</h2>
  <p>Add the.dropright classnext tothe dropdown menu toright-align the dropdown.Note that the caret/arrows isadded automatically:</p>
    <br>
 
  <div class="dropdown dropright">
    <button type="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">
      Dropright 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>
</div>
  <br>
  <br>
  
  <div class="container">
  <h2>Dropdowns-right</h2>
  <p>Add the.dropleft classnext tothe dropdown menu toleft-align the dropdown.Note that the caret/arrows isadded automatically:</p>
    <br>
 
  <div class="dropdown dropleft">
    <button type="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">
      Dropright 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>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

موقعیت خروجی منو

می توانید تعیین کنید که منوی آبشاری از کدام قسمت خارج شود (راست یا چپ). مثلا برای اینکه منوی ما از سمت راست باز شود باید از کلاس dropdown-menu-right. استفاده کنیم:

 



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>Dropdowns</h2>
  <p>Add the.dropdown-menu-right classto.dropdown-menu toright-align the dropdown menu.</p>
  <div class="dropdown">
    <button type="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">
      Wide dropdown button todemonstrate thisexample
    </button>
    <div class="dropdown-menu dropdown-menu-right">
      <aclass="dropdown-item"href="#">Link1</a>
      <aclass="dropdown-item"href="#">Link2</a>
      <aclass="dropdown-item"href="#">Link3</a>
    </div>
  </div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

همچنین اگر می خواهید این منو به سمت بالا و نه پایین باز شود باید مقدار "class="dropdown را به dropup تغییر دهید:

 



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>
<br>
 
<div class="container">
  <h2>Dropdowns</h2>
  <p>The.dropup classmakes the dropdown menu expand upwards instead of downwards:</p>
  <div class="dropup">
    <button type="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">
      Dropup button
    </button>
    <div class="dropdown-menu">
      <aclass="dropdown-item"href="#">Link1</a>
      <aclass="dropdown-item"href="#">Link2</a>
    </div>
  </div>
</div>
 
</body>
</html>

مشاهده ی خروجی در JSBin

در ضمن اگر می خواهید استایل گزینه های یک منوی آبشاری در بوت استرپ به حالت عادی و استایل دهی نشده در بیایند (مثلا لینک ها underline بگیرند و آبی شوند) می توانید از کلاس dropdown-item-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

<!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>Dropdowns</h2>
  <p>The.dropdown-item-text classisused toadd plain text toadropdown,orused on links fordefaultlink styling.</p>                                         
  <div class="dropdown">
    <button type="button"class="btn btn-primary 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-text"href="#">Text Link</a>
      <span class="dropdown-item-text">Just Text</span>
    </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
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
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

<!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>Dropdown Split Buttons</h2>
  <div class="btn-group">
    <button type="button"class="btn btn-primary">Primary</button>
    <button type="button"class="btn btn-primary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <aclass="dropdown-item"href="#">Link1</a>
      <aclass="dropdown-item"href="#">Link2</a>
    </div>
  </div>
  
  <div class="btn-group">
    <button type="button"class="btn btn-secondary">Secondary</button>
    <button type="button"class="btn btn-secondary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <aclass="dropdown-item"href="#">Link1</a>
      <aclass="dropdown-item"href="#">Link2</a>
    </div>
  </div>
 
  <div class="btn-group">
    <button type="button"class="btn btn-success">Success</button>
    <button type="button"class="btn btn-success dropdown-toggle dropdown-toggle-split"data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <aclass="dropdown-item"href="#">Link1</a>
      <aclass="dropdown-item"href="#">Link2</a>
    </div>
  </div>
 
  <div class="btn-group">
    <button type="button"class="btn btn-info">Info</button>
    <button type="button"class="btn btn-info dropdown-toggle dropdown-toggle-split"data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <aclass="dropdown-item"href="#">Link1</a>
      <aclass="dropdown-item"href="#">Link2</a>
    </div>
  </div>
 
  <div class="btn-group">
    <button type="button"class="btn btn-warning">Warning</button>
    <button type="button"class="btn btn-warning dropdown-toggle dropdown-toggle-split"data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <aclass="dropdown-item"href="#">Link1</a>
      <aclass="dropdown-item"href="#">Link2</a>
    </div>
  </div>
 
  <div class="btn-group">
    <button type="button"class="btn btn-danger">Danger</button>
    <button type="button"class="btn btn-danger dropdown-toggle dropdown-toggle-split"data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <aclass="dropdown-item"href="#">Link1</a>
      <aclass="dropdown-item"href="#">Link2</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

منبع: روکسو