Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap Demos
<iframe width='100%' height='520' frameborder='0' src='http://aaronsimon.cartodb.com/viz/2df91922-bba1-11e4-9f40-0e0c41326911/embed_map' allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
<!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>Basic Bootstrap Template</title>
<!-- Bootstrap --><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>DocumentCloud</h1>
<p class="lead">This is what an embedded document collection looks like.</p>
</div><!-- /jumbotron -->
<p class="text-muted byline">By Amanda Hickman | <a href="//twitter.com/amandabee">@amandabee</a> | Mar 17, 2015</p>
<div id="DC-search-group-dhpraxis" class="DC-search-container"></div>
<script src="//s3.amazonaws.com/s3.documentcloud.org/embed/loader.js"></script>
<script>
dc.embed.load('http://www.documentcloud.org/search/embed/', {
q: "Group: dhpraxis",
container: "#DC-search-group-dhpraxis",
title: "Embedded Document Set Demo",
order: "source",
per_page: 12,
search_bar: true,
organization: 1463
});
</script>
</div><!-- /container -->
</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>Basic Bootstrap Template</title>
<!-- Bootstrap --><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<style type="text/css">
body {
background: #EEE;
}
</style>
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Bootstrap</h1>
<p class="lead">This is a really basic bootstrap template. </p>
</div><!-- /jumbotron -->
<p class="text-muted byline">By Amanda Hickman | <a href="//twitter.com/amandabee">@amandabee</a> | Mar 17, 2015</p>
<ul class="list-group pull-right col-lg-3">
<li class="list-group-item"><h3>More Specific Examples</h3></li>
<li class="list-group-item"><a href="documentcloud.html">DocumentCloud Embed</a></li>
<li class="list-group-item">
<span class="badge">TK</span>
<a href="cartodb.html">CartoDB Embed</a></li>
</ul>
<p>To use Bootstrap, you need everything inside the Bootstrap "container" div, but outside the "jumbotron". Bootstrap has some classes that make some basic layout things a whole lot easier. <a href="http://getbootstrap.com/css/#helper-classes-floats">Quickfloats</a> are handy for pullquotes. You can let them find their own size or use <a href="http://getbootstrap.com/css/#grid">the grid</a> to set their width.</p>
<p>Bootstrap does a lot of fancy footwork to customize layouts on tiny, small, medium and large screens. For now, I suggest that you stick to the <code>col-md-</code> classes. They're the most universal. Our goal here is to tell good stories, not master the finer points of CSS layout, with or without Bootstrap.</p>
<p>You might also want <code>p</code>aragraphs, <code>blockquote</code>s or <code>a</code>nchors, but you'll need them if you don't want your content to run together in a great heap. You can wrap paragaphs in <code>&lt;p&gt;</code> tags manually, but if you want some help with the basic pieces, I'm a huge fan of <a href="http://mouapp.com/">Mou</a>. You can compose in Markdown, a heavily simplified syntax, and then copy the resulting HTML into a Bootstrap template. Markdown is a very basic language -- you can't do a lot with it, so you can focus on the basics. </p>
</div><!-- /container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment