در جلسات قبل با چند نوع منو در بوت بوت استرپ آشنا شدید: منوهای آبشاری و منوهای مخفی شونده. در این جلسه می خواهیم درباره یک نوع دیگر منو یعنی منوهای Nav صحبت کنیم.
منوهای Nav (مخفف Navigation) در فارسی اسم خاصی ندارند و معمولا با نام های منوهای جهت یابی یا نوار مسیریابی و… شناخته می شوند؛ این منوها استفاده های خاصی دارند که رایج ترین آن ها نوار موقعیت سایت و منوهای سربرگی هستند.
اگر می خواهید یک منو در بوت استرپ داشته باشید که ساده و افقی باشد، باید به یک عنصر <ul> کلاس nav. را اضافه کنید. سپس به هر عنصر <li> کلاس nav-item. و به هر لینک داخل آن ها کلاس nav-link. را اضافه کنید. مثال:
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
|
<!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>Nav</h2>
<p>Basic horizontal menu:</p>
<ul class="nav">
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link disabled"href="#">Disabled</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
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
|
<!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>Nav</h2>
<p>Left-aligned nav(default):</p>
<ul class="nav">
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link disabled"href="#">Disabled</a>
</li>
</ul>
<pclass="text-center">Centered nav:</p>
<ul class="nav justify-content-center">
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link disabled"href="#">Disabled</a>
</li>
</ul>
<pclass="text-right">Right-aligned nav:</p>
<ul class="nav justify-content-end">
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link disabled"href="#">Disabled</a>
</li>
</ul>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
Nav های عمودی
اگر بخواهید منوی شما به صورت عمودی نمایش داده شود می توانید از کلاس flex-column. استفاده کنید:
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
|
<!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 Nav</h2>
<p>Usethe.flex-column classtocreateavertical nav:</p>
<ul class="nav flex-column">
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link disabled"href="#">Disabled</a>
</li>
</ul>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
منوهای سربرگ دار (Tab)
منوهای سربرگ دار منوهایی هستند که چندین صفحه ی مختلف را در خود جا داده اند و با کلیک روی هر سربرگ، محتویات مخصوص آن نمایش داده می شود. ما برای تبدیل منوهای Nav ساده به منوهای Tab (سربرگ دار) از کلاس nav-tabs.استفاده می کنیم. سپس با استفاده از کلاس active. سربرگی که در حال حاضر روی آن هستیم (سربرگ فعال) را مشخص می کنیم:
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
|
<!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>Navigation Tabs</h2>
<p>Turn the nav menu into navigation tabs with the.nav nav-tabs class.Add the active classtothe active/current link.Ifyou want the tabs tobe togglable,see the last example on the tutorial page.</p>
<ul class="nav nav-tabs">
<li class="nav-item">
<aclass="nav-link active"href="#">Active</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link disabled"href="#">Disabled</a>
</li>
</ul>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نوع دیگری از این منوها به منوهای pill (به معنی قرص) مشهور هستند. این نوع منو در بوت استرپ به جای داشتن سربرگ، دکمه هایی دارد که کمی شبیه به قرص است. برای ساخت این منوها باید از کلاس nav-pills. استفاده کنید:
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
|
<!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>Navigation Pills</h2>
<p>Turn the nav menu into navigation pills with the.nav nav-pills class:</p>
<ul class="nav nav-pills">
<li class="nav-item">
<aclass="nav-link active"href="#">Active</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link disabled"href="#">Disabled</a>
</li>
</ul>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
از هر کدام از این منوها که استفاده کرده باشید برای ترازبندی و مرتب کردن محتوایشان باید از کلاس nav-justified.استفاده کنید:
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 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>Justified Tabs/Pills</h2>
<p>Tojustify tabs/pills(equal width),usethe.nav-justified class:</p>
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<aclass="nav-link active"href="#">Active</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link disabled"href="#">Disabled</a>
</li>
</ul><br>
<p>Justified tabs:</p>
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<aclass="nav-link active"href="#">Active</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link disabled"href="#">Disabled</a>
</li>
</ul>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ترکیب Tab ها و Pill ها با منوهای آبشاری
برای ترکیب Pill ها و یا Tab ها با منوهای آبشاری نیاز به انجام کار خاصی نیست بلکه باید از همان کلاس های جلسات قبل (یعنی nav-item و dropdown و…) استفاده کنید.
ترکیب با 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
28
29
30
31
32
33
34
35
36
37
|
<!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>Pills with Dropdown</h2>
<ul class="nav nav-pills">
<li class="nav-item">
<aclass="nav-link active"href="#">Active</a>
</li>
<li class="nav-item dropdown">
<aclass="nav-link dropdown-toggle"data-toggle="dropdown"href="#">Dropdown</a>
<div class="dropdown-menu">
<aclass="dropdown-item"href="#">Link1</a>
<aclass="dropdown-item"href="#">Link2</a>
<aclass="dropdown-item"href="#">Link3</a></div>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link disabled"href="#">Disabled</a>
</li>
</ul>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
ترکیب با Tab ها:
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
|
<!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>Tabs with Dropdown</h2>
<ul class="nav nav-tabs">
<li class="nav-item">
<aclass="nav-link active"href="#">Active</a>
</li>
<li class="nav-item dropdown">
<aclass="nav-link dropdown-toggle"data-toggle="dropdown"href="#">Dropdown</a>
<div class="dropdown-menu">
<aclass="dropdown-item"href="#">Link1</a>
<aclass="dropdown-item"href="#">Link2</a>
<aclass="dropdown-item"href="#">Link3</a></div>
</li>
<li class="nav-item">
<aclass="nav-link"href="#">Link</a>
</li>
<li class="nav-item">
<aclass="nav-link disabled"href="#">Disabled</a>
</li>
</ul>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
سربرگ های پویا (Toggleable)
تا اینجا ظاهر منو در بوت استرپ را ساختیم اما منوها عملی نیستند و کار نمی کنند. به طور مثال اگر به صفحات خروجی کدهای بالا مراجعه کنید و روی سربرگ های مختلف منوها کلیک کنید، متوجه می شوید که هیچ تغییری رخ نمی دهد. در حالت عادی باید خودتان کدهای جاوا اسکریپت را بنویسید تا منو به شکل تمام و کمال کار کند اما از آن جایی که از کدهای آماده ی بوت استرپ استفاده می کنیم، نیازی به این کار نیست.
برای ایجاد این سربرگ های پویا به attribute خاصی به نام “data-toggle=”tab نیاز داریم و باید آن را به تک تک لینک های سربرگی منو بدهیم. سپس کلاس tab-pane. را با یک id یکتا به هر سربرگ اضافه کنید و آن را در یک تگ <div> با کلاس tab-content. قرار دهید. در ضمن اگر می خواهید محتویات با حالت نرمی محو شوند، کلاس fade. را به tab-pane. اضافه کنید:
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
|
<!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>
<br>
<div class="container">
<h2>Toggleable Tabs</h2>
<br>
<!--Nav tabs-->
<ul class="nav nav-tabs"role="tablist">
<li class="nav-item">
<aclass="nav-link active"data-toggle="tab"href="#home">Home</a>
</li>
<li class="nav-item">
<aclass="nav-link"data-toggle="tab"href="#menu1">Menu1</a>
</li>
<li class="nav-item">
<aclass="nav-link"data-toggle="tab"href="#menu2">Menu2</a>
</li>
</ul>
<!--Tab panes-->
<div class="tab-content">
<div id="home"class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1"class="container tab-pane fade"><br>
<h3>Menu1</h3>
<p>Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2"class="container tab-pane fade"><br>
<h3>Menu2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,totam rem aperiam.</p>
</div>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اگر بخواهید همین کار را برای Pill ها انجام دهید می توانید از "data-toggle="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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!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>
<br>
<div class="container">
<h2>Toggleable Pills</h2>
<br>
<!--Nav pills-->
<ul class="nav nav-pills"role="tablist">
<li class="nav-item">
<aclass="nav-link active"data-toggle="pill"href="#home">Home</a>
</li>
<li class="nav-item">
<aclass="nav-link"data-toggle="pill"href="#menu1">Menu1</a>
</li>
<li class="nav-item">
<aclass="nav-link"data-toggle="pill"href="#menu2">Menu2</a>
</li>
</ul>
<!--Tab panes-->
<div class="tab-content">
<div id="home"class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1"class="container tab-pane fade"><br>
<h3>Menu1</h3>
<p>Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2"class="container tab-pane fade"><br>
<h3>Menu2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,totam rem aperiam.</p>
</div>
</div>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟