<!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">
<style>
aside { background-color: #E8E8E7; }
</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>
<div class="container">
<!-- first row - 3 equal columns -->
<section class="row">
<aside class="col-md-4"><h2>Column 1</h2></aside>
<article class="col-md-4"><h2>Column 2</h2></article>
<aside class="col-md-4"><h2>Column 3</h2></aside>
</section>
<section class="row">
<aside class="col-md-2"><h2>Column 1</h2></aside>
<article class="col-md-6"><h2>Column 2</h2></article>
<aside class="col-md-4"><h2>Column 3</h2></aside>
</section>
</div>
</body>
</html>
Listing 5.5
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3">This is a super long column that might not load correctly in all browsers</div>
<div class="col-xs-6 col-sm-3">short column</div>
<div class="col-xs-6 col-sm-3">short column</div>
<div class="col-xs-6 col-sm-3">short column</div>
</div>
</div>
Listing 5.6
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3">This is a super long column that might not load correctly in all browsers</div>
<div class="col-xs-6 col-sm-3">short column</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">short column</div>
<div class="col-xs-6 col-sm-3">short column</div>
</div>
</div>
Listing 5.7
<div class="container">
<div class="row">
<div class="col-md-8 col-md-push-4">The first column is eight wide, pushed over four.</div>
<div class="col-md-4 col-md-pull-8">The second column is four wide, pulled back eight.</div>
</div>
</div>
<!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>Sample Styled Labels</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.label {
-webkit-box-shadow: 2px 2px 2px #DFDFDF;
box-shadow: 2px 2px 2px #DFDFDF;
border: medium dotted #fff;
}
.label-default {
background-image: -webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(255,255,255,1.00) 100%);
background-image: linear-gradient(180deg,rgba(153,153,153,1.00) 0%,rgba(255,255,255,1.00) 100%);
color: #000000;
}
</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>
<h4> </h4>
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
</p>
</div>
</div>
</div>
</body>
</html>
Listing 6.5
<p>This is standard content.</p>
<p class="well">This content is inside a well</p>
<p class="well well-lg">This content is in a large well</p>
<p class="well well-sm">This content is in a small well</p>
<blockquote>This content is inside a blockquote</blockquote>
<div class="well"><blockquote>This content is inside a blockquote inside a well</blockquote></div>
Listing 6.6
<div class="panel panel-default">
<div class="panel-body">
This is a panel
</div>
</div>
Listing 6.7
<div class="panel panel-default">
<div class="panel-heading">
This is a panel heading without a title.
</div>
<div class="panel-body">
This content is in a panel.
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">This is a Panel Title</h3>
</div>
<div class="panel-body">
This content is in a panel.
</div>
</div>
Listing 6.8
<div class="panel panel-default">
<div class="panel-body">
This content is in a panel.
</div>
<div class="panel-footer">
This is content in a panel footer.
</div>
</div>
Listing 6.9
<div class="jumbotron">
<h1>This is a Jumbotron</h1>
<p>This is content inside the Jumbotron</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
<h1><h1> Bootstrap heading</h1>
<p>This is a paragraph with an <span class="h1">inline <h1> heading</span></p>
<h2><h2> Bootstrap heading</h2>
<p>This is a paragraph with an <span class="h2">inline <h2> heading</span></p>
<h3><h3> Bootstrap heading</h3>
<p>This is a paragraph with an <span class="h3">inline <h3> heading</span></p>
<h4><h4> Bootstrap heading</h4>
<p>This is a paragraph with an <span class="h4">inline <h4> heading</span></p>
<h5><h5> Bootstrap heading</h5>
<p>This is a paragraph with an <span class="h5">inline <h5> heading</span></p>
<h6><h6> Bootstrap heading</h6>
<p>This is a paragraph with an <span class="h6">inline <h6> heading</span></p>
<p>This is a paragraph with a <span class="h1">inline <h1> heading <span class="small">and secondary headline</span></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>This is a paragraph with a <span class="h2">inline <h2> heading <span class="small">and secondary headline</span></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>This is a paragraph with a <span class="h3">inline <h3> heading <span class="small">and secondary headline</span></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>This is a paragraph with a <span class="h4">inline <h4> heading <span class="small">and secondary headline</span></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>This is a paragraph with a <span class="h5">inline <h5> heading <span class="small">and secondary headline</span></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>This is a paragraph with a <span class="h6">inline <h6> heading <span class="small">and secondary headline</span></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
Listing 7.4
<!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 Image Replacement</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]-->
<style>
#mainhead {
background-image: url(images/headline.png);
background-repeat: no-repeat;
width:458px;
height:76px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-hide" id="mainhead">Headline</h1>
<p>And here is the page content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed erat facilisis, sollicitudin diam sed, condimentum est. Sed lobortis pellentesque odio, eu tristique est commodo non. Duis lacinia rhoncus elit, ut molestie mauris pulvinar ac. Suspendisse ac quam sem. Vestibulum vestibulum porttitor accumsan. Curabitur nunc nibh, fringilla vel sollicitudin sit amet, tristique vel velit. Etiam mattis ante id tempor convallis.</p>
<p>Morbi semper enim vitae metus viverra pretium. Aenean felis orci, aliquet eu felis elementum, finibus iaculis arcu. Nullam hendrerit laoreet aliquam. Fusce molestie consequat commodo. Integer quis malesuada mi. Cras in libero erat. Sed elementum metus nibh, sit amet tempor dolor dictum quis. Donec nec lectus in justo porta lacinia sollicitudin ac orci. Donec interdum, mauris ac tincidunt imperdiet, ex turpis lobortis nisi, ac dictum sem nisi non augue. Maecenas scelerisque iaculis tincidunt. Praesent eget augue interdum, imperdiet ex a, pellentesque libero. Sed ante tortor, auctor id facilisis sit amet, tristique id tellus.</p>
</div>
</body>
</html>
Listing 7.5
<div class="page-header">
<h1>Page Headline <small>For This Awesome Page</small></h1>
</div>
Listing 7.6
<blockquote>
<p>`Twas brillig, and the slithy toves<br>
Did gyre and gimble in the wabe:<br>
All mimsy were the borogoves,<br>
And the mome raths outgrabe.</p>
<footer>by Lewis Carroll from <cite title="The Jabberwocky">"The Jabberwocky"</cite></footer>
</blockquote>
Listing 7.7
<p>I wrote a book on <abbr title="HyperText Markup Language 5"
class="initialism">HTML5</abbr> and another on <abbr
title="Responsive Web Design" class="initialism">RWD</abbr>.</p>
Hour 8: Styling Tables
Listing 8.1
<table class="table">
<caption>Contact Information</caption>
<thead>
<tr>
<th>Name</th>
<th>Title</th>
<th>URL</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jennifer Kyrnin</td>
<td>Chief Dandylion Officer</td>
<td>http://htmljenn.com/</td>
<td>htmljenn@gmail.com</td>
</tr>
<tr>
<td>McKinley</td>
<td>Dandelion Observation Officer</td>
<td>http://responsivewebdesignin24hours.com/mckinley</td>
<td>mckinley@rwdin24hours.com</td>
</tr>
<tr>
<td>Rambler</td>
<td>Chief Taste Tester</td>
<td>http://responsivewebdesignin24hours.com/rambler</td>
<td>rambler@rwdin24hours.com</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><p>McKinley and Rambler are a dog and a horse, respectively.</p></td>
</tr>
</tfoot>
</table>
<div class="media">
<div class="media-left">
<img src="images/dandy-header-bg.png" class="media-object" alt="dandylions">
</div>
<div class="media-body">
<h4 class="media-heading">My Media Headline</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac mattis mauris. Donec blandit, augue in convallis hendrerit, arcu orci scelerisque neque, luctus gravida magna odio at massa. Sed lacinia fermentum velit vel pretium. In sit amet metus vitae libero iaculis maximus. In felis eros, rutrum sed rhoncus eu, tristique vitae diam. Phasellus condimentum ex ac erat imperdiet pretium.</p>
</div>
<div class="media-right">
<img src="images/dandy-header-bg.png" class="media-object" alt="dandylions">
</div>
</div>
Listing 10.3
<ul class="media-list">
<li class="media">
<div class="media-left">
<img src="images/dandy-header-bg.png" class="media-object" alt="dandylions">
</div>
<div class="media-body">
<h4 class="media-heading">My Media List Headline</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac mattis mauris. Donec blandit, augue in convallis hendrerit, arcu orci scelerisque neque, luctus gravida magna odio at massa. Sed lacinia fermentum velit vel pretium. In sit amet metus vitae libero iaculis maximus. In felis eros, rutrum sed rhoncus eu, tristique vitae diam. Phasellus condimentum ex ac erat imperdiet pretium.</p>
</div>
</li>
<li class="media">
<div class="media-left">
<img src="images/dandy-header-bg.png" class="media-object" alt="dandylions">
</div>
<div class="media-body">
<h4 class="media-heading">My Media List Headline</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac mattis mauris. Donec blandit, augue in convallis hendrerit, arcu orci scelerisque neque, luctus gravida magna odio at massa. Sed lacinia fermentum velit vel pretium. In sit amet metus vitae libero iaculis maximus. In felis eros, rutrum sed rhoncus eu, tristique vitae diam. Phasellus condimentum ex ac erat imperdiet pretium.</p>
</div>
</li>
</ul>
<!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 Stacked Navigation</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">
<div class="row">
<nav role="navigation" class="col-sm-3">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">About</a></li>
<li role="presentation"><a href="#">Articles</a></li>
<li role="presentation"><a href="#">Support</a></li>
</ul>
</nav>
<article class="col-sm-9">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam dolor sit amet erat porta auctor. Etiam eu ultrices orci, at tincidunt metus. Nunc at mauris rutrum, consectetur tellus ut, porttitor justo. Aenean vitae bibendum risus. Proin eros elit, lobortis et metus at, imperdiet tristique velit.</p>
</article>
</div>
</div>
</body>
</html>
<!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>Pull Quote Paragraph</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]-->
<style>
p.pull-right {
border: solid green 3px;
color: #F0E433;
background-color: #025301;
padding: 1em;
margin-left: 1em;
font-size: 1.5em;
}
</style>
</head>
<body>
<p> </p>
<div class="container">
<p class="col-sm-3 pull-right">“If dandelions were hard to grow, they would be most welcome on any lawn.”<br>
<span class="small">~Andrew V. Mason</span></p>
<p>Taraxacum /təˈræksəkʉm/ is a large genus of flowering plants in the family Asteraceae. They are native to Eurasia and North and South America, and two species, T. officinale and T. erythrospermum, are found as weeds worldwide. Both species are edible in their entirety. The common name dandelion (/ˈdændɨlaɪ.ən/ dan-di-ly-ən, from French dent-de-lion, meaning "lion's tooth") is given to members of the genus and, like other members of the Asteraceae family, they have very small flowers collected together into a composite flower head. Each single flower in a head is called a floret. Many Taraxacum species produce seeds asexually by apomixis, where the seeds are produced without pollination, resulting in offspring that are genetically identical to the parent plant.</p>
<p>The species of Taraxacum are tap-rooted biennial or perennial herbaceous plants, native to temperate areas of the globe.</p>
<p>The leaves are 5–25 cm long or longer, simple and basal, entire or lobed, forming a rosette above the central taproot. The flower heads are yellow to orange coloured, and are open in the daytime but closed at night. The heads are borne singly on a hollow stem (scape) that rises 1–10 cm or more above the leaves and exudes a milky latex when broken. A rosette may produce several flowering stems at a time. The flower heads are 2–5 cm in diameter and consist entirely of ray florets. The flower heads mature into spherical seed heads called "blowballs" or "clocks" (in both British and American English) containing many single-seeded fruits called achenes. Each achene is attached to a pappus of fine hairs, which enable wind-aided dispersal over long distances.</p>
<p>Text courtesy <a href="http://en.wikipedia.org/wiki/Taraxacum">Wikipedia</a>.</p>
</div>
</body>
</html>
Listing 13.6
<p class="center-block" style="width:300px;">
“If dandelions were hard to grow, they would be most welcome on any lawn.”<br>
<span class="small">~Andrew V. Mason</span>
</p>
Listing 13.7
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<!-- ... navigation to be skipped ... -->
<a name="content"></a>
