mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-29 21:52:22 +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"] {
|
||||
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 */
|
||||
}
|
||||
|
||||
137
css.html
137
css.html
@ -78,6 +78,7 @@ 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>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped bs-table">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -128,6 +129,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
|
||||
</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,7 +1053,8 @@ 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">
|
||||
<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">
|
||||
@ -1089,6 +1092,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</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,112 +1545,124 @@ 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">
|
||||
<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>
|
||||
<br>
|
||||
<div class="input-group col-lg-7">
|
||||
</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>
|
||||
</div><!-- /input-group -->
|
||||
</div><!-- /.col-lg-6 -->
|
||||
</div><!-- /.row -->
|
||||
</form>
|
||||
{% highlight html %}
|
||||
<div class="input-group col-lg-7">
|
||||
<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>
|
||||
|
||||
<div class="input-group col-lg-7">
|
||||
</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>
|
||||
</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="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">
|
||||
@ -1663,12 +1675,13 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</div><!-- /btn-group -->
|
||||
<input type="text" class="form-control">
|
||||
</div><!-- /input-group -->
|
||||
<br>
|
||||
<div class="input-group col-lg-7">
|
||||
</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 pull-right">
|
||||
<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>
|
||||
@ -1677,9 +1690,13 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</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="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">
|
||||
@ -1691,13 +1708,14 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<input type="text" class="form-control">
|
||||
</div><!-- /input-group -->
|
||||
|
||||
<div class="input-group col-lg-7">
|
||||
</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 pull-right">
|
||||
<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>
|
||||
@ -1705,12 +1723,16 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /input-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="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">
|
||||
@ -1725,11 +1747,10 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="input-group col-lg-7">
|
||||
</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>
|
||||
@ -1744,17 +1765,19 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</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,6 +2157,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</div>
|
||||
|
||||
<h3>Print classes</h3>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped responsive-utilities">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -2155,6 +2179,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</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>
|
||||
|
||||
16
dist/css/bootstrap.css
vendored
16
dist/css/bootstrap.css
vendored
@ -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 {
|
||||
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
@ -228,6 +228,7 @@ $('#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>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -267,6 +268,7 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
|
||||
<h3>Methods</h3>
|
||||
|
||||
@ -292,6 +294,7 @@ $('#myModal').modal({
|
||||
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -318,6 +321,7 @@ $('#myModal').modal({
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
{% highlight js %}
|
||||
$('#myModal').on('hidden.bs.modal', function () {
|
||||
// do something…
|
||||
@ -546,6 +550,7 @@ $('[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>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -564,8 +569,10 @@ $('[data-spy="scroll"]').each(function () {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- ./bs-table-scrollable -->
|
||||
|
||||
<h3>Events</h3>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -580,6 +587,7 @@ $('[data-spy="scroll"]').each(function () {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- ./bs-table-scrollable -->
|
||||
{% highlight js %}
|
||||
$('#myScrollspy').on('activate.bs.scrollspy', function () {
|
||||
// do something…
|
||||
@ -685,6 +693,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Events</h3>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -703,6 +712,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
{% highlight js %}
|
||||
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
||||
e.target // activated tab
|
||||
@ -752,6 +762,7 @@ $('#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>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -818,6 +829,7 @@ $('#example').tooltip(options)
|
||||
</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,6 +862,7 @@ $('#example').tooltip(options)
|
||||
{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
|
||||
|
||||
<h3>Events</h3>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -876,6 +889,7 @@ $('#example').tooltip(options)
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
{% highlight js %}
|
||||
$('#myTooltip').on('hidden.bs.tooltip', function () {
|
||||
// do something…
|
||||
@ -970,6 +984,7 @@ $('#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>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1042,6 +1057,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
||||
</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,6 +1086,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
||||
<p>Hides and destroys an element's popover.</p>
|
||||
{% highlight js %}$('#element').popover('destroy'){% endhighlight %}
|
||||
<h3>Events</h3>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1096,6 +1113,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
{% highlight js %}
|
||||
$('#myPopover').on('hidden.bs.popover', function () {
|
||||
// do something…
|
||||
@ -1152,6 +1170,7 @@ $('#myPopover').on('hidden.bs.popover', function () {
|
||||
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1170,6 +1189,7 @@ $('#myPopover').on('hidden.bs.popover', function () {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
{% highlight js %}
|
||||
$('#my-alert').bind('closed.bs.alert', function () {
|
||||
// do something…
|
||||
@ -1444,6 +1464,7 @@ $(".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>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1468,7 +1489,7 @@ $(".collapse").collapse()
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
|
||||
<h3>Methods</h3>
|
||||
|
||||
@ -1491,6 +1512,7 @@ $('#myCollapsible').collapse({
|
||||
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1519,6 +1541,7 @@ $('#myCollapsible').collapse({
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
{% highlight js %}
|
||||
$('#myCollapsible').on('hidden.bs.collapse', function () {
|
||||
// do something…
|
||||
@ -1661,6 +1684,7 @@ $('.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>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1685,6 +1709,7 @@ $('.carousel').carousel()
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
|
||||
<h3>Methods</h3>
|
||||
|
||||
@ -1714,6 +1739,7 @@ $('.carousel').carousel({
|
||||
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1732,6 +1758,7 @@ $('.carousel').carousel({
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
{% highlight js %}
|
||||
$('#myCarousel').on('slide.bs.carousel', function () {
|
||||
// do something…
|
||||
@ -1787,6 +1814,7 @@ $('#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>
|
||||
|
||||
<div class="bs-table-scrollable">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1805,4 +1833,6 @@ $('#myCarousel').on('slide.bs.carousel', function () {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.bs-table-scrollable -->
|
||||
|
||||
</div>
|
||||
|
||||
@ -132,10 +132,8 @@
|
||||
border-radius: 5px;
|
||||
}
|
||||
+ li {
|
||||
> a {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
&.active > a {
|
||||
@ -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…
x
Reference in New Issue
Block a user