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"] {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.bs-example-form {
|
||||
overflow: hidden;
|
||||
}
|
||||
.bs-example-form .input-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -431,6 +428,9 @@ body {
|
|||
}
|
||||
|
||||
/* Navbar examples */
|
||||
.bs-example .navbar:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.bs-navbar-top-example,
|
||||
.bs-navbar-bottom-example {
|
||||
z-index: 1;
|
||||
|
|
@ -457,7 +457,7 @@ body {
|
|||
}
|
||||
.bs-navbar-top-example:after {
|
||||
top: auto;
|
||||
bottom: -1px;
|
||||
bottom: 15px;
|
||||
-webkit-border-radius: 0 4px 0 4px;
|
||||
-moz-border-radius: 0 4px 0 4px;
|
||||
border-radius: 0 4px 0 4px;
|
||||
|
|
@ -545,6 +545,37 @@ body {
|
|||
/* 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 */
|
||||
.table code {
|
||||
font-size: 13px;
|
||||
|
|
@ -578,7 +609,7 @@ body {
|
|||
------------------------- */
|
||||
.responsive-utilities-test {
|
||||
margin-top: 5px;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
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>
|
||||
<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">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>
|
||||
Tiny grid
|
||||
<small>Phones (<480px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Small grid
|
||||
<small>Tablets (<768px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Medium-large grid
|
||||
<small>Destkops (>768px)</small>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Grid behavior</th>
|
||||
<td>Horizontal at all times</td>
|
||||
<td colspan="2">Collapsed to start, horizontal above breakpoints</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Class prefix</th>
|
||||
<td><code>.col-</code></td>
|
||||
<td><code>.col-sm-</code></td>
|
||||
<td><code>.col-lg-</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th># of columns</th>
|
||||
<td colspan="3">12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Nestable</th>
|
||||
<td colspan="3">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Offsets</th>
|
||||
<td colspan="2" class="text-muted">N/A</td>
|
||||
<td>Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Column ordering</th>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td colspan="2">Yes</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped bs-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>
|
||||
Tiny grid
|
||||
<small>Phones (<480px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Small grid
|
||||
<small>Tablets (<768px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Medium-large grid
|
||||
<small>Destkops (>768px)</small>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Grid behavior</th>
|
||||
<td>Horizontal at all times</td>
|
||||
<td colspan="2">Collapsed to start, horizontal above breakpoints</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Class prefix</th>
|
||||
<td><code>.col-</code></td>
|
||||
<td><code>.col-sm-</code></td>
|
||||
<td><code>.col-lg-</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th># of columns</th>
|
||||
<td colspan="3">12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Nestable</th>
|
||||
<td colspan="3">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Offsets</th>
|
||||
<td colspan="2" class="text-muted">N/A</td>
|
||||
<td>Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Column ordering</th>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td colspan="2">Yes</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
|
@ -1051,44 +1053,46 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
|
||||
<h2 id="tables-row-classes">Contextual table classes</h2>
|
||||
<p>Use contextual classes to color table rows or individual cells.</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<colgroup>
|
||||
<col class="col-lg-1">
|
||||
<col class="col-lg-7">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code>.success</code>
|
||||
</td>
|
||||
<td>Indicates a successful or positive action</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>.danger</code>
|
||||
</td>
|
||||
<td>Indicates a dangerous or potentially negative action</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>.warning</code>
|
||||
</td>
|
||||
<td>Indicates a warning that might need attention</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>.active</code>
|
||||
</td>
|
||||
<td>Applies the hover color to a particular row or cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped bs-table">
|
||||
<colgroup>
|
||||
<col class="col-lg-1">
|
||||
<col class="col-lg-7">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code>.success</code>
|
||||
</td>
|
||||
<td>Indicates a successful or positive action</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>.danger</code>
|
||||
</td>
|
||||
<td>Indicates a dangerous or potentially negative action</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>.warning</code>
|
||||
</td>
|
||||
<td>Indicates a warning that might need attention</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>.active</code>
|
||||
</td>
|
||||
<td>Applies the hover color to a particular row or cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="bs-example">
|
||||
<table class="table">
|
||||
<thead>
|
||||
|
|
@ -1528,11 +1532,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
{% endhighlight %}
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
<h2 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>
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
|
|
@ -1545,216 +1545,239 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</div>
|
||||
|
||||
<form class="bs-example bs-example-form">
|
||||
<div class="input-group col-lg-9">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group col-lg-3">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input type="text" class="form-control">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<div class="input-group col-lg-9">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
|
||||
<div class="input-group col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group col-lg-3">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">$</span>
|
||||
<input type="text" class="form-control">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h4>Optional sizes</h4>
|
||||
<h3>Optional sizes</h3>
|
||||
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
|
||||
<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>
|
||||
<input type="text" class="form-control input-large" placeholder="Username">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group col-lg-9">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group col-lg-9">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon input-small">@</span>
|
||||
<input type="text" class="form-control input-small" placeholder="Username">
|
||||
</div>
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<div class="input-group col-lg-9">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon input-large">@</span>
|
||||
<input type="text" class="form-control input-large" placeholder="Username">
|
||||
</div>
|
||||
|
||||
<div class="input-group col-lg-9">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
|
||||
<div class="input-group col-lg-9">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon input-small">@</span>
|
||||
<input type="text" class="form-control input-small" placeholder="Username">
|
||||
</div>
|
||||
{% 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>
|
||||
<form class="bs-example bs-example-form">
|
||||
<div class="input-group col-lg-7">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
</span>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<br>
|
||||
<div class="input-group col-lg-7">
|
||||
<input type="text" class="form-control">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
</span>
|
||||
<input type="text" class="form-control">
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<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>
|
||||
{% highlight html %}
|
||||
<div class="input-group col-lg-7">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
</span>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="input-group col-lg-7">
|
||||
<input type="text" class="form-control">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
</span>
|
||||
<input type="text" class="form-control">
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<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 %}
|
||||
|
||||
<h4>Button dropdowns</h4>
|
||||
<h3>Button dropdowns</h3>
|
||||
<p></p>
|
||||
<form class="bs-example bs-example-form">
|
||||
<div class="input-group col-lg-7">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<input type="text" class="form-control">
|
||||
</div><!-- /input-group -->
|
||||
<br>
|
||||
<div class="input-group col-lg-7">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-group -->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<input type="text" class="form-control">
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
</div><!-- /.row -->
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<div class="input-group col-lg-7">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<input type="text" class="form-control">
|
||||
</div><!-- /input-group -->
|
||||
|
||||
<div class="input-group col-lg-7">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-group -->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<input type="text" class="form-control">
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
</div><!-- /.row -->
|
||||
{% endhighlight %}
|
||||
|
||||
<h4>Segmented dropdown groups</h4>
|
||||
<h3>Segmented dropdown groups</h3>
|
||||
<form class="bs-example bs-example-form">
|
||||
<div class="input-group col-lg-7">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="input-group col-lg-7">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
</div><!-- /.input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /.input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
</div><!-- /.row -->
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<div class="input-group col-lg-7">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<!-- Button and dropdown menu -->
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="input-group col-lg-7">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn btn-group">
|
||||
<!-- Button and dropdown menu -->
|
||||
|
|
@ -1762,10 +1785,10 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</div>
|
||||
{% 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>
|
||||
|
||||
<h4>Relative sizing</h4>
|
||||
<h3>Relative sizing</h3>
|
||||
<p>Create larger or smaller form controls that match button sizes.</p>
|
||||
<form class="bs-example bs-example-control-sizing">
|
||||
<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>
|
||||
{% 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>
|
||||
<form class="bs-example" style="padding-bottom: 15px;">
|
||||
<div class="row">
|
||||
|
|
@ -1823,7 +1846,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</div>
|
||||
{% 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>
|
||||
<form class="bs-example">
|
||||
<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>
|
||||
|
||||
<h3>Responsive classes</h3>
|
||||
<div class="hidden-sm">
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped responsive-utilities">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -2134,27 +2157,29 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
</div>
|
||||
|
||||
<h3>Print classes</h3>
|
||||
<table class="table table-bordered table-striped responsive-utilities">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Browser</th>
|
||||
<th>Print</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>.visible-print</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.hidden-print</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped responsive-utilities">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Browser</th>
|
||||
<th>Print</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>.visible-print</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.hidden-print</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -362,11 +362,17 @@ p {
|
|||
|
||||
.lead {
|
||||
margin-bottom: 20px;
|
||||
font-size: 21px;
|
||||
font-size: 16.099999999999998px;
|
||||
font-weight: 200;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.lead {
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
|
@ -2513,7 +2519,6 @@ button.close {
|
|||
}
|
||||
|
||||
.nav-tabs.nav-justified {
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
|
@ -2521,7 +2526,7 @@ button.close {
|
|||
.nav-tabs.nav-justified > li {
|
||||
display: table-cell;
|
||||
float: none;
|
||||
width: auto;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.nav-tabs.nav-justified > li > a {
|
||||
|
|
@ -2545,7 +2550,7 @@ button.close {
|
|||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.nav-pills > li + li > a {
|
||||
.nav-pills > li + li {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -2566,14 +2571,13 @@ button.close {
|
|||
}
|
||||
|
||||
.nav-justified {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-justified > li {
|
||||
display: table-cell;
|
||||
float: none;
|
||||
width: auto;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.nav-justified > li > a {
|
||||
|
|
|
|||
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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
|
|
|||
896
javascript.html
896
javascript.html
|
|
@ -228,45 +228,47 @@ $('#myModal').on('show.bs.modal', function (e) {
|
|||
|
||||
<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>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>backdrop</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<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>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Closes the modal when escape key is pressed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Shows the modal when initialized.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>remote</td>
|
||||
<td>path</td>
|
||||
<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>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>backdrop</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<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>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Closes the modal when escape key is pressed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Shows the modal when initialized.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>remote</td>
|
||||
<td>path</td>
|
||||
<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 %}
|
||||
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
|
||||
{% endhighlight %}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
|
||||
<h3>Methods</h3>
|
||||
|
||||
|
|
@ -292,32 +294,34 @@ $('#myModal').modal({
|
|||
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown</td>
|
||||
<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>
|
||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden</td>
|
||||
<td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown</td>
|
||||
<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>
|
||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden</td>
|
||||
<td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
{% highlight js %}
|
||||
$('#myModal').on('hidden.bs.modal', function () {
|
||||
// do something…
|
||||
|
|
@ -546,40 +550,44 @@ $('[data-spy="scroll"]').each(function () {
|
|||
|
||||
<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>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 100px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>offset</td>
|
||||
<td>number</td>
|
||||
<td>10</td>
|
||||
<td>Pixels to offset from top when calculating position of scroll.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 100px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>offset</td>
|
||||
<td>number</td>
|
||||
<td>10</td>
|
||||
<td>Pixels to offset from top when calculating position of scroll.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- ./bs-table-scrollable -->
|
||||
|
||||
<h3>Events</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>activate</td>
|
||||
<td>This event fires whenever a new item becomes activated by the scrollspy.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>activate</td>
|
||||
<td>This event fires whenever a new item becomes activated by the scrollspy.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- ./bs-table-scrollable -->
|
||||
{% highlight js %}
|
||||
$('#myScrollspy').on('activate.bs.scrollspy', function () {
|
||||
// do something…
|
||||
|
|
@ -685,24 +693,26 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
|
|||
{% endhighlight %}
|
||||
|
||||
<h3>Events</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<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>
|
||||
<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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<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>
|
||||
<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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
{% highlight js %}
|
||||
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
||||
e.target // activated tab
|
||||
|
|
@ -752,72 +762,74 @@ $('#example').tooltip(options)
|
|||
|
||||
<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>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 100px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>animation</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>apply a CSS fade transition to the tooltip</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>html</td>
|
||||
<td>boolean</td>
|
||||
<td>false</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
<td>string | function</td>
|
||||
<td>'top'</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selector</td>
|
||||
<td>string</td>
|
||||
<td>false</td>
|
||||
<td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>string | function</td>
|
||||
<td>''</td>
|
||||
<td>default title value if <code>title</code> tag isn't present</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>trigger</td>
|
||||
<td>string</td>
|
||||
<td>'hover focus'</td>
|
||||
<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>
|
||||
<td>number | object</td>
|
||||
<td>0</td>
|
||||
<td>
|
||||
<p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
|
||||
<p>If a number is supplied, delay is applied to both hide/show</p>
|
||||
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>container</td>
|
||||
<td>string | false</td>
|
||||
<td>false</td>
|
||||
<td>
|
||||
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 100px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>animation</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>apply a CSS fade transition to the tooltip</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>html</td>
|
||||
<td>boolean</td>
|
||||
<td>false</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
<td>string | function</td>
|
||||
<td>'top'</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selector</td>
|
||||
<td>string</td>
|
||||
<td>false</td>
|
||||
<td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>string | function</td>
|
||||
<td>''</td>
|
||||
<td>default title value if <code>title</code> tag isn't present</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>trigger</td>
|
||||
<td>string</td>
|
||||
<td>'hover focus'</td>
|
||||
<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>
|
||||
<td>number | object</td>
|
||||
<td>0</td>
|
||||
<td>
|
||||
<p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
|
||||
<p>If a number is supplied, delay is applied to both hide/show</p>
|
||||
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>container</td>
|
||||
<td>string | false</td>
|
||||
<td>false</td>
|
||||
<td>
|
||||
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<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>
|
||||
|
|
@ -850,32 +862,34 @@ $('#example').tooltip(options)
|
|||
{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
|
||||
|
||||
<h3>Events</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown</td>
|
||||
<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>
|
||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden</td>
|
||||
<td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown</td>
|
||||
<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>
|
||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden</td>
|
||||
<td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
{% highlight js %}
|
||||
$('#myTooltip').on('hidden.bs.tooltip', function () {
|
||||
// do something…
|
||||
|
|
@ -970,78 +984,80 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
|||
|
||||
<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>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 100px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>animation</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>apply a CSS fade transition to the tooltip</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>html</td>
|
||||
<td>boolean</td>
|
||||
<td>false</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
<td>string | function</td>
|
||||
<td>'right'</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selector</td>
|
||||
<td>string</td>
|
||||
<td>false</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>trigger</td>
|
||||
<td>string</td>
|
||||
<td>'click'</td>
|
||||
<td>how popover is triggered - click | hover | focus | manual</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>string | function</td>
|
||||
<td>''</td>
|
||||
<td>default title value if <code>title</code> attribute isn't present</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content</td>
|
||||
<td>string | function</td>
|
||||
<td>''</td>
|
||||
<td>default content value if <code>data-content</code> attribute isn't present</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>delay</td>
|
||||
<td>number | object</td>
|
||||
<td>0</td>
|
||||
<td>
|
||||
<p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
|
||||
<p>If a number is supplied, delay is applied to both hide/show</p>
|
||||
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>container</td>
|
||||
<td>string | false</td>
|
||||
<td>false</td>
|
||||
<td>
|
||||
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 100px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>animation</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>apply a CSS fade transition to the tooltip</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>html</td>
|
||||
<td>boolean</td>
|
||||
<td>false</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
<td>string | function</td>
|
||||
<td>'right'</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selector</td>
|
||||
<td>string</td>
|
||||
<td>false</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>trigger</td>
|
||||
<td>string</td>
|
||||
<td>'click'</td>
|
||||
<td>how popover is triggered - click | hover | focus | manual</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>title</td>
|
||||
<td>string | function</td>
|
||||
<td>''</td>
|
||||
<td>default title value if <code>title</code> attribute isn't present</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>content</td>
|
||||
<td>string | function</td>
|
||||
<td>''</td>
|
||||
<td>default content value if <code>data-content</code> attribute isn't present</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>delay</td>
|
||||
<td>number | object</td>
|
||||
<td>0</td>
|
||||
<td>
|
||||
<p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
|
||||
<p>If a number is supplied, delay is applied to both hide/show</p>
|
||||
<p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>container</td>
|
||||
<td>string | false</td>
|
||||
<td>false</td>
|
||||
<td>
|
||||
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<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>
|
||||
|
|
@ -1070,32 +1086,34 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
|||
<p>Hides and destroys an element's popover.</p>
|
||||
{% highlight js %}$('#element').popover('destroy'){% endhighlight %}
|
||||
<h3>Events</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown</td>
|
||||
<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>
|
||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden</td>
|
||||
<td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown</td>
|
||||
<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>
|
||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden</td>
|
||||
<td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
{% highlight js %}
|
||||
$('#myPopover').on('hidden.bs.popover', function () {
|
||||
// do something…
|
||||
|
|
@ -1152,24 +1170,26 @@ $('#myPopover').on('hidden.bs.popover', function () {
|
|||
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>close</td>
|
||||
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>closed</td>
|
||||
<td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>close</td>
|
||||
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>closed</td>
|
||||
<td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
{% highlight js %}
|
||||
$('#my-alert').bind('closed.bs.alert', function () {
|
||||
// do something…
|
||||
|
|
@ -1444,31 +1464,32 @@ $(".collapse").collapse()
|
|||
|
||||
<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>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>parent</td>
|
||||
<td>selector</td>
|
||||
<td>false</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toggle</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Toggles the collapsible element on invocation</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>parent</td>
|
||||
<td>selector</td>
|
||||
<td>false</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toggle</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Toggles the collapsible element on invocation</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
|
||||
<h3>Methods</h3>
|
||||
|
||||
|
|
@ -1491,34 +1512,36 @@ $('#myCollapsible').collapse({
|
|||
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown</td>
|
||||
<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>
|
||||
<td>
|
||||
This event is fired immediately when the <code>hide</code> method has been called.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden</td>
|
||||
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown</td>
|
||||
<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>
|
||||
<td>
|
||||
This event is fired immediately when the <code>hide</code> method has been called.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden</td>
|
||||
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
{% highlight js %}
|
||||
$('#myCollapsible').on('hidden.bs.collapse', function () {
|
||||
// do something…
|
||||
|
|
@ -1661,30 +1684,32 @@ $('.carousel').carousel()
|
|||
|
||||
<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>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>interval</td>
|
||||
<td>number</td>
|
||||
<td>5000</td>
|
||||
<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>
|
||||
<td>string</td>
|
||||
<td>"hover"</td>
|
||||
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>interval</td>
|
||||
<td>number</td>
|
||||
<td>5000</td>
|
||||
<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>
|
||||
<td>string</td>
|
||||
<td>"hover"</td>
|
||||
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
|
||||
<h3>Methods</h3>
|
||||
|
||||
|
|
@ -1714,24 +1739,26 @@ $('.carousel').carousel({
|
|||
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>slide</td>
|
||||
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>slid</td>
|
||||
<td>This event is fired when the carousel has completed its slide transition.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>slide</td>
|
||||
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>slid</td>
|
||||
<td>This event is fired when the carousel has completed its slide transition.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
{% highlight js %}
|
||||
$('#myCarousel').on('slide.bs.carousel', function () {
|
||||
// do something…
|
||||
|
|
@ -1787,22 +1814,25 @@ $('#myCarousel').on('slide.bs.carousel', function () {
|
|||
<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>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 100px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>offset</td>
|
||||
<td>number | function | object</td>
|
||||
<td>10</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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 100px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>offset</td>
|
||||
<td>number | function | object</td>
|
||||
<td>10</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>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -132,9 +132,7 @@
|
|||
border-radius: 5px;
|
||||
}
|
||||
+ li {
|
||||
> a {
|
||||
margin-left: 2px;
|
||||
}
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
// Active state
|
||||
|
|
@ -167,12 +165,11 @@
|
|||
// -------------------------
|
||||
|
||||
.nav-justified {
|
||||
display: table;
|
||||
width: 100%;
|
||||
> li {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
width: auto;
|
||||
width: 1%;
|
||||
> a {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,9 +11,13 @@ p {
|
|||
}
|
||||
.lead {
|
||||
margin-bottom: @line-height-computed;
|
||||
font-size: (@font-size-base * 1.5);
|
||||
font-size: (@font-size-base * 1.15);
|
||||
font-weight: 200;
|
||||
line-height: 1.4;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: (@font-size-base * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue