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

Merge branch 'master' into cursor_var

Browse Source
This commit is contained in:
Mark Otto 2014-10-28 22:57:26 -07:00
commit c4b053a013
29 changed files with 470 additions and 302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_config.yml
View File

@ -10,7 +10,6 @@ source: docs
destination: _gh_pages
host: 0.0.0.0
port: 9001
baseurl: /
url: http://getbootstrap.com
encoding: UTF-8

89
dist/js/bootstrap.js vendored
View File

@ -207,10 +207,10 @@ if (typeof jQuery === 'undefined') {
if (data.resetText == null) $el.data('resetText', $el[val]())
$el[val](data[state] == null ? this.options[state] : data[state])
// push to event loop to allow forms to submit
setTimeout($.proxy(function () {
$el[val](data[state] == null ? this.options[state] : data[state])
if (state == 'loadingText') {
this.isLoading = true
$el.addClass(d).attr(d, d)
@ -496,7 +496,7 @@ if (typeof jQuery === 'undefined') {
// CAROUSEL DATA-API
// =================
$(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
var clickHandler = function (e) {
var href
var $this = $(this)
var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
@ -512,7 +512,11 @@ if (typeof jQuery === 'undefined') {
}
e.preventDefault()
})
}
$(document)
.on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
.on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)
$(window).on('load', function () {
$('[data-ride="carousel"]').each(function () {
@ -541,9 +545,15 @@ if (typeof jQuery === 'undefined') {
var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Collapse.DEFAULTS, options)
this.$trigger = $(this.options.trigger).filter('[href="#' + element.id + '"], [data-target="#' + element.id + '"]')
this.transitioning = null
if (this.options.parent) this.$parent = $(this.options.parent)
if (this.options.parent) {
this.$parent = this.getParent()
} else {
this.addAriaAndCollapsedClass(this.$element, this.$trigger)
}
if (this.options.toggle) this.toggle()
}
@ -552,7 +562,8 @@ if (typeof jQuery === 'undefined') {
Collapse.TRANSITION_DURATION = 350
Collapse.DEFAULTS = {
toggle: true
toggle: true,
trigger: '[data-toggle="collapse"]'
}
Collapse.prototype.dimension = function () {
@ -587,6 +598,10 @@ if (typeof jQuery === 'undefined') {
.addClass('collapsing')[dimension](0)
.attr('aria-expanded', true)
this.$trigger
.removeClass('collapsed')
.attr('aria-expanded', true)
this.transitioning = 1
var complete = function () {
@ -623,6 +638,10 @@ if (typeof jQuery === 'undefined') {
.removeClass('collapse in')
.attr('aria-expanded', false)
this.$trigger
.addClass('collapsed')
.attr('aria-expanded', false)
this.transitioning = 1
var complete = function () {
@ -645,6 +664,33 @@ if (typeof jQuery === 'undefined') {
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
Collapse.prototype.getParent = function () {
return $(this.options.parent)
.find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
.each($.proxy(function (i, element) {
var $element = $(element)
this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
}, this))
.end()
}
Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
var isOpen = $element.hasClass('in')
$element.attr('aria-expanded', isOpen)
$trigger
.toggleClass('collapsed', !isOpen)
.attr('aria-expanded', isOpen)
}
function getTargetFromTrigger($trigger) {
var href
var target = $trigger.attr('data-target')
|| (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
return $(target)
}
// COLLAPSE PLUGIN DEFINITION
// ==========================
@ -680,22 +726,13 @@ if (typeof jQuery === 'undefined') {
// =================
$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
var href
var $this = $(this)
var target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
var $target = $(target)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $this.data()
var parent = $this.attr('data-parent')
var $parent = parent && $(parent)
if (!data || !data.transitioning) {
if ($parent) $parent.find('[data-toggle="collapse"][data-parent="' + parent + '"]').not($this).addClass('collapsed').attr('aria-expanded', false)
var isCollapsed = $target.hasClass('in')
$this.toggleClass('collapsed', isCollapsed).attr('aria-expanded', !isCollapsed)
}
if (!$this.attr('data-target')) e.preventDefault()
var $target = getTargetFromTrigger($this)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $.extend({}, $this.data(), { trigger: this })
Plugin.call($target, option)
})
@ -858,7 +895,9 @@ if (typeof jQuery === 'undefined') {
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle + ', [role="menu"], [role="listbox"]', Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)
}(jQuery);
@ -2062,10 +2101,14 @@ if (typeof jQuery === 'undefined') {
// TAB DATA-API
// ============
$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
var clickHandler = function (e) {
e.preventDefault()
Plugin.call($(this), 'show')
})
}
$(document)
.on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
.on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)
}(jQuery);

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

File diff suppressed because one or more lines are too long

12
docs/_includes/components/button-groups.html
View File

@ -202,16 +202,16 @@
<p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
<div class="bs-example">
<div class="btn-group btn-group-justified">
<a class="btn btn-default" role="button">Left</a>
<a class="btn btn-default" role="button">Middle</a>
<a class="btn btn-default" role="button">Right</a>
<a href="#" class="btn btn-default" role="button">Left</a>
<a href="#" class="btn btn-default" role="button">Middle</a>
<a href="#" class="btn btn-default" role="button">Right</a>
</div>
<br>
<div class="btn-group btn-group-justified">
<a class="btn btn-default" role="button">Left</a>
<a class="btn btn-default" role="button">Middle</a>
<a href="#" class="btn btn-default" role="button">Left</a>
<a href="#" class="btn btn-default" role="button">Middle</a>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">

4
docs/_includes/components/jumbotron.html
View File

@ -6,14 +6,14 @@
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
{% highlight html %}
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
{% endhighlight %}
<p>To make the jumbotron full width, and without rounded corners, place it outside all <code>.container</code>s and instead add a <code>.container</code> within.</p>

2
docs/_includes/components/navs.html
View File

@ -60,7 +60,7 @@
<p><strong class="text-danger">Justified navbar nav links are currently not supported.</strong></p>
<div class="bs-callout bs-callout-warning">
<h4>Safari and responsive justified navs</h4>
<p>As of v7.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
<p>As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
</div>
<div class="bs-example">
<ul class="nav nav-tabs nav-justified" role="tablist">

306
docs/_includes/customizer-variables.html
View File

@ -1,7 +1,7 @@
<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.-->
<h2 id="colors">Colors</h2>
<p>Gray and brand colors for use across Bootstrap.</p>
<p>Gray and brand colors for use across Bootstrap</p>
<div class="row">
<div class="col-xs-4">
<label for="input-@gray-base">@gray-base</label>
@ -52,37 +52,37 @@
</div>
</div>
<h2 id="scaffolding">Scaffolding</h2>
<p>Settings for some of the most global styles.</p>
<p>Settings for some of the most global styles</p>
<div class="row">
<div class="col-xs-4">
<label for="input-@body-bg">@body-bg</label>
<input id="input-@body-bg" type="text" value="#fff" data-var="@body-bg" class="form-control"/>
<p class="help-block">Background color for <code>&lt;body&gt;</code>.</p>
<p class="help-block">Background color for <code>&lt;body&gt;</code></p>
</div>
<div class="col-xs-4">
<label for="input-@text-color">@text-color</label>
<input id="input-@text-color" type="text" value="@gray-dark" data-var="@text-color" class="form-control"/>
<p class="help-block">Global text color on <code>&lt;body&gt;</code>.</p>
<p class="help-block">Global text color on <code>&lt;body&gt;</code></p>
</div>
<div class="col-xs-4">
<label for="input-@link-color">@link-color</label>
<input id="input-@link-color" type="text" value="@brand-primary" data-var="@link-color" class="form-control"/>
<p class="help-block">Global textual link color.</p>
<p class="help-block">Global textual link color</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@link-hover-color">@link-hover-color</label>
<input id="input-@link-hover-color" type="text" value="darken(@link-color, 15%)" data-var="@link-hover-color" class="form-control"/>
<p class="help-block">Link hover color set via <code>darken()</code> function.</p>
<p class="help-block">Link hover color set via <code>darken()</code> function</p>
</div>
<div class="col-xs-4">
<label for="input-@link-hover-decoration">@link-hover-decoration</label>
<input id="input-@link-hover-decoration" type="text" value="underline" data-var="@link-hover-decoration" class="form-control"/>
<p class="help-block">Link hover decoration.</p>
<p class="help-block">Link hover decoration</p>
</div>
</div>
<h2 id="typography">Typography</h2>
<p>Font, line-height, and color for body text, headings, and more.</p>
<p>Font, line-height, and color for body text, headings, and more</p>
<div class="row">
<div class="col-xs-4">
<label for="input-@font-family-sans-serif">@font-family-sans-serif</label>
@ -95,7 +95,7 @@
<div class="col-xs-4">
<label for="input-@font-family-monospace">@font-family-monospace</label>
<input id="input-@font-family-monospace" type="text" value="Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace" data-var="@font-family-monospace" class="form-control"/>
<p class="help-block">Default monospace fonts for <code>&lt;code&gt;</code>, <code>&lt;kbd&gt;</code>, and <code>&lt;pre&gt;</code>.</p>
<p class="help-block">Default monospace fonts for <code>&lt;code&gt;</code>, <code>&lt;kbd&gt;</code>, and <code>&lt;pre&gt;</code></p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
@ -144,18 +144,18 @@
<div class="col-xs-4">
<label for="input-@line-height-base">@line-height-base</label>
<input id="input-@line-height-base" type="text" value="1.428571429" data-var="@line-height-base" class="form-control"/>
<p class="help-block">Unit-less <code>line-height</code> for use in components like buttons.</p>
<p class="help-block">Unit-less <code>line-height</code> for use in components like buttons</p>
</div>
<div class="col-xs-4">
<label for="input-@line-height-computed">@line-height-computed</label>
<input id="input-@line-height-computed" type="text" value="floor((@font-size-base * @line-height-base))" data-var="@line-height-computed" class="form-control"/>
<p class="help-block">Computed &quot;line-height&quot; (<code>font-size</code> * <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc.</p>
<p class="help-block">Computed &quot;line-height&quot; (<code>font-size</code> * <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@headings-font-family">@headings-font-family</label>
<input id="input-@headings-font-family" type="text" value="inherit" data-var="@headings-font-family" class="form-control"/>
<p class="help-block">By default, this inherits from the <code>&lt;body&gt;</code>.</p>
<p class="help-block">By default, this inherits from the <code>&lt;body&gt;</code></p>
</div>
<div class="col-xs-4">
<label for="input-@headings-font-weight">@headings-font-weight</label>
@ -172,26 +172,26 @@
</div>
</div>
<h2 id="iconography">Iconography</h2>
<p>Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.</p>
<p>Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower</p>
<div class="row">
<div class="col-xs-4">
<label for="input-@icon-font-path">@icon-font-path</label>
<input id="input-@icon-font-path" type="text" value="&quot;../fonts/&quot;" data-var="@icon-font-path" class="form-control"/>
<p class="help-block">Load fonts from this directory.</p>
<p class="help-block">Load fonts from this directory</p>
</div>
<div class="col-xs-4">
<label for="input-@icon-font-name">@icon-font-name</label>
<input id="input-@icon-font-name" type="text" value="&quot;glyphicons-halflings-regular&quot;" data-var="@icon-font-name" class="form-control"/>
<p class="help-block">File name for all font files.</p>
<p class="help-block">File name for all font files</p>
</div>
<div class="col-xs-4">
<label for="input-@icon-font-svg-id">@icon-font-svg-id</label>
<input id="input-@icon-font-svg-id" type="text" value="&quot;glyphicons_halflingsregular&quot;" data-var="@icon-font-svg-id" class="form-control"/>
<p class="help-block">Element ID within SVG icon file.</p>
<p class="help-block">Element ID within SVG icon file</p>
</div>
</div>
<h2 id="components">Components</h2>
<p>Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).</p>
<p>Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start)</p>
<div class="row">
<div class="col-xs-4">
<label for="input-@padding-base-vertical">@padding-base-vertical</label>
@ -252,53 +252,53 @@
<div class="col-xs-4">
<label for="input-@component-active-color">@component-active-color</label>
<input id="input-@component-active-color" type="text" value="#fff" data-var="@component-active-color" class="form-control"/>
<p class="help-block">Global color for active items (e.g., navs or dropdowns).</p>
<p class="help-block">Global color for active items (e.g., navs or dropdowns)</p>
</div>
<div class="col-xs-4">
<label for="input-@component-active-bg">@component-active-bg</label>
<input id="input-@component-active-bg" type="text" value="@brand-primary" data-var="@component-active-bg" class="form-control"/>
<p class="help-block">Global background color for active items (e.g., navs or dropdowns).</p>
<p class="help-block">Global background color for active items (e.g., navs or dropdowns)</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@caret-width-base">@caret-width-base</label>
<input id="input-@caret-width-base" type="text" value="4px" data-var="@caret-width-base" class="form-control"/>
<p class="help-block">Width of the <code>border</code> for generating carets that indicator dropdowns.</p>
<p class="help-block">Width of the <code>border</code> for generating carets that indicator dropdowns</p>
</div>
<div class="col-xs-4">
<label for="input-@caret-width-large">@caret-width-large</label>
<input id="input-@caret-width-large" type="text" value="5px" data-var="@caret-width-large" class="form-control"/>
<p class="help-block">Carets increase slightly in size for larger components.</p>
<p class="help-block">Carets increase slightly in size for larger components</p>
</div>
</div>
<h2 id="tables">Tables</h2>
<p>Customizes the <code>.table</code> component with basic values, each used across all table variations.</p>
<p>Customizes the <code>.table</code> component with basic values, each used across all table variations</p>
<div class="row">
<div class="col-xs-4">
<label for="input-@table-cell-padding">@table-cell-padding</label>
<input id="input-@table-cell-padding" type="text" value="8px" data-var="@table-cell-padding" class="form-control"/>
<p class="help-block">Padding for <code>&lt;th&gt;</code>s and <code>&lt;td&gt;</code>s.</p>
<p class="help-block">Padding for <code>&lt;th&gt;</code>s and <code>&lt;td&gt;</code>s</p>
</div>
<div class="col-xs-4">
<label for="input-@table-condensed-cell-padding">@table-condensed-cell-padding</label>
<input id="input-@table-condensed-cell-padding" type="text" value="5px" data-var="@table-condensed-cell-padding" class="form-control"/>
<p class="help-block">Padding for cells in <code>.table-condensed</code>.</p>
<p class="help-block">Padding for cells in <code>.table-condensed</code></p>
</div>
<div class="col-xs-4">
<label for="input-@table-bg">@table-bg</label>
<input id="input-@table-bg" type="text" value="transparent" data-var="@table-bg" class="form-control"/>
<p class="help-block">Default background color used for all tables.</p>
<p class="help-block">Default background color used for all tables</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@table-bg-accent">@table-bg-accent</label>
<input id="input-@table-bg-accent" type="text" value="#f9f9f9" data-var="@table-bg-accent" class="form-control"/>
<p class="help-block">Background color used for <code>.table-striped</code>.</p>
<p class="help-block">Background color used for <code>.table-striped</code></p>
</div>
<div class="col-xs-4">
<label for="input-@table-bg-hover">@table-bg-hover</label>
<input id="input-@table-bg-hover" type="text" value="#f5f5f5" data-var="@table-bg-hover" class="form-control"/>
<p class="help-block">Background color used for <code>.table-hover</code>.</p>
<p class="help-block">Background color used for <code>.table-hover</code></p>
</div>
<div class="col-xs-4">
<label for="input-@table-bg-active">@table-bg-active</label>
@ -308,11 +308,11 @@
<div class="col-xs-4">
<label for="input-@table-border-color">@table-border-color</label>
<input id="input-@table-border-color" type="text" value="#ddd" data-var="@table-border-color" class="form-control"/>
<p class="help-block">Border color for table and cell borders.</p>
<p class="help-block">Border color for table and cell borders</p>
</div>
</div>
<h2 id="buttons">Buttons</h2>
<p>For each of Bootstrap&#39;s buttons, define text, background and border color.</p>
<p>For each of Bootstrap's buttons, define text, background and border color</p>
<div class="row">
<div class="col-xs-4">
<label for="input-@btn-font-weight">@btn-font-weight</label>
@ -406,65 +406,65 @@
<div class="col-xs-4">
<label for="input-@input-bg">@input-bg</label>
<input id="input-@input-bg" type="text" value="#fff" data-var="@input-bg" class="form-control"/>
<p class="help-block"><code>&lt;input&gt;</code> background color</p>
<p class="help-block"><code>&lt;input&gt;</code> background colo</p>
</div>
<div class="col-xs-4">
<label for="input-@input-bg-disabled">@input-bg-disabled</label>
<input id="input-@input-bg-disabled" type="text" value="@gray-lighter" data-var="@input-bg-disabled" class="form-control"/>
<p class="help-block"><code>&lt;input disabled&gt;</code> background color</p>
<p class="help-block"><code>&lt;input disabled&gt;</code> background colo</p>
</div>
<div class="col-xs-4">
<label for="input-@input-color">@input-color</label>
<input id="input-@input-color" type="text" value="@gray" data-var="@input-color" class="form-control"/>
<p class="help-block">Text color for <code>&lt;input&gt;</code>s</p>
<p class="help-block">Text color for <code>&lt;input&gt;</code></p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@input-border">@input-border</label>
<input id="input-@input-border" type="text" value="#ccc" data-var="@input-border" class="form-control"/>
<p class="help-block"><code>&lt;input&gt;</code> border color</p>
<p class="help-block"><code>&lt;input&gt;</code> border colo</p>
</div>
<div class="col-xs-4">
<label for="input-@input-border-radius">@input-border-radius</label>
<input id="input-@input-border-radius" type="text" value="@border-radius-base" data-var="@input-border-radius" class="form-control"/>
<p class="help-block">Default <code>.form-control</code> border radius</p>
<p class="help-block">Default <code>.form-control</code> border radiu</p>
</div>
<div class="col-xs-4">
<label for="input-@input-border-radius-large">@input-border-radius-large</label>
<input id="input-@input-border-radius-large" type="text" value="@border-radius-large" data-var="@input-border-radius-large" class="form-control"/>
<p class="help-block">Large <code>.form-control</code> border radius</p>
<p class="help-block">Large <code>.form-control</code> border radiu</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@input-border-radius-small">@input-border-radius-small</label>
<input id="input-@input-border-radius-small" type="text" value="@border-radius-small" data-var="@input-border-radius-small" class="form-control"/>
<p class="help-block">Small <code>.form-control</code> border radius</p>
<p class="help-block">Small <code>.form-control</code> border radiu</p>
</div>
<div class="col-xs-4">
<label for="input-@input-border-focus">@input-border-focus</label>
<input id="input-@input-border-focus" type="text" value="#66afe9" data-var="@input-border-focus" class="form-control"/>
<p class="help-block">Border color for inputs on focus</p>
<p class="help-block">Border color for inputs on focu</p>
</div>
<div class="col-xs-4">
<label for="input-@input-color-placeholder">@input-color-placeholder</label>
<input id="input-@input-color-placeholder" type="text" value="#999" data-var="@input-color-placeholder" class="form-control"/>
<p class="help-block">Placeholder text color</p>
<p class="help-block">Placeholder text colo</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@input-height-base">@input-height-base</label>
<input id="input-@input-height-base" type="text" value="(@line-height-computed + (@padding-base-vertical * 2) + 2)" data-var="@input-height-base" class="form-control"/>
<p class="help-block">Default <code>.form-control</code> height</p>
<p class="help-block">Default <code>.form-control</code> heigh</p>
</div>
<div class="col-xs-4">
<label for="input-@input-height-large">@input-height-large</label>
<input id="input-@input-height-large" type="text" value="(ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2)" data-var="@input-height-large" class="form-control"/>
<p class="help-block">Large <code>.form-control</code> height</p>
<p class="help-block">Large <code>.form-control</code> heigh</p>
</div>
<div class="col-xs-4">
<label for="input-@input-height-small">@input-height-small</label>
<input id="input-@input-height-small" type="text" value="(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)" data-var="@input-height-small" class="form-control"/>
<p class="help-block">Small <code>.form-control</code> height</p>
<p class="help-block">Small <code>.form-control</code> heigh</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
@ -478,105 +478,105 @@
<div class="col-xs-4">
<label for="input-@input-group-addon-bg">@input-group-addon-bg</label>
<input id="input-@input-group-addon-bg" type="text" value="@gray-lighter" data-var="@input-group-addon-bg" class="form-control"/>
<p class="help-block">Background color for textual input addons</p>
<p class="help-block">Background color for textual input addon</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@input-group-addon-border-color">@input-group-addon-border-color</label>
<input id="input-@input-group-addon-border-color" type="text" value="@input-border" data-var="@input-group-addon-border-color" class="form-control"/>
<p class="help-block">Border color for textual input addons</p>
<p class="help-block">Border color for textual input addon</p>
</div>
</div>
<h2 id="dropdowns">Dropdowns</h2>
<p>Dropdown menu container and contents.</p>
<p>Dropdown menu container and contents</p>
<div class="row">
<div class="col-xs-4">
<label for="input-@dropdown-bg">@dropdown-bg</label>
<input id="input-@dropdown-bg" type="text" value="#fff" data-var="@dropdown-bg" class="form-control"/>
<p class="help-block">Background for the dropdown menu.</p>
<p class="help-block">Background for the dropdown menu</p>
</div>
<div class="col-xs-4">
<label for="input-@dropdown-border">@dropdown-border</label>
<input id="input-@dropdown-border" type="text" value="rgba(0,0,0,.15)" data-var="@dropdown-border" class="form-control"/>
<p class="help-block">Dropdown menu <code>border-color</code>.</p>
<p class="help-block">Dropdown menu <code>border-color</code></p>
</div>
<div class="col-xs-4">
<label for="input-@dropdown-fallback-border">@dropdown-fallback-border</label>
<input id="input-@dropdown-fallback-border" type="text" value="#ccc" data-var="@dropdown-fallback-border" class="form-control"/>
<p class="help-block">Dropdown menu <code>border-color</code> <strong>for IE8</strong>.</p>
<p class="help-block">Dropdown menu <code>border-color</code> <strong>for IE8</strong></p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@dropdown-divider-bg">@dropdown-divider-bg</label>
<input id="input-@dropdown-divider-bg" type="text" value="#e5e5e5" data-var="@dropdown-divider-bg" class="form-control"/>
<p class="help-block">Divider color for between dropdown items.</p>
<p class="help-block">Divider color for between dropdown items</p>
</div>
<div class="col-xs-4">
<label for="input-@dropdown-link-color">@dropdown-link-color</label>
<input id="input-@dropdown-link-color" type="text" value="@gray-dark" data-var="@dropdown-link-color" class="form-control"/>
<p class="help-block">Dropdown link text color.</p>
<p class="help-block">Dropdown link text color</p>
</div>
<div class="col-xs-4">
<label for="input-@dropdown-link-hover-color">@dropdown-link-hover-color</label>
<input id="input-@dropdown-link-hover-color" type="text" value="darken(@gray-dark, 5%)" data-var="@dropdown-link-hover-color" class="form-control"/>
<p class="help-block">Hover color for dropdown links.</p>
<p class="help-block">Hover color for dropdown links</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@dropdown-link-hover-bg">@dropdown-link-hover-bg</label>
<input id="input-@dropdown-link-hover-bg" type="text" value="#f5f5f5" data-var="@dropdown-link-hover-bg" class="form-control"/>
<p class="help-block">Hover background for dropdown links.</p>
<p class="help-block">Hover background for dropdown links</p>
</div>
<div class="col-xs-4">
<label for="input-@dropdown-link-active-color">@dropdown-link-active-color</label>
<input id="input-@dropdown-link-active-color" type="text" value="@component-active-color" data-var="@dropdown-link-active-color" class="form-control"/>
<p class="help-block">Active dropdown menu item text color.</p>
<p class="help-block">Active dropdown menu item text color</p>
</div>
<div class="col-xs-4">
<label for="input-@dropdown-link-active-bg">@dropdown-link-active-bg</label>
<input id="input-@dropdown-link-active-bg" type="text" value="@component-active-bg" data-var="@dropdown-link-active-bg" class="form-control"/>
<p class="help-block">Active dropdown menu item background color.</p>
<p class="help-block">Active dropdown menu item background color</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@dropdown-link-disabled-color">@dropdown-link-disabled-color</label>
<input id="input-@dropdown-link-disabled-color" type="text" value="@gray-light" data-var="@dropdown-link-disabled-color" class="form-control"/>
<p class="help-block">Disabled dropdown menu item background color.</p>
<p class="help-block">Disabled dropdown menu item background color</p>
</div>
<div class="col-xs-4">
<label for="input-@dropdown-header-color">@dropdown-header-color</label>
<input id="input-@dropdown-header-color" type="text" value="@gray-light" data-var="@dropdown-header-color" class="form-control"/>
<p class="help-block">Text color for headers within dropdown menus.</p>
<p class="help-block">Text color for headers within dropdown menus</p>
</div>
<div class="col-xs-4">
<label for="input-@dropdown-caret-color">@dropdown-caret-color</label>
<input id="input-@dropdown-caret-color" type="text" value="#000" data-var="@dropdown-caret-color" class="form-control"/>
<p class="help-block">Deprecated <code>@dropdown-caret-color</code> as of v3.1.0</p>
<p class="help-block">Deprecated <code>@dropdown-caret-color</code> as of v3.1.</p>
</div>
</div>
<h2 id="media-queries-breakpoints">Media queries breakpoints</h2>
<p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
<p>Define the breakpoints at which your layout will change, adapting to different screen sizes</p>
<div class="row">
<div class="col-xs-4">
<label for="input-@screen-xs">@screen-xs</label>
<input id="input-@screen-xs" type="text" value="480px" data-var="@screen-xs" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-xs</code> as of v3.0.1</p>
<p class="help-block">Deprecated <code>@screen-xs</code> as of v3.0.</p>
</div>
<div class="col-xs-4">
<label for="input-@screen-xs-min">@screen-xs-min</label>
<input id="input-@screen-xs-min" type="text" value="@screen-xs" data-var="@screen-xs-min" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-xs-min</code> as of v3.2.0</p>
<p class="help-block">Deprecated <code>@screen-xs-min</code> as of v3.2.</p>
</div>
<div class="col-xs-4">
<label for="input-@screen-phone">@screen-phone</label>
<input id="input-@screen-phone" type="text" value="@screen-xs-min" data-var="@screen-phone" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-phone</code> as of v3.0.1</p>
<p class="help-block">Deprecated <code>@screen-phone</code> as of v3.0.</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@screen-sm">@screen-sm</label>
<input id="input-@screen-sm" type="text" value="768px" data-var="@screen-sm" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-sm</code> as of v3.0.1</p>
<p class="help-block">Deprecated <code>@screen-sm</code> as of v3.0.</p>
</div>
<div class="col-xs-4">
<label for="input-@screen-sm-min">@screen-sm-min</label>
@ -585,13 +585,13 @@
<div class="col-xs-4">
<label for="input-@screen-tablet">@screen-tablet</label>
<input id="input-@screen-tablet" type="text" value="@screen-sm-min" data-var="@screen-tablet" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-tablet</code> as of v3.0.1</p>
<p class="help-block">Deprecated <code>@screen-tablet</code> as of v3.0.</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@screen-md">@screen-md</label>
<input id="input-@screen-md" type="text" value="992px" data-var="@screen-md" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-md</code> as of v3.0.1</p>
<p class="help-block">Deprecated <code>@screen-md</code> as of v3.0.</p>
</div>
<div class="col-xs-4">
<label for="input-@screen-md-min">@screen-md-min</label>
@ -600,13 +600,13 @@
<div class="col-xs-4">
<label for="input-@screen-desktop">@screen-desktop</label>
<input id="input-@screen-desktop" type="text" value="@screen-md-min" data-var="@screen-desktop" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-desktop</code> as of v3.0.1</p>
<p class="help-block">Deprecated <code>@screen-desktop</code> as of v3.0.</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@screen-lg">@screen-lg</label>
<input id="input-@screen-lg" type="text" value="1200px" data-var="@screen-lg" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-lg</code> as of v3.0.1</p>
<p class="help-block">Deprecated <code>@screen-lg</code> as of v3.0.</p>
</div>
<div class="col-xs-4">
<label for="input-@screen-lg-min">@screen-lg-min</label>
@ -615,7 +615,7 @@
<div class="col-xs-4">
<label for="input-@screen-lg-desktop">@screen-lg-desktop</label>
<input id="input-@screen-lg-desktop" type="text" value="@screen-lg-min" data-var="@screen-lg-desktop" class="form-control"/>
<p class="help-block">Deprecated <code>@screen-lg-desktop</code> as of v3.0.1</p>
<p class="help-block">Deprecated <code>@screen-lg-desktop</code> as of v3.0.</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
@ -632,32 +632,32 @@
</div>
</div>
<h2 id="grid-system">Grid system</h2>
<p>Define your custom responsive grid.</p>
<p>Define your custom responsive grid</p>
<div class="row">
<div class="col-xs-4">
<label for="input-@grid-columns">@grid-columns</label>
<input id="input-@grid-columns" type="text" value="12" data-var="@grid-columns" class="form-control"/>
<p class="help-block">Number of columns in the grid.</p>
<p class="help-block">Number of columns in the grid</p>
</div>
<div class="col-xs-4">
<label for="input-@grid-gutter-width">@grid-gutter-width</label>
<input id="input-@grid-gutter-width" type="text" value="30px" data-var="@grid-gutter-width" class="form-control"/>
<p class="help-block">Padding between columns. Gets divided in half for the left and right.</p>
<p class="help-block">Padding between columns. Gets divided in half for the left and right</p>
</div>
<div class="col-xs-4">
<label for="input-@grid-float-breakpoint">@grid-float-breakpoint</label>
<input id="input-@grid-float-breakpoint" type="text" value="@screen-sm-min" data-var="@grid-float-breakpoint" class="form-control"/>
<p class="help-block">Point at which the navbar becomes uncollapsed.</p>
<p class="help-block">Point at which the navbar becomes uncollapsed</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@grid-float-breakpoint-max">@grid-float-breakpoint-max</label>
<input id="input-@grid-float-breakpoint-max" type="text" value="(@grid-float-breakpoint - 1)" data-var="@grid-float-breakpoint-max" class="form-control"/>
<p class="help-block">Point at which the navbar begins collapsing.</p>
<p class="help-block">Point at which the navbar begins collapsing</p>
</div>
</div>
<h2 id="container-sizes">Container sizes</h2>
<p>Define the maximum width of <code>.container</code> for different screen sizes.</p>
<p>Define the maximum width of <code>.container</code> for different screen sizes</p>
<div class="row">
<div class="col-xs-4">
<label for="input-@container-tablet">@container-tablet</label>
@ -666,7 +666,7 @@
<div class="col-xs-4">
<label for="input-@container-sm">@container-sm</label>
<input id="input-@container-sm" type="text" value="@container-tablet" data-var="@container-sm" class="form-control"/>
<p class="help-block">For <code>@screen-sm-min</code> and up.</p>
<p class="help-block">For <code>@screen-sm-min</code> and up</p>
</div>
<div class="col-xs-4">
<label for="input-@container-desktop">@container-desktop</label>
@ -676,7 +676,7 @@
<div class="col-xs-4">
<label for="input-@container-md">@container-md</label>
<input id="input-@container-md" type="text" value="@container-desktop" data-var="@container-md" class="form-control"/>
<p class="help-block">For <code>@screen-md-min</code> and up.</p>
<p class="help-block">For <code>@screen-md-min</code> and up</p>
</div>
<div class="col-xs-4">
<label for="input-@container-large-desktop">@container-large-desktop</label>
@ -685,7 +685,7 @@
<div class="col-xs-4">
<label for="input-@container-lg">@container-lg</label>
<input id="input-@container-lg" type="text" value="@container-large-desktop" data-var="@container-lg" class="form-control"/>
<p class="help-block">For <code>@screen-lg-min</code> and up.</p>
<p class="help-block">For <code>@screen-lg-min</code> and up</p>
</div>
</div>
<h2 id="navbar">Navbar</h2>
@ -1036,7 +1036,7 @@
</div>
</div>
<h2 id="form-states-and-alerts">Form states and alerts</h2>
<p>Define colors for form feedback states and, by default, alerts.</p>
<p>Define colors for form feedback states and, by default, alerts</p>
<div class="row">
<div class="col-xs-4">
<label for="input-@state-success-text">@state-success-text</label>
@ -1095,17 +1095,17 @@
<div class="col-xs-4">
<label for="input-@tooltip-max-width">@tooltip-max-width</label>
<input id="input-@tooltip-max-width" type="text" value="200px" data-var="@tooltip-max-width" class="form-control"/>
<p class="help-block">Tooltip max width</p>
<p class="help-block">Tooltip max widt</p>
</div>
<div class="col-xs-4">
<label for="input-@tooltip-color">@tooltip-color</label>
<input id="input-@tooltip-color" type="text" value="#fff" data-var="@tooltip-color" class="form-control"/>
<p class="help-block">Tooltip text color</p>
<p class="help-block">Tooltip text colo</p>
</div>
<div class="col-xs-4">
<label for="input-@tooltip-bg">@tooltip-bg</label>
<input id="input-@tooltip-bg" type="text" value="#000" data-var="@tooltip-bg" class="form-control"/>
<p class="help-block">Tooltip background color</p>
<p class="help-block">Tooltip background colo</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
@ -1115,12 +1115,12 @@
<div class="col-xs-4">
<label for="input-@tooltip-arrow-width">@tooltip-arrow-width</label>
<input id="input-@tooltip-arrow-width" type="text" value="5px" data-var="@tooltip-arrow-width" class="form-control"/>
<p class="help-block">Tooltip arrow width</p>
<p class="help-block">Tooltip arrow widt</p>
</div>
<div class="col-xs-4">
<label for="input-@tooltip-arrow-color">@tooltip-arrow-color</label>
<input id="input-@tooltip-arrow-color" type="text" value="@tooltip-bg" data-var="@tooltip-arrow-color" class="form-control"/>
<p class="help-block">Tooltip arrow color</p>
<p class="help-block">Tooltip arrow colo</p>
</div>
</div>
<h2 id="popovers">Popovers</h2>
@ -1128,55 +1128,55 @@
<div class="col-xs-4">
<label for="input-@popover-bg">@popover-bg</label>
<input id="input-@popover-bg" type="text" value="#fff" data-var="@popover-bg" class="form-control"/>
<p class="help-block">Popover body background color</p>
<p class="help-block">Popover body background colo</p>
</div>
<div class="col-xs-4">
<label for="input-@popover-max-width">@popover-max-width</label>
<input id="input-@popover-max-width" type="text" value="276px" data-var="@popover-max-width" class="form-control"/>
<p class="help-block">Popover maximum width</p>
<p class="help-block">Popover maximum widt</p>
</div>
<div class="col-xs-4">
<label for="input-@popover-border-color">@popover-border-color</label>
<input id="input-@popover-border-color" type="text" value="rgba(0,0,0,.2)" data-var="@popover-border-color" class="form-control"/>
<p class="help-block">Popover border color</p>
<p class="help-block">Popover border colo</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@popover-fallback-border-color">@popover-fallback-border-color</label>
<input id="input-@popover-fallback-border-color" type="text" value="#ccc" data-var="@popover-fallback-border-color" class="form-control"/>
<p class="help-block">Popover fallback border color</p>
<p class="help-block">Popover fallback border colo</p>
</div>
<div class="col-xs-4">
<label for="input-@popover-title-bg">@popover-title-bg</label>
<input id="input-@popover-title-bg" type="text" value="darken(@popover-bg, 3%)" data-var="@popover-title-bg" class="form-control"/>
<p class="help-block">Popover title background color</p>
<p class="help-block">Popover title background colo</p>
</div>
<div class="col-xs-4">
<label for="input-@popover-arrow-width">@popover-arrow-width</label>
<input id="input-@popover-arrow-width" type="text" value="10px" data-var="@popover-arrow-width" class="form-control"/>
<p class="help-block">Popover arrow width</p>
<p class="help-block">Popover arrow widt</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@popover-arrow-color">@popover-arrow-color</label>
<input id="input-@popover-arrow-color" type="text" value="@popover-bg" data-var="@popover-arrow-color" class="form-control"/>
<p class="help-block">Popover arrow color</p>
<p class="help-block">Popover arrow colo</p>
</div>
<div class="col-xs-4">
<label for="input-@popover-arrow-outer-width">@popover-arrow-outer-width</label>
<input id="input-@popover-arrow-outer-width" type="text" value="(@popover-arrow-width + 1)" data-var="@popover-arrow-outer-width" class="form-control"/>
<p class="help-block">Popover outer arrow width</p>
<p class="help-block">Popover outer arrow widt</p>
</div>
<div class="col-xs-4">
<label for="input-@popover-arrow-outer-color">@popover-arrow-outer-color</label>
<input id="input-@popover-arrow-outer-color" type="text" value="fadein(@popover-border-color, 5%)" data-var="@popover-arrow-outer-color" class="form-control"/>
<p class="help-block">Popover outer arrow color</p>
<p class="help-block">Popover outer arrow colo</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@popover-arrow-outer-fallback-color">@popover-arrow-outer-fallback-color</label>
<input id="input-@popover-arrow-outer-fallback-color" type="text" value="darken(@popover-fallback-border-color, 20%)" data-var="@popover-arrow-outer-fallback-color" class="form-control"/>
<p class="help-block">Popover outer arrow fallback color</p>
<p class="help-block">Popover outer arrow fallback colo</p>
</div>
</div>
<h2 id="labels">Labels</h2>
@ -1184,44 +1184,44 @@
<div class="col-xs-4">
<label for="input-@label-default-bg">@label-default-bg</label>
<input id="input-@label-default-bg" type="text" value="@gray-light" data-var="@label-default-bg" class="form-control"/>
<p class="help-block">Default label background color</p>
<p class="help-block">Default label background colo</p>
</div>
<div class="col-xs-4">
<label for="input-@label-primary-bg">@label-primary-bg</label>
<input id="input-@label-primary-bg" type="text" value="@brand-primary" data-var="@label-primary-bg" class="form-control"/>
<p class="help-block">Primary label background color</p>
<p class="help-block">Primary label background colo</p>
</div>
<div class="col-xs-4">
<label for="input-@label-success-bg">@label-success-bg</label>
<input id="input-@label-success-bg" type="text" value="@brand-success" data-var="@label-success-bg" class="form-control"/>
<p class="help-block">Success label background color</p>
<p class="help-block">Success label background colo</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@label-info-bg">@label-info-bg</label>
<input id="input-@label-info-bg" type="text" value="@brand-info" data-var="@label-info-bg" class="form-control"/>
<p class="help-block">Info label background color</p>
<p class="help-block">Info label background colo</p>
</div>
<div class="col-xs-4">
<label for="input-@label-warning-bg">@label-warning-bg</label>
<input id="input-@label-warning-bg" type="text" value="@brand-warning" data-var="@label-warning-bg" class="form-control"/>
<p class="help-block">Warning label background color</p>
<p class="help-block">Warning label background colo</p>
</div>
<div class="col-xs-4">
<label for="input-@label-danger-bg">@label-danger-bg</label>
<input id="input-@label-danger-bg" type="text" value="@brand-danger" data-var="@label-danger-bg" class="form-control"/>
<p class="help-block">Danger label background color</p>
<p class="help-block">Danger label background colo</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@label-color">@label-color</label>
<input id="input-@label-color" type="text" value="#fff" data-var="@label-color" class="form-control"/>
<p class="help-block">Default label text color</p>
<p class="help-block">Default label text colo</p>
</div>
<div class="col-xs-4">
<label for="input-@label-link-hover-color">@label-link-hover-color</label>
<input id="input-@label-link-hover-color" type="text" value="#fff" data-var="@label-link-hover-color" class="form-control"/>
<p class="help-block">Default text color of a linked label</p>
<p class="help-block">Default text color of a linked labe</p>
</div>
</div>
<h2 id="modals">Modals</h2>
@ -1229,55 +1229,55 @@
<div class="col-xs-4">
<label for="input-@modal-inner-padding">@modal-inner-padding</label>
<input id="input-@modal-inner-padding" type="text" value="15px" data-var="@modal-inner-padding" class="form-control"/>
<p class="help-block">Padding applied to the modal body</p>
<p class="help-block">Padding applied to the modal bod</p>
</div>
<div class="col-xs-4">
<label for="input-@modal-title-padding">@modal-title-padding</label>
<input id="input-@modal-title-padding" type="text" value="15px" data-var="@modal-title-padding" class="form-control"/>
<p class="help-block">Padding applied to the modal title</p>
<p class="help-block">Padding applied to the modal titl</p>
</div>
<div class="col-xs-4">
<label for="input-@modal-title-line-height">@modal-title-line-height</label>
<input id="input-@modal-title-line-height" type="text" value="@line-height-base" data-var="@modal-title-line-height" class="form-control"/>
<p class="help-block">Modal title line-height</p>
<p class="help-block">Modal title line-heigh</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@modal-content-bg">@modal-content-bg</label>
<input id="input-@modal-content-bg" type="text" value="#fff" data-var="@modal-content-bg" class="form-control"/>
<p class="help-block">Background color of modal content area</p>
<p class="help-block">Background color of modal content are</p>
</div>
<div class="col-xs-4">
<label for="input-@modal-content-border-color">@modal-content-border-color</label>
<input id="input-@modal-content-border-color" type="text" value="rgba(0,0,0,.2)" data-var="@modal-content-border-color" class="form-control"/>
<p class="help-block">Modal content border color</p>
<p class="help-block">Modal content border colo</p>
</div>
<div class="col-xs-4">
<label for="input-@modal-content-fallback-border-color">@modal-content-fallback-border-color</label>
<input id="input-@modal-content-fallback-border-color" type="text" value="#999" data-var="@modal-content-fallback-border-color" class="form-control"/>
<p class="help-block">Modal content border color <strong>for IE8</strong></p>
<p class="help-block">Modal content border color *<em>for IE8</em></p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@modal-backdrop-bg">@modal-backdrop-bg</label>
<input id="input-@modal-backdrop-bg" type="text" value="#000" data-var="@modal-backdrop-bg" class="form-control"/>
<p class="help-block">Modal backdrop background color</p>
<p class="help-block">Modal backdrop background colo</p>
</div>
<div class="col-xs-4">
<label for="input-@modal-backdrop-opacity">@modal-backdrop-opacity</label>
<input id="input-@modal-backdrop-opacity" type="text" value=".5" data-var="@modal-backdrop-opacity" class="form-control"/>
<p class="help-block">Modal backdrop opacity</p>
<p class="help-block">Modal backdrop opacit</p>
</div>
<div class="col-xs-4">
<label for="input-@modal-header-border-color">@modal-header-border-color</label>
<input id="input-@modal-header-border-color" type="text" value="#e5e5e5" data-var="@modal-header-border-color" class="form-control"/>
<p class="help-block">Modal header border color</p>
<p class="help-block">Modal header border colo</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@modal-footer-border-color">@modal-footer-border-color</label>
<input id="input-@modal-footer-border-color" type="text" value="@modal-header-border-color" data-var="@modal-footer-border-color" class="form-control"/>
<p class="help-block">Modal footer border color</p>
<p class="help-block">Modal footer border colo</p>
</div>
<div class="col-xs-4">
<label for="input-@modal-lg">@modal-lg</label>
@ -1294,7 +1294,7 @@
</div>
</div>
<h2 id="alerts">Alerts</h2>
<p>Define alert colors, border radius, and padding.</p>
<p>Define alert colors, border radius, and padding</p>
<div class="row">
<div class="col-xs-4">
<label for="input-@alert-padding">@alert-padding</label>
@ -1366,44 +1366,44 @@
<div class="col-xs-4">
<label for="input-@progress-bg">@progress-bg</label>
<input id="input-@progress-bg" type="text" value="#f5f5f5" data-var="@progress-bg" class="form-control"/>
<p class="help-block">Background color of the whole progress component</p>
<p class="help-block">Background color of the whole progress componen</p>
</div>
<div class="col-xs-4">
<label for="input-@progress-bar-color">@progress-bar-color</label>
<input id="input-@progress-bar-color" type="text" value="#fff" data-var="@progress-bar-color" class="form-control"/>
<p class="help-block">Progress bar text color</p>
<p class="help-block">Progress bar text colo</p>
</div>
<div class="col-xs-4">
<label for="input-@progress-border-radius">@progress-border-radius</label>
<input id="input-@progress-border-radius" type="text" value="@border-radius-base" data-var="@progress-border-radius" class="form-control"/>
<p class="help-block">Variable for setting rounded corners on progress bar.</p>
<p class="help-block">Variable for setting rounded corners on progress bar</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@progress-bar-bg">@progress-bar-bg</label>
<input id="input-@progress-bar-bg" type="text" value="@brand-primary" data-var="@progress-bar-bg" class="form-control"/>
<p class="help-block">Default progress bar color</p>
<p class="help-block">Default progress bar colo</p>
</div>
<div class="col-xs-4">
<label for="input-@progress-bar-success-bg">@progress-bar-success-bg</label>
<input id="input-@progress-bar-success-bg" type="text" value="@brand-success" data-var="@progress-bar-success-bg" class="form-control"/>
<p class="help-block">Success progress bar color</p>
<p class="help-block">Success progress bar colo</p>
</div>
<div class="col-xs-4">
<label for="input-@progress-bar-warning-bg">@progress-bar-warning-bg</label>
<input id="input-@progress-bar-warning-bg" type="text" value="@brand-warning" data-var="@progress-bar-warning-bg" class="form-control"/>
<p class="help-block">Warning progress bar color</p>
<p class="help-block">Warning progress bar colo</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@progress-bar-danger-bg">@progress-bar-danger-bg</label>
<input id="input-@progress-bar-danger-bg" type="text" value="@brand-danger" data-var="@progress-bar-danger-bg" class="form-control"/>
<p class="help-block">Danger progress bar color</p>
<p class="help-block">Danger progress bar colo</p>
</div>
<div class="col-xs-4">
<label for="input-@progress-bar-info-bg">@progress-bar-info-bg</label>
<input id="input-@progress-bar-info-bg" type="text" value="@brand-info" data-var="@progress-bar-info-bg" class="form-control"/>
<p class="help-block">Info progress bar color</p>
<p class="help-block">Info progress bar colo</p>
</div>
</div>
<h2 id="list-group">List group</h2>
@ -1411,60 +1411,60 @@
<div class="col-xs-4">
<label for="input-@list-group-bg">@list-group-bg</label>
<input id="input-@list-group-bg" type="text" value="#fff" data-var="@list-group-bg" class="form-control"/>
<p class="help-block">Background color on <code>.list-group-item</code></p>
<p class="help-block">Background color on `.list-group-item</p>
</div>
<div class="col-xs-4">
<label for="input-@list-group-border">@list-group-border</label>
<input id="input-@list-group-border" type="text" value="#ddd" data-var="@list-group-border" class="form-control"/>
<p class="help-block"><code>.list-group-item</code> border color</p>
<p class="help-block"><code>.list-group-item</code> border colo</p>
</div>
<div class="col-xs-4">
<label for="input-@list-group-border-radius">@list-group-border-radius</label>
<input id="input-@list-group-border-radius" type="text" value="@border-radius-base" data-var="@list-group-border-radius" class="form-control"/>
<p class="help-block">List group border radius</p>
<p class="help-block">List group border radiu</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@list-group-hover-bg">@list-group-hover-bg</label>
<input id="input-@list-group-hover-bg" type="text" value="#f5f5f5" data-var="@list-group-hover-bg" class="form-control"/>
<p class="help-block">Background color of single list items on hover</p>
<p class="help-block">Background color of single list items on hove</p>
</div>
<div class="col-xs-4">
<label for="input-@list-group-active-color">@list-group-active-color</label>
<input id="input-@list-group-active-color" type="text" value="@component-active-color" data-var="@list-group-active-color" class="form-control"/>
<p class="help-block">Text color of active list items</p>
<p class="help-block">Text color of active list item</p>
</div>
<div class="col-xs-4">
<label for="input-@list-group-active-bg">@list-group-active-bg</label>
<input id="input-@list-group-active-bg" type="text" value="@component-active-bg" data-var="@list-group-active-bg" class="form-control"/>
<p class="help-block">Background color of active list items</p>
<p class="help-block">Background color of active list item</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@list-group-active-border">@list-group-active-border</label>
<input id="input-@list-group-active-border" type="text" value="@list-group-active-bg" data-var="@list-group-active-border" class="form-control"/>
<p class="help-block">Border color of active list elements</p>
<p class="help-block">Border color of active list element</p>
</div>
<div class="col-xs-4">
<label for="input-@list-group-active-text-color">@list-group-active-text-color</label>
<input id="input-@list-group-active-text-color" type="text" value="lighten(@list-group-active-bg, 40%)" data-var="@list-group-active-text-color" class="form-control"/>
<p class="help-block">Text color for content within active list items</p>
<p class="help-block">Text color for content within active list item</p>
</div>
<div class="col-xs-4">
<label for="input-@list-group-disabled-color">@list-group-disabled-color</label>
<input id="input-@list-group-disabled-color" type="text" value="@gray-light" data-var="@list-group-disabled-color" class="form-control"/>
<p class="help-block">Text color of disabled list items</p>
<p class="help-block">Text color of disabled list item</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@list-group-disabled-bg">@list-group-disabled-bg</label>
<input id="input-@list-group-disabled-bg" type="text" value="@gray-lighter" data-var="@list-group-disabled-bg" class="form-control"/>
<p class="help-block">Background color of disabled list items</p>
<p class="help-block">Background color of disabled list item</p>
</div>
<div class="col-xs-4">
<label for="input-@list-group-disabled-text-color">@list-group-disabled-text-color</label>
<input id="input-@list-group-disabled-text-color" type="text" value="@list-group-disabled-color" data-var="@list-group-disabled-text-color" class="form-control"/>
<p class="help-block">Text color for content within disabled list items</p>
<p class="help-block">Text color for content within disabled list item</p>
</div>
<div class="col-xs-4">
<label for="input-@list-group-link-color">@list-group-link-color</label>
@ -1506,7 +1506,7 @@
<div class="col-xs-4">
<label for="input-@panel-inner-border">@panel-inner-border</label>
<input id="input-@panel-inner-border" type="text" value="#ddd" data-var="@panel-inner-border" class="form-control"/>
<p class="help-block">Border color for elements within panels</p>
<p class="help-block">Border color for elements within panel</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
@ -1597,33 +1597,33 @@
<div class="col-xs-4">
<label for="input-@thumbnail-padding">@thumbnail-padding</label>
<input id="input-@thumbnail-padding" type="text" value="4px" data-var="@thumbnail-padding" class="form-control"/>
<p class="help-block">Padding around the thumbnail image</p>
<p class="help-block">Padding around the thumbnail imag</p>
</div>
<div class="col-xs-4">
<label for="input-@thumbnail-bg">@thumbnail-bg</label>
<input id="input-@thumbnail-bg" type="text" value="@body-bg" data-var="@thumbnail-bg" class="form-control"/>
<p class="help-block">Thumbnail background color</p>
<p class="help-block">Thumbnail background colo</p>
</div>
<div class="col-xs-4">
<label for="input-@thumbnail-border">@thumbnail-border</label>
<input id="input-@thumbnail-border" type="text" value="#ddd" data-var="@thumbnail-border" class="form-control"/>
<p class="help-block">Thumbnail border color</p>
<p class="help-block">Thumbnail border colo</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@thumbnail-border-radius">@thumbnail-border-radius</label>
<input id="input-@thumbnail-border-radius" type="text" value="@border-radius-base" data-var="@thumbnail-border-radius" class="form-control"/>
<p class="help-block">Thumbnail border radius</p>
<p class="help-block">Thumbnail border radiu</p>
</div>
<div class="col-xs-4">
<label for="input-@thumbnail-caption-color">@thumbnail-caption-color</label>
<input id="input-@thumbnail-caption-color" type="text" value="@text-color" data-var="@thumbnail-caption-color" class="form-control"/>
<p class="help-block">Custom text color for thumbnail captions</p>
<p class="help-block">Custom text color for thumbnail caption</p>
</div>
<div class="col-xs-4">
<label for="input-@thumbnail-caption-padding">@thumbnail-caption-padding</label>
<input id="input-@thumbnail-caption-padding" type="text" value="9px" data-var="@thumbnail-caption-padding" class="form-control"/>
<p class="help-block">Padding around the thumbnail caption</p>
<p class="help-block">Padding around the thumbnail captio</p>
</div>
</div>
<h2 id="wells">Wells</h2>
@ -1646,7 +1646,7 @@
<div class="col-xs-4">
<label for="input-@badge-link-hover-color">@badge-link-hover-color</label>
<input id="input-@badge-link-hover-color" type="text" value="#fff" data-var="@badge-link-hover-color" class="form-control"/>
<p class="help-block">Linked badge text color on hover</p>
<p class="help-block">Linked badge text color on hove</p>
</div>
<div class="col-xs-4">
<label for="input-@badge-bg">@badge-bg</label>
@ -1656,12 +1656,12 @@
<div class="col-xs-4">
<label for="input-@badge-active-color">@badge-active-color</label>
<input id="input-@badge-active-color" type="text" value="@link-color" data-var="@badge-active-color" class="form-control"/>
<p class="help-block">Badge text color in active nav link</p>
<p class="help-block">Badge text color in active nav lin</p>
</div>
<div class="col-xs-4">
<label for="input-@badge-active-bg">@badge-active-bg</label>
<input id="input-@badge-active-bg" type="text" value="#fff" data-var="@badge-active-bg" class="form-control"/>
<p class="help-block">Badge background color in active nav link</p>
<p class="help-block">Badge background color in active nav lin</p>
</div>
<div class="col-xs-4">
<label for="input-@badge-font-weight">@badge-font-weight</label>
@ -1690,23 +1690,23 @@
<div class="col-xs-4">
<label for="input-@breadcrumb-bg">@breadcrumb-bg</label>
<input id="input-@breadcrumb-bg" type="text" value="#f5f5f5" data-var="@breadcrumb-bg" class="form-control"/>
<p class="help-block">Breadcrumb background color</p>
<p class="help-block">Breadcrumb background colo</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@breadcrumb-color">@breadcrumb-color</label>
<input id="input-@breadcrumb-color" type="text" value="#ccc" data-var="@breadcrumb-color" class="form-control"/>
<p class="help-block">Breadcrumb text color</p>
<p class="help-block">Breadcrumb text colo</p>
</div>
<div class="col-xs-4">
<label for="input-@breadcrumb-active-color">@breadcrumb-active-color</label>
<input id="input-@breadcrumb-active-color" type="text" value="@gray-light" data-var="@breadcrumb-active-color" class="form-control"/>
<p class="help-block">Text color of current page in the breadcrumb</p>
<p class="help-block">Text color of current page in the breadcrum</p>
</div>
<div class="col-xs-4">
<label for="input-@breadcrumb-separator">@breadcrumb-separator</label>
<input id="input-@breadcrumb-separator" type="text" value="&quot;/&quot;" data-var="@breadcrumb-separator" class="form-control"/>
<p class="help-block">Textual separator for between breadcrumb elements</p>
<p class="help-block">Textual separator for between breadcrumb element</p>
</div>
</div>
<h2 id="carousel">Carousel</h2>
@ -1803,55 +1803,55 @@
<div class="col-xs-4">
<label for="input-@component-offset-horizontal">@component-offset-horizontal</label>
<input id="input-@component-offset-horizontal" type="text" value="180px" data-var="@component-offset-horizontal" class="form-control"/>
<p class="help-block">Horizontal offset for forms and lists.</p>
<p class="help-block">Horizontal offset for forms and lists</p>
</div>
<div class="col-xs-4">
<label for="input-@text-muted">@text-muted</label>
<input id="input-@text-muted" type="text" value="@gray-light" data-var="@text-muted" class="form-control"/>
<p class="help-block">Text muted color</p>
<p class="help-block">Text muted colo</p>
</div>
<div class="col-xs-4">
<label for="input-@abbr-border-color">@abbr-border-color</label>
<input id="input-@abbr-border-color" type="text" value="@gray-light" data-var="@abbr-border-color" class="form-control"/>
<p class="help-block">Abbreviations and acronyms border color</p>
<p class="help-block">Abbreviations and acronyms border colo</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@headings-small-color">@headings-small-color</label>
<input id="input-@headings-small-color" type="text" value="@gray-light" data-var="@headings-small-color" class="form-control"/>
<p class="help-block">Headings small color</p>
<p class="help-block">Headings small colo</p>
</div>
<div class="col-xs-4">
<label for="input-@blockquote-small-color">@blockquote-small-color</label>
<input id="input-@blockquote-small-color" type="text" value="@gray-light" data-var="@blockquote-small-color" class="form-control"/>
<p class="help-block">Blockquote small color</p>
<p class="help-block">Blockquote small colo</p>
</div>
<div class="col-xs-4">
<label for="input-@blockquote-font-size">@blockquote-font-size</label>
<input id="input-@blockquote-font-size" type="text" value="(@font-size-base * 1.25)" data-var="@blockquote-font-size" class="form-control"/>
<p class="help-block">Blockquote font size</p>
<p class="help-block">Blockquote font siz</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@blockquote-border-color">@blockquote-border-color</label>
<input id="input-@blockquote-border-color" type="text" value="@gray-lighter" data-var="@blockquote-border-color" class="form-control"/>
<p class="help-block">Blockquote border color</p>
<p class="help-block">Blockquote border colo</p>
</div>
<div class="col-xs-4">
<label for="input-@page-header-border-color">@page-header-border-color</label>
<input id="input-@page-header-border-color" type="text" value="@gray-lighter" data-var="@page-header-border-color" class="form-control"/>
<p class="help-block">Page header border color</p>
<p class="help-block">Page header border colo</p>
</div>
<div class="col-xs-4">
<label for="input-@dl-horizontal-offset">@dl-horizontal-offset</label>
<input id="input-@dl-horizontal-offset" type="text" value="@component-offset-horizontal" data-var="@dl-horizontal-offset" class="form-control"/>
<p class="help-block">Width of horizontal description list titles</p>
<p class="help-block">Width of horizontal description list title</p>
</div>
<div class="clearfix"></div>
<div class="col-xs-4">
<label for="input-@hr-border">@hr-border</label>
<input id="input-@hr-border" type="text" value="@gray-lighter" data-var="@hr-border" class="form-control"/>
<p class="help-block">Horizontal line color.</p>
<p class="help-block">Horizontal line color</p>
</div>
</div>
<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.-->

2
docs/_includes/getting-started/tools.html
View File

@ -2,5 +2,5 @@
<h1 id="tools" class="page-header">Tools</h1>
<h2 id="tools-bootlint">Bootlint</h2>
<p><strong><a href="https://github.com/twbs/bootlint">Bootlint</a></strong> is an official Bootstrap HTML <a href="http://en.wikipedia.org/wiki/Lint_(software)">linter</a> tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.</p>
<p><strong><a href="https://github.com/twbs/bootlint">Bootlint</a></strong> is the official Bootstrap HTML <a href="http://en.wikipedia.org/wiki/Lint_(software)">linter</a> tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.</p>
</div>

2
docs/_includes/header.html
View File

@ -6,7 +6,7 @@
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<title>
{% if page.url == site.baseurl %}
{% if page.layout == "home" %}
{{ page.title }}
{% else %}
{{ page.title }} &middot; Bootstrap

2
docs/assets/css/docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/css/src/docs.css
View File

@ -638,8 +638,6 @@ body {
.bs-docs-sidebar.affix {
position: fixed; /* Undo the static from mobile first approach */
top: 20px;
bottom: 20px;
overflow-y: auto;
}
.bs-docs-sidebar.affix-bottom {
position: absolute; /* Undo the static from mobile first approach */

4
docs/assets/js/customize.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/raw-files.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/src/customizer.js
View File

@ -466,7 +466,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
generateZip(generateCSS(preamble), generateJS(preamble), generateFonts(), configJson, function (blob) {
$compileBtn.removeAttr('disabled')
saveAs(blob, 'bootstrap.zip')
setTimeout(function () { saveAs(blob, 'bootstrap.zip') }, 0)
})
})
});

6
docs/browser-bugs.html
View File

@ -113,6 +113,12 @@ lead: "A list of the browser bugs that Bootstrap is currently grappling with."
<td>(No public bug tracker)</td>
<td><a href="https://github.com/twbs/bootstrap/issues/9774">#9774</a></td>
</tr>
<tr>
<td>Safari</td>
<td><code>transform: translate3d(0, 0, 0);</code> iOS bug</td>
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>, <a href="http://openradar.appspot.com/18804973">Apple Safari Radar #18804973</a></td>
<td><a href="https://github.com/twbs/bootstrap/pull/14603">#14603</a></td>
</tr>
</tbody>
</table>
</div>

89
docs/dist/js/bootstrap.js vendored
View File

@ -207,10 +207,10 @@ if (typeof jQuery === 'undefined') {
if (data.resetText == null) $el.data('resetText', $el[val]())
$el[val](data[state] == null ? this.options[state] : data[state])
// push to event loop to allow forms to submit
setTimeout($.proxy(function () {
$el[val](data[state] == null ? this.options[state] : data[state])
if (state == 'loadingText') {
this.isLoading = true
$el.addClass(d).attr(d, d)
@ -496,7 +496,7 @@ if (typeof jQuery === 'undefined') {
// CAROUSEL DATA-API
// =================
$(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
var clickHandler = function (e) {
var href
var $this = $(this)
var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
@ -512,7 +512,11 @@ if (typeof jQuery === 'undefined') {
}
e.preventDefault()
})
}
$(document)
.on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
.on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)
$(window).on('load', function () {
$('[data-ride="carousel"]').each(function () {
@ -541,9 +545,15 @@ if (typeof jQuery === 'undefined') {
var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Collapse.DEFAULTS, options)
this.$trigger = $(this.options.trigger).filter('[href="#' + element.id + '"], [data-target="#' + element.id + '"]')
this.transitioning = null
if (this.options.parent) this.$parent = $(this.options.parent)
if (this.options.parent) {
this.$parent = this.getParent()
} else {
this.addAriaAndCollapsedClass(this.$element, this.$trigger)
}
if (this.options.toggle) this.toggle()
}
@ -552,7 +562,8 @@ if (typeof jQuery === 'undefined') {
Collapse.TRANSITION_DURATION = 350
Collapse.DEFAULTS = {
toggle: true
toggle: true,
trigger: '[data-toggle="collapse"]'
}
Collapse.prototype.dimension = function () {
@ -587,6 +598,10 @@ if (typeof jQuery === 'undefined') {
.addClass('collapsing')[dimension](0)
.attr('aria-expanded', true)
this.$trigger
.removeClass('collapsed')
.attr('aria-expanded', true)
this.transitioning = 1
var complete = function () {
@ -623,6 +638,10 @@ if (typeof jQuery === 'undefined') {
.removeClass('collapse in')
.attr('aria-expanded', false)
this.$trigger
.addClass('collapsed')
.attr('aria-expanded', false)
this.transitioning = 1
var complete = function () {
@ -645,6 +664,33 @@ if (typeof jQuery === 'undefined') {
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
Collapse.prototype.getParent = function () {
return $(this.options.parent)
.find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
.each($.proxy(function (i, element) {
var $element = $(element)
this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
}, this))
.end()
}
Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
var isOpen = $element.hasClass('in')
$element.attr('aria-expanded', isOpen)
$trigger
.toggleClass('collapsed', !isOpen)
.attr('aria-expanded', isOpen)
}
function getTargetFromTrigger($trigger) {
var href
var target = $trigger.attr('data-target')
|| (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
return $(target)
}
// COLLAPSE PLUGIN DEFINITION
// ==========================
@ -680,22 +726,13 @@ if (typeof jQuery === 'undefined') {
// =================
$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
var href
var $this = $(this)
var target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
var $target = $(target)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $this.data()
var parent = $this.attr('data-parent')
var $parent = parent && $(parent)
if (!data || !data.transitioning) {
if ($parent) $parent.find('[data-toggle="collapse"][data-parent="' + parent + '"]').not($this).addClass('collapsed').attr('aria-expanded', false)
var isCollapsed = $target.hasClass('in')
$this.toggleClass('collapsed', isCollapsed).attr('aria-expanded', !isCollapsed)
}
if (!$this.attr('data-target')) e.preventDefault()
var $target = getTargetFromTrigger($this)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $.extend({}, $this.data(), { trigger: this })
Plugin.call($target, option)
})
@ -858,7 +895,9 @@ if (typeof jQuery === 'undefined') {
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle + ', [role="menu"], [role="listbox"]', Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)
}(jQuery);
@ -2062,10 +2101,14 @@ if (typeof jQuery === 'undefined') {
// TAB DATA-API
// ============
$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
var clickHandler = function (e) {
e.preventDefault()
Plugin.call($(this), 'show')
})
}
$(document)
.on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
.on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)
}(jQuery);

4
docs/dist/js/bootstrap.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/examples/jumbotron/index.html
View File

@ -59,7 +59,7 @@
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
</div>
</div>

2
docs/examples/justified-nav/index.html
View File

@ -54,7 +54,7 @@
<div class="row">
<div class="col-lg-4">
<h2>Safari bug warning!</h2>
<p class="text-danger">As of v7.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
<p class="text-danger">As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
</div>

6
grunt/bs-lessdoc-parser.js
View File

@ -6,11 +6,13 @@
*/
'use strict';
var markdown = require('markdown').markdown;
var Remarkable = require('remarkable');
function markdown2html(markdownString) {
var md = new Remarkable();
// the slice removes the <p>...</p> wrapper output by Markdown processor
return markdown.toHTML(markdownString.trim()).slice(3, -4);
return md.render(markdownString.trim()).slice(3, -5);
}

4
js/button.js
View File

@ -35,10 +35,10 @@
if (data.resetText == null) $el.data('resetText', $el[val]())
$el[val](data[state] == null ? this.options[state] : data[state])
// push to event loop to allow forms to submit
setTimeout($.proxy(function () {
$el[val](data[state] == null ? this.options[state] : data[state])
if (state == 'loadingText') {
this.isLoading = true
$el.addClass(d).attr(d, d)

8
js/carousel.js
View File

@ -207,7 +207,7 @@
// CAROUSEL DATA-API
// =================
$(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
var clickHandler = function (e) {
var href
var $this = $(this)
var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
@ -223,7 +223,11 @@
}
e.preventDefault()
})
}
$(document)
.on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
.on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)
$(window).on('load', function () {
$('[data-ride="carousel"]').each(function () {

65
js/collapse.js
View File

@ -16,9 +16,15 @@
var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Collapse.DEFAULTS, options)
this.$trigger = $(this.options.trigger).filter('[href="#' + element.id + '"], [data-target="#' + element.id + '"]')
this.transitioning = null
if (this.options.parent) this.$parent = $(this.options.parent)
if (this.options.parent) {
this.$parent = this.getParent()
} else {
this.addAriaAndCollapsedClass(this.$element, this.$trigger)
}
if (this.options.toggle) this.toggle()
}
@ -27,7 +33,8 @@
Collapse.TRANSITION_DURATION = 350
Collapse.DEFAULTS = {
toggle: true
toggle: true,
trigger: '[data-toggle="collapse"]'
}
Collapse.prototype.dimension = function () {
@ -62,6 +69,10 @@
.addClass('collapsing')[dimension](0)
.attr('aria-expanded', true)
this.$trigger
.removeClass('collapsed')
.attr('aria-expanded', true)
this.transitioning = 1
var complete = function () {
@ -98,6 +109,10 @@
.removeClass('collapse in')
.attr('aria-expanded', false)
this.$trigger
.addClass('collapsed')
.attr('aria-expanded', false)
this.transitioning = 1
var complete = function () {
@ -120,6 +135,33 @@
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
Collapse.prototype.getParent = function () {
return $(this.options.parent)
.find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
.each($.proxy(function (i, element) {
var $element = $(element)
this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
}, this))
.end()
}
Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
var isOpen = $element.hasClass('in')
$element.attr('aria-expanded', isOpen)
$trigger
.toggleClass('collapsed', !isOpen)
.attr('aria-expanded', isOpen)
}
function getTargetFromTrigger($trigger) {
var href
var target = $trigger.attr('data-target')
|| (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
return $(target)
}
// COLLAPSE PLUGIN DEFINITION
// ==========================
@ -155,22 +197,13 @@
// =================
$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
var href
var $this = $(this)
var target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
var $target = $(target)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $this.data()
var parent = $this.attr('data-parent')
var $parent = parent && $(parent)
if (!data || !data.transitioning) {
if ($parent) $parent.find('[data-toggle="collapse"][data-parent="' + parent + '"]').not($this).addClass('collapsed').attr('aria-expanded', false)
var isCollapsed = $target.hasClass('in')
$this.toggleClass('collapsed', isCollapsed).attr('aria-expanded', !isCollapsed)
}
if (!$this.attr('data-target')) e.preventDefault()
var $target = getTargetFromTrigger($this)
var data = $target.data('bs.collapse')
var option = data ? 'toggle' : $.extend({}, $this.data(), { trigger: this })
Plugin.call($target, option)
})

4
js/dropdown.js
View File

@ -154,6 +154,8 @@
.on('click.bs.dropdown.data-api', clearMenus)
.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
.on('keydown.bs.dropdown.data-api', toggle + ', [role="menu"], [role="listbox"]', Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
.on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)
}(jQuery);

8
js/tab.js
View File

@ -141,9 +141,13 @@
// TAB DATA-API
// ============
$(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
var clickHandler = function (e) {
e.preventDefault()
Plugin.call($(this), 'show')
})
}
$(document)
.on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
.on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)
}(jQuery);

10
js/tests/unit/button.js
View File

@ -33,9 +33,9 @@ $(function () {
var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equal($btn.html(), 'mdo', 'btn text equals mdo')
$btn.bootstrapButton('loading')
equal($btn.html(), 'fat', 'btn text equals fat')
stop()
setTimeout(function () {
equal($btn.html(), 'fat', 'btn text equals fat')
ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
ok($btn.hasClass('disabled'), 'btn has disabled class')
start()
@ -46,16 +46,16 @@ $(function () {
var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equal($btn.html(), 'mdo', 'btn text equals mdo')
$btn.bootstrapButton('loading')
equal($btn.html(), 'fat', 'btn text equals fat')
stop()
setTimeout(function () {
equal($btn.html(), 'fat', 'btn text equals fat')
ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
ok($btn.hasClass('disabled'), 'btn has disabled class')
start()
stop()
$btn.bootstrapButton('reset')
equal($btn.html(), 'mdo', 'btn text equals mdo')
setTimeout(function () {
equal($btn.html(), 'mdo', 'btn text equals mdo')
ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
start()
@ -67,16 +67,16 @@ $(function () {
var $btn = $('<button class="btn" data-loading-text="fat"/>')
equal($btn.html(), '', 'btn text equals ""')
$btn.bootstrapButton('loading')
equal($btn.html(), 'fat', 'btn text equals fat')
stop()
setTimeout(function () {
equal($btn.html(), 'fat', 'btn text equals fat')
ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
ok($btn.hasClass('disabled'), 'btn has disabled class')
start()
stop()
$btn.bootstrapButton('reset')
equal($btn.html(), '', 'btn text equals ""')
setTimeout(function () {
equal($btn.html(), '', 'btn text equals ""')
ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
start()

72
js/tests/unit/collapse.js
View File

@ -79,7 +79,7 @@ $(function () {
$('<div id="test1"/>')
.appendTo('#qunit-fixture')
.on('show.bs.collapse', function () {
.on('shown.bs.collapse', function () {
ok(!$target.hasClass('collapsed'))
start()
})
@ -94,7 +94,7 @@ $(function () {
$('<div id="test1" class="in"/>')
.appendTo('#qunit-fixture')
.on('hide.bs.collapse', function () {
.on('hidden.bs.collapse', function () {
ok($target.hasClass('collapsed'))
start()
})
@ -137,12 +137,12 @@ $(function () {
test('should remove "collapsed" class from active accordion target', function () {
stop()
var accordionHTML = '<div id="accordion">'
+ '<div class="accordion-group"/>'
+ '<div class="accordion-group"/>'
+ '<div class="accordion-group"/>'
var accordionHTML = '<div class="panel-group" id="accordion">'
+ '<div class="panel"/>'
+ '<div class="panel"/>'
+ '<div class="panel"/>'
+ '</div>'
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.accordion-group')
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.panel')
var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
@ -156,7 +156,7 @@ $(function () {
$('<div id="body3"/>')
.appendTo($groups.eq(2))
.on('show.bs.collapse', function () {
.on('shown.bs.collapse', function () {
ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
@ -170,12 +170,12 @@ $(function () {
test('should allow dots in data-parent', function () {
stop()
var accordionHTML = '<div class="accordion">'
+ '<div class="accordion-group"/>'
+ '<div class="accordion-group"/>'
+ '<div class="accordion-group"/>'
var accordionHTML = '<div class="panel-group accordion">'
+ '<div class="panel"/>'
+ '<div class="panel"/>'
+ '<div class="panel"/>'
+ '</div>'
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.accordion-group')
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.panel')
var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"/>').appendTo($groups.eq(0))
@ -189,7 +189,7 @@ $(function () {
$('<div id="body3"/>')
.appendTo($groups.eq(2))
.on('show.bs.collapse', function () {
.on('shown.bs.collapse', function () {
ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
@ -207,7 +207,7 @@ $(function () {
$('<div id="test1"/>')
.appendTo('#qunit-fixture')
.on('show.bs.collapse', function () {
.on('shown.bs.collapse', function () {
equal($target.attr('aria-expanded'), 'true', 'aria-expanded on target is "true"')
start()
})
@ -222,7 +222,7 @@ $(function () {
$('<div id="test1" class="in"/>')
.appendTo('#qunit-fixture')
.on('hide.bs.collapse', function () {
.on('hidden.bs.collapse', function () {
equal($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"')
start()
})
@ -233,12 +233,12 @@ $(function () {
test('should change aria-expanded from active accordion target to "false" and set the newly active one to "true"', function () {
stop()
var accordionHTML = '<div id="accordion">'
+ '<div class="accordion-group"/>'
+ '<div class="accordion-group"/>'
+ '<div class="accordion-group"/>'
var accordionHTML = '<div class="panel-group" id="accordion">'
+ '<div class="panel"/>'
+ '<div class="panel"/>'
+ '<div class="panel"/>'
+ '</div>'
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.accordion-group')
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.panel')
var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
@ -252,7 +252,7 @@ $(function () {
$('<div id="body3" aria-expanded="false"/>')
.appendTo($groups.eq(2))
.on('show.bs.collapse', function () {
.on('shown.bs.collapse', function () {
equal($target1.attr('aria-expanded'), 'false', 'inactive target 1 has aria-expanded="false"')
equal($target2.attr('aria-expanded'), 'false', 'inactive target 2 has aria-expanded="false"')
equal($target3.attr('aria-expanded'), 'true', 'active target 3 has aria-expanded="false"')
@ -298,4 +298,32 @@ $(function () {
}, 1)
})
test('should add "collapsed" class to target when collapse is hidden via manual invocation', function () {
stop()
var $target = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
$('<div id="test1" class="in"/>')
.appendTo('#qunit-fixture')
.on('hidden.bs.collapse', function () {
ok($target.hasClass('collapsed'))
start()
})
.bootstrapCollapse('hide')
})
test('should remove "collapsed" class from target when collapse is shown via manual invocation', function () {
stop()
var $target = $('<a data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')
$('<div id="test1"/>')
.appendTo('#qunit-fixture')
.on('shown.bs.collapse', function () {
ok(!$target.hasClass('collapsed'))
start()
})
.bootstrapCollapse('show')
})
})

2
package.json
View File

@ -56,8 +56,8 @@
"grunt-saucelabs": "~8.3.2",
"grunt-sed": "~0.1.1",
"load-grunt-tasks": "~1.0.0",
"markdown": "~0.5.0",
"npm-shrinkwrap": "~4.0.0",
"remarkable": "^1.2.0",
"time-grunt": "~1.0.0"
},
"engines": {

56
test-infra/npm-shrinkwrap.json generated
View File

@ -1702,8 +1702,8 @@
"resolved": "https://registry.npmjs.org/bl/-/bl-0.9.3.tgz",
"dependencies": {
"readable-stream": {
"version": "1.0.33",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.33.tgz",
"version": "1.0.32",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.32.tgz",
"dependencies": {
"core-util-is": {
"version": "1.0.1",
@ -2173,6 +2173,10 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.0.tgz"
},
"vow": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/vow/-/vow-0.4.4.tgz"
},
"vow-queue": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/vow-queue/-/vow-queue-0.3.1.tgz"
@ -2559,13 +2563,7 @@
},
"vow-queue": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/vow-queue/-/vow-queue-0.4.1.tgz",
"dependencies": {
"vow": {
"version": "0.4.6",
"resolved": "https://registry.npmjs.org/vow/-/vow-0.4.6.tgz"
}
}
"resolved": "https://registry.npmjs.org/vow-queue/-/vow-queue-0.4.1.tgz"
}
}
},
@ -3181,22 +3179,6 @@
}
}
},
"markdown": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/markdown/-/markdown-0.5.0.tgz",
"dependencies": {
"nopt": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/nopt/-/nopt-2.1.2.tgz",
"dependencies": {
"abbrev": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.5.tgz"
}
}
}
}
},
"npm-shrinkwrap": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/npm-shrinkwrap/-/npm-shrinkwrap-4.0.0.tgz",
@ -3863,6 +3845,30 @@
}
}
},
"remarkable": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/remarkable/-/remarkable-1.2.1.tgz",
"dependencies": {
"argparse": {
"version": "0.1.15",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-0.1.15.tgz",
"dependencies": {
"underscore": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz"
},
"underscore.string": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz"
}
}
},
"autolinker": {
"version": "0.12.3",
"resolved": "https://registry.npmjs.org/autolinker/-/autolinker-0.12.3.tgz"
}
}
},
"time-grunt": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/time-grunt/-/time-grunt-1.0.0.tgz",