rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

fuck around with card borders and more

Browse Source
This commit is contained in:
Mark Otto 2016-01-17 18:55:24 -08:00
parent 94e27cdd6e
commit 955e0405ea
4 changed files with 125 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
docs/components/card.md
View File

@ -211,6 +211,89 @@ Add an optional header and/or footer within a card.
</div>
{% endexample %}
## Heading nav
- Custom card nav (full width)
- Tabs
- Pills
- Alignment:
- left
- center
- right
{% example html %}
<div class="card text-xs-center">
<div class="card-header">
<ul class="nav card-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-block">
<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>
{% endexample %}
Or, use Bootstrap's nav pills or tabs to a card header. Be sure to always include a `.pull-*-*` utility class for proper alignment.
{% example html %}
<div class="card text-xs-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs pull-xs-left">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-block">
<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>
{% endexample %}
{% example html %}
<div class="card text-xs-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills pull-xs-left">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-block">
<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>
{% endexample %}
## Image caps
Similar to headers and footers, cards include top and bottom image caps.

44
scss/_card.scss
View File

@ -7,8 +7,10 @@
display: block;
margin-bottom: $card-spacer-y;
background-color: $card-bg;
border: $card-border-width solid $card-border-color;
// border: $card-border-width solid $card-border-color;
@include border-radius($card-border-radius);
// Doesn't use mixin so that cards always have a "border"
box-shadow: inset 0 0 0 $card-border-width $card-border-color;
}
.card-block {
@ -72,7 +74,9 @@
@include clearfix;
padding: $card-spacer-y $card-spacer-x;
background-color: $card-cap-bg;
border-bottom: $card-border-width solid $card-border-color;
// border-bottom: $card-border-width solid $card-border-color;
// Doesn't use mixin so that cards always have a "border"
box-shadow: inset 0 0 0 $card-border-width $card-border-color;
&:first-child {
@include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
@ -83,7 +87,9 @@
@include clearfix;
padding: $card-spacer-y $card-spacer-x;
background-color: $card-cap-bg;
border-top: $card-border-width solid $card-border-color;
// border-top: $card-border-width solid $card-border-color;
// Doesn't use mixin so that cards always have a "border"
box-shadow: inset 0 0 0 $card-border-width $card-border-color;
&:last-child {
@include border-radius(0 0 $card-border-radius-inner $card-border-radius-inner);
@ -91,6 +97,38 @@
}
//
// Header navs
//
.card-header-tabs {
margin-right: -($card-spacer-x / 2);
margin-bottom: -$card-spacer-y;
margin-left: -($card-spacer-x / 2);
border-bottom: 0;
.nav-item {
margin-bottom: 0;
}
}
.card-header-pills {
margin-right: -($card-spacer-x / 2);
margin-left: -($card-spacer-x / 2);
}
.card-nav {
.nav-item {
float: left;
+ .nav-item {
margin-left: $nav-item-margin;
}
}
}
//
// Background variations
//

13
scss/_list-group.scss
View File

@ -34,21 +34,8 @@
.list-group-flush {
.list-group-item {
border-width: $list-group-border-width 0;
border-radius: 0;
}
&:first-child {
.list-group-item:first-child {
border-top: 0;
}
}
&:last-child {
.list-group-item:last-child {
border-bottom: 0;
}
}
}

2
scss/_variables.scss
View File

@ -474,7 +474,7 @@ $card-spacer-x: 1.25rem !default;
$card-spacer-y: .75rem !default;
$card-border-width: 1px !default;
$card-border-radius: $border-radius !default;
$card-border-color: #e5e5e5 !default;
$card-border-color: rgba(0,0,0,.125) !default;
$card-border-radius-inner: $card-border-radius !default;
$card-cap-bg: #f5f5f5 !default;
$card-bg: #fff !default;