mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-10 03:46:13 +01:00
b46f05a948
This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
209 lines
10 KiB
HTML
209 lines
10 KiB
HTML
---
|
||
layout: examples
|
||
title: Album example
|
||
extra_css:
|
||
- "album.css"
|
||
---
|
||
|
||
<header>
|
||
<div class="collapse bg-dark" id="navbarHeader">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-sm-8 col-md-7 py-4">
|
||
<h4 class="text-white">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="col-sm-4 offset-md-1 py-4">
|
||
<h4 class="text-white">Contact</h4>
|
||
<ul class="list-unstyled">
|
||
<li><a href="#" class="text-white">Follow on Twitter</a></li>
|
||
<li><a href="#" class="text-white">Like on Facebook</a></li>
|
||
<li><a href="#" class="text-white">Email me</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="navbar navbar-dark bg-dark shadow-sm">
|
||
<div class="container d-flex justify-content-between">
|
||
<a href="#" class="navbar-brand d-flex align-items-center">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
|
||
<strong>Album</strong>
|
||
</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main role="main">
|
||
|
||
<section class="jumbotron text-center">
|
||
<div class="container">
|
||
<h1>Album example</h1>
|
||
<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>
|
||
<p>
|
||
<a href="#" class="btn btn-primary my-2">Main call to action</a>
|
||
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="album py-5 bg-light">
|
||
<div class="container">
|
||
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<div class="card mb-4 shadow-sm">
|
||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||
<div class="card-body">
|
||
<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 class="d-flex justify-content-between align-items-center">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||
</div>
|
||
<small class="text-muted">9 mins</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card mb-4 shadow-sm">
|
||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||
<div class="card-body">
|
||
<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 class="d-flex justify-content-between align-items-center">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||
</div>
|
||
<small class="text-muted">9 mins</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card mb-4 shadow-sm">
|
||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||
<div class="card-body">
|
||
<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 class="d-flex justify-content-between align-items-center">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||
</div>
|
||
<small class="text-muted">9 mins</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="card mb-4 shadow-sm">
|
||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||
<div class="card-body">
|
||
<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 class="d-flex justify-content-between align-items-center">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||
</div>
|
||
<small class="text-muted">9 mins</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card mb-4 shadow-sm">
|
||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||
<div class="card-body">
|
||
<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 class="d-flex justify-content-between align-items-center">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||
</div>
|
||
<small class="text-muted">9 mins</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card mb-4 shadow-sm">
|
||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||
<div class="card-body">
|
||
<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 class="d-flex justify-content-between align-items-center">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||
</div>
|
||
<small class="text-muted">9 mins</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="card mb-4 shadow-sm">
|
||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||
<div class="card-body">
|
||
<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 class="d-flex justify-content-between align-items-center">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||
</div>
|
||
<small class="text-muted">9 mins</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card mb-4 shadow-sm">
|
||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||
<div class="card-body">
|
||
<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 class="d-flex justify-content-between align-items-center">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||
</div>
|
||
<small class="text-muted">9 mins</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card mb-4 shadow-sm">
|
||
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
|
||
<div class="card-body">
|
||
<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 class="d-flex justify-content-between align-items-center">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||
</div>
|
||
<small class="text-muted">9 mins</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<footer class="text-muted">
|
||
<div class="container">
|
||
<p class="float-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="{{< docsref "/getting-started/introduction" >}}">getting started guide</a>.</p>
|
||
</div>
|
||
</footer>
|