rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Update and document use of small in headings

Browse Source
This commit is contained in:
Mark Otto 2013-08-23 14:22:51 -07:00
parent 310642d5ac
commit 2b37d2b533
5 changed files with 75 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/docs.css
View File

@ -642,7 +642,7 @@ h1[id] {
}
/* Typography */
.bs-example-type .table td:last-child {
.bs-example-type .table .info {
color: #999;
vertical-align: middle;
}

60
css.html
View File

@ -588,46 +588,80 @@ base_url: "../"
<!-- Headings -->
<h2 id="type-headings">Headings</h2>
<p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
<div class="bs-example bs-example-type">
<table class="table">
<tbody>
<tr>
<td><h1>h1. Bootstrap heading</h1></td>
<td>Semibold 36px</td>
<td class="info">Semibold 36px</td>
</tr>
<tr>
<td><h2>h2. Bootstrap heading</h2></td>
<td>Semibold 30px</td>
<td class="info">Semibold 30px</td>
</tr>
<tr>
<td><h3>h3. Bootstrap heading</h3></td>
<td>Semibold 24px</td>
<td class="info">Semibold 24px</td>
</tr>
<tr>
<td><h4>h4. Bootstrap heading</h4></td>
<td>Semibold 18px</td>
<td class="info">Semibold 18px</td>
</tr>
<tr>
<td><h5>h5. Bootstrap heading</h5></td>
<td>Semibold 14px</td>
<td class="info">Semibold 14px</td>
</tr>
<tr>
<td><h6>h6. Bootstrap heading</h6></td>
<td>Semibold 12px</td>
<td class="info">Semibold 12px</td>
</tr>
</tbody>
</table>
</div>
{% highlight html %}
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
{% endhighlight %}
<p>Also included with headings is an autoscaling <code>&lt;small&gt;</code> element. Use it for smaller, gray secondary text in any heading.</p>
<div class="bs-example bs-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>
{% 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 %}
<!-- Body copy -->
<h2 id="type-body-copy">Body copy</h2>
<p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>1.428</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).</p>

33
dist/css/bootstrap.css vendored
View File

@ -491,6 +491,12 @@ h3 {
margin-bottom: 10px;
}
h1 small,
h2 small,
h3 small {
font-size: 65%;
}
h4,
h5,
h6 {
@ -498,6 +504,12 @@ h6 {
margin-bottom: 10px;
}
h4 small,
h5 small,
h6 small {
font-size: 75%;
}
h1,
.h1 {
font-size: 36px;
@ -528,22 +540,11 @@ h6,
font-size: 12px;
}
h1 small,
.h1 small {
font-size: 24px;
}
h2 small,
.h2 small {
font-size: 18px;
}
h3 small,
.h3 small,
h4 small,
.h4 small {
font-size: 14px;
}
/*h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px
h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px
h3 small, .h3 small,
h4 small, .h4 small { font-size: @font-size-base; }
*/
.page-header {
padding-bottom: 9px;

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

14
less/type.less
View File

@ -52,6 +52,7 @@ h1, h2, h3, h4, h5, h6,
font-family: @headings-font-family;
font-weight: @headings-font-weight;
line-height: @headings-line-height;
small {
font-weight: normal;
line-height: 1;
@ -64,12 +65,20 @@ h2,
h3 {
margin-top: @line-height-computed;
margin-bottom: (@line-height-computed / 2);
small {
font-size: 65%;
}
}
h4,
h5,
h6 {
margin-top: (@line-height-computed / 2);
margin-bottom: (@line-height-computed / 2);
small {
font-size: 75%;
}
}
h1, .h1 { font-size: @font-size-h1; }
@ -79,11 +88,6 @@ h4, .h4 { font-size: @font-size-h4; }
h5, .h5 { font-size: @font-size-h5; }
h6, .h6 { font-size: @font-size-h6; }
h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px
h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px
h3 small, .h3 small,
h4 small, .h4 small { font-size: @font-size-base; }
// Page header
// -------------------------