Skip to content

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

Merge pull request #9966 from twbs/header-font-size-vars 

add variables for heading font sizes; fixes #9921
parents 7b0d035d fab039f2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 106 additions and 50 deletions
assets/css/docs.css
View file @ ae96cfd9
...@@ -642,7 +642,7 @@ h1[id] { ...@@ -642,7 +642,7 @@ h1[id] {
} }
/* Typography */ /* Typography */
.bs-example-type .table td:last-child { .bs-example-type .table .info {
color: #999; color: #999;
vertical-align: middle; vertical-align: middle;
} }
......
assets/js/raw-files.js
View file @ ae96cfd9
This diff is collapsed.
css.html
View file @ ae96cfd9
...@@ -588,46 +588,80 @@ base_url: "../" ...@@ -588,46 +588,80 @@ base_url: "../"
<!-- Headings --> <!-- Headings -->
<h2 id="type-headings">Headings</h2> <h2 id="type-headings">Headings</h2>
<p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p> <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"> <div class="bs-example bs-example-type">
<table class="table"> <table class="table">
<tbody> <tbody>
<tr> <tr>
<td><h1>h1. Bootstrap heading</h1></td> <td><h1>h1. Bootstrap heading</h1></td>
<td>Semibold 36px</td> <td class="info">Semibold 36px</td>
</tr> </tr>
<tr> <tr>
<td><h2>h2. Bootstrap heading</h2></td> <td><h2>h2. Bootstrap heading</h2></td>
<td>Semibold 30px</td> <td class="info">Semibold 30px</td>
</tr> </tr>
<tr> <tr>
<td><h3>h3. Bootstrap heading</h3></td> <td><h3>h3. Bootstrap heading</h3></td>
<td>Semibold 24px</td> <td class="info">Semibold 24px</td>
</tr> </tr>
<tr> <tr>
<td><h4>h4. Bootstrap heading</h4></td> <td><h4>h4. Bootstrap heading</h4></td>
<td>Semibold 18px</td> <td class="info">Semibold 18px</td>
</tr> </tr>
<tr> <tr>
<td><h5>h5. Bootstrap heading</h5></td> <td><h5>h5. Bootstrap heading</h5></td>
<td>Semibold 14px</td> <td class="info">Semibold 14px</td>
</tr> </tr>
<tr> <tr>
<td><h6>h6. Bootstrap heading</h6></td> <td><h6>h6. Bootstrap heading</h6></td>
<td>Semibold 12px</td> <td class="info">Semibold 12px</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
{% highlight html %} {% highlight html %}
<h1>...</h1> <h1>h1. Bootstrap heading</h1>
<h2>...</h2> <h2>h2. Bootstrap heading</h2>
<h3>...</h3> <h3>h3. Bootstrap heading</h3>
<h4>...</h4> <h4>h4. Bootstrap heading</h4>
<h5>...</h5> <h5>h5. Bootstrap heading</h5>
<h6>...</h6> <h6>h6. Bootstrap heading</h6>
{% endhighlight %} {% 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 --> <!-- Body copy -->
<h2 id="type-body-copy">Body copy</h2> <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> <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>
......
customize.html
View file @ ae96cfd9
...@@ -380,6 +380,22 @@ base_url: "../" ...@@ -380,6 +380,22 @@ base_url: "../"
<input type="text" class="form-control" placeholder="1.428571429" data-var="@line-height-base"> <input type="text" class="form-control" placeholder="1.428571429" data-var="@line-height-base">
<p class="help-block">Used to calculate line-height throughout Bootstrap.</p> <p class="help-block">Used to calculate line-height throughout Bootstrap.</p>
</div> </div>
<div class="col-lg-6">
<label>@font-size-h1</label>
<input type="text" class="form-control" placeholder="floor(@font-size-base * 2.60)" data-var="@font-size-h1">
<label>@font-size-h2</label>
<input type="text" class="form-control" placeholder="floor(@font-size-base * 2.15)" data-var="@font-size-h2">
<label>@font-size-h3</label>
<input type="text" class="form-control" placeholder="ceil(@font-size-base * 1.70)" data-var="@font-size-h3">
</div>
<div class="col-lg-6">
<label>@font-size-h4</label>
<input type="text" class="form-control" placeholder="ceil(@font-size-base * 1.25)" data-var="@font-size-h4">
<label>@font-size-h5</label>
<input type="text" class="form-control" placeholder="@font-size-base" data-var="@font-size-h5">
<label>@font-size-h6</label>
<input type="text" class="form-control" placeholder="ceil(@font-size-base * 0.85)" data-var="@font-size-h6">
</div>
</div> </div>
<h3>Code blocks</h3> <h3>Code blocks</h3>
......
dist/css/bootstrap-theme.css
View file @ ae96cfd9
...@@ -222,12 +222,12 @@ ...@@ -222,12 +222,12 @@
} }
.navbar-inverse .navbar-nav > .active > a { .navbar-inverse .navbar-nav > .active > a {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#222222), to(#272727)); background-image: -webkit-gradient(linear, left 0%, left 100%, from(#222222), to(#282828));
background-image: -webkit-linear-gradient(top, #222222, 0%, #272727, 100%); background-image: -webkit-linear-gradient(top, #222222, 0%, #282828, 100%);
background-image: -moz-linear-gradient(top, #222222 0%, #272727 100%); background-image: -moz-linear-gradient(top, #222222 0%, #282828 100%);
background-image: linear-gradient(to bottom, #222222 0%, #272727 100%); background-image: linear-gradient(to bottom, #222222 0%, #282828 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff272727', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff282828', GradientType=0);
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25); -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25); box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
} }
......
dist/css/bootstrap-theme.min.css
View file @ ae96cfd9
This diff is collapsed.
dist/css/bootstrap.css
View file @ ae96cfd9
...@@ -491,6 +491,12 @@ h3 { ...@@ -491,6 +491,12 @@ h3 {
margin-bottom: 10px; margin-bottom: 10px;
} }
h1 small,
h2 small,
h3 small {
font-size: 65%;
}
h4, h4,
h5, h5,
h6 { h6 {
...@@ -498,6 +504,12 @@ h6 { ...@@ -498,6 +504,12 @@ h6 {
margin-bottom: 10px; margin-bottom: 10px;
} }
h4 small,
h5 small,
h6 small {
font-size: 75%;
}
h1, h1,
.h1 { .h1 {
font-size: 36px; font-size: 36px;
...@@ -528,23 +540,6 @@ h6, ...@@ -528,23 +540,6 @@ h6,
font-size: 12px; 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;
}
.page-header { .page-header {
padding-bottom: 9px; padding-bottom: 9px;
margin: 40px 0 20px; margin: 40px 0 20px;
......
dist/css/bootstrap.min.css
View file @ ae96cfd9
This source diff could not be displayed because it is too large. You can view the blob instead.
less/type.less
View file @ ae96cfd9
...@@ -52,6 +52,7 @@ h1, h2, h3, h4, h5, h6, ...@@ -52,6 +52,7 @@ h1, h2, h3, h4, h5, h6,
font-family: @headings-font-family; font-family: @headings-font-family;
font-weight: @headings-font-weight; font-weight: @headings-font-weight;
line-height: @headings-line-height; line-height: @headings-line-height;
small { small {
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
...@@ -64,25 +65,28 @@ h2, ...@@ -64,25 +65,28 @@ h2,
h3 { h3 {
margin-top: @line-height-computed; margin-top: @line-height-computed;
margin-bottom: (@line-height-computed / 2); margin-bottom: (@line-height-computed / 2);
small {
font-size: 65%;
}
} }
h4, h4,
h5, h5,
h6 { h6 {
margin-top: (@line-height-computed / 2); margin-top: (@line-height-computed / 2);
margin-bottom: (@line-height-computed / 2); margin-bottom: (@line-height-computed / 2);
}
h1, .h1 { font-size: floor(@font-size-base * 2.60); } // ~36px small {
h2, .h2 { font-size: floor(@font-size-base * 2.15); } // ~30px font-size: 75%;
h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px }
h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px }
h5, .h5 { font-size: @font-size-base; }
h6, .h6 { font-size: ceil(@font-size-base * 0.85); } // ~12px
h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px h1, .h1 { font-size: @font-size-h1; }
h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px h2, .h2 { font-size: @font-size-h2; }
h3 small, .h3 small, h3, .h3 { font-size: @font-size-h3; }
h4 small, .h4 small { font-size: @font-size-base; } h4, .h4 { font-size: @font-size-h4; }
h5, .h5 { font-size: @font-size-h5; }
h6, .h6 { font-size: @font-size-h6; }
// Page header // Page header
......
less/variables.less
View file @ ae96cfd9
...@@ -48,6 +48,13 @@ ...@@ -48,6 +48,13 @@
@font-size-large: ceil(@font-size-base * 1.25); // ~18px @font-size-large: ceil(@font-size-base * 1.25); // ~18px
@font-size-small: ceil(@font-size-base * 0.85); // ~12px @font-size-small: ceil(@font-size-base * 0.85); // ~12px
@font-size-h1: floor(@font-size-base * 2.60); // ~36px
@font-size-h2: floor(@font-size-base * 2.15); // ~30px
@font-size-h3: ceil(@font-size-base * 1.70); // ~24px
@font-size-h4: ceil(@font-size-base * 1.25); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil(@font-size-base * 0.85); // ~12px
@line-height-base: 1.428571429; // 20/14 @line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px @line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
......
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