simpler type, docs callout for reproducing the v3 style headings and small text
This commit is contained in:
parent
314161cb17
commit
b1a74195c8
|
@ -481,61 +481,18 @@ h1, h2, h3, h4, h5, h6,
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
h1 small,
|
||||
h1 .small, h2 small,
|
||||
h2 .small, h3 small,
|
||||
h3 .small, h4 small,
|
||||
h4 .small, h5 small,
|
||||
h5 .small, h6 small,
|
||||
h6 .small,
|
||||
.h1 small,
|
||||
.h1 .small, .h2 small,
|
||||
.h2 .small, .h3 small,
|
||||
.h3 .small, .h4 small,
|
||||
.h4 .small, .h5 small,
|
||||
.h5 .small, .h6 small,
|
||||
.h6 .small {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: #818a91;
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3 {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
h1 small,
|
||||
h1 .small, .h1 small,
|
||||
.h1 .small,
|
||||
h2 small,
|
||||
h2 .small, .h2 small,
|
||||
.h2 .small,
|
||||
h3 small,
|
||||
h3 .small, .h3 small,
|
||||
.h3 .small {
|
||||
font-size: 65%;
|
||||
}
|
||||
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
h4 small,
|
||||
h4 .small, .h4 small,
|
||||
.h4 .small,
|
||||
h5 small,
|
||||
h5 .small, .h5 small,
|
||||
.h5 .small,
|
||||
h6 small,
|
||||
h6 .small, .h6 small,
|
||||
.h6 .small {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
h1, .h1 {
|
||||
font-size: 2.75rem;
|
||||
}
|
||||
|
@ -594,7 +551,8 @@ hr {
|
|||
|
||||
small,
|
||||
.small {
|
||||
font-size: 85%;
|
||||
font-size: 80%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
mark,
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -66,41 +66,16 @@ All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` cla
|
|||
<h6>h6. Bootstrap heading</h6>
|
||||
{% endhighlight %}
|
||||
|
||||
Create lighter, secondary text in any heading with a generic `<small>` tag or the `.small` class.
|
||||
### Customizing headings
|
||||
|
||||
<div class="bd-example bd-example-type">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><h1>h1. Bootstrap heading <small>Secondary text</small></h1></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h2>h2. Bootstrap heading <small>Secondary text</small></h2></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h3>h3. Bootstrap heading <small>Secondary text</small></h3></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h4>h4. Bootstrap heading <small>Secondary text</small></h4></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h5>h5. Bootstrap heading <small>Secondary text</small></h5></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><h6>h6. Bootstrap heading <small>Secondary text</small></h6></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
|
||||
|
||||
{% highlight html %}
|
||||
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
|
||||
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
|
||||
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
|
||||
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
|
||||
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
|
||||
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
|
||||
{% endhighlight %}
|
||||
{% example html %}
|
||||
<h3>
|
||||
Fancy display heading
|
||||
<small class="text-muted">With faded secondary text</small>
|
||||
</h3>
|
||||
{% endexample %}
|
||||
|
||||
## Display headings
|
||||
|
||||
|
@ -125,7 +100,6 @@ Traditional heading elements are designed to work best in the meat of your page
|
|||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
## Lead
|
||||
|
||||
Make a paragraph stand out by adding `.lead`.
|
||||
|
|
|
@ -481,61 +481,18 @@ h1, h2, h3, h4, h5, h6,
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
h1 small,
|
||||
h1 .small, h2 small,
|
||||
h2 .small, h3 small,
|
||||
h3 .small, h4 small,
|
||||
h4 .small, h5 small,
|
||||
h5 .small, h6 small,
|
||||
h6 .small,
|
||||
.h1 small,
|
||||
.h1 .small, .h2 small,
|
||||
.h2 .small, .h3 small,
|
||||
.h3 .small, .h4 small,
|
||||
.h4 .small, .h5 small,
|
||||
.h5 .small, .h6 small,
|
||||
.h6 .small {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: #818a91;
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3 {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
h1 small,
|
||||
h1 .small, .h1 small,
|
||||
.h1 .small,
|
||||
h2 small,
|
||||
h2 .small, .h2 small,
|
||||
.h2 .small,
|
||||
h3 small,
|
||||
h3 .small, .h3 small,
|
||||
.h3 .small {
|
||||
font-size: 65%;
|
||||
}
|
||||
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
h4 small,
|
||||
h4 .small, .h4 small,
|
||||
.h4 .small,
|
||||
h5 small,
|
||||
h5 .small, .h5 small,
|
||||
.h5 .small,
|
||||
h6 small,
|
||||
h6 .small, .h6 small,
|
||||
.h6 .small {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
h1, .h1 {
|
||||
font-size: 2.75rem;
|
||||
}
|
||||
|
@ -594,7 +551,8 @@ hr {
|
|||
|
||||
small,
|
||||
.small {
|
||||
font-size: 85%;
|
||||
font-size: 80%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
mark,
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -13,34 +13,17 @@ h1, h2, h3, h4, h5, h6,
|
|||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
color: $headings-color;
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: $headings-small-color;
|
||||
}
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3 {
|
||||
margin-bottom: ($spacer / 2);
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: 65%;
|
||||
}
|
||||
}
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
margin-bottom: ($spacer / 2);
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
h1, .h1 { font-size: $font-size-h1; }
|
||||
|
@ -90,10 +73,10 @@ hr {
|
|||
// Emphasis
|
||||
//
|
||||
|
||||
// Ex: (12px small font / 14px base font) * 100% = about 85%
|
||||
small,
|
||||
.small {
|
||||
font-size: floor((100% * $font-size-sm / $font-size-base));
|
||||
font-size: 80%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
mark,
|
||||
|
|
Loading…
Reference in New Issue