<!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 101 Template</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>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<!-- Include all compiled plugins (below), or include individual
files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Listing 3.5
<!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 Starter Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
</style>
<!-- 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>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any
new project.<br> All you get is this text and a mostly barebones
HTML document.</p>
</div>
</div><!-- /.container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<!-- Include all compiled plugins (below), or include individual
files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Hour 4: Understanding Normalize.CSS and the Basics of Bootstrap CSS
Listing 4.1
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Basic Bootstrap page</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>A Basic Bootstrap Page</h1>
<p>
Lorem <a href="#">ipsum dolor sit</a> amet, consectetur adipiscing elit. Donec ut elit sed turpis sodales mattis. Pellentesque ex ipsum, pretium eu turpis non, interdum laoreet lacus. Praesent faucibus, nisl ac tempor bibendum, felis turpis fringilla tellus, eu tristique risus magna sit amet velit. Suspendisse eget libero ut purus egestas tempor quis et arcu. </p>
<p>
Etiam mollis tortor eget arcu sodales, nec commodo <a href="#">tellus feugiat</a>. Fusce ornare sed mauris at efficitur. Sed in tortor eu diam elementum ultrices. Quisque euismod pharetra metus sit amet sollicitudin. Fusce sollicitudin velit lorem, non condimentum justo congue id. </p>
<ul>
<li><a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis tristique augue ac turpis vulputate interdum.</li>
<li>Maecenas bibendum mauris tincidunt, aliquet metus ut, pellentesque neque.</li>
</ul>
<dl>
<dt>Proin <a href="#">placerat</a> ligula ut commodo volutpat.</dt>
<dd>Proin sed tortor eget enim maximus efficitur vitae porta purus.</dd>
<dt>Phasellus placerat ligula ut justo varius, at pretium dolor interdum.</dt>
<dd>Proin hendrerit augue sed massa pellentesque porttitor.</dd>
</dl>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
