forked from zuramai/mazer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcomponent-navs.html
175 lines (172 loc) · 10.9 KB
/
component-navs.html
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
{% set title = 'Navs' %}
{% set filename = 'component-navs.html' %}
{% extends 'src/layouts/master.html' %}
{% block content %}
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Navs</h3>
<p class="text-subtitle text-muted">Examples for how to use Bootstrap’s included navigation components.
</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Navs</li>
</ol>
</nav>
</div>
</div>
</div>
<section class="section">
<div class="card">
<div class="card-header">
<h4 class="card-title">Default</h4>
</div>
<div class="card-body">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</section>
<section class="section">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5 class="card-title">Horizontal Navs</h5>
</div>
<div class="card-body">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab"
aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab"
aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab"
aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p class='my-2'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nulla
neque. Ut hendrerit nulla a euismod pretium.
Fusce venenatis sagittis ex efficitur suscipit. In tempor mattis fringilla. Sed id
tincidunt orci, et volutpat ligula.
Aliquam sollicitudin sagittis ex, a rhoncus nisl feugiat quis. Lorem ipsum dolor sit
amet, consectetur adipiscing elit.
Nunc ultricies ligula a tempor vulputate. Suspendisse pretium mollis ultrices.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Integer interdum diam eleifend metus lacinia, quis gravida eros mollis. Fusce non sapien
sit amet magna dapibus
ultrices. Morbi tincidunt magna ex, eget faucibus sapien bibendum non. Duis a mauris ex.
Ut finibus risus sed massa
mattis porta. Aliquam sagittis massa et purus efficitur ultricies. Integer pretium dolor
at sapien laoreet ultricies.
Fusce congue et lorem id convallis. Nulla volutpat tellus nec molestie finibus. In nec
odio tincidunt eros finibus
ullamcorper. Ut sodales, dui nec posuere finibus, nisl sem aliquam metus, eu accumsan
lacus felis at odio. Sed lacus
quam, convallis quis condimentum ut, accumsan congue massa. Pellentesque et quam vel
massa pretium ullamcorper vitae eu
tortor.
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p class="mt-2">Duis ultrices purus non eros fermentum hendrerit. Aenean ornare interdum
viverra. Sed ut odio velit. Aenean eu diam
dictum nibh rhoncus mattis quis ac risus. Vivamus eu congue ipsum. Maecenas id
sollicitudin ex. Cras in ex vestibulum,
posuere orci at, sollicitudin purus. Morbi mollis elementum enim, in cursus sem
placerat ut.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h4 class="card-title">Javascript Behavior</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill"
href="#v-pills-home" role="tab" aria-controls="v-pills-home"
aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill"
href="#v-pills-profile" role="tab" aria-controls="v-pills-profile"
aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill"
href="#v-pills-messages" role="tab" aria-controls="v-pills-messages"
aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill"
href="#v-pills-settings" role="tab" aria-controls="v-pills-settings"
aria-selected="false">Settings</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
aria-labelledby="v-pills-home-tab">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nulla neque.
Ut hendrerit nulla a euismod pretium.
Fusce venenatis sagittis ex efficitur suscipit. In tempor mattis fringilla. Sed
id tincidunt orci, et volutpat ligula.
Aliquam sollicitudin sagittis ex, a rhoncus nisl feugiat quis. Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
Nunc ultricies ligula a tempor vulputate. Suspendisse pretium mollis ultrices.
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel"
aria-labelledby="v-pills-profile-tab">
Integer interdum diam eleifend metus lacinia, quis gravida eros mollis. Fusce
non sapien sit amet magna dapibus
ultrices. Morbi tincidunt magna ex, eget faucibus sapien bibendum non. Duis a
mauris ex. Ut finibus risus sed massa
mattis porta. Aliquam sagittis massa et purus efficitur ultricies.
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel"
aria-labelledby="v-pills-messages-tab">
Integer pretium dolor at sapien laoreet ultricies. Fusce congue et lorem id
convallis. Nulla volutpat tellus nec
molestie finibus. In nec odio tincidunt eros finibus ullamcorper. Ut sodales,
dui nec posuere finibus, nisl sem aliquam
metus, eu accumsan lacus felis at odio.
</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel"
aria-labelledby="v-pills-settings-tab">
Sed lacus quam, convallis quis condimentum ut, accumsan congue massa.
Pellentesque et quam vel massa pretium ullamcorper
vitae eu tortor.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
{% endblock %}