-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfirstBootstrap.html
60 lines (51 loc) · 3.01 KB
/
firstBootstrap.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<header class="jumbotron bg-dark text-light">
<h1>Experimenting with Bootstrap</h1>
</header>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab"
aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab"
aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi sed quae, accusamus alias, maiores magnam
dolor fuga natus, voluptatum beatae explicabo id atque! Temporibus sunt, est odio delectus iste facilis?
Aliquid et, iste, sapiente doloremque quibusdam perspiciatis officia ad iure suscipit quia repellat
accusamus, voluptate ipsam quis error! Asperiores eveniet minima minus tenetur molestiae quasi magni
consequatur ab consequuntur magnam?
Blanditiis magnam, sunt numquam sapiente eaque doloribus quia architecto nostrum eum molestiae. Ipsam ipsa
dignissimos atque aut eos error blanditiis provident ipsum minus at aliquam, voluptate facilis impedit
facere soluta.
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
This is my profile, it's a nice profile don't you think? Maybe I'll stick a picture here if I want to.
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
If you need to contact me, you can by reaching out on Twitter.
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>