Skip to content

B
bootstrap
Commit 7b9a949a authored by fat's avatar fat
Browse files
Options

Merge branch '3.0.0-wip' of github.com:twitter/bootstrap into 3.0.0-wip

parents cfa4ab90 88dd20e6
Expand all Show whitespace changes
Inline Side-by-side
Showing with 801 additions and 706 deletions
assets/css/docs.css
View file @ 7b9a949a
...@@ -418,9 +418,6 @@ body { ...@@ -418,9 +418,6 @@ body {
.bs-example-control-sizing input[type="text"] + input[type="text"] { .bs-example-control-sizing input[type="text"] + input[type="text"] {
margin-top: 10px; margin-top: 10px;
} }
.bs-example-form {
overflow: hidden;
}
.bs-example-form .input-group { .bs-example-form .input-group {
margin-bottom: 10px; margin-bottom: 10px;
} }
...@@ -431,6 +428,9 @@ body { ...@@ -431,6 +428,9 @@ body {
} }
/* Navbar examples */ /* Navbar examples */
.bs-example .navbar:last-child {
margin-bottom: 0;
}
.bs-navbar-top-example, .bs-navbar-top-example,
.bs-navbar-bottom-example { .bs-navbar-bottom-example {
z-index: 1; z-index: 1;
...@@ -457,7 +457,7 @@ body { ...@@ -457,7 +457,7 @@ body {
} }
.bs-navbar-top-example:after { .bs-navbar-top-example:after {
top: auto; top: auto;
bottom: -1px; bottom: 15px;
-webkit-border-radius: 0 4px 0 4px; -webkit-border-radius: 0 4px 0 4px;
-moz-border-radius: 0 4px 0 4px; -moz-border-radius: 0 4px 0 4px;
border-radius: 0 4px 0 4px; border-radius: 0 4px 0 4px;
...@@ -545,6 +545,37 @@ body { ...@@ -545,6 +545,37 @@ body {
/* Responsive docs /* Responsive docs
-------------------------------------------------- */ -------------------------------------------------- */
/* Responsive (scrollable) doc tables */
@media (max-width: 768px) {
.bs-table-scrollable {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
border: 1px solid #ddd;
}
.bs-table-scrollable .table {
margin-bottom: 0;
border: 0;
}
.bs-table-scrollable .table th,
.bs-table-scrollable .table td {
white-space: nowrap;
}
.bs-table-scrollable .table th:first-child,
.bs-table-scrollable .table td:first-child {
border-left: 0;
}
.bs-table-scrollable .table th:last-child,
.bs-table-scrollable .table td:last-child {
border-right: 0;
}
.bs-table-scrollable .table tr:last-child th,
.bs-table-scrollable .table tr:last-child td {
border-bottom: 0;
}
}
/* Related: responsive utilities tables */ /* Related: responsive utilities tables */
.table code { .table code {
font-size: 13px; font-size: 13px;
...@@ -578,7 +609,7 @@ body { ...@@ -578,7 +609,7 @@ body {
------------------------- */ ------------------------- */
.responsive-utilities-test { .responsive-utilities-test {
margin-top: 5px; margin-top: 5px;
margin-left: 0; padding-left: 0;
list-style: none; list-style: none;
overflow: hidden; /* clear floats */ overflow: hidden; /* clear floats */
} }
......
css.html
View file @ 7b9a949a
This diff is collapsed.
dist/css/bootstrap.css
View file @ 7b9a949a
...@@ -362,11 +362,17 @@ p { ...@@ -362,11 +362,17 @@ p {
.lead { .lead {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 21px; font-size: 16.099999999999998px;
font-weight: 200; font-weight: 200;
line-height: 1.4; line-height: 1.4;
} }
@media (min-width: 768px) {
.lead {
font-size: 21px;
}
}
small { small {
font-size: 85%; font-size: 85%;
} }
...@@ -2513,7 +2519,6 @@ button.close { ...@@ -2513,7 +2519,6 @@ button.close {
} }
.nav-tabs.nav-justified { .nav-tabs.nav-justified {
display: table;
width: 100%; width: 100%;
border-bottom: 0; border-bottom: 0;
} }
...@@ -2521,7 +2526,7 @@ button.close { ...@@ -2521,7 +2526,7 @@ button.close {
.nav-tabs.nav-justified > li { .nav-tabs.nav-justified > li {
display: table-cell; display: table-cell;
float: none; float: none;
width: auto; width: 1%;
} }
.nav-tabs.nav-justified > li > a { .nav-tabs.nav-justified > li > a {
...@@ -2545,7 +2550,7 @@ button.close { ...@@ -2545,7 +2550,7 @@ button.close {
border-radius: 5px; border-radius: 5px;
} }
.nav-pills > li + li > a { .nav-pills > li + li {
margin-left: 2px; margin-left: 2px;
} }
...@@ -2566,14 +2571,13 @@ button.close { ...@@ -2566,14 +2571,13 @@ button.close {
} }
.nav-justified { .nav-justified {
display: table;
width: 100%; width: 100%;
} }
.nav-justified > li { .nav-justified > li {
display: table-cell; display: table-cell;
float: none; float: none;
width: auto; width: 1%;
} }
.nav-justified > li > a { .nav-justified > li > a {
......
dist/css/bootstrap.min.css
View file @ 7b9a949a
This source diff could not be displayed because it is too large. You can view the blob instead.
getting-started.html
View file @ 7b9a949a
...@@ -147,7 +147,11 @@ bootstrap/ ...@@ -147,7 +147,11 @@ bootstrap/
<p>In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">respond.js</a> to enable media query support.</strong></p> <p>In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">respond.js</a> to enable media query support.</strong></p>
<h3>IE Compatibility modes</h3> <h3>IE Compatibility modes</h3>
<p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including <code>&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;</code> in your pages. See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p> <p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code>meta</code> tag in your pages.</p>
{% highlight html %}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% endhighlight %}
<p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
</div> </div>
......
javascript.html
View file @ 7b9a949a
...@@ -228,6 +228,7 @@ $('#myModal').on('show.bs.modal', function (e) { ...@@ -228,6 +228,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -267,6 +268,7 @@ $('#myModal').on('show.bs.modal', function (e) { ...@@ -267,6 +268,7 @@ $('#myModal').on('show.bs.modal', function (e) {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable -->
<h3>Methods</h3> <h3>Methods</h3>
...@@ -292,6 +294,7 @@ $('#myModal').modal({ ...@@ -292,6 +294,7 @@ $('#myModal').modal({
<h3>Events</h3> <h3>Events</h3>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p> <p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -318,6 +321,7 @@ $('#myModal').modal({ ...@@ -318,6 +321,7 @@ $('#myModal').modal({
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %} {% highlight js %}
$('#myModal').on('hidden.bs.modal', function () { $('#myModal').on('hidden.bs.modal', function () {
// do something… // do something…
...@@ -546,6 +550,7 @@ $('[data-spy="scroll"]').each(function () { ...@@ -546,6 +550,7 @@ $('[data-spy="scroll"]').each(function () {
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset=""</code>.</p>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -564,8 +569,10 @@ $('[data-spy="scroll"]').each(function () { ...@@ -564,8 +569,10 @@ $('[data-spy="scroll"]').each(function () {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- ./bs-table-scrollable -->
<h3>Events</h3> <h3>Events</h3>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -580,6 +587,7 @@ $('[data-spy="scroll"]').each(function () { ...@@ -580,6 +587,7 @@ $('[data-spy="scroll"]').each(function () {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- ./bs-table-scrollable -->
{% highlight js %} {% highlight js %}
$('#myScrollspy').on('activate.bs.scrollspy', function () { $('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something… // do something…
...@@ -685,6 +693,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed) ...@@ -685,6 +693,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
{% endhighlight %} {% endhighlight %}
<h3>Events</h3> <h3>Events</h3>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -703,6 +712,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed) ...@@ -703,6 +712,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %} {% highlight js %}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // activated tab e.target // activated tab
...@@ -752,6 +762,7 @@ $('#example').tooltip(options) ...@@ -752,6 +762,7 @@ $('#example').tooltip(options)
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -818,6 +829,7 @@ $('#example').tooltip(options) ...@@ -818,6 +829,7 @@ $('#example').tooltip(options)
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable -->
<div class="bs-callout bs-callout-info"> <div class="bs-callout bs-callout-info">
<h4>Data attributes for individual tooltips</h4> <h4>Data attributes for individual tooltips</h4>
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p> <p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
...@@ -850,6 +862,7 @@ $('#example').tooltip(options) ...@@ -850,6 +862,7 @@ $('#example').tooltip(options)
{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %} {% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
<h3>Events</h3> <h3>Events</h3>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -876,6 +889,7 @@ $('#example').tooltip(options) ...@@ -876,6 +889,7 @@ $('#example').tooltip(options)
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %} {% highlight js %}
$('#myTooltip').on('hidden.bs.tooltip', function () { $('#myTooltip').on('hidden.bs.tooltip', function () {
// do something… // do something…
...@@ -970,6 +984,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () { ...@@ -970,6 +984,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1042,6 +1057,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () { ...@@ -1042,6 +1057,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable -->
<div class="bs-callout bs-callout-info"> <div class="bs-callout bs-callout-info">
<h4>Data attributes for individual popovers</h4> <h4>Data attributes for individual popovers</h4>
<p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p> <p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
...@@ -1070,6 +1086,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () { ...@@ -1070,6 +1086,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<p>Hides and destroys an element's popover.</p> <p>Hides and destroys an element's popover.</p>
{% highlight js %}$('#element').popover('destroy'){% endhighlight %} {% highlight js %}$('#element').popover('destroy'){% endhighlight %}
<h3>Events</h3> <h3>Events</h3>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1096,6 +1113,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () { ...@@ -1096,6 +1113,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %} {% highlight js %}
$('#myPopover').on('hidden.bs.popover', function () { $('#myPopover').on('hidden.bs.popover', function () {
// do something… // do something…
...@@ -1152,6 +1170,7 @@ $('#myPopover').on('hidden.bs.popover', function () { ...@@ -1152,6 +1170,7 @@ $('#myPopover').on('hidden.bs.popover', function () {
<h3>Events</h3> <h3>Events</h3>
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p> <p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1170,6 +1189,7 @@ $('#myPopover').on('hidden.bs.popover', function () { ...@@ -1170,6 +1189,7 @@ $('#myPopover').on('hidden.bs.popover', function () {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %} {% highlight js %}
$('#my-alert').bind('closed.bs.alert', function () { $('#my-alert').bind('closed.bs.alert', function () {
// do something… // do something…
...@@ -1444,6 +1464,7 @@ $(".collapse").collapse() ...@@ -1444,6 +1464,7 @@ $(".collapse").collapse()
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.</p>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1468,7 +1489,7 @@ $(".collapse").collapse() ...@@ -1468,7 +1489,7 @@ $(".collapse").collapse()
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable -->
<h3>Methods</h3> <h3>Methods</h3>
...@@ -1491,6 +1512,7 @@ $('#myCollapsible').collapse({ ...@@ -1491,6 +1512,7 @@ $('#myCollapsible').collapse({
<h3>Events</h3> <h3>Events</h3>
<p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p> <p>Bootstrap's collapse class exposes a few events for hooking into collapse functionality.</p>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1519,6 +1541,7 @@ $('#myCollapsible').collapse({ ...@@ -1519,6 +1541,7 @@ $('#myCollapsible').collapse({
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %} {% highlight js %}
$('#myCollapsible').on('hidden.bs.collapse', function () { $('#myCollapsible').on('hidden.bs.collapse', function () {
// do something… // do something…
...@@ -1661,6 +1684,7 @@ $('.carousel').carousel() ...@@ -1661,6 +1684,7 @@ $('.carousel').carousel()
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1685,6 +1709,7 @@ $('.carousel').carousel() ...@@ -1685,6 +1709,7 @@ $('.carousel').carousel()
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable -->
<h3>Methods</h3> <h3>Methods</h3>
...@@ -1714,6 +1739,7 @@ $('.carousel').carousel({ ...@@ -1714,6 +1739,7 @@ $('.carousel').carousel({
<h3>Events</h3> <h3>Events</h3>
<p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p> <p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1732,6 +1758,7 @@ $('.carousel').carousel({ ...@@ -1732,6 +1758,7 @@ $('.carousel').carousel({
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable -->
{% highlight js %} {% highlight js %}
$('#myCarousel').on('slide.bs.carousel', function () { $('#myCarousel').on('slide.bs.carousel', function () {
// do something… // do something…
...@@ -1787,6 +1814,7 @@ $('#myCarousel').on('slide.bs.carousel', function () { ...@@ -1787,6 +1814,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {
<h3>Options</h3> <h3>Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
<div class="bs-table-scrollable">
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1805,4 +1833,6 @@ $('#myCarousel').on('slide.bs.carousel', function () { ...@@ -1805,4 +1833,6 @@ $('#myCarousel').on('slide.bs.carousel', function () {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- /.bs-table-scrollable -->
</div> </div>
less/navs.less
View file @ 7b9a949a
...@@ -132,10 +132,8 @@ ...@@ -132,10 +132,8 @@
border-radius: 5px; border-radius: 5px;
} }
+ li { + li {
> a {
margin-left: 2px; margin-left: 2px;
} }
}
// Active state // Active state
&.active > a { &.active > a {
...@@ -167,12 +165,11 @@ ...@@ -167,12 +165,11 @@
// ------------------------- // -------------------------
.nav-justified { .nav-justified {
display: table;
width: 100%; width: 100%;
> li { > li {
float: none; float: none;
display: table-cell; display: table-cell;
width: auto; width: 1%;
> a { > a {
text-align: center; text-align: center;
} }
......
less/type.less
View file @ 7b9a949a
...@@ -11,9 +11,13 @@ p { ...@@ -11,9 +11,13 @@ p {
} }
.lead { .lead {
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.5); font-size: (@font-size-base * 1.15);
font-weight: 200; font-weight: 200;
line-height: 1.4; line-height: 1.4;
@media (min-width: 768px) {
font-size: (@font-size-base * 1.5);
}
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment