mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-30 22:52:24 +01:00
Merge branch '3.0.0-wip' of github.com:twitter/bootstrap into 3.0.0-wip
This commit is contained in:
fat
commit
7b9a949a18
@ -418,9 +418,6 @@ body {
|
|||||||
.bs-example-control-sizing input[type="text"] + input[type="text"] {
|
.bs-example-control-sizing input[type="text"] + input[type="text"] {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
.bs-example-form {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.bs-example-form .input-group {
|
.bs-example-form .input-group {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
@ -431,6 +428,9 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Navbar examples */
|
/* Navbar examples */
|
||||||
|
.bs-example .navbar:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
.bs-navbar-top-example,
|
.bs-navbar-top-example,
|
||||||
.bs-navbar-bottom-example {
|
.bs-navbar-bottom-example {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
@ -457,7 +457,7 @@ body {
|
|||||||
}
|
}
|
||||||
.bs-navbar-top-example:after {
|
.bs-navbar-top-example:after {
|
||||||
top: auto;
|
top: auto;
|
||||||
bottom: -1px;
|
bottom: 15px;
|
||||||
-webkit-border-radius: 0 4px 0 4px;
|
-webkit-border-radius: 0 4px 0 4px;
|
||||||
-moz-border-radius: 0 4px 0 4px;
|
-moz-border-radius: 0 4px 0 4px;
|
||||||
border-radius: 0 4px 0 4px;
|
border-radius: 0 4px 0 4px;
|
||||||
@ -545,6 +545,37 @@ body {
|
|||||||
/* Responsive docs
|
/* Responsive docs
|
||||||
-------------------------------------------------- */
|
-------------------------------------------------- */
|
||||||
|
|
||||||
|
/* Responsive (scrollable) doc tables */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.bs-table-scrollable {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
overflow-y: hidden;
|
||||||
|
overflow-x: scroll;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
.bs-table-scrollable .table {
|
||||||
|
margin-bottom: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.bs-table-scrollable .table th,
|
||||||
|
.bs-table-scrollable .table td {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.bs-table-scrollable .table th:first-child,
|
||||||
|
.bs-table-scrollable .table td:first-child {
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
.bs-table-scrollable .table th:last-child,
|
||||||
|
.bs-table-scrollable .table td:last-child {
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
.bs-table-scrollable .table tr:last-child th,
|
||||||
|
.bs-table-scrollable .table tr:last-child td {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Related: responsive utilities tables */
|
/* Related: responsive utilities tables */
|
||||||
.table code {
|
.table code {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
@ -578,7 +609,7 @@ body {
|
|||||||
------------------------- */
|
------------------------- */
|
||||||
.responsive-utilities-test {
|
.responsive-utilities-test {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
margin-left: 0;
|
padding-left: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
overflow: hidden; /* clear floats */
|
overflow: hidden; /* clear floats */
|
||||||
}
|
}
|
||||||
|
|||||||
529
css.html
529
css.html
@ -78,56 +78,58 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
|
|||||||
|
|
||||||
<h3 id="grid-options">Grid options</h3>
|
<h3 id="grid-options">Grid options</h3>
|
||||||
<p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
|
<p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
|
||||||
<table class="table table-bordered table-striped bs-table">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped bs-table">
|
||||||
<tr>
|
<thead>
|
||||||
<th></th>
|
<tr>
|
||||||
<th>
|
<th></th>
|
||||||
Tiny grid
|
<th>
|
||||||
<small>Phones (<480px)</small>
|
Tiny grid
|
||||||
</th>
|
<small>Phones (<480px)</small>
|
||||||
<th>
|
</th>
|
||||||
Small grid
|
<th>
|
||||||
<small>Tablets (<768px)</small>
|
Small grid
|
||||||
</th>
|
<small>Tablets (<768px)</small>
|
||||||
<th>
|
</th>
|
||||||
Medium-large grid
|
<th>
|
||||||
<small>Destkops (>768px)</small>
|
Medium-large grid
|
||||||
</th>
|
<small>Destkops (>768px)</small>
|
||||||
</tr>
|
</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<th>Grid behavior</th>
|
<tr>
|
||||||
<td>Horizontal at all times</td>
|
<th>Grid behavior</th>
|
||||||
<td colspan="2">Collapsed to start, horizontal above breakpoints</td>
|
<td>Horizontal at all times</td>
|
||||||
</tr>
|
<td colspan="2">Collapsed to start, horizontal above breakpoints</td>
|
||||||
<tr>
|
</tr>
|
||||||
<th>Class prefix</th>
|
<tr>
|
||||||
<td><code>.col-</code></td>
|
<th>Class prefix</th>
|
||||||
<td><code>.col-sm-</code></td>
|
<td><code>.col-</code></td>
|
||||||
<td><code>.col-lg-</code></td>
|
<td><code>.col-sm-</code></td>
|
||||||
</tr>
|
<td><code>.col-lg-</code></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th># of columns</th>
|
<tr>
|
||||||
<td colspan="3">12</td>
|
<th># of columns</th>
|
||||||
</tr>
|
<td colspan="3">12</td>
|
||||||
<tr>
|
</tr>
|
||||||
<th>Nestable</th>
|
<tr>
|
||||||
<td colspan="3">Yes</td>
|
<th>Nestable</th>
|
||||||
</tr>
|
<td colspan="3">Yes</td>
|
||||||
<tr>
|
</tr>
|
||||||
<th>Offsets</th>
|
<tr>
|
||||||
<td colspan="2" class="text-muted">N/A</td>
|
<th>Offsets</th>
|
||||||
<td>Yes</td>
|
<td colspan="2" class="text-muted">N/A</td>
|
||||||
</tr>
|
<td>Yes</td>
|
||||||
<tr>
|
</tr>
|
||||||
<th>Column ordering</th>
|
<tr>
|
||||||
<td class="text-muted">N/A</td>
|
<th>Column ordering</th>
|
||||||
<td colspan="2">Yes</td>
|
<td class="text-muted">N/A</td>
|
||||||
</tr>
|
<td colspan="2">Yes</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3>
|
<h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3>
|
||||||
<p>Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.</p>
|
<p>Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.</p>
|
||||||
@ -1051,44 +1053,46 @@ For example, <code><section></code> should be wrapped as inline.
|
|||||||
|
|
||||||
<h2 id="tables-row-classes">Contextual table classes</h2>
|
<h2 id="tables-row-classes">Contextual table classes</h2>
|
||||||
<p>Use contextual classes to color table rows or individual cells.</p>
|
<p>Use contextual classes to color table rows or individual cells.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<colgroup>
|
<table class="table table-bordered table-striped bs-table">
|
||||||
<col class="col-lg-1">
|
<colgroup>
|
||||||
<col class="col-lg-7">
|
<col class="col-lg-1">
|
||||||
</colgroup>
|
<col class="col-lg-7">
|
||||||
<thead>
|
</colgroup>
|
||||||
<tr>
|
<thead>
|
||||||
<th>Class</th>
|
<tr>
|
||||||
<th>Description</th>
|
<th>Class</th>
|
||||||
</tr>
|
<th>Description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>
|
<tr>
|
||||||
<code>.success</code>
|
<td>
|
||||||
</td>
|
<code>.success</code>
|
||||||
<td>Indicates a successful or positive action</td>
|
</td>
|
||||||
</tr>
|
<td>Indicates a successful or positive action</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>
|
<tr>
|
||||||
<code>.danger</code>
|
<td>
|
||||||
</td>
|
<code>.danger</code>
|
||||||
<td>Indicates a dangerous or potentially negative action</td>
|
</td>
|
||||||
</tr>
|
<td>Indicates a dangerous or potentially negative action</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>
|
<tr>
|
||||||
<code>.warning</code>
|
<td>
|
||||||
</td>
|
<code>.warning</code>
|
||||||
<td>Indicates a warning that might need attention</td>
|
</td>
|
||||||
</tr>
|
<td>Indicates a warning that might need attention</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>
|
<tr>
|
||||||
<code>.active</code>
|
<td>
|
||||||
</td>
|
<code>.active</code>
|
||||||
<td>Applies the hover color to a particular row or cell</td>
|
</td>
|
||||||
</tr>
|
<td>Applies the hover color to a particular row or cell</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
<div class="bs-example">
|
<div class="bs-example">
|
||||||
<table class="table">
|
<table class="table">
|
||||||
<thead>
|
<thead>
|
||||||
@ -1528,11 +1532,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="forms-input-groups">Input groups</h3>
|
||||||
<h2 id="forms-extending">Extending form controls</h2>
|
|
||||||
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
|
|
||||||
|
|
||||||
<h3 id="forms-input-groups">Input groups</h3>
|
|
||||||
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with an <code>.add-on</code> to prepend or append elements to an <code><input></code>.</p>
|
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with an <code>.add-on</code> to prepend or append elements to an <code><input></code>.</p>
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-danger">
|
<div class="bs-callout bs-callout-danger">
|
||||||
@ -1545,216 +1545,239 @@ For example, <code><section></code> should be wrapped as inline.
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form class="bs-example bs-example-form">
|
<form class="bs-example bs-example-form">
|
||||||
<div class="input-group col-lg-9">
|
<div class="input-group">
|
||||||
<span class="input-group-addon">@</span>
|
<span class="input-group-addon">@</span>
|
||||||
<input type="text" class="form-control" placeholder="Username">
|
<input type="text" class="form-control" placeholder="Username">
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
<div class="input-group col-lg-6">
|
<div class="input-group">
|
||||||
<input type="text" class="form-control">
|
<input type="text" class="form-control">
|
||||||
<span class="input-group-addon">.00</span>
|
<span class="input-group-addon">.00</span>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
<div class="input-group col-lg-3">
|
<div class="input-group">
|
||||||
<span class="input-group-addon">$</span>
|
<span class="input-group-addon">$</span>
|
||||||
<input type="text" class="form-control">
|
<input type="text" class="form-control">
|
||||||
<span class="input-group-addon">.00</span>
|
<span class="input-group-addon">.00</span>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<div class="input-group col-lg-9">
|
<div class="input-group">
|
||||||
<span class="input-group-addon">@</span>
|
<span class="input-group-addon">@</span>
|
||||||
<input type="text" class="form-control" placeholder="Username">
|
<input type="text" class="form-control" placeholder="Username">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-group col-lg-6">
|
<div class="input-group">
|
||||||
<input type="text" class="form-control">
|
<input type="text" class="form-control">
|
||||||
<span class="input-group-addon">.00</span>
|
<span class="input-group-addon">.00</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-group col-lg-3">
|
<div class="input-group">
|
||||||
<span class="input-group-addon">$</span>
|
<span class="input-group-addon">$</span>
|
||||||
<input type="text" class="form-control">
|
<input type="text" class="form-control">
|
||||||
<span class="input-group-addon">.00</span>
|
<span class="input-group-addon">.00</span>
|
||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h4>Optional sizes</h4>
|
<h3>Optional sizes</h3>
|
||||||
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
|
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
|
||||||
<form class="bs-example bs-example-form">
|
<form class="bs-example bs-example-form">
|
||||||
<div class="input-group col-lg-9">
|
<div class="input-group">
|
||||||
<span class="input-group-addon input-large">@</span>
|
<span class="input-group-addon input-large">@</span>
|
||||||
<input type="text" class="form-control input-large" placeholder="Username">
|
<input type="text" class="form-control input-large" placeholder="Username">
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
<div class="input-group col-lg-9">
|
<div class="input-group">
|
||||||
<span class="input-group-addon">@</span>
|
<span class="input-group-addon">@</span>
|
||||||
<input type="text" class="form-control" placeholder="Username">
|
<input type="text" class="form-control" placeholder="Username">
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
<div class="input-group col-lg-9">
|
<div class="input-group">
|
||||||
<span class="input-group-addon input-small">@</span>
|
<span class="input-group-addon input-small">@</span>
|
||||||
<input type="text" class="form-control input-small" placeholder="Username">
|
<input type="text" class="form-control input-small" placeholder="Username">
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<div class="input-group col-lg-9">
|
<div class="input-group">
|
||||||
<span class="input-group-addon input-large">@</span>
|
<span class="input-group-addon input-large">@</span>
|
||||||
<input type="text" class="form-control input-large" placeholder="Username">
|
<input type="text" class="form-control input-large" placeholder="Username">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-group col-lg-9">
|
<div class="input-group">
|
||||||
<span class="input-group-addon">@</span>
|
<span class="input-group-addon">@</span>
|
||||||
<input type="text" class="form-control" placeholder="Username">
|
<input type="text" class="form-control" placeholder="Username">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-group col-lg-9">
|
<div class="input-group">
|
||||||
<span class="input-group-addon input-small">@</span>
|
<span class="input-group-addon input-small">@</span>
|
||||||
<input type="text" class="form-control input-small" placeholder="Username">
|
<input type="text" class="form-control input-small" placeholder="Username">
|
||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h4>Buttons instead of text</h4>
|
<h3>Buttons instead of text</h3>
|
||||||
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
|
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
|
||||||
<form class="bs-example bs-example-form">
|
<form class="bs-example bs-example-form">
|
||||||
<div class="input-group col-lg-7">
|
<div class="row">
|
||||||
<span class="input-group-btn">
|
<div class="col-lg-6">
|
||||||
<button class="btn btn-default" type="button">Go!</button>
|
<div class="input-group">
|
||||||
</span>
|
<span class="input-group-btn">
|
||||||
<input type="text" class="form-control">
|
<button class="btn btn-default" type="button">Go!</button>
|
||||||
</div>
|
</span>
|
||||||
<br>
|
<input type="text" class="form-control">
|
||||||
<div class="input-group col-lg-7">
|
</div><!-- /input-group -->
|
||||||
<input type="text" class="form-control">
|
</div><!-- /.col-lg-6 -->
|
||||||
<span class="input-group-btn">
|
<div class="col-lg-6">
|
||||||
<button class="btn btn-default" type="button">Go!</button>
|
<div class="input-group">
|
||||||
</span>
|
<input type="text" class="form-control">
|
||||||
</div>
|
<span class="input-group-btn">
|
||||||
|
<button class="btn btn-default" type="button">Go!</button>
|
||||||
|
</span>
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
</div><!-- /.row -->
|
||||||
</form>
|
</form>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<div class="input-group col-lg-7">
|
<div class="row">
|
||||||
<span class="input-group-btn">
|
<div class="col-lg-6">
|
||||||
<button class="btn btn-default" type="button">Go!</button>
|
<div class="input-group">
|
||||||
</span>
|
<span class="input-group-btn">
|
||||||
<input type="text" class="form-control">
|
<button class="btn btn-default" type="button">Go!</button>
|
||||||
</div>
|
</span>
|
||||||
|
<input type="text" class="form-control">
|
||||||
<div class="input-group col-lg-7">
|
</div><!-- /input-group -->
|
||||||
<input type="text" class="form-control">
|
</div><!-- /.col-lg-6 -->
|
||||||
<span class="input-group-btn">
|
<div class="col-lg-6">
|
||||||
<button class="btn btn-default" type="button">Go!</button>
|
<div class="input-group">
|
||||||
</span>
|
<input type="text" class="form-control">
|
||||||
</div>
|
<span class="input-group-btn">
|
||||||
|
<button class="btn btn-default" type="button">Go!</button>
|
||||||
|
</span>
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
</div><!-- /.row -->
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h4>Button dropdowns</h4>
|
<h3>Button dropdowns</h3>
|
||||||
<p></p>
|
<p></p>
|
||||||
<form class="bs-example bs-example-form">
|
<form class="bs-example bs-example-form">
|
||||||
<div class="input-group col-lg-7">
|
<div class="row">
|
||||||
<div class="input-group-btn">
|
<div class="col-lg-6">
|
||||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
<div class="input-group">
|
||||||
<ul class="dropdown-menu">
|
<div class="input-group-btn">
|
||||||
<li><a href="#">Action</a></li>
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||||
<li><a href="#">Another action</a></li>
|
<ul class="dropdown-menu">
|
||||||
<li><a href="#">Something else here</a></li>
|
<li><a href="#">Action</a></li>
|
||||||
<li class="divider"></li>
|
<li><a href="#">Another action</a></li>
|
||||||
<li><a href="#">Separated link</a></li>
|
<li><a href="#">Something else here</a></li>
|
||||||
</ul>
|
<li class="divider"></li>
|
||||||
</div><!-- /btn-group -->
|
<li><a href="#">Separated link</a></li>
|
||||||
<input type="text" class="form-control">
|
</ul>
|
||||||
</div><!-- /input-group -->
|
</div><!-- /btn-group -->
|
||||||
<br>
|
<input type="text" class="form-control">
|
||||||
<div class="input-group col-lg-7">
|
</div><!-- /input-group -->
|
||||||
<input type="text" class="form-control">
|
</div><!-- /.col-lg-6 -->
|
||||||
<div class="input-group-btn">
|
<div class="col-lg-6">
|
||||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
<div class="input-group">
|
||||||
<ul class="dropdown-menu pull-right">
|
<input type="text" class="form-control">
|
||||||
<li><a href="#">Action</a></li>
|
<div class="input-group-btn">
|
||||||
<li><a href="#">Another action</a></li>
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||||
<li><a href="#">Something else here</a></li>
|
<ul class="dropdown-menu">
|
||||||
<li class="divider"></li>
|
<li><a href="#">Action</a></li>
|
||||||
<li><a href="#">Separated link</a></li>
|
<li><a href="#">Another action</a></li>
|
||||||
</ul>
|
<li><a href="#">Something else here</a></li>
|
||||||
</div><!-- /btn-group -->
|
<li class="divider"></li>
|
||||||
</div><!-- /input-group -->
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
</div><!-- /.row -->
|
||||||
</form>
|
</form>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<div class="input-group col-lg-7">
|
<div class="row">
|
||||||
<div class="input-group-btn">
|
<div class="col-lg-6">
|
||||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
<div class="input-group">
|
||||||
<ul class="dropdown-menu">
|
<div class="input-group-btn">
|
||||||
<li><a href="#">Action</a></li>
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||||
<li><a href="#">Another action</a></li>
|
<ul class="dropdown-menu">
|
||||||
<li><a href="#">Something else here</a></li>
|
<li><a href="#">Action</a></li>
|
||||||
<li class="divider"></li>
|
<li><a href="#">Another action</a></li>
|
||||||
<li><a href="#">Separated link</a></li>
|
<li><a href="#">Something else here</a></li>
|
||||||
</ul>
|
<li class="divider"></li>
|
||||||
</div><!-- /btn-group -->
|
<li><a href="#">Separated link</a></li>
|
||||||
<input type="text" class="form-control">
|
</ul>
|
||||||
</div><!-- /input-group -->
|
</div><!-- /btn-group -->
|
||||||
|
<input type="text" class="form-control">
|
||||||
<div class="input-group col-lg-7">
|
</div><!-- /input-group -->
|
||||||
<input type="text" class="form-control">
|
</div><!-- /.col-lg-6 -->
|
||||||
<div class="input-group-btn">
|
<div class="col-lg-6">
|
||||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
<div class="input-group">
|
||||||
<ul class="dropdown-menu pull-right">
|
<input type="text" class="form-control">
|
||||||
<li><a href="#">Action</a></li>
|
<div class="input-group-btn">
|
||||||
<li><a href="#">Another action</a></li>
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||||
<li><a href="#">Something else here</a></li>
|
<ul class="dropdown-menu">
|
||||||
<li class="divider"></li>
|
<li><a href="#">Action</a></li>
|
||||||
<li><a href="#">Separated link</a></li>
|
<li><a href="#">Another action</a></li>
|
||||||
</ul>
|
<li><a href="#">Something else here</a></li>
|
||||||
</div><!-- /btn-group -->
|
<li class="divider"></li>
|
||||||
</div><!-- /input-group -->
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div><!-- /btn-group -->
|
||||||
|
</div><!-- /input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
</div><!-- /.row -->
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h4>Segmented dropdown groups</h4>
|
<h3>Segmented dropdown groups</h3>
|
||||||
<form class="bs-example bs-example-form">
|
<form class="bs-example bs-example-form">
|
||||||
<div class="input-group col-lg-7">
|
<div class="row">
|
||||||
<div class="input-group-btn">
|
<div class="col-lg-6">
|
||||||
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
|
<div class="input-group">
|
||||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
<div class="input-group-btn">
|
||||||
<span class="caret"></span>
|
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
|
||||||
</button>
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||||
<ul class="dropdown-menu">
|
<span class="caret"></span>
|
||||||
<li><a href="#">Action</a></li>
|
</button>
|
||||||
<li><a href="#">Another action</a></li>
|
<ul class="dropdown-menu">
|
||||||
<li><a href="#">Something else here</a></li>
|
<li><a href="#">Action</a></li>
|
||||||
<li class="divider"></li>
|
<li><a href="#">Another action</a></li>
|
||||||
<li><a href="#">Separated link</a></li>
|
<li><a href="#">Something else here</a></li>
|
||||||
</ul>
|
<li class="divider"></li>
|
||||||
</div>
|
<li><a href="#">Separated link</a></li>
|
||||||
<input type="text" class="form-control">
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<input type="text" class="form-control">
|
||||||
<br>
|
</div><!-- /.input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
<div class="input-group col-lg-7">
|
<div class="col-lg-6">
|
||||||
<input type="text" class="form-control">
|
<div class="input-group">
|
||||||
<div class="input-group-btn">
|
<input type="text" class="form-control">
|
||||||
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
|
<div class="input-group-btn">
|
||||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
|
||||||
<span class="caret"></span>
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||||
</button>
|
<span class="caret"></span>
|
||||||
<ul class="dropdown-menu pull-right">
|
</button>
|
||||||
<li><a href="#">Action</a></li>
|
<ul class="dropdown-menu pull-right">
|
||||||
<li><a href="#">Another action</a></li>
|
<li><a href="#">Action</a></li>
|
||||||
<li><a href="#">Something else here</a></li>
|
<li><a href="#">Another action</a></li>
|
||||||
<li class="divider"></li>
|
<li><a href="#">Something else here</a></li>
|
||||||
<li><a href="#">Separated link</a></li>
|
<li class="divider"></li>
|
||||||
</ul>
|
<li><a href="#">Separated link</a></li>
|
||||||
</div>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
</div><!-- /.input-group -->
|
||||||
|
</div><!-- /.col-lg-6 -->
|
||||||
|
</div><!-- /.row -->
|
||||||
</form>
|
</form>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<div class="input-group col-lg-7">
|
<div class="input-group">
|
||||||
<div class="input-group-btn">
|
<div class="input-group-btn">
|
||||||
<!-- Button and dropdown menu -->
|
<!-- Button and dropdown menu -->
|
||||||
</div>
|
</div>
|
||||||
<input type="text" class="form-control">
|
<input type="text" class="form-control">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-group col-lg-7">
|
<div class="input-group">
|
||||||
<input type="text" class="form-control">
|
<input type="text" class="form-control">
|
||||||
<div class="input-group-btn btn-group">
|
<div class="input-group-btn btn-group">
|
||||||
<!-- Button and dropdown menu -->
|
<!-- Button and dropdown menu -->
|
||||||
@ -1762,10 +1785,10 @@ For example, <code><section></code> should be wrapped as inline.
|
|||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h3 id="forms-control-sizes">Control sizing</h3>
|
<h2 id="forms-control-sizes">Control sizing</h2>
|
||||||
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.col-lg-*</code> classes.</p>
|
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.col-lg-*</code> classes.</p>
|
||||||
|
|
||||||
<h4>Relative sizing</h4>
|
<h3>Relative sizing</h3>
|
||||||
<p>Create larger or smaller form controls that match button sizes.</p>
|
<p>Create larger or smaller form controls that match button sizes.</p>
|
||||||
<form class="bs-example bs-example-control-sizing">
|
<form class="bs-example bs-example-control-sizing">
|
||||||
<div class="controls docs-input-sizes">
|
<div class="controls docs-input-sizes">
|
||||||
@ -1794,7 +1817,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||||||
<select class="form-control input-small">...</select>
|
<select class="form-control input-small">...</select>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h4>Column sizing</h4>
|
<h3>Column sizing</h3>
|
||||||
<p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
|
<p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
|
||||||
<form class="bs-example" style="padding-bottom: 15px;">
|
<form class="bs-example" style="padding-bottom: 15px;">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@ -1823,7 +1846,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h3 id="forms-help-text">Help text</h3>
|
<h2 id="forms-help-text">Help text</h2>
|
||||||
<p>Block level help text for form controls.</p>
|
<p>Block level help text for form controls.</p>
|
||||||
<form class="bs-example">
|
<form class="bs-example">
|
||||||
<input type="text" class="form-control">
|
<input type="text" class="form-control">
|
||||||
@ -2082,7 +2105,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||||||
<p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
|
<p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
|
||||||
|
|
||||||
<h3>Responsive classes</h3>
|
<h3>Responsive classes</h3>
|
||||||
<div class="hidden-sm">
|
<div class="bs-table-scrollable">
|
||||||
<table class="table table-bordered table-striped responsive-utilities">
|
<table class="table table-bordered table-striped responsive-utilities">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -2134,27 +2157,29 @@ For example, <code><section></code> should be wrapped as inline.
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Print classes</h3>
|
<h3>Print classes</h3>
|
||||||
<table class="table table-bordered table-striped responsive-utilities">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped responsive-utilities">
|
||||||
<tr>
|
<thead>
|
||||||
<th>Class</th>
|
<tr>
|
||||||
<th>Browser</th>
|
<th>Class</th>
|
||||||
<th>Print</th>
|
<th>Browser</th>
|
||||||
</tr>
|
<th>Print</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<th><code>.visible-print</code></th>
|
<tr>
|
||||||
<td class="is-hidden">Hidden</td>
|
<th><code>.visible-print</code></th>
|
||||||
<td class="is-visible">Visible</td>
|
<td class="is-hidden">Hidden</td>
|
||||||
</tr>
|
<td class="is-visible">Visible</td>
|
||||||
<tr>
|
</tr>
|
||||||
<th><code>.hidden-print</code></th>
|
<tr>
|
||||||
<td class="is-visible">Visible</td>
|
<th><code>.hidden-print</code></th>
|
||||||
<td class="is-hidden">Hidden</td>
|
<td class="is-visible">Visible</td>
|
||||||
</tr>
|
<td class="is-hidden">Hidden</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>When to use</h3>
|
<h3>When to use</h3>
|
||||||
<p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block-level toggling, meaning <code>display: none;</code> or <code>display: block;</code>. Use with inline and table elements is currently not supported.</p>
|
<p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block-level toggling, meaning <code>display: none;</code> or <code>display: block;</code>. Use with inline and table elements is currently not supported.</p>
|
||||||
|
|||||||
16
dist/css/bootstrap.css
vendored
16
dist/css/bootstrap.css
vendored
@ -362,11 +362,17 @@ p {
|
|||||||
|
|
||||||
.lead {
|
.lead {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
font-size: 21px;
|
font-size: 16.099999999999998px;
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.lead {
|
||||||
|
font-size: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
small {
|
small {
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
}
|
}
|
||||||
@ -2513,7 +2519,6 @@ button.close {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-tabs.nav-justified {
|
.nav-tabs.nav-justified {
|
||||||
display: table;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
@ -2521,7 +2526,7 @@ button.close {
|
|||||||
.nav-tabs.nav-justified > li {
|
.nav-tabs.nav-justified > li {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
float: none;
|
float: none;
|
||||||
width: auto;
|
width: 1%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-tabs.nav-justified > li > a {
|
.nav-tabs.nav-justified > li > a {
|
||||||
@ -2545,7 +2550,7 @@ button.close {
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-pills > li + li > a {
|
.nav-pills > li + li {
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -2566,14 +2571,13 @@ button.close {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-justified {
|
.nav-justified {
|
||||||
display: table;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-justified > li {
|
.nav-justified > li {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
float: none;
|
float: none;
|
||||||
width: auto;
|
width: 1%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-justified > li > a {
|
.nav-justified > li > a {
|
||||||
|
|||||||
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -147,7 +147,11 @@ bootstrap/
|
|||||||
<p>In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">respond.js</a> to enable media query support.</strong></p>
|
<p>In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">respond.js</a> to enable media query support.</strong></p>
|
||||||
|
|
||||||
<h3>IE Compatibility modes</h3>
|
<h3>IE Compatibility modes</h3>
|
||||||
<p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including <code><meta http-equiv="X-UA-Compatible" content="IE=edge"></code> in your pages. See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
|
<p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code>meta</code> tag in your pages.</p>
|
||||||
|
{% highlight html %}
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
{% endhighlight %}
|
||||||
|
<p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
896
javascript.html
896
javascript.html
@ -228,45 +228,47 @@ $('#myModal').on('show.bs.modal', function (e) {
|
|||||||
|
|
||||||
<h3>Options</h3>
|
<h3>Options</h3>
|
||||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
|
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 100px;">Name</th>
|
<tr>
|
||||||
<th style="width: 50px;">type</th>
|
<th style="width: 100px;">Name</th>
|
||||||
<th style="width: 50px;">default</th>
|
<th style="width: 50px;">type</th>
|
||||||
<th>description</th>
|
<th style="width: 50px;">default</th>
|
||||||
</tr>
|
<th>description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>backdrop</td>
|
<tr>
|
||||||
<td>boolean</td>
|
<td>backdrop</td>
|
||||||
<td>true</td>
|
<td>boolean</td>
|
||||||
<td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
|
<td>true</td>
|
||||||
</tr>
|
<td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>keyboard</td>
|
<tr>
|
||||||
<td>boolean</td>
|
<td>keyboard</td>
|
||||||
<td>true</td>
|
<td>boolean</td>
|
||||||
<td>Closes the modal when escape key is pressed</td>
|
<td>true</td>
|
||||||
</tr>
|
<td>Closes the modal when escape key is pressed</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>show</td>
|
<tr>
|
||||||
<td>boolean</td>
|
<td>show</td>
|
||||||
<td>true</td>
|
<td>boolean</td>
|
||||||
<td>Shows the modal when initialized.</td>
|
<td>true</td>
|
||||||
</tr>
|
<td>Shows the modal when initialized.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>remote</td>
|
<tr>
|
||||||
<td>path</td>
|
<td>remote</td>
|
||||||
<td>false</td>
|
<td>path</td>
|
||||||
<td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
|
<td>false</td>
|
||||||
|
<td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
|
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
|
|
||||||
<h3>Methods</h3>
|
<h3>Methods</h3>
|
||||||
|
|
||||||
@ -292,32 +294,34 @@ $('#myModal').modal({
|
|||||||
|
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
|
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 150px;">Event Type</th>
|
<tr>
|
||||||
<th>Description</th>
|
<th style="width: 150px;">Event Type</th>
|
||||||
</tr>
|
<th>Description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>show</td>
|
<tr>
|
||||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
<td>show</td>
|
||||||
</tr>
|
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>shown</td>
|
<tr>
|
||||||
<td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).</td>
|
<td>shown</td>
|
||||||
</tr>
|
<td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>hide</td>
|
<tr>
|
||||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
<td>hide</td>
|
||||||
</tr>
|
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>hidden</td>
|
<tr>
|
||||||
<td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
<td>hidden</td>
|
||||||
</tr>
|
<td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#myModal').on('hidden.bs.modal', function () {
|
$('#myModal').on('hidden.bs.modal', function () {
|
||||||
// do something…
|
// do something…
|
||||||
@ -546,40 +550,44 @@ $('[data-spy="scroll"]').each(function () {
|
|||||||
|
|
||||||
<h3>Options</h3>
|
<h3>Options</h3>
|
||||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
|
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 100px;">Name</th>
|
<tr>
|
||||||
<th style="width: 100px;">type</th>
|
<th style="width: 100px;">Name</th>
|
||||||
<th style="width: 50px;">default</th>
|
<th style="width: 100px;">type</th>
|
||||||
<th>description</th>
|
<th style="width: 50px;">default</th>
|
||||||
</tr>
|
<th>description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>offset</td>
|
<tr>
|
||||||
<td>number</td>
|
<td>offset</td>
|
||||||
<td>10</td>
|
<td>number</td>
|
||||||
<td>Pixels to offset from top when calculating position of scroll.</td>
|
<td>10</td>
|
||||||
</tr>
|
<td>Pixels to offset from top when calculating position of scroll.</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- ./bs-table-scrollable -->
|
||||||
|
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 150px;">Event Type</th>
|
<tr>
|
||||||
<th>Description</th>
|
<th style="width: 150px;">Event Type</th>
|
||||||
</tr>
|
<th>Description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>activate</td>
|
<tr>
|
||||||
<td>This event fires whenever a new item becomes activated by the scrollspy.</td>
|
<td>activate</td>
|
||||||
</tr>
|
<td>This event fires whenever a new item becomes activated by the scrollspy.</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- ./bs-table-scrollable -->
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#myScrollspy').on('activate.bs.scrollspy', function () {
|
$('#myScrollspy').on('activate.bs.scrollspy', function () {
|
||||||
// do something…
|
// do something…
|
||||||
@ -685,24 +693,26 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
|
|||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 150px;">Event Type</th>
|
<tr>
|
||||||
<th>Description</th>
|
<th style="width: 150px;">Event Type</th>
|
||||||
</tr>
|
<th>Description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>show</td>
|
<tr>
|
||||||
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
<td>show</td>
|
||||||
</tr>
|
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>shown</td>
|
<tr>
|
||||||
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
<td>shown</td>
|
||||||
</tr>
|
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
||||||
e.target // activated tab
|
e.target // activated tab
|
||||||
@ -752,72 +762,74 @@ $('#example').tooltip(options)
|
|||||||
|
|
||||||
<h3>Options</h3>
|
<h3>Options</h3>
|
||||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
|
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 100px;">Name</th>
|
<tr>
|
||||||
<th style="width: 100px;">type</th>
|
<th style="width: 100px;">Name</th>
|
||||||
<th style="width: 50px;">default</th>
|
<th style="width: 100px;">type</th>
|
||||||
<th>description</th>
|
<th style="width: 50px;">default</th>
|
||||||
</tr>
|
<th>description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>animation</td>
|
<tr>
|
||||||
<td>boolean</td>
|
<td>animation</td>
|
||||||
<td>true</td>
|
<td>boolean</td>
|
||||||
<td>apply a CSS fade transition to the tooltip</td>
|
<td>true</td>
|
||||||
</tr>
|
<td>apply a CSS fade transition to the tooltip</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>html</td>
|
<tr>
|
||||||
<td>boolean</td>
|
<td>html</td>
|
||||||
<td>false</td>
|
<td>boolean</td>
|
||||||
<td>Insert HTML into the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
|
<td>false</td>
|
||||||
</tr>
|
<td>Insert HTML into the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>placement</td>
|
<tr>
|
||||||
<td>string | function</td>
|
<td>placement</td>
|
||||||
<td>'top'</td>
|
<td>string | function</td>
|
||||||
<td>how to position the tooltip - top | bottom | left | right | auto. <br> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
|
<td>'top'</td>
|
||||||
</tr>
|
<td>how to position the tooltip - top | bottom | left | right | auto. <br> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>selector</td>
|
<tr>
|
||||||
<td>string</td>
|
<td>selector</td>
|
||||||
<td>false</td>
|
<td>string</td>
|
||||||
<td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
|
<td>false</td>
|
||||||
</tr>
|
<td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>title</td>
|
<tr>
|
||||||
<td>string | function</td>
|
<td>title</td>
|
||||||
<td>''</td>
|
<td>string | function</td>
|
||||||
<td>default title value if <code>title</code> tag isn't present</td>
|
<td>''</td>
|
||||||
</tr>
|
<td>default title value if <code>title</code> tag isn't present</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>trigger</td>
|
<tr>
|
||||||
<td>string</td>
|
<td>trigger</td>
|
||||||
<td>'hover focus'</td>
|
<td>string</td>
|
||||||
<td>how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
|
<td>'hover focus'</td>
|
||||||
</tr>
|
<td>how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>delay</td>
|
<tr>
|
||||||
<td>number | object</td>
|
<td>delay</td>
|
||||||
<td>0</td>
|
<td>number | object</td>
|
||||||
<td>
|
<td>0</td>
|
||||||
<p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
|
<td>
|
||||||
<p>If a number is supplied, delay is applied to both hide/show</p>
|
<p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
|
||||||
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
<p>If a number is supplied, delay is applied to both hide/show</p>
|
||||||
</td>
|
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
||||||
</tr>
|
</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>container</td>
|
<tr>
|
||||||
<td>string | false</td>
|
<td>container</td>
|
||||||
<td>false</td>
|
<td>string | false</td>
|
||||||
<td>
|
<td>false</td>
|
||||||
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
|
<td>
|
||||||
</td>
|
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
|
||||||
</tr>
|
</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
<div class="bs-callout bs-callout-info">
|
<div class="bs-callout bs-callout-info">
|
||||||
<h4>Data attributes for individual tooltips</h4>
|
<h4>Data attributes for individual tooltips</h4>
|
||||||
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
|
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
|
||||||
@ -850,32 +862,34 @@ $('#example').tooltip(options)
|
|||||||
{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
|
{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
|
||||||
|
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 150px;">Event Type</th>
|
<tr>
|
||||||
<th>Description</th>
|
<th style="width: 150px;">Event Type</th>
|
||||||
</tr>
|
<th>Description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>show</td>
|
<tr>
|
||||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
<td>show</td>
|
||||||
</tr>
|
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>shown</td>
|
<tr>
|
||||||
<td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
|
<td>shown</td>
|
||||||
</tr>
|
<td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>hide</td>
|
<tr>
|
||||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
<td>hide</td>
|
||||||
</tr>
|
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>hidden</td>
|
<tr>
|
||||||
<td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
<td>hidden</td>
|
||||||
</tr>
|
<td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#myTooltip').on('hidden.bs.tooltip', function () {
|
$('#myTooltip').on('hidden.bs.tooltip', function () {
|
||||||
// do something…
|
// do something…
|
||||||
@ -970,78 +984,80 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
|||||||
|
|
||||||
<h3>Options</h3>
|
<h3>Options</h3>
|
||||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
|
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 100px;">Name</th>
|
<tr>
|
||||||
<th style="width: 100px;">type</th>
|
<th style="width: 100px;">Name</th>
|
||||||
<th style="width: 50px;">default</th>
|
<th style="width: 100px;">type</th>
|
||||||
<th>description</th>
|
<th style="width: 50px;">default</th>
|
||||||
</tr>
|
<th>description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>animation</td>
|
<tr>
|
||||||
<td>boolean</td>
|
<td>animation</td>
|
||||||
<td>true</td>
|
<td>boolean</td>
|
||||||
<td>apply a CSS fade transition to the tooltip</td>
|
<td>true</td>
|
||||||
</tr>
|
<td>apply a CSS fade transition to the tooltip</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>html</td>
|
<tr>
|
||||||
<td>boolean</td>
|
<td>html</td>
|
||||||
<td>false</td>
|
<td>boolean</td>
|
||||||
<td>Insert HTML into the popover. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
|
<td>false</td>
|
||||||
</tr>
|
<td>Insert HTML into the popover. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>placement</td>
|
<tr>
|
||||||
<td>string | function</td>
|
<td>placement</td>
|
||||||
<td>'right'</td>
|
<td>string | function</td>
|
||||||
<td>how to position the popover - top | bottom | left | right | auto.<br> When "auto" is specified, it will dynamically reorient the popover. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
|
<td>'right'</td>
|
||||||
</tr>
|
<td>how to position the popover - top | bottom | left | right | auto.<br> When "auto" is specified, it will dynamically reorient the popover. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>selector</td>
|
<tr>
|
||||||
<td>string</td>
|
<td>selector</td>
|
||||||
<td>false</td>
|
<td>string</td>
|
||||||
<td>if a selector is provided, tooltip objects will be delegated to the specified targets if a selector is provided, tooltip objects will be delegated to the specified targets. in practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/KPeKS/4/">an informative example</a>.</td>
|
<td>false</td>
|
||||||
</tr>
|
<td>if a selector is provided, tooltip objects will be delegated to the specified targets if a selector is provided, tooltip objects will be delegated to the specified targets. in practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/KPeKS/4/">an informative example</a>.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>trigger</td>
|
<tr>
|
||||||
<td>string</td>
|
<td>trigger</td>
|
||||||
<td>'click'</td>
|
<td>string</td>
|
||||||
<td>how popover is triggered - click | hover | focus | manual</td>
|
<td>'click'</td>
|
||||||
</tr>
|
<td>how popover is triggered - click | hover | focus | manual</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>title</td>
|
<tr>
|
||||||
<td>string | function</td>
|
<td>title</td>
|
||||||
<td>''</td>
|
<td>string | function</td>
|
||||||
<td>default title value if <code>title</code> attribute isn't present</td>
|
<td>''</td>
|
||||||
</tr>
|
<td>default title value if <code>title</code> attribute isn't present</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>content</td>
|
<tr>
|
||||||
<td>string | function</td>
|
<td>content</td>
|
||||||
<td>''</td>
|
<td>string | function</td>
|
||||||
<td>default content value if <code>data-content</code> attribute isn't present</td>
|
<td>''</td>
|
||||||
</tr>
|
<td>default content value if <code>data-content</code> attribute isn't present</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>delay</td>
|
<tr>
|
||||||
<td>number | object</td>
|
<td>delay</td>
|
||||||
<td>0</td>
|
<td>number | object</td>
|
||||||
<td>
|
<td>0</td>
|
||||||
<p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
|
<td>
|
||||||
<p>If a number is supplied, delay is applied to both hide/show</p>
|
<p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
|
||||||
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
<p>If a number is supplied, delay is applied to both hide/show</p>
|
||||||
</td>
|
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
||||||
</tr>
|
</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>container</td>
|
<tr>
|
||||||
<td>string | false</td>
|
<td>container</td>
|
||||||
<td>false</td>
|
<td>string | false</td>
|
||||||
<td>
|
<td>false</td>
|
||||||
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code></p>
|
<td>
|
||||||
</td>
|
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code></p>
|
||||||
</tr>
|
</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
<div class="bs-callout bs-callout-info">
|
<div class="bs-callout bs-callout-info">
|
||||||
<h4>Data attributes for individual popovers</h4>
|
<h4>Data attributes for individual popovers</h4>
|
||||||
<p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
|
<p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
|
||||||
@ -1070,32 +1086,34 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
|||||||
<p>Hides and destroys an element's popover.</p>
|
<p>Hides and destroys an element's popover.</p>
|
||||||
{% highlight js %}$('#element').popover('destroy'){% endhighlight %}
|
{% highlight js %}$('#element').popover('destroy'){% endhighlight %}
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 150px;">Event Type</th>
|
<tr>
|
||||||
<th>Description</th>
|
<th style="width: 150px;">Event Type</th>
|
||||||
</tr>
|
<th>Description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>show</td>
|
<tr>
|
||||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
<td>show</td>
|
||||||
</tr>
|
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>shown</td>
|
<tr>
|
||||||
<td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
|
<td>shown</td>
|
||||||
</tr>
|
<td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>hide</td>
|
<tr>
|
||||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
<td>hide</td>
|
||||||
</tr>
|
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>hidden</td>
|
<tr>
|
||||||
<td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
<td>hidden</td>
|
||||||
</tr>
|
<td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#myPopover').on('hidden.bs.popover', function () {
|
$('#myPopover').on('hidden.bs.popover', function () {
|
||||||
// do something…
|
// do something…
|
||||||
@ -1152,24 +1170,26 @@ $('#myPopover').on('hidden.bs.popover', function () {
|
|||||||
|
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
|
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 150px;">Event Type</th>
|
<tr>
|
||||||
<th>Description</th>
|
<th style="width: 150px;">Event Type</th>
|
||||||
</tr>
|
<th>Description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>close</td>
|
<tr>
|
||||||
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
|
<td>close</td>
|
||||||
</tr>
|
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>closed</td>
|
<tr>
|
||||||
<td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
|
<td>closed</td>
|
||||||
</tr>
|
<td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#my-alert').bind('closed.bs.alert', function () {
|
$('#my-alert').bind('closed.bs.alert', function () {
|
||||||
// do something…
|
// do something…
|
||||||
@ -1444,31 +1464,32 @@ $(".collapse").collapse()
|
|||||||
|
|
||||||
<h3>Options</h3>
|
<h3>Options</h3>
|
||||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.</p>
|
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 100px;">Name</th>
|
<tr>
|
||||||
<th style="width: 50px;">type</th>
|
<th style="width: 100px;">Name</th>
|
||||||
<th style="width: 50px;">default</th>
|
<th style="width: 50px;">type</th>
|
||||||
<th>description</th>
|
<th style="width: 50px;">default</th>
|
||||||
</tr>
|
<th>description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>parent</td>
|
<tr>
|
||||||
<td>selector</td>
|
<td>parent</td>
|
||||||
<td>false</td>
|
<td>selector</td>
|
||||||
<td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td>
|
<td>false</td>
|
||||||
</tr>
|
<td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>toggle</td>
|
<tr>
|
||||||
<td>boolean</td>
|
<td>toggle</td>
|
||||||
<td>true</td>
|
<td>boolean</td>
|
||||||
<td>Toggles the collapsible element on invocation</td>
|
<td>true</td>
|
||||||
</tr>
|
<td>Toggles the collapsible element on invocation</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
|
|
||||||
<h3>Methods</h3>
|
<h3>Methods</h3>
|
||||||
|
|
||||||
@ -1491,34 +1512,36 @@ $('#myCollapsible').collapse({
|
|||||||
|
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
|
<p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 150px;">Event Type</th>
|
<tr>
|
||||||
<th>Description</th>
|
<th style="width: 150px;">Event Type</th>
|
||||||
</tr>
|
<th>Description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>show</td>
|
<tr>
|
||||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
<td>show</td>
|
||||||
</tr>
|
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>shown</td>
|
<tr>
|
||||||
<td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
|
<td>shown</td>
|
||||||
</tr>
|
<td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>hide</td>
|
<tr>
|
||||||
<td>
|
<td>hide</td>
|
||||||
This event is fired immediately when the <code>hide</code> method has been called.
|
<td>
|
||||||
</td>
|
This event is fired immediately when the <code>hide</code> method has been called.
|
||||||
</tr>
|
</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>hidden</td>
|
<tr>
|
||||||
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
|
<td>hidden</td>
|
||||||
</tr>
|
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#myCollapsible').on('hidden.bs.collapse', function () {
|
$('#myCollapsible').on('hidden.bs.collapse', function () {
|
||||||
// do something…
|
// do something…
|
||||||
@ -1661,30 +1684,32 @@ $('.carousel').carousel()
|
|||||||
|
|
||||||
<h3>Options</h3>
|
<h3>Options</h3>
|
||||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p>
|
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 100px;">Name</th>
|
<tr>
|
||||||
<th style="width: 50px;">type</th>
|
<th style="width: 100px;">Name</th>
|
||||||
<th style="width: 50px;">default</th>
|
<th style="width: 50px;">type</th>
|
||||||
<th>description</th>
|
<th style="width: 50px;">default</th>
|
||||||
</tr>
|
<th>description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>interval</td>
|
<tr>
|
||||||
<td>number</td>
|
<td>interval</td>
|
||||||
<td>5000</td>
|
<td>number</td>
|
||||||
<td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
|
<td>5000</td>
|
||||||
</tr>
|
<td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>pause</td>
|
<tr>
|
||||||
<td>string</td>
|
<td>pause</td>
|
||||||
<td>"hover"</td>
|
<td>string</td>
|
||||||
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
|
<td>"hover"</td>
|
||||||
</tr>
|
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
|
|
||||||
<h3>Methods</h3>
|
<h3>Methods</h3>
|
||||||
|
|
||||||
@ -1714,24 +1739,26 @@ $('.carousel').carousel({
|
|||||||
|
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
|
<p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 150px;">Event Type</th>
|
<tr>
|
||||||
<th>Description</th>
|
<th style="width: 150px;">Event Type</th>
|
||||||
</tr>
|
<th>Description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>slide</td>
|
<tr>
|
||||||
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
|
<td>slide</td>
|
||||||
</tr>
|
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>slid</td>
|
<tr>
|
||||||
<td>This event is fired when the carousel has completed its slide transition.</td>
|
<td>slid</td>
|
||||||
</tr>
|
<td>This event is fired when the carousel has completed its slide transition.</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#myCarousel').on('slide.bs.carousel', function () {
|
$('#myCarousel').on('slide.bs.carousel', function () {
|
||||||
// do something…
|
// do something…
|
||||||
@ -1787,22 +1814,25 @@ $('#myCarousel').on('slide.bs.carousel', function () {
|
|||||||
<h3>Options</h3>
|
<h3>Options</h3>
|
||||||
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
|
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
|
||||||
|
|
||||||
<table class="table table-bordered table-striped">
|
<div class="bs-table-scrollable">
|
||||||
<thead>
|
<table class="table table-bordered table-striped">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 100px;">Name</th>
|
<tr>
|
||||||
<th style="width: 100px;">type</th>
|
<th style="width: 100px;">Name</th>
|
||||||
<th style="width: 50px;">default</th>
|
<th style="width: 100px;">type</th>
|
||||||
<th>description</th>
|
<th style="width: 50px;">default</th>
|
||||||
</tr>
|
<th>description</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>offset</td>
|
<tr>
|
||||||
<td>number | function | object</td>
|
<td>offset</td>
|
||||||
<td>10</td>
|
<td>number | function | object</td>
|
||||||
<td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td>
|
<td>10</td>
|
||||||
</tr>
|
<td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div><!-- /.bs-table-scrollable -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -132,9 +132,7 @@
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
+ li {
|
+ li {
|
||||||
> a {
|
margin-left: 2px;
|
||||||
margin-left: 2px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Active state
|
// Active state
|
||||||
@ -167,12 +165,11 @@
|
|||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
.nav-justified {
|
.nav-justified {
|
||||||
display: table;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
> li {
|
> li {
|
||||||
float: none;
|
float: none;
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
width: auto;
|
width: 1%;
|
||||||
> a {
|
> a {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -11,9 +11,13 @@ p {
|
|||||||
}
|
}
|
||||||
.lead {
|
.lead {
|
||||||
margin-bottom: @line-height-computed;
|
margin-bottom: @line-height-computed;
|
||||||
font-size: (@font-size-base * 1.5);
|
font-size: (@font-size-base * 1.15);
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
font-size: (@font-size-base * 1.5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user