diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index f2975c81b3..764cfbbaca 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -900,9 +900,9 @@ form.bs-docs-example {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
- -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.05);
- -moz-box-shadow: 0 1px 3px rgba(0,0,0,.05);
- box-shadow: 0 1px 3px rgba(0,0,0,.05);
+ -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
+ -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
+ box-shadow: 0 1px 4px rgba(0,0,0,.065);
}
.bs-docs-sidenav > li > a {
margin: 0 0 -1px;
@@ -1005,4 +1005,4 @@ form.bs-docs-example {
.subhead + .bs-docs-canvas {
top: 250px;
}
-}
\ No newline at end of file
+}
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 5bf5225beb..b28a358f13 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -109,12 +109,12 @@
-
Download compiled
+
Download compiled
Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.
Download Bootstrap
-
Download source
+
Download source
Get the original files for all CSS and Javasript, along with a local copy of the docs by downloading the latest version directly from GitHub.
Download Bootstrap source
@@ -156,21 +156,17 @@
Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Bootstrap documentation.
+ Docs sections
Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.
-
Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.
-
Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.
-
Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.
-
-
- List of components
+ List of components
Together, the Components and Javascript plugins sections provide the following interface elements:
- Button groups
diff --git a/docs/templates/pages/getting-started.mustache b/docs/templates/pages/getting-started.mustache
index d177bca5f1..852c3add5e 100644
--- a/docs/templates/pages/getting-started.mustache
+++ b/docs/templates/pages/getting-started.mustache
@@ -38,12 +38,12 @@
-
Download compiled
+
Download compiled
Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.
Download Bootstrap
-
Download source
+
Download source
Get the original files for all CSS and Javasript, along with a local copy of the docs by downloading the latest version directly from GitHub.
Download Bootstrap source
@@ -85,40 +85,36 @@
{{_i}}Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Bootstrap documentation.{{/i}}
-
- Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.
+ {{_i}}Docs sections{{/i}}
+
+ {{_i}}Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.{{/i}}
+
+ {{_i}}Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.{{/i}}
+
+ {{_i}}Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.{{/i}}
+
+ {{_i}}Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.{{/i}}
-
- Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.
-
-
- Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.
-
-
- Similar to Components, these Javascript plugins are interactive components for things like tooltips, popovers, modals, and more.
-
-
-
- List of components
- Together, the Components and Javascript plugins sections provide the following interface elements:
+ {{_i}}List of components{{/i}}
+ {{_i}}Together, the Components and Javascript plugins sections provide the following interface elements:{{/i}}
- - Button groups
- - Button dropdowns
- - Navigational tabs, pills, and lists
- - Navbar
- - Labels
- - Badges
- - Page headers and hero unit
- - Thumbnails
- - Alerts
- - Progress bars
- - Modals
- - Dropdowns
- - Tooltips
- - Popovers
- - Accordion
- - Carousel
- - Typeahead
+ - {{_i}}Button groups{{/i}}
+ - {{_i}}Button dropdowns{{/i}}
+ - {{_i}}Navigational tabs, pills, and lists{{/i}}
+ - {{_i}}Navbar{{/i}}
+ - {{_i}}Labels{{/i}}
+ - {{_i}}Badges{{/i}}
+ - {{_i}}Page headers and hero unit{{/i}}
+ - {{_i}}Thumbnails{{/i}}
+ - {{_i}}Alerts{{/i}}
+ - {{_i}}Progress bars{{/i}}
+ - {{_i}}Modals{{/i}}
+ - {{_i}}Dropdowns{{/i}}
+ - {{_i}}Tooltips{{/i}}
+ - {{_i}}Popovers{{/i}}
+ - {{_i}}Accordion{{/i}}
+ - {{_i}}Carousel{{/i}}
+ - {{_i}}Typeahead{{/i}}
{{_i}}In future guides, we may walk through these components individually in more detail. Until then, look for each of these in the documentation for information on how to utilize and customize them.{{/i}}
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index e072f05b95..9f93620c33 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -99,34 +99,34 @@ $('#myModal').on('show', function (e) {
-
-
-
+
+
+
- {{_i}}Examples{{/i}}
- {{_i}}Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.{{/i}}
+ {{_i}}Examples{{/i}}
+ {{_i}}Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.{{/i}}
- {{_i}}Static example{{/i}}
- {{_i}}A rendered modal with header, body, and set of actions in the footer.{{/i}}
-
-
-
-
-
{{_i}}One fine body…{{/i}}
-
-
+
{{_i}}Static example{{/i}}
+
{{_i}}A rendered modal with header, body, and set of actions in the footer.{{/i}}
+
+
+
-
{{! /example }}
+
+
{{_i}}One fine body…{{/i}}
+
+
+
+
{{! /example }}
<div class="modal hide fade">
<div class="modal-header">
@@ -143,43 +143,43 @@ $('#myModal').on('show', function (e) {
</div>
-
{{_i}}Live demo{{/i}}
-
{{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}
-
-
-
-
-
{{_i}}Text in a modal{{/i}}
-
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.
-
-
{{_i}}Popover in a modal{{/i}}
-
{{_i}}This button should trigger a popover on hover.{{/i}}
-
-
{{_i}}Tooltips in a modal{{/i}}
-
{{_i}}This link and that link should have tooltips on hover.{{/i}}
-
-
-
-
{{_i}}Overflowing text to show optional scrollbar{{/i}}
-
{{_i}}We set a fixed max-height on the .modal-body. Watch it overflow with all this extra lorem ipsum text we've included.{{/i}}
-
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
-
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
-
-
+
{{_i}}Live demo{{/i}}
+
{{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}
+
+
+
-
{{! /example }}
+
+
{{_i}}Text in a modal{{/i}}
+
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.
+
+
{{_i}}Popover in a modal{{/i}}
+
{{_i}}This button should trigger a popover on hover.{{/i}}
+
+
{{_i}}Tooltips in a modal{{/i}}
+
{{_i}}This link and that link should have tooltips on hover.{{/i}}
+
+
+
+
{{_i}}Overflowing text to show optional scrollbar{{/i}}
+
{{_i}}We set a fixed max-height on the .modal-body. Watch it overflow with all this extra lorem ipsum text we've included.{{/i}}
+
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+
+
+
+
{{! /example }}
<-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">{{_i}}Launch demo modal{{/i}}</a>
@@ -201,214 +201,214 @@ $('#myModal').on('show', function (e) {
-
+
-
{{_i}}Usage{{/i}}
+
{{_i}}Usage{{/i}}
-
{{_i}}Via data attributes{{/i}}
-
{{_i}}Activate a modal without writing javascript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.{{/i}}
-
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
+
{{_i}}Via data attributes{{/i}}
+
{{_i}}Activate a modal without writing javascript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.{{/i}}
+
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
-
{{_i}}Via javascript{{/i}}
-
{{_i}}Call a modal with id myModal with a single line of javascript:{{/i}}
-
$('#myModal').modal(options)
+
{{_i}}Via javascript{{/i}}
+
{{_i}}Call a modal with id myModal with a single line of javascript:{{/i}}
+
$('#myModal').modal(options)
-
{{_i}}Options{{/i}}
-
{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-backdrop="".{{/i}}
-
-
-
- | {{_i}}Name{{/i}} |
- {{_i}}type{{/i}} |
- {{_i}}default{{/i}} |
- {{_i}}description{{/i}} |
-
-
-
-
- | {{_i}}backdrop{{/i}} |
- {{_i}}boolean{{/i}} |
- {{_i}}true{{/i}} |
- {{_i}}Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.{{/i}} |
-
-
- | {{_i}}keyboard{{/i}} |
- {{_i}}boolean{{/i}} |
- {{_i}}true{{/i}} |
- {{_i}}Closes the modal when escape key is pressed{{/i}} |
-
-
- | {{_i}}show{{/i}} |
- {{_i}}boolean{{/i}} |
- {{_i}}true{{/i}} |
- {{_i}}Shows the modal when initialized.{{/i}} |
-
-
- | {{_i}}remote{{/i}} |
- {{_i}}path{{/i}} |
- {{_i}}false{{/i}} |
- {{_i}}If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body. If you're using the data api, you may alternatively use the href tag to specify the remote source. An example of this is shown below:{{/i}}
- <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>
|
-
-
-
+
{{_i}}Options{{/i}}
+
{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to data-, as in data-backdrop="".{{/i}}
+
+
+
+ | {{_i}}Name{{/i}} |
+ {{_i}}type{{/i}} |
+ {{_i}}default{{/i}} |
+ {{_i}}description{{/i}} |
+
+
+
+
+ | {{_i}}backdrop{{/i}} |
+ {{_i}}boolean{{/i}} |
+ {{_i}}true{{/i}} |
+ {{_i}}Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.{{/i}} |
+
+
+ | {{_i}}keyboard{{/i}} |
+ {{_i}}boolean{{/i}} |
+ {{_i}}true{{/i}} |
+ {{_i}}Closes the modal when escape key is pressed{{/i}} |
+
+
+ | {{_i}}show{{/i}} |
+ {{_i}}boolean{{/i}} |
+ {{_i}}true{{/i}} |
+ {{_i}}Shows the modal when initialized.{{/i}} |
+
+
+ | {{_i}}remote{{/i}} |
+ {{_i}}path{{/i}} |
+ {{_i}}false{{/i}} |
+ {{_i}}If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body. If you're using the data api, you may alternatively use the href tag to specify the remote source. An example of this is shown below:{{/i}}
+ <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>
|
+
+
+
-
Methods{{/i}}
- .modal({{_i}}options{{/i}})
- {{_i}}Activates your content as a modal. Accepts an optional options object.{{/i}}
+ Methods{{/i}}
+ .modal({{_i}}options{{/i}})
+ {{_i}}Activates your content as a modal. Accepts an optional options object.{{/i}}
$('#myModal').modal({
keyboard: false
})
- .modal('toggle')
- {{_i}}Manually toggles a modal.{{/i}}
- $('#myModal').modal('toggle')
- .modal('show')
- {{_i}}Manually opens a modal.{{/i}}
- $('#myModal').modal('show')
- .modal('hide')
- {{_i}}Manually hides a modal.{{/i}}
- $('#myModal').modal('hide')
- {{_i}}Events{{/i}}
- {{_i}}Bootstrap's modal class exposes a few events for hooking into modal functionality.{{/i}}
-
-
-
- | {{_i}}Event{{/i}} |
- {{_i}}Description{{/i}} |
-
-
-
-
- | {{_i}}show{{/i}} |
- {{_i}}This event fires immediately when the show instance method is called.{{/i}} |
-
-
- | {{_i}}shown{{/i}} |
- {{_i}}This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).{{/i}} |
-
-
- | {{_i}}hide{{/i}} |
- {{_i}}This event is fired immediately when the hide instance method has been called.{{/i}} |
-
-
- | {{_i}}hidden{{/i}} |
- {{_i}}This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).{{/i}} |
-
-
-
+ .modal('toggle')
+ {{_i}}Manually toggles a modal.{{/i}}
+ $('#myModal').modal('toggle')
+ .modal('show')
+ {{_i}}Manually opens a modal.{{/i}}
+ $('#myModal').modal('show')
+ .modal('hide')
+ {{_i}}Manually hides a modal.{{/i}}
+ $('#myModal').modal('hide')
+ {{_i}}Events{{/i}}
+ {{_i}}Bootstrap's modal class exposes a few events for hooking into modal functionality.{{/i}}
+
+
+
+ | {{_i}}Event{{/i}} |
+ {{_i}}Description{{/i}} |
+
+
+
+
+ | {{_i}}show{{/i}} |
+ {{_i}}This event fires immediately when the show instance method is called.{{/i}} |
+
+
+ | {{_i}}shown{{/i}} |
+ {{_i}}This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).{{/i}} |
+
+
+ | {{_i}}hide{{/i}} |
+ {{_i}}This event is fired immediately when the hide instance method has been called.{{/i}} |
+
+
+ | {{_i}}hidden{{/i}} |
+ {{_i}}This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).{{/i}} |
+
+
+
$('#myModal').on('hidden', function () {
// {{_i}}do something…{{/i}}
})
-
+
-
-
-
+
+
+
- {{_i}}Examples{{/i}}
- {{_i}}Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.{{/i}}
+ {{_i}}Examples{{/i}}
+ {{_i}}Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.{{/i}}
- {{_i}}Within a navbar{{/i}}
-
-
-
-
+
{{_i}}Within a navbar{{/i}}
+
+
+
{{! /example }}
-
{{_i}}Within tabs{{/i}}
-
{{! /example }}
+
{{_i}}Within tabs{{/i}}
+
{{! /example }}
-
+
-
{{_i}}Usage{{/i}}
+
{{_i}}Usage{{/i}}
-
{{_i}}Via data attributes{{/i}}
-
{{_i}}Add data-toggle="dropdown" to a link or button to toggle a dropdown.{{/i}}
+
{{_i}}Via data attributes{{/i}}
+
{{_i}}Add data-toggle="dropdown" to a link or button to toggle a dropdown.{{/i}}
<div class="dropdown">
<a class="dropdown-toggle" href="#">Dropdown trigger</a>
@@ -417,7 +417,7 @@ $('#myModal').on('hidden', function () {
</ul>
</div>
-
{{_i}}To keep URLs intact, use the data-target attribute instead of href="#".{{/i}}
+
{{_i}}To keep URLs intact, use the data-target attribute instead of href="#".{{/i}}
<div class="dropdown">
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
@@ -430,185 +430,185 @@ $('#myModal').on('hidden', function () {
</div>
-
{{_i}}Via javascript{{/i}}
-
{{_i}}Call the dropdowns via javascript:{{/i}}
-
$('.dropdown-toggle').dropdown()
+
{{_i}}Via javascript{{/i}}
+
{{_i}}Call the dropdowns via javascript:{{/i}}
+
$('.dropdown-toggle').dropdown()
-
{{_i}}Options{{/i}}
-
{{_i}}None{{/i}}
+
{{_i}}Options{{/i}}
+
{{_i}}None{{/i}}
-
{{_i}}Methods{{/i}}
-
$().dropdown()
-
{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}
-
+
{{_i}}Methods{{/i}}
+
$().dropdown()
+
{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}
+
-
-