mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-30 22:52:24 +01:00
cards
This commit is contained in:
Mark Otto
parent
af0921062f
commit
25d6824e6c
@ -420,7 +420,7 @@ module.exports = function (grunt) {
|
||||
grunt.registerTask('dist-js', ['concat', 'uglify']);
|
||||
|
||||
// CSS distribution task.
|
||||
grunt.registerTask('less-compile', ['less:compileCore']);
|
||||
grunt.registerTask('less-compile', ['less:compileDocs', 'less:compileCore']);
|
||||
grunt.registerTask('dist-css', ['less-compile', 'autoprefixer', 'usebanner', 'csscomb', 'cssmin']);
|
||||
|
||||
// Docs distribution task.
|
||||
|
||||
136
dist/css/bootstrap.css
vendored
136
dist/css/bootstrap.css
vendored
@ -3746,6 +3746,142 @@ fieldset[disabled] .navbar-inverse .btn-link:hover,
|
||||
fieldset[disabled] .navbar-inverse .btn-link:focus {
|
||||
color: #444;
|
||||
}
|
||||
.card {
|
||||
position: relative;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
border: .075rem solid #eee;
|
||||
}
|
||||
.card-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
.card-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.card-actions .card-link + .card-link {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
.card-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.card-header {
|
||||
padding: .75rem 1.25rem;
|
||||
margin: -1.25rem -1.25rem 1.25rem;
|
||||
border-bottom: .075rem solid #eee;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
}
|
||||
.card-footer {
|
||||
padding: .75rem 1.25rem;
|
||||
margin: 1.25rem -1.25rem -1.25rem;
|
||||
border-top: .075rem solid #eee;
|
||||
border-radius: 0 0 .25rem .25rem;
|
||||
}
|
||||
.card-primary {
|
||||
background-color: #027de7;
|
||||
border-color: #027de7;
|
||||
}
|
||||
.card-success {
|
||||
background-color: #5cb85c;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
.card-info {
|
||||
background-color: #5bc0de;
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
.card-warning {
|
||||
background-color: #f0ad4e;
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
.card-danger {
|
||||
background-color: #d9534f;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
.card-inverse .card-header,
|
||||
.card-inverse .card-footer {
|
||||
border-bottom: .075rem solid rgba(255, 255, 255, .2);
|
||||
}
|
||||
.card-inverse .card-header,
|
||||
.card-inverse .card-footer,
|
||||
.card-inverse .card-title,
|
||||
.card-inverse .card-blockquote {
|
||||
color: #fff;
|
||||
}
|
||||
.card-inverse .card-link,
|
||||
.card-inverse .card-text,
|
||||
.card-inverse .card-blockquote > footer {
|
||||
color: rgba(255, 255, 255, .65);
|
||||
}
|
||||
.card-inverse .card-link:hover,
|
||||
.card-inverse .card-link:focus {
|
||||
color: #fff;
|
||||
}
|
||||
.card-blockquote {
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
.card-img {
|
||||
margin: -1.325rem;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
.card-img-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
.card-img-top {
|
||||
margin: -1.325rem -1.325rem 1.25rem;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
}
|
||||
.card-img-bottom {
|
||||
margin: 1.25rem -1.325rem -1.325rem;
|
||||
border-radius: 0 0 .25rem .25rem;
|
||||
}
|
||||
.card-set {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
border-spacing: 1.25rem 0;
|
||||
}
|
||||
.card-set .card {
|
||||
display: table-cell;
|
||||
float: none;
|
||||
max-width: none;
|
||||
}
|
||||
.card-set-wrapper {
|
||||
margin-right: -1.25rem;
|
||||
margin-left: -1.25rem;
|
||||
}
|
||||
.card-group {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
.card-group .card {
|
||||
display: table-cell;
|
||||
float: none;
|
||||
max-width: none;
|
||||
}
|
||||
.card-group .card + .card {
|
||||
margin-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
.card-columns {
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
column-count: 3;
|
||||
-webkit-column-gap: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
}
|
||||
.card-columns .card {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
/*margin-bottom: 1rem;*/
|
||||
}
|
||||
.breadcrumb {
|
||||
padding: .75rem 1rem;
|
||||
margin-bottom: 24px;
|
||||
|
||||
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -69,6 +69,18 @@
|
||||
- title: Navs
|
||||
- title: Navbar
|
||||
- title: New navbar
|
||||
- title: Card
|
||||
sections:
|
||||
- title: Basic example
|
||||
- title: Text alignment
|
||||
- title: Header and footer
|
||||
- title: Image caps
|
||||
- title: Image overlays
|
||||
- title: Inverted text
|
||||
- title: Background variants
|
||||
- title: Groups
|
||||
- title: Sets
|
||||
- title: Columns
|
||||
- title: Breadcrumb
|
||||
- title: Pagination
|
||||
- title: Alerts
|
||||
|
||||
@ -31,12 +31,12 @@
|
||||
================================================== -->
|
||||
<!-- 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>
|
||||
{% if site.github %}
|
||||
{% if jekyll.environment == "development" %}
|
||||
<script src="{{ site.baseurl }}dist/js/bootstrap.min.js"></script>
|
||||
{% else %}
|
||||
<script src="{{ site.baseurl }}dist/js/bootstrap.js"></script>
|
||||
{% endif %}
|
||||
{% if site.github %}
|
||||
{% if jekyll.environment == "development" %}
|
||||
<script src="{{ site.baseurl }}assets/js/docs.min.js"></script>
|
||||
{% else %}
|
||||
<script src="{{ site.baseurl }}assets/js/vendor/holder.js"></script>
|
||||
|
||||
@ -14,18 +14,10 @@
|
||||
</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
{% if site.github %}
|
||||
<link href="{{ site.baseurl }}dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
{% else %}
|
||||
{% if jekyll.environment == "development" %}
|
||||
<link href="{{ site.baseurl }}dist/css/bootstrap.css" rel="stylesheet">
|
||||
{% endif %}
|
||||
{% if page.slug == "css" or page.slug == "components" or page.slug == "js" %}
|
||||
<!-- Optional Bootstrap Theme -->
|
||||
{% if site.github %}
|
||||
<link href="data:text/css;charset=utf-8," data-href="{{ site.baseurl }}dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
|
||||
{% else %}
|
||||
<link href="data:text/css;charset=utf-8," data-href="{{ site.baseurl }}dist/css/bootstrap-theme.css" rel="stylesheet" id="bs-theme-stylesheet">
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<link href="{{ site.baseurl }}dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
{% endif %}
|
||||
|
||||
<!-- Documentation extras -->
|
||||
|
||||
2
docs/assets/css/docs.min.css
vendored
2
docs/assets/css/docs.min.css
vendored
File diff suppressed because one or more lines are too long
@ -6,8 +6,8 @@
|
||||
*/
|
||||
|
||||
// Import Bootstrap variables and mixins
|
||||
@import "../../../less/variables.less";
|
||||
@import "../../../less/mixins.less";
|
||||
@import "../../../less/_variables.less";
|
||||
@import "../../../less/_mixins.less";
|
||||
|
||||
// Import the syntax highlighting
|
||||
@import "syntax.less";
|
||||
@ -727,6 +727,10 @@ body {
|
||||
> h2 {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
> h3 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -862,6 +866,7 @@ body {
|
||||
margin-bottom: -1rem;
|
||||
border: solid #f7f7f9;
|
||||
border-width: .2rem 0 0;
|
||||
overflow: auto; // clearfix
|
||||
|
||||
@media (min-width: 480px) {
|
||||
border-width: .2rem;
|
||||
@ -871,6 +876,14 @@ body {
|
||||
.container {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Card examples should be horizontal
|
||||
> .card {
|
||||
float: left;
|
||||
max-width: 15rem;
|
||||
margin: .25rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
286
docs/components/card.md
Normal file
286
docs/components/card.md
Normal file
@ -0,0 +1,286 @@
|
||||
---
|
||||
layout: page
|
||||
title: Cards
|
||||
---
|
||||
|
||||
A **card** is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
|
||||
|
||||
If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails.
|
||||
|
||||
### Basic example
|
||||
|
||||
Cards require very little markup, but do require some additional classes to give you as much control as possible. Create a `.card`, add any heading with `.card-title`, and use `.card-text` on paragraphs. These classes ensure proper spacing and alignment.
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Text alignment
|
||||
|
||||
You can quickly change the text alignment of any card—in it's entirety or specific parts—with our [text align classes]().
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
|
||||
<div class="card text-center">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
|
||||
<div class="card text-right">
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Header and footer
|
||||
|
||||
Add an optional header and/or footer within a card.
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Featured
|
||||
</div>
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Quote
|
||||
</div>
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="card text-center">
|
||||
<div class="card-header">
|
||||
Featured
|
||||
</div>
|
||||
<h4 class="card-title">Special title treatment</h4>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
<div class="card-footer text-muted">
|
||||
2 days ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card text-center">
|
||||
<div class="card-header">
|
||||
Quote
|
||||
</div>
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
<div class="card-footer text-muted">
|
||||
2 days ago
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Image caps
|
||||
|
||||
Similar to headers and footers, cards include top and bottom image caps.
|
||||
|
||||
{% example html %}
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/240x180/" alt="Card image cap">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<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>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<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>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
<img class="card-img-bottom" data-src="holder.js/240x180/" alt="Card image cap">
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Image overlays
|
||||
|
||||
Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need `.card-inverse`.
|
||||
|
||||
{% example html %}
|
||||
<div class="card card-inverse">
|
||||
<img class="card-img" data-src="holder.js/270x270/#55595c:#373a3c/text:Card image" alt="Card image">
|
||||
<div class="card-img-overlay">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<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>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Inverted text
|
||||
|
||||
Cards include a class for quickly toggling the text color. By default, cards use dark text and assume a light background. **Add `.card-inverse` for white text on a dark background.** You'll need to specify the `background-color` and `border-color` to go with it, or use the [contextual backgrounds](#context-variations).
|
||||
|
||||
{% example html %}
|
||||
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Background variants
|
||||
|
||||
Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. Darker colors require the use of `.card-inverse`.
|
||||
|
||||
{% example html %}
|
||||
<div class="card card-inverse card-primary text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card card-inverse card-success text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card card-inverse card-info text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card card-inverse card-warning text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card card-inverse card-danger text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Groups
|
||||
|
||||
Set a `width` on the `.card-group`, content automatically sizes for equal columns via `display: table;` and `table-layout: fixed;`. And because we're using table styles, we also get equal height for free.
|
||||
|
||||
{% example html %}
|
||||
<div class="card-group">
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/270x180/" alt="Card image cap">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<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>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/270x180/" alt="Card image cap">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/270x180/" alt="Card image cap">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Sets
|
||||
|
||||
Get equal-width and equal-height cards by using two wrappers: `.card-set-wrapper` and a `.card-set`. We use table styles for the sizing and the gutters on `.card-set`. The `.card-set-wrapper` is used to negative margin out the `border-spacing` on the `.card-set`.
|
||||
|
||||
{% example html %}
|
||||
<div class="card-set-wrapper">
|
||||
<div class="card-set">
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/300x200/" alt="Card image cap">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Columns
|
||||
|
||||
Cards can be organized into columns by wrapping a group with `.card-columns`.
|
||||
|
||||
{% example html %}
|
||||
<div class="card-columns">
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/260x160/" alt="Card image cap">
|
||||
<h4 class="card-title">Card title that wraps to a new line</h4>
|
||||
<p class="card-text">This is a longer 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">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img-top" data-src="holder.js/260x160/" alt="Card image cap">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
<div class="card card-inverse card-primary text-center">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img class="card-img" data-src="holder.js/260x260/" alt="Card image">
|
||||
</div>
|
||||
<div class="card text-center">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
<div class="card text-right">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
136
docs/dist/css/bootstrap.css
vendored
136
docs/dist/css/bootstrap.css
vendored
@ -3746,6 +3746,142 @@ fieldset[disabled] .navbar-inverse .btn-link:hover,
|
||||
fieldset[disabled] .navbar-inverse .btn-link:focus {
|
||||
color: #444;
|
||||
}
|
||||
.card {
|
||||
position: relative;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
border: .075rem solid #eee;
|
||||
}
|
||||
.card-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
.card-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.card-actions .card-link + .card-link {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
.card-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.card-header {
|
||||
padding: .75rem 1.25rem;
|
||||
margin: -1.25rem -1.25rem 1.25rem;
|
||||
border-bottom: .075rem solid #eee;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
}
|
||||
.card-footer {
|
||||
padding: .75rem 1.25rem;
|
||||
margin: 1.25rem -1.25rem -1.25rem;
|
||||
border-top: .075rem solid #eee;
|
||||
border-radius: 0 0 .25rem .25rem;
|
||||
}
|
||||
.card-primary {
|
||||
background-color: #027de7;
|
||||
border-color: #027de7;
|
||||
}
|
||||
.card-success {
|
||||
background-color: #5cb85c;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
.card-info {
|
||||
background-color: #5bc0de;
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
.card-warning {
|
||||
background-color: #f0ad4e;
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
.card-danger {
|
||||
background-color: #d9534f;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
.card-inverse .card-header,
|
||||
.card-inverse .card-footer {
|
||||
border-bottom: .075rem solid rgba(255, 255, 255, .2);
|
||||
}
|
||||
.card-inverse .card-header,
|
||||
.card-inverse .card-footer,
|
||||
.card-inverse .card-title,
|
||||
.card-inverse .card-blockquote {
|
||||
color: #fff;
|
||||
}
|
||||
.card-inverse .card-link,
|
||||
.card-inverse .card-text,
|
||||
.card-inverse .card-blockquote > footer {
|
||||
color: rgba(255, 255, 255, .65);
|
||||
}
|
||||
.card-inverse .card-link:hover,
|
||||
.card-inverse .card-link:focus {
|
||||
color: #fff;
|
||||
}
|
||||
.card-blockquote {
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
.card-img {
|
||||
margin: -1.325rem;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
.card-img-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
.card-img-top {
|
||||
margin: -1.325rem -1.325rem 1.25rem;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
}
|
||||
.card-img-bottom {
|
||||
margin: 1.25rem -1.325rem -1.325rem;
|
||||
border-radius: 0 0 .25rem .25rem;
|
||||
}
|
||||
.card-set {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
border-spacing: 1.25rem 0;
|
||||
}
|
||||
.card-set .card {
|
||||
display: table-cell;
|
||||
float: none;
|
||||
max-width: none;
|
||||
}
|
||||
.card-set-wrapper {
|
||||
margin-right: -1.25rem;
|
||||
margin-left: -1.25rem;
|
||||
}
|
||||
.card-group {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
.card-group .card {
|
||||
display: table-cell;
|
||||
float: none;
|
||||
max-width: none;
|
||||
}
|
||||
.card-group .card + .card {
|
||||
margin-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
.card-columns {
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
column-count: 3;
|
||||
-webkit-column-gap: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
}
|
||||
.card-columns .card {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
/*margin-bottom: 1rem;*/
|
||||
}
|
||||
.breadcrumb {
|
||||
padding: .75rem 1rem;
|
||||
margin-bottom: 24px;
|
||||
|
||||
2
docs/dist/css/bootstrap.css.map
vendored
2
docs/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
196
less/_card.less
Normal file
196
less/_card.less
Normal file
@ -0,0 +1,196 @@
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
border: .075rem solid #eee;
|
||||
}
|
||||
.card-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
.card-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.card-actions {
|
||||
.card-link + .card-link {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
}
|
||||
.card-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Optional textual caps
|
||||
//
|
||||
|
||||
.card-header {
|
||||
padding: .75rem 1.25rem;
|
||||
margin: -1.25rem -1.25rem 1.25rem;
|
||||
border-bottom: .075rem solid #eee;
|
||||
.border-radius(.25rem .25rem 0 0);
|
||||
}
|
||||
.card-footer {
|
||||
padding: .75rem 1.25rem;
|
||||
margin: 1.25rem -1.25rem -1.25rem;
|
||||
border-top: .075rem solid #eee;
|
||||
.border-radius(0 0 .25rem .25rem);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Background variations
|
||||
//
|
||||
|
||||
.card-primary {
|
||||
background-color: @brand-primary;
|
||||
border-color: @brand-primary;
|
||||
}
|
||||
.card-success {
|
||||
background-color: @brand-success;
|
||||
border-color: @brand-success;
|
||||
}
|
||||
.card-info {
|
||||
background-color: @brand-info;
|
||||
border-color: @brand-info;
|
||||
}
|
||||
.card-warning {
|
||||
background-color: @brand-warning;
|
||||
border-color: @brand-warning;
|
||||
}
|
||||
.card-danger {
|
||||
background-color: @brand-danger;
|
||||
border-color: @brand-danger;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Inverse text within a card for use with dark backgrounds
|
||||
//
|
||||
|
||||
.card-inverse {
|
||||
.card-header,
|
||||
.card-footer {
|
||||
border-bottom: .075rem solid rgba(255,255,255,.2);
|
||||
}
|
||||
.card-header,
|
||||
.card-footer,
|
||||
.card-title,
|
||||
.card-blockquote {
|
||||
color: #fff;
|
||||
}
|
||||
.card-link,
|
||||
.card-text,
|
||||
.card-blockquote > footer {
|
||||
color: rgba(255,255,255,.65);
|
||||
}
|
||||
.card-link:hover,
|
||||
.card-link:focus {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Blockquote
|
||||
//
|
||||
|
||||
.card-blockquote {
|
||||
border-left: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Card image
|
||||
.card-img {
|
||||
margin: -1.325rem;
|
||||
.border-radius(.25rem);
|
||||
}
|
||||
.card-img-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Card image caps
|
||||
.card-img-top {
|
||||
margin: -1.325rem -1.325rem 1.25rem;
|
||||
.border-radius(.25rem .25rem 0 0);
|
||||
}
|
||||
.card-img-bottom {
|
||||
margin: 1.25rem -1.325rem -1.325rem;
|
||||
.border-radius(0 0 .25rem .25rem);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Card set
|
||||
//
|
||||
|
||||
.card-set {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
border-spacing: 1.25rem 0;
|
||||
|
||||
.card {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
.card-set-wrapper {
|
||||
margin-left: -1.25rem;
|
||||
margin-right: -1.25rem;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Card groups
|
||||
//
|
||||
|
||||
.card-group {
|
||||
display: table;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
|
||||
.card {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
max-width: none;
|
||||
|
||||
+ .card {
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Card
|
||||
//
|
||||
|
||||
.card-columns {
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
column-count: 3;
|
||||
-webkit-column-gap: 1rem;
|
||||
-moz-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
|
||||
.card {
|
||||
display: inline-block;
|
||||
width: 100%; // Don't let them exceed the column width
|
||||
/*margin-bottom: 1rem;*/
|
||||
}
|
||||
}
|
||||
1
less/bootstrap.less
vendored
1
less/bootstrap.less
vendored
@ -22,6 +22,7 @@
|
||||
@import "_input-group.less";
|
||||
@import "_nav.less";
|
||||
@import "_navbar.less";
|
||||
@import "_card.less";
|
||||
@import "_breadcrumb.less";
|
||||
@import "_pagination.less";
|
||||
@import "_pager.less";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user