rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-11 03:52:27 +01:00
Code Issues Actions Packages Releases Activity

Merge branch '3.0.0-wip' into gh-pages

Browse Source
This commit is contained in:
Mark Otto 2013-07-30 11:08:08 -07:00
commit 0d30dabade
21 changed files with 171 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Gruntfile.js
View File

@ -28,7 +28,6 @@ module.exports = function(grunt) {
},
jshint: {
options: {
ignores: [],// HACK: workaround https://github.com/gruntjs/grunt-contrib-jshint/issues/86
jshintrc: 'js/.jshintrc'
},
gruntfile: {

2
README.md
View File

@ -10,7 +10,7 @@ To get started, check out [http://getbootstrap.com](http://getbootstrap.com)!
Three quick start options are available:
* [Download the latest release](https://github.com/twbs/bootstrap/zipball/master).
* [Download the latest release](https://github.com/twbs/bootstrap/zipball/3.0.0-wip).
* Clone the repo: `git clone git://github.com/twbs/bootstrap.git`.
* Install with [Bower](http://bower.io): `bower install bootstrap`.

4
_includes/header.html
View File

@ -20,8 +20,8 @@
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/assets/js/html5shiv.js"></script>
<script src="/assets/js/respond.min.js"></script>
<script src="{{ page.base_url }}assets/js/html5shiv.js"></script>
<script src="{{ page.base_url }}assets/js/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->

11
assets/css/docs.css
View File

@ -20,6 +20,7 @@ body {
border-color: #e5e5e5;
}
.btn-bs:hover,
.btn-bs:focus,
.btn-bs:active {
color: #fff;
background-color: #563d7c;
@ -260,12 +261,9 @@ body {
/* Nav: second level (shown on .active) */
.bs-sidebar .nav .nav {
display: none;
display: none; /* Hide by default, but at >768px, show it */
margin-bottom: 8px;
}
.bs-sidebar .nav > .active > ul {
display: block;
}
.bs-sidebar .nav .nav > li > a {
padding-top: 3px;
padding-bottom: 3px;
@ -388,7 +386,6 @@ body {
.bs-example-type .table td {
color: #999;
vertical-align: middle;
border-color: ;
}
.bs-example-type .table td,
.bs-example-type .table th {
@ -792,6 +789,10 @@ input.focused {
.bs-sidebar {
display: block;
}
/* Show the hidden subnavs when space allows it */
.bs-sidebar .nav > .active > ul {
display: block;
}
/* Tweak display of docs jumbotrons */
.bs-masthead {

13
assets/js/application.js
View File

@ -7,26 +7,25 @@
$(function(){
var $window = $(window)
var $body = $(document.body)
var navHeight = $('.navbar').outerHeight(true) + 10
$(document.body).scrollspy({
$body.scrollspy({
target: '.bs-sidebar',
offset: navHeight
})
$('[href=#]').click(function (e) {
$('.bs-docs-container [href=#]').click(function (e) {
e.preventDefault()
})
$(document.body).on('click', '.bs-sidenav [href^=#]', function (e) {
$body.on('click', '.bs-sidenav [href^=#]', function (e) {
var $target = $(this.getAttribute('href'))
// e.preventDefault() // prevent browser scroll
e.preventDefault() // prevent browser scroll
document.body.scrollTop =
$target.offset().top -
navHeight + 5 // offset scroll by nav
$window.scrollTop($target.offset().top - navHeight + 5)
})
// back to top

2
bower.json
View File

@ -1,7 +1,7 @@
{
"name": "bootstrap",
"version": "3.0.0",
"main": ["./docs/assets/js/bootstrap.js", "./docs/assets/css/bootstrap.css"],
"main": ["./dist/js/bootstrap.min.js", "./dist/js/bootstrap.js", "./dist/css/bootstrap.min.css", "./dist/css/bootstrap.css"],
"ignore": [
"**/.*"
],

2
composer.json
View File

@ -1,5 +1,5 @@
{
"name": "twitter/bootstrap"
"name": "twbs/bootstrap"
, "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development."
, "keywords": ["bootstrap", "css"]
, "homepage": "http://getbootstrap.com"

105
css.html
View File

@ -29,6 +29,12 @@ base_url: "../"
<p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code>&lt;head&gt;</code>.</p>
{% highlight html %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% endhighlight %}
<h3 id="overview-responsive-images">Responsive images</h3>
<p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
{% highlight html %}
<img src="..." class="img-responsive" alt="Reponsive image">
{% endhighlight %}
<h3 id="overview-type-links">Typography and links</h3>
@ -39,13 +45,13 @@ base_url: "../"
<li>Use the <code>@font-family-base</code>, <code>@font-size-base</code>, and <code>@line-height-base</code> attributes as our typographic base</li>
<li>Set the global link color via <code>@link-color</code> and apply link underlines only on <code>:hover</code></li>
</ul>
<p>These styles can be found within <strong>scaffolding.less</strong>.</p>
<p>These styles can be found within <code>scaffolding.less</code>.</p>
<h3 id="overview-normalize">Normalize reset</h3>
<p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
<h3 id="overview-container">Centering with container</h3>
<p>Easily center a page's contents by wrapping its contents in a container. Containers set <code>max-width</code> at various media query breakpoints to match our grid system.</p>
<p>Easily center a page's contents by wrapping its contents in a <code>.container</code>. Containers set <code>max-width</code> at various media query breakpoints to match our grid system.</p>
{% highlight html %}
<div class="container">
...
@ -85,16 +91,20 @@ base_url: "../"
<tr>
<th></th>
<th>
Tiny grid
<small>Phones (&lt;480px)</small>
Tiny devices
<small>Phones (&lt;768px)</small>
</th>
<th>
Small grid
<small>Tablets (&lt;768px)</small>
Small devices
<small>Tablets (&gt;768px)</small>
</th>
<th>
Medium-large grid
<small>Desktops (&gt;768px)</small>
Medium devices
<small>Desktops (&gt;992px)</small>
</th>
<th>
Large devices
<small>Desktops (&gt;1200px)</small>
</th>
</tr>
</thead>
@ -102,31 +112,49 @@ base_url: "../"
<tr>
<th>Grid behavior</th>
<td>Horizontal at all times</td>
<td colspan="2">Collapsed to start, horizontal above breakpoints</td>
<td colspan="3">Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<th>Max container width</th>
<td>None (auto)</td>
<td>728px</td>
<td>940px</td>
<td>1170px</td>
</tr>
<tr>
<th>Class prefix</th>
<td><code>.col-</code></td>
<td><code>.col-sm-</code></td>
<td><code>.col-lg-</code></td>
<td colspan="2"><code>.col-lg-</code></td>
</tr>
<tr>
<th># of columns</th>
<td colspan="3">12</td>
<td colspan="4">12</td>
</tr>
<tr>
<th>Max column width</th>
<td>Auto</td>
<td>~60px</td>
<td>~78px</td>
<td>~98px</td>
</tr>
<tr>
<th>Gutter width</th>
<td colspan="4">30px (15px on each side of a column)</td>
</tr>
<tr>
<th>Nestable</th>
<td colspan="3">Yes</td>
<td colspan="4">Yes</td>
</tr>
<tr>
<th>Offsets</th>
<td colspan="2" class="text-muted">N/A</td>
<td>Yes</td>
<td colspan="2">Yes</td>
</tr>
<tr>
<th>Column ordering</th>
<td class="text-muted">N/A</td>
<td colspan="2">Yes</td>
<td colspan="3">Yes</td>
</tr>
</tbody>
</table>
@ -178,7 +206,7 @@ base_url: "../"
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
</div>
<div class="row show-grid">
<div class="row">
<div class="col-lg-8">8</div>
<div class="col-lg-4">4</div>
</div>
@ -211,15 +239,20 @@ base_url: "../"
</div>
</div>
{% highlight html %}
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-lg-8">8</div>
<div class="col-6 col-lg-4">4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-lg-4">4</div>
<div class="col-6 col-lg-4">4</div>
<div class="col-6 col-lg-4">4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6 col-lg-6">6</div>
<div class="col-6 col-lg-6">6</div>
@ -334,7 +367,7 @@ base_url: "../"
</div>
{% highlight html %}
<div class="row show-grid">
<div class="row">
<div class="col-lg-9 col-push-3">9</div>
<div class="col-lg-3 col-pull-9">3</div>
</div>
@ -616,7 +649,7 @@ base_url: "../"
<p>For quoting blocks of content from another source within your document.</p>
<h3>Default blockquote</h3>
<p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code>&lt;p&gt;</code>.</p>
<p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes, we recommend a <code>&lt;p&gt;</code>.</p>
<div class="bs-example">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -629,7 +662,7 @@ base_url: "../"
{% endhighlight %}
<h3>Blockquote options</h3>
<p>Style and content changes for simple variations on a standard blockquote.</p>
<p>Style and content changes for simple variations on a standard <code>&lt;blockquote&gt;</code>.</p>
<h4>Naming a source</h4>
<p>Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
@ -827,7 +860,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
{% endhighlight %}
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
<p>You may optionally add the <code>.pre-scrollable</code> class, which will set a max-height of 350px and provide a y-axis scrollbar.</p>
</div>
@ -887,7 +920,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
<div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in IE8.</p>
<p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in Internet Explorer 8.</p>
</div>
<div class="bs-example">
<table class="table table-striped">
@ -1306,7 +1339,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Examples of standard form controls supported in an example form layout.</p>
<h3>Inputs</h3>
<p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p>
<p>Most common form control, text-based input fields. Includes support for all HTML5 types: <code>text</code>, <code>password</code>, <code>datetime</code>, <code>datetime-local</code>, <code>date</code>, <code>month</code>, <code>time</code>, <code>week</code>, <code>number</code>, <code>email</code>, <code>url</code>, <code>search</code>, <code>tel</code>, and <code>color</code>.</p>
<div class="bs-callout bs-callout-danger">
<h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
@ -1364,6 +1397,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
@ -1397,7 +1432,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h3>Selects</h3>
<p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
<p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p>
<form class="bs-example">
<select class="form-control">
<option>1</option>
@ -1407,7 +1442,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<option>5</option>
</select>
<br>
<select multiple="multiple" class="form-control">
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
@ -1424,7 +1459,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<option>5</option>
</select>
<select multiple="multiple" class="form-control">
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
@ -1466,7 +1501,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<p>While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
</div>
<form class="bs-example form-inline">
@ -1534,9 +1569,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-control-sizes">Control sizing</h2>
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.col-lg-*</code> classes.</p>
<p>Set heights using classes like <code>.input-large</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p>
<h3>Relative sizing</h3>
<h3>Height 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">
@ -1664,6 +1699,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="button" class="btn btn-primary btn-small">Small button</button>
<button type="button" class="btn btn-default btn-small">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-mini">Mini button</button>
<button type="button" class="btn btn-default btn-mini">Mini button</button>
</p>
</div>
{% highlight html %}
<p>
@ -1678,6 +1717,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<button type="button" class="btn btn-primary btn-small">Small button</button>
<button type="button" class="btn btn-default btn-small">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-mini">Mini button</button>
<button type="button" class="btn btn-default btn-mini">Mini button</button>
</p>
{% endhighlight %}
<p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
@ -1749,6 +1792,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="bs-callout bs-callout-warning">
<h4>Cross-browser rendering</h4>
<p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
<p>Among other things, there's <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a Firefox bug</a> that prevents us from setting the <code>line-height</code> of <code>&lt;input&gt;</code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>
</div>
</div>
@ -1778,6 +1822,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<img src="..." class="img-thumbnail">
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Responsive images</h4>
<p>Looking for how to make images more responsive? <a href="../css#overview-responsive-images">Check out the responsive images section</a> up top.</p>
</div>
</div>
@ -1963,7 +2012,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</li>
<li>
<span class="visible-lg">Large</span>
<span class="hidden-lg">&#10004; Hidden on desktop</span>
<span class="hidden-lg">&#10004; Hidden on large</span>
</li>
</ul>

27
dist/css/bootstrap.css vendored
View File

@ -1438,14 +1438,14 @@ textarea.form-control {
margin-left: 10px;
}
.form-control.input-large {
.input-large {
height: 56px;
padding: 14px 16px;
font-size: 18px;
border-radius: 6px;
}
.form-control.input-small {
.input-small {
height: 30px;
padding: 5px 10px;
font-size: 12px;
@ -1462,6 +1462,11 @@ select.input-small {
line-height: 30px;
}
textarea.input-large,
textarea.input-small {
height: auto;
}
.has-warning .help-block,
.has-warning .control-label {
color: #c09853;
@ -1554,6 +1559,11 @@ select.input-small {
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.btn:focus {
@ -1828,13 +1838,18 @@ fieldset[disabled] .btn-link:focus {
border-radius: 6px;
}
.btn-small {
.btn-small,
.btn-mini {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-mini {
padding: 3px 5px;
}
.btn-block {
display: block;
width: 100%;
@ -2186,7 +2201,6 @@ input[type="button"].btn-block {
.list-group {
padding-left: 0;
margin-bottom: 20px;
background-color: #ffffff;
}
.list-group-item {
@ -2194,6 +2208,7 @@ input[type="button"].btn-block {
display: block;
padding: 10px 30px 10px 15px;
margin-bottom: -1px;
background-color: #ffffff;
border: 1px solid #dddddd;
}
@ -2566,7 +2581,7 @@ button.close {
float: none;
}
.nav-stacked > li + li > a {
.nav-stacked > li + li {
margin-top: 2px;
margin-left: 0;
}
@ -3002,6 +3017,8 @@ button.close {
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active {
z-index: 2;

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

12
dist/js/bootstrap.js vendored
View File

@ -50,8 +50,8 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false, $el = this
$(this).one('webkitTransitionEnd', function () { called = true })
var callback = function () { if (!called) $($el).trigger('webkitTransitionEnd') }
$(this).one($.support.transition.end, function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
return this
}
@ -1054,9 +1054,11 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
})
})
var $body = $(document.body)
.on('shown.bs.modal', '.modal', function () { $body.addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $body.removeClass('modal-open') })
$(function () {
var $body = $(document.body)
.on('shown.bs.modal', '.modal', function () { $body.addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $body.removeClass('modal-open') })
})
}(window.jQuery);

2
dist/js/bootstrap.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
getting-started.html
View File

@ -194,7 +194,7 @@ bootstrap/
<h4>It does not require you to:</h4>
<ul>
<li>Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it</li>
<li>Submit changes that you make to Bootstrap back to Twitter (though such feedback is encouraged)</li>
<li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li>
</ul>
</div>
</div>

20
javascript.html
View File

@ -196,7 +196,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
<!-- Modal -->
<div class="modal" id="myModal">
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@ -742,10 +742,10 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
<h3>Four directions</h3>
<div class="bs-example tooltip-demo">
<div class="bs-example-tooltips">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
</div><!-- /example -->
@ -963,17 +963,17 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
<h4>Four directions</h4>
<div class="bs-example tooltip-demo">
<div class="bs-example-tooltips">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
</div>
</div><!-- /example -->
@ -1218,7 +1218,7 @@ $('#my-alert').bind('closed.bs.alert', function () {
</button>
</div><!-- /example -->
{% highlight html %}
<button type="button" id="fat-btn" data-loading-text="Loading..." class="btn btn-primary">
<button type="button" data-loading-text="Loading..." class="btn btn-primary">
Loading state
</button>
{% endhighlight %}

8
js/modal.js
View File

@ -234,8 +234,10 @@
})
})
var $body = $(document.body)
.on('shown.bs.modal', '.modal', function () { $body.addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $body.removeClass('modal-open') })
$(function () {
var $body = $(document.body)
.on('shown.bs.modal', '.modal', function () { $body.addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $body.removeClass('modal-open') })
})
}(window.jQuery);

4
js/transition.js
View File

@ -43,8 +43,8 @@
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false, $el = this
$(this).one('webkitTransitionEnd', function () { called = true })
var callback = function () { if (!called) $($el).trigger('webkitTransitionEnd') }
$(this).one($.support.transition.end, function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
return this
}

1
less/button-groups.less
View File

@ -21,6 +21,7 @@
float: left;
// Bring the "active" button to the front
&:hover,
&:focus,
&:active {
z-index: 2;
}

7
less/buttons.less
View File

@ -20,6 +20,7 @@
border: 1px solid transparent;
border-radius: @border-radius-base;
white-space: nowrap;
.user-select(none);
&:focus {
.tab-focus();
@ -124,12 +125,16 @@
font-size: @font-size-large;
border-radius: @border-radius-large;
}
.btn-small {
.btn-small,
.btn-mini {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
line-height: 1.5; // ensure proper height of button next to small input
border-radius: @border-radius-small;
}
.btn-mini {
padding: 3px 5px;
}
// Block button

31
less/forms.less
View File

@ -218,20 +218,19 @@ input[type="number"] {
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
.form-control {
&.input-large {
height: @input-height-large;
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
}
&.input-small {
height: @input-height-small;
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
border-radius: @border-radius-small;
}
.input-large {
height: @input-height-large;
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
}
.input-small {
height: @input-height-small;
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
border-radius: @border-radius-small;
}
select {
&.input-large {
height: @input-height-large;
@ -242,6 +241,12 @@ select {
line-height: @input-height-small;
}
}
textarea {
&.input-large,
&.input-small {
height: auto;
}
}
// Form control feedback states

2
less/list-group.less
View File

@ -9,7 +9,6 @@
// No need to set list-style: none; since .list-group-item is block level
margin-bottom: 20px;
padding-left: 0; // reset padding because ul and ol
background-color: @list-group-bg;
}
// Individual list items
@ -21,6 +20,7 @@
padding: 10px 30px 10px 15px;
// Place the border on the list items and negative margin up for better styling
margin-bottom: -1px;
background-color: @list-group-bg;
border: 1px solid @list-group-border;
// Round the first and last items

6
less/navs.less
View File

@ -148,10 +148,8 @@
> li {
float: none;
+ li {
> a {
margin-top: 2px;
margin-left: 0; // no need for this gap between nav items
}
margin-top: 2px;
margin-left: 0; // no need for this gap between nav items
}
}
}