-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathtyb-code16.1.html
45 lines (40 loc) · 4.85 KB
/
tyb-code16.1.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
<!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">
<title>Bootstrap Modal Windows</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="col-md-4">
<ul class="list-group" data-spy="affix">
<li class="list-group-item"><a href="#section1">Section One</a></li>
<li class="list-group-item"><a href="#section2">Section Two</a></li>
<li class="list-group-item"><a href="#section3">Section Three</a></li>
</ul>
</nav>
<div class="col-md-8">
<h2 id="section1">Section One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in orci elit. Donec eu mauris aliquet, efficitur quam eu, ullamcorper tellus. Sed odio libero, bibendum et eleifend quis, consectetur sed massa. In neque tortor, pulvinar sit amet varius in, facilisis vitae ligula. In est nulla, bibendum eu scelerisque eget, ultricies ut nulla. Aenean accumsan, ante eget malesuada rhoncus, ligula nibh blandit leo, sollicitudin aliquam sapien ante vitae elit. Fusce pulvinar vehicula lectus, ut accumsan metus. Sed porta tincidunt fermentum. Pellentesque sollicitudin augue justo, eget imperdiet arcu vestibulum et. Duis elementum facilisis posuere.</p>
<p>Duis id ex lobortis, semper orci ac, mattis sapien. Praesent sed rutrum elit. Suspendisse vel lacinia diam. Nullam id condimentum dolor, auctor eleifend erat. Nulla nec facilisis nibh. Morbi in condimentum ipsum. Aenean sit amet suscipit libero. Nam ultricies erat pretium velit efficitur condimentum. Cras condimentum, urna vel ultricies feugiat, orci ex varius nibh, id luctus mi est id sem. Donec porttitor dui sit amet egestas convallis. Maecenas dignissim efficitur tincidunt. Sed ac nunc porta, mollis velit imperdiet, volutpat tellus. Sed sagittis id nisi eu congue. Praesent accumsan sed nunc non venenatis.</p>
<h2 id="section2">Section Two</h2>
<p>Suspendisse ornare ipsum nec velit euismod egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur fringilla id ipsum eget tincidunt. Vivamus tempor, odio non ullamcorper finibus, urna nulla tincidunt ipsum, ut lacinia nulla massa sagittis justo. Proin et urna tristique, aliquam ligula non, tempus lectus. Curabitur facilisis sodales sem quis cursus. Praesent lacinia pulvinar ultricies. Vestibulum rutrum ligula scelerisque, consequat tortor a, aliquet nisi. Mauris elementum accumsan urna id pharetra. Aliquam ut congue turpis. Nam iaculis imperdiet malesuada. Donec eu odio elementum, blandit purus at, vehicula eros. Nullam porta, nibh quis placerat aliquam, magna ex efficitur diam, sit amet ultricies nunc metus vitae dolor. Maecenas risus mi, tincidunt et urna at, posuere dapibus massa. Pellentesque rutrum elementum fermentum. Curabitur sodales elit vel dignissim placerat.</p>
<p>Aliquam lobortis metus sapien, in efficitur ante posuere id. Mauris non tortor ligula. Integer commodo magna ut ultricies mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec iaculis arcu ut metus dictum, id interdum est interdum. Nam ac consectetur ex, sed ornare nisi. Morbi scelerisque ac tellus varius convallis. Cras fringilla metus metus, a laoreet leo congue sit amet. Duis fringilla luctus mi. Integer iaculis diam vel ipsum sagittis, quis interdum urna posuere. Nulla sed pellentesque ante, eget faucibus dui. Curabitur ullamcorper lacus quam, nec facilisis ipsum rhoncus a. Maecenas egestas purus lorem, eget elementum sem convallis eu. Nullam congue pellentesque eros et lobortis.</p>
<h2 id="section3">Section Three</h2>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec condimentum, odio ut porta auctor, mi turpis laoreet magna, nec tincidunt tellus nisi et odio. Nullam eget urna purus. Integer tristique, enim at euismod mollis, dui tortor molestie lectus, id vestibulum lorem erat eget orci. Donec vitae purus vel magna fringilla pretium. Morbi dapibus ornare accumsan. Curabitur fringilla nibh dui. Sed vel mauris in eros aliquet ultrices. Sed sem orci, ornare non suscipit at, congue nec tortor. Vivamus a dolor lobortis, varius orci vel, imperdiet massa. Fusce mattis efficitur massa vitae commodo.</p>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>