Skip to content

B
bootstrap
Commit 25d6824e authored by Mark Otto's avatar Mark Otto
Browse files
Options

cards

parent af092106
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 791 additions and 19 deletions
Gruntfile.js
View file @ 25d6824e
......@@ -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.
......
dist/css/bootstrap.css
View file @ 25d6824e
......@@ -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;
......
dist/css/bootstrap.css.map
View file @ 25d6824e
This diff was suppressed by a .gitattributes entry.
dist/css/bootstrap.min.css
View file @ 25d6824e
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/_data/nav.yml
View file @ 25d6824e
......@@ -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
......
docs/_includes/footer.html
View file @ 25d6824e
......@@ -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>
......
docs/_includes/header.html
View file @ 25d6824e
......@@ -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 -->
......
docs/assets/css/docs.min.css
View file @ 25d6824e
This diff is collapsed.
docs/assets/less/docs.less
View file @ 25d6824e
......@@ -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;
}
}
......
docs/components/card.md 0 → 100644
View file @ 25d6824e
This diff is collapsed.
docs/dist/css/bootstrap.css
View file @ 25d6824e
......@@ -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;
......
docs/dist/css/bootstrap.css.map
View file @ 25d6824e
This diff was suppressed by a .gitattributes entry.
docs/dist/css/bootstrap.min.css
View file @ 25d6824e
This source diff could not be displayed because it is too large. You can view the blob instead.
less/_card.less 0 → 100644
View file @ 25d6824e
//
// 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;*/
}
}
less/bootstrap.less
View file @ 25d6824e
......@@ -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";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment