diff --git a/_config.yml b/_config.yml index d999358724..ddef7b2b9e 100644 --- a/_config.yml +++ b/_config.yml @@ -9,4 +9,3 @@ permalink: pretty source: ./docs destination: ./_gh_pages port: 9001 -url: http://getbootstrap.dev:9001 diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index 19a9af6362..fcfc7c4828 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -4,10 +4,6 @@ - - - diff --git a/docs/_includes/nav-javascript.html b/docs/_includes/nav-javascript.html index 9422b27fb5..13079580b8 100644 --- a/docs/_includes/nav-javascript.html +++ b/docs/_includes/nav-javascript.html @@ -2,7 +2,7 @@ Overview {% highlight html %} - - -

Tooltips in input groups

-

When using tooltips and popovers with the Bootstrap input groups, you'll have to set the container (documented below) option to avoid unwanted side effects.

+
+

Tooltips in button groups and input groups require special setting

+

When using tooltips on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).

+
@@ -768,13 +774,13 @@ $('#example').tooltip(options) animation boolean true - apply a css fade transition to the tooltip + apply a CSS fade transition to the tooltip html boolean false - Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks. + Insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks. placement @@ -798,7 +804,7 @@ $('#example').tooltip(options) trigger string 'hover focus' - how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger multiple, space seperated, trigger types. + how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger multiple, space separated, trigger types. delay @@ -815,7 +821,7 @@ $('#example').tooltip(options) string | false false -

Appends the tooltip to a specific element container: 'body'

+

Appends the tooltip to a specific element. Example: container: 'body'

@@ -868,6 +874,10 @@ $('#example').tooltip(options)

Plugin dependency

Popovers require the tooltip plugin to be included in your version of Bootstrap.

+
+

Popovers in button groups and input groups require special setting

+

When using popovers on elements within a .btn-group or an .input-group, you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).

+

Static popover

Four options are available: top, right, bottom, and left aligned.

@@ -946,13 +956,13 @@ $('#example').tooltip(options) animation boolean true - apply a css fade transition to the tooltip + apply a CSS fade transition to the tooltip html boolean false - Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks. + Insert HTML into the popover. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks. placement @@ -999,7 +1009,7 @@ $('#example').tooltip(options) string | false false -

Appends the popover to a specific element container: 'body'

+

Appends the popover to a specific element. Example: container: 'body'

@@ -1101,7 +1111,7 @@ $('#example').tooltip(options) closed - This event is fired when the alert has been closed (will wait for css transitions to complete). + This event is fired when the alert has been closed (will wait for CSS transitions to complete). @@ -1374,7 +1384,7 @@ $('.nav-tabs').button()

Usage

Via data attributes

-

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

+

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

Via JavaScript

@@ -1446,7 +1456,7 @@ $('#myCollapsible').collapse({ shown - This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete). + This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). hide @@ -1456,7 +1466,7 @@ $('#myCollapsible').collapse({ hidden - This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete). + This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). diff --git a/js/popover.js b/js/popover.js index 33edadf7fb..e58e24908c 100644 --- a/js/popover.js +++ b/js/popover.js @@ -55,6 +55,8 @@ $tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content) $tip.removeClass('fade top bottom left right in') + + $tip.find('.popover-title:empty').hide() } Popover.prototype.hasContent = function () { diff --git a/less/carousel.less b/less/carousel.less index 31f9b8aff1..a7a4672c12 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -131,6 +131,7 @@ z-index: 15; width: 100px; margin: 0 0 0 -50px; + padding-left: 0; list-style: none; text-align: center; diff --git a/less/code.less b/less/code.less index f1bc0a0cdb..63c255010d 100644 --- a/less/code.less +++ b/less/code.less @@ -31,8 +31,6 @@ pre { line-height: @line-height-base; word-break: break-all; word-wrap: break-word; - white-space: pre; - white-space: pre-wrap; background-color: #f5f5f5; border: 1px solid #ccc; // IE8 fallback border: 1px solid rgba(0,0,0,.15); @@ -47,7 +45,6 @@ pre { code { padding: 0; color: inherit; - white-space: pre; white-space: pre-wrap; background-color: transparent; border: 0; diff --git a/less/forms.less b/less/forms.less index 10a315da6a..a96849d5f5 100644 --- a/less/forms.less +++ b/less/forms.less @@ -72,6 +72,17 @@ input[type="color"] { outline: 0; .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); } + + // Disabled and read-only inputs + // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be + // disabled if the fieldset is disabled. Due to implementation difficulty, + // we don't honor that edge case; we style them as disabled anyway. + &[disabled], + &[readonly], + fieldset[disabled] & { + cursor: not-allowed; + background-color: @input-bg-disabled; + } } // Reset appearance properties for textual inputs and textarea @@ -184,7 +195,7 @@ textarea { // Move the options list down to align with labels .controls > .radio:first-child, .controls > .checkbox:first-child { - padding-top: 5px; // has to be padding because margin collaspes + padding-top: 5px; // has to be padding because margin collapses } */ @@ -227,6 +238,7 @@ input[type="search"], input[type="tel"], input[type="color"] { &.input-large { + min-height: @input-height-large; padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; border-radius: @border-radius-large; @@ -240,35 +252,6 @@ input[type="color"] { } -// DISABLED STATE -// -------------- - -// Disabled and read-only inputs -// Note: HTML5 says that inputs under a fieldset > legend:first-child won't be -// disabled if the fieldset is disabled. Due to implementation difficulty, -// we don't honor that edge case; we style them as disabled anyway. -input, -select, -textarea { - &[disabled], - &[readonly], - fieldset[disabled] & { - cursor: not-allowed; - background-color: @input-bg-disabled; - } -} -// Explicitly reset the colors here -input[type="radio"], -input[type="checkbox"] { - &[disabled], - &[readonly], - fieldset[disabled] & { - background-color: transparent; - } -} - - - // FORM FIELD FEEDBACK STATES // -------------------------- @@ -286,20 +269,6 @@ input[type="checkbox"] { .form-field-validation(@state-success-text, @state-success-text, @state-success-bg); } -// HTML5 invalid states -// Shares styles with the .control-group.error above -input:focus:invalid, -textarea:focus:invalid, -select:focus:invalid { - color: #b94a48; - border-color: #ee5f5b; - &:focus { - border-color: darken(#ee5f5b, 10%); - @shadow: 0 0 6px lighten(#ee5f5b, 20%); - .box-shadow(@shadow); - } -} - @@ -352,6 +321,7 @@ select:focus:invalid { .input-group-addon, .input-group-btn { width: 1%; + white-space: nowrap; vertical-align: middle; // Match the inputs } @@ -455,7 +425,7 @@ select:focus:invalid { } } -// Only right aline form labels here when the columns stop stacking +// Only right align form labels here when the columns stop stacking @media (min-width: 768px) { .form-horizontal .control-label { text-align: right; diff --git a/less/grid.less b/less/grid.less index b97d1d5c4a..12803f39af 100644 --- a/less/grid.less +++ b/less/grid.less @@ -2,7 +2,6 @@ // Grid system // -------------------------------------------------- - // Set the container width, and override it for fixed navbars in media queries .container { .container-fixed(); @@ -51,9 +50,6 @@ .col-lg-11, .col-lg-12 { position: relative; - // Float and set width: 100%; for easy stacking on mobile devices - float: left; - width: 100%; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding @@ -68,6 +64,20 @@ // // Tiny device columns (smartphones) +.col-1, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9, +.col-10, +.col-11, +.col-12 { + float: left; +} .col-1 { width: percentage((1 / @grid-columns)); } .col-2 { width: percentage((2 / @grid-columns)); } .col-3 { width: percentage((3 / @grid-columns)); } @@ -87,6 +97,20 @@ max-width: @container-tablet; } + .col-sm-1, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-10, + .col-sm-11, + .col-sm-12 { + float: left; + } .col-sm-1 { width: percentage((1 / @grid-columns)); } .col-sm-2 { width: percentage((2 / @grid-columns)); } .col-sm-3 { width: percentage((3 / @grid-columns)); } @@ -100,19 +124,6 @@ .col-sm-11 { width: percentage((11/ @grid-columns)); } .col-sm-12 { width: 100%; } - // Offsets - .col-offset-1 { margin-left: percentage((1 / @grid-columns)); } - .col-offset-2 { margin-left: percentage((2 / @grid-columns)); } - .col-offset-3 { margin-left: percentage((3 / @grid-columns)); } - .col-offset-4 { margin-left: percentage((4 / @grid-columns)); } - .col-offset-5 { margin-left: percentage((5 / @grid-columns)); } - .col-offset-6 { margin-left: percentage((6 / @grid-columns)); } - .col-offset-7 { margin-left: percentage((7 / @grid-columns)); } - .col-offset-8 { margin-left: percentage((8 / @grid-columns)); } - .col-offset-9 { margin-left: percentage((9 / @grid-columns)); } - .col-offset-10 { margin-left: percentage((10/ @grid-columns)); } - .col-offset-11 { margin-left: percentage((11/ @grid-columns)); } - // Push and pull columns for source order changes .col-push-1 { left: percentage((1 / @grid-columns)); } .col-push-2 { left: percentage((2 / @grid-columns)); } @@ -144,6 +155,20 @@ .container { max-width: @container-desktop; } + .col-lg-1, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-10, + .col-lg-11, + .col-lg-12 { + float: left; + } .col-lg-1 { width: percentage((1 / @grid-columns)); } .col-lg-2 { width: percentage((2 / @grid-columns)); } .col-lg-3 { width: percentage((3 / @grid-columns)); } @@ -156,6 +181,19 @@ .col-lg-10 { width: percentage((10/ @grid-columns)); } .col-lg-11 { width: percentage((11/ @grid-columns)); } .col-lg-12 { width: 100%; } + + // Offsets + .col-offset-1 { margin-left: percentage((1 / @grid-columns)); } + .col-offset-2 { margin-left: percentage((2 / @grid-columns)); } + .col-offset-3 { margin-left: percentage((3 / @grid-columns)); } + .col-offset-4 { margin-left: percentage((4 / @grid-columns)); } + .col-offset-5 { margin-left: percentage((5 / @grid-columns)); } + .col-offset-6 { margin-left: percentage((6 / @grid-columns)); } + .col-offset-7 { margin-left: percentage((7 / @grid-columns)); } + .col-offset-8 { margin-left: percentage((8 / @grid-columns)); } + .col-offset-9 { margin-left: percentage((9 / @grid-columns)); } + .col-offset-10 { margin-left: percentage((10/ @grid-columns)); } + .col-offset-11 { margin-left: percentage((11/ @grid-columns)); } } // Large desktops and up diff --git a/less/list-group.less b/less/list-group.less index d812cc5f94..f9d9f612cd 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -7,7 +7,8 @@ // Easily usable on