]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | <!DOCTYPE html> |
2 | <html lang="en"> | |
3 | <head> | |
4 | <meta charset="utf-8"> | |
5 | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
6 | <meta name="description" content=""> | |
7 | <meta name="author" content=""> | |
8 | <link rel="icon" href="../../favicon.ico"> | |
9 | ||
10 | <title>Album example for Bootstrap</title> | |
11 | ||
12 | <!-- Bootstrap core CSS --> | |
13 | <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> | |
14 | ||
15 | <!-- Custom styles for this template --> | |
16 | <link href="album.css" rel="stylesheet"> | |
17 | </head> | |
18 | ||
19 | <body> | |
20 | ||
21 | <div class="collapse bg-inverse" id="navbarHeader"> | |
22 | <div class="container"> | |
23 | <div class="row"> | |
24 | <div class="col-sm-8 py-4"> | |
25 | <h4 class="text-white">About</h4> | |
26 | <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> | |
27 | </div> | |
28 | <div class="col-sm-4 py-4"> | |
29 | <h4 class="text-white">Contact</h4> | |
30 | <ul class="list-unstyled"> | |
31 | <li><a href="#" class="text-white">Follow on Twitter</a></li> | |
32 | <li><a href="#" class="text-white">Like on Facebook</a></li> | |
33 | <li><a href="#" class="text-white">Email me</a></li> | |
34 | </ul> | |
35 | </div> | |
36 | </div> | |
37 | </div> | |
38 | </div> | |
39 | <div class="navbar navbar-inverse bg-inverse"> | |
40 | <div class="container d-flex justify-content-between"> | |
41 | <a href="#" class="navbar-brand">Album</a> | |
42 | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> | |
43 | <span class="navbar-toggler-icon"></span> | |
44 | </button> | |
45 | </div> | |
46 | </div> | |
47 | ||
48 | <section class="jumbotron text-center"> | |
49 | <div class="container"> | |
50 | <h1 class="jumbotron-heading">Album example</h1> | |
51 | <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p> | |
52 | <p> | |
53 | <a href="#" class="btn btn-primary">Main call to action</a> | |
54 | <a href="#" class="btn btn-secondary">Secondary action</a> | |
55 | </p> | |
56 | </div> | |
57 | </section> | |
58 | ||
59 | <div class="album text-muted"> | |
60 | <div class="container"> | |
61 | ||
62 | <div class="row"> | |
63 | <div class="card"> | |
64 | <img data-src="holder.js/100px280/thumb" alt="Card image cap"> | |
65 | <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> | |
66 | </div> | |
67 | <div class="card"> | |
68 | <img data-src="holder.js/100px280/thumb" alt="Card image cap"> | |
69 | <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> | |
70 | </div> | |
71 | <div class="card"> | |
72 | <img data-src="holder.js/100px280/thumb" alt="Card image cap"> | |
73 | <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> | |
74 | </div> | |
75 | ||
76 | <div class="card"> | |
77 | <img data-src="holder.js/100px280/thumb" alt="Card image cap"> | |
78 | <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> | |
79 | </div> | |
80 | <div class="card"> | |
81 | <img data-src="holder.js/100px280/thumb" alt="Card image cap"> | |
82 | <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> | |
83 | </div> | |
84 | <div class="card"> | |
85 | <img data-src="holder.js/100px280/thumb" alt="Card image cap"> | |
86 | <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> | |
87 | </div> | |
88 | ||
89 | <div class="card"> | |
90 | <img data-src="holder.js/100px280/thumb" alt="Card image cap"> | |
91 | <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> | |
92 | </div> | |
93 | <div class="card"> | |
94 | <img data-src="holder.js/100px280/thumb" alt="Card image cap"> | |
95 | <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> | |
96 | </div> | |
97 | <div class="card"> | |
98 | <img data-src="holder.js/100px280/thumb" alt="Card image cap"> | |
99 | <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> | |
100 | </div> | |
101 | </div> | |
102 | ||
103 | </div> | |
104 | </div> | |
105 | ||
106 | <footer class="text-muted"> | |
107 | <div class="container"> | |
108 | <p class="float-right"> | |
109 | <a href="#">Back to top</a> | |
110 | </p> | |
111 | <p>Album example is © Bootstrap, but please download and customize it for yourself!</p> | |
112 | <p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p> | |
113 | </div> | |
114 | </footer> | |
115 | ||
116 | <!-- Bootstrap core JavaScript | |
117 | ================================================== --> | |
118 | <!-- Placed at the end of the document so the pages load faster --> | |
119 | <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> | |
120 | <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> | |
121 | <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> | |
122 | <script src="../../assets/js/vendor/holder.min.js"></script> | |
123 | <script> | |
124 | $(function () { | |
125 | Holder.addTheme("thumb", { background: "#55595c", foreground: "#eceeef", text: "Thumbnail" }); | |
126 | }); | |
127 | </script> | |
128 | <script src="../../dist/js/bootstrap.min.js"></script> | |
129 | <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> | |
130 | <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> | |
131 | </body> | |
132 | </html> |