Last active
August 10, 2023 17:43
-
-
Save amandabee/ed311bf7d808f8295321 to your computer and use it in GitHub Desktop.
Bootstrap Demos
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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">amandabee | |
<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 | 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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 | 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><p></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