Merge branch 'master' of github.com:twbs/bootstrap
This commit is contained in:
commit
7edd87dde9
|
@ -642,7 +642,7 @@ h1[id] {
|
|||
}
|
||||
|
||||
/* Typography */
|
||||
.bs-example-type .table td:last-child {
|
||||
.bs-example-type .table .info {
|
||||
color: #999;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -230,7 +230,7 @@ base_url: "../"
|
|||
<h2 id="glyphicons-examples">Examples</h2>
|
||||
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
|
||||
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
|
||||
|
@ -238,7 +238,7 @@ base_url: "../"
|
|||
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star"></span> Star</button>
|
||||
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-star"></span> Star</button>
|
||||
<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star"></span> Star</button>
|
||||
|
@ -379,7 +379,7 @@ base_url: "../"
|
|||
<h3 id="btn-groups-toolbar">Button toolbar</h3>
|
||||
<p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-toolbar" style="margin: 0;">
|
||||
<div class="btn-toolbar" role="toolbar" style="margin: 0;">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">1</button>
|
||||
<button type="button" class="btn btn-default">2</button>
|
||||
|
@ -397,7 +397,7 @@ base_url: "../"
|
|||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">...</div>
|
||||
<div class="btn-group">...</div>
|
||||
<div class="btn-group">...</div>
|
||||
|
@ -407,28 +407,28 @@ base_url: "../"
|
|||
<h3 id="btn-groups-sizing">Sizing</h3>
|
||||
<p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group btn-group-lg">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
<button type="button" class="btn btn-default">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group btn-group-xs">
|
||||
<button type="button" class="btn btn-default">Left</button>
|
||||
<button type="button" class="btn btn-default">Middle</button>
|
||||
|
@ -744,7 +744,7 @@ base_url: "../"
|
|||
<h3 id="btn-dropdowns-sizing">Sizing</h3>
|
||||
<p>Button dropdowns work with buttons of all sizes.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
Large button <span class="caret"></span>
|
||||
|
@ -758,7 +758,7 @@ base_url: "../"
|
|||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
Small button <span class="caret"></span>
|
||||
|
@ -772,7 +772,7 @@ base_url: "../"
|
|||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
Extra small button <span class="caret"></span>
|
||||
|
@ -822,7 +822,7 @@ base_url: "../"
|
|||
<h3 id="btn-dropdowns-dropup">Dropup variation</h3>
|
||||
<p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
|
||||
<div class="bs-example">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-default">Dropup</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||||
|
|
62
css.html
62
css.html
|
@ -588,46 +588,80 @@ base_url: "../"
|
|||
<!-- Headings -->
|
||||
<h2 id="type-headings">Headings</h2>
|
||||
<p>All HTML headings, <code><h1></code> through <code><h6></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><small></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><body></code> and all paragraphs. In addition, <code><p></code> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).</p>
|
||||
|
@ -1794,7 +1828,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
<div class="bs-example">
|
||||
<form role="form">
|
||||
<input class="form-control" id="focusedInput" type="text" value="This is focused...">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<input class="form-control" id="focusedInput" type="text" value="This is focused...">
|
||||
|
|
|
@ -380,6 +380,22 @@ base_url: "../"
|
|||
<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>
|
||||
</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>
|
||||
|
||||
<h3>Code blocks</h3>
|
||||
|
|
|
@ -222,12 +222,12 @@
|
|||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > .active > a {
|
||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#222222), to(#272727));
|
||||
background-image: -webkit-linear-gradient(top, #222222, 0%, #272727, 100%);
|
||||
background-image: -moz-linear-gradient(top, #222222 0%, #272727 100%);
|
||||
background-image: linear-gradient(to bottom, #222222 0%, #272727 100%);
|
||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#222222), to(#282828));
|
||||
background-image: -webkit-linear-gradient(top, #222222, 0%, #282828, 100%);
|
||||
background-image: -moz-linear-gradient(top, #222222 0%, #282828 100%);
|
||||
background-image: linear-gradient(to bottom, #222222 0%, #282828 100%);
|
||||
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);
|
||||
box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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,23 +540,6 @@ 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;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding-bottom: 9px;
|
||||
margin: 40px 0 20px;
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -423,6 +423,10 @@ bootstrap/
|
|||
<td><code>ul.inline</code></td>
|
||||
<td><code>.list-inline</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.muted</code></td>
|
||||
<td><code>.text-muted</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.table-responsive -->
|
||||
|
|
|
@ -277,6 +277,7 @@ $('#myModal').on('show.bs.modal', function (e) {
|
|||
{% highlight html %}
|
||||
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
|
||||
{% endhighlight %}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
@ -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,25 +65,28 @@ 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: floor(@font-size-base * 2.60); } // ~36px
|
||||
h2, .h2 { font-size: floor(@font-size-base * 2.15); } // ~30px
|
||||
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
|
||||
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; }
|
||||
h1, .h1 { font-size: @font-size-h1; }
|
||||
h2, .h2 { font-size: @font-size-h2; }
|
||||
h3, .h3 { font-size: @font-size-h3; }
|
||||
h4, .h4 { font-size: @font-size-h4; }
|
||||
h5, .h5 { font-size: @font-size-h5; }
|
||||
h6, .h6 { font-size: @font-size-h6; }
|
||||
|
||||
|
||||
// Page header
|
||||
|
|
|
@ -48,6 +48,13 @@
|
|||
@font-size-large: ceil(@font-size-base * 1.25); // ~18px
|
||||
@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-computed: floor(@font-size-base * @line-height-base); // ~20px
|
||||
|
||||
|
|
Loading…
Reference in New Issue