-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathusage_floating.html
58 lines (58 loc) · 5.09 KB
/
usage_floating.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example For Bootstrap Offcanvas</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap-off-canvas.css">
</head>
<body>
<div id="off_canvas" class="off-canvas off-canvas-floating">
<!-- Just use the default Bootstrap color utility here -->
<div class="off-canvas-nav bg-dark">
<!-- You may use any of the bootstrap components here -->
<button class="btn btn-dark mb-2 off-canvas-toggler" type="button" data-target="#off_canvas" aria-controls="offcanvasSupportedContent" aria-expanded="false" aria-label="Toggle off canvas menu">
<span aria-hidden="true">×</span> Close
</button>
<div class="nav nav-pills nav-fill flex-column">
<a href="#" class="text-left nav-item nav-link active">Home</a>
<a href="#" class="text-left nav-item nav-link">About Our Company</a>
<a href="#" class="text-left nav-item nav-link">Our Services</a>
<a href="#" class="text-left nav-item nav-link">Contact Us</a>
<a href="#" class="text-left nav-item nav-link disabled">Feature Coming Soon</a>
</div>
</div>
</div>
<!-- Remove this element below if you don't want your off-canvas menu closable when clicked on the content -->
<div class="off-canvas-content overlay" data-target="#off_canvas"></div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler off-canvas-toggler" type="button" data-target="#off_canvas" aria-controls="offcanvasSupportedContent" aria-expanded="false" aria-label="Toggle off canvas menu">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand ml-3 mr-auto" href="#">
Off Canvas
</a>
</nav>
<div class="jumbotron jumbotron-fluid">
<div class="container-fluid">
<h1 class="display-4">Off Canvas for Bootstrap 4</h1>
<p class="lead">This is just an example off canvas component for Bootstrap 4</p>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h2>Off Canvas for Bootstrap 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="js/bootstrap-off-canvas.js"></script>
</body>
</html>