diff options
author | Mark Otto <markdotto@gmail.com> | 2014-12-02 02:19:15 +0300 |
---|---|---|
committer | Mark Otto <markdotto@gmail.com> | 2014-12-02 02:19:15 +0300 |
commit | 639a211344ea8720a860befb775c06c6d3cf3a76 (patch) | |
tree | 38a168147319fa659cc6f4c709a155649d4b7b2e /docs | |
parent | 9180e15e338f1502efac1461626e4735972d1b08 (diff) |
add new album example
Diffstat (limited to 'docs')
-rw-r--r-- | docs/examples/album/album.css | 85 | ||||
-rw-r--r-- | docs/examples/album/index.html | 130 |
2 files changed, 215 insertions, 0 deletions
diff --git a/docs/examples/album/album.css b/docs/examples/album/album.css new file mode 100644 index 0000000000..66380c0e60 --- /dev/null +++ b/docs/examples/album/album.css @@ -0,0 +1,85 @@ +body { + min-height: 75rem; /* Can be removed; just added for demo purposes */ +} + +.navbar { + margin-bottom: 0; +} + +.navbar-collapse .container-fluid { + padding: 2rem 2.5rem; + border-bottom: 1px solid #55595c; +} + +.navbar-collapse h4 { + color: #818a91; +} + +.navbar-collapse .text-muted { + color: #818a91; +} + +.about { + float: left; + max-width: 30rem; + margin-right: 3rem; +} + +.social a { + font-weight: 500; + color: #eceeef; +} +.social a:hover { + color: #fff; +} + +.jumbotron { + padding-top: 6rem; + padding-bottom: 6rem; + margin-bottom: 0; + background-color: #fff; +} + +.jumbotron p:last-child { + margin-bottom: 0; +} + +.jumbotron-heading { + font-weight: 300; +} + +.jumbotron .container { + max-width: 40rem; +} + +.album { + min-height: 50rem; /* Can be removed; just added for demo purposes */ + padding-top: 3rem; + padding-bottom: 3rem; + background-color: #f7f7f7; +} + +.card { + float: left; + width: 33.333%; + padding: .75rem; + margin-bottom: 2rem; + border: 0; +} + +.card > img { + margin-bottom: .75rem; +} + +.card-text { + font-size: 85%; +} + +footer { + padding-top: 3rem; + padding-bottom: 3rem; +} + +footer p { + margin-bottom: .25rem; +} diff --git a/docs/examples/album/index.html b/docs/examples/album/index.html new file mode 100644 index 0000000000..b88dd9de20 --- /dev/null +++ b/docs/examples/album/index.html @@ -0,0 +1,130 @@ +<!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"> + <meta name="description" content=""> + <meta name="author" content=""> + <link rel="icon" href="../../favicon.ico"> + + <title>Album example for Bootstrap</title> + + <!-- Bootstrap core CSS --> + <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> + + <!-- Custom styles for this template --> + <link href="album.css" rel="stylesheet"> + + <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> + <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> + </head> + + <body> + + <div class="navbar-collapse collapse inverse" id="navbar-header"> + <div class="container-fluid"> + <div class="about"> + <h4>About</h4> + <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p> + </div> + <div class="social"> + <h4>Contact</h4> + <ul class="list-unstyled"> + <li><a href="#">Follow on Twitter</a></li> + <li><a href="#">Like on Facebook</a></li> + <li><a href="#">Email me</a></li> + </ul> + </div> + </div> + </div> + <div class="navbar navbar-inverse navbar-static-top"> + <div class="container-fluid"> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header"> + ☰ + </button> + <a href="#" class="navbar-brand">Album</a> + </div> + </div> + + <section class="jumbotron text-center"> + <div class="container"> + <h1 class="jumbotron-heading">Album example</h1> + <p class="lead text-muted">Something short and leading about the collection below—it's contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p> + <p> + <a href="#" class="btn btn-primary">Main call to action</a> + <a href="#" class="btn btn-secondary">Secondary action</a> + </p> + </div> + </section> + + <section class="album text-muted"> + <div class="container"> + + <div class="row"> + <div class="card"> + <img data-src="holder.js/100%x280/thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100%x280/thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100%x280/thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + + <div class="card"> + <img data-src="holder.js/100%x280/thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100%x280/thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100%x280/thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + + <div class="card"> + <img data-src="holder.js/100%x280/thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100%x280/thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + <div class="card"> + <img data-src="holder.js/100%x280/thumb" alt="Card image cap"> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + </div> + </div> + + </div> + </section> + + <footer class="text-muted"> + <div class="container"> + <p class="pull-right"> + <a href="#">Back to top</a> + </p> + <p>Album example is © Bootstrap, but please download and customize it for yourself!</p> + <p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p> + </div> + </footer> + + <!-- Bootstrap core JavaScript + ================================================== --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> + <script src="../../assets/js/vendor/holder.js"></script> + <script> + $(function () { + Holder.addTheme("thumb", { background: "#55595c", foreground: "#eceeef", text: "Thumbnail" }); + }); + </script> + <script src="../../dist/js/bootstrap.min.js"></script> + </body> +</html> |