aboutsummaryrefslogtreecommitdiff
path: root/docs/javascript
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2015-03-01 13:44:10 -0800
committerMark Otto <[email protected]>2015-03-01 13:44:10 -0800
commitc16fee5efd5620197ab1213ca3699830d590ee39 (patch)
treecd608536dfc7fbaaf60658bcaa5210ebd8ef5624 /docs/javascript
parent50a51ffc361276d13c4da16684277279fd567d4c (diff)
parent1ba2630ccf460106036129086c98c5bacd7baa98 (diff)
downloadbootstrap-c16fee5efd5620197ab1213ca3699830d590ee39.tar.xz
bootstrap-c16fee5efd5620197ab1213ca3699830d590ee39.zip
Merge branch 'master' into v4
Conflicts: .travis.yml Gruntfile.js bower.json dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/js/bootstrap.js dist/js/bootstrap.min.js docs/_data/glyphicons.yml docs/_includes/components/breadcrumbs.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/labels.html docs/_includes/components/list-group.html docs/_includes/components/media.html docs/_includes/components/navs.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/components/thumbnails.html docs/_includes/components/wells.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/customizer-variables.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/grunt.html docs/_includes/getting-started/license.html docs/_includes/getting-started/template.html docs/_includes/header.html docs/_includes/js/affix.html docs/_includes/js/alerts.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/popovers.html docs/_includes/js/scrollspy.html docs/_includes/js/tabs.html docs/_includes/js/tooltips.html docs/_includes/js/transitions.html docs/_includes/nav/javascript.html docs/_layouts/default.html docs/assets/css/docs.min.css docs/assets/css/src/docs.css docs/assets/js/customize.min.js docs/assets/js/docs.min.js docs/assets/js/raw-files.min.js docs/assets/js/vendor/FileSaver.js docs/assets/js/vendor/autoprefixer.js docs/assets/js/vendor/uglify.min.js docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/js/bootstrap.min.js docs/examples/blog/index.html docs/examples/carousel/index.html docs/examples/cover/index.html docs/examples/dashboard/index.html docs/examples/narrow-jumbotron/narrow-jumbotron.css docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/non-responsive/index.html docs/examples/non-responsive/non-responsive.css docs/examples/theme/index.html grunt/configBridge.json js/affix.js js/carousel.js js/collapse.js js/dropdown.js js/modal.js js/popover.js js/scrollspy.js js/tab.js js/tests/unit/affix.js js/tests/unit/button.js js/tests/unit/carousel.js js/tests/unit/modal.js js/tests/unit/tooltip.js js/tooltip.js less/badges.less less/glyphicons.less less/type.less less/variables.less package.json scss/_dropdown.scss scss/_forms.scss test-infra/npm-shrinkwrap.json
Diffstat (limited to 'docs/javascript')
-rw-r--r--docs/javascript/carousel.md1
-rw-r--r--docs/javascript/modal.md103
-rw-r--r--docs/javascript/popovers.md3
-rw-r--r--docs/javascript/scrollspy.md6
-rw-r--r--docs/javascript/tooltips.md2
5 files changed, 70 insertions, 45 deletions
diff --git a/docs/javascript/carousel.md b/docs/javascript/carousel.md
index d69725a59..36b302579 100644
--- a/docs/javascript/carousel.md
+++ b/docs/javascript/carousel.md
@@ -208,6 +208,7 @@ Bootstrap's carousel class exposes two events for hooking into carousel function
- `direction`: The direction in which the carousel is sliding (either `"left"` or `"right"`).
- `relatedTarget`: The DOM element that is being slid into place as the active item.
+All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`).
<div class="table-responsive">
<table class="table table-bordered table-striped">
diff --git a/docs/javascript/modal.md b/docs/javascript/modal.md
index 22c74f31c..4ae9f95ba 100644
--- a/docs/javascript/modal.md
+++ b/docs/javascript/modal.md
@@ -248,15 +248,69 @@ For modals that simply appear rather than fade in to view, remove the `.fade` cl
</div>
{% endhighlight %}
+## Using the grid system
+
+To take advantage of the Bootstrap grid system within a modal, just nest `.container-fluid within the `.modal-body` and then use the normal grid system classes within this container.
+
+{% example html %}
+<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+ <h4 class="modal-title" id="gridModalLabel">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-md-4">.col-md-4</div>
+ <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
+ </div>
+ <div class="row">
+ <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+ <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
+ </div>
+ <div class="row">
+ <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-9">
+ Level 1: .col-sm-9
+ <div class="row">
+ <div class="col-xs-8 col-sm-6">
+ Level 2: .col-xs-8 .col-sm-6
+ </div>
+ <div class="col-xs-4 col-sm-6">
+ Level 2: .col-xs-4 .col-sm-6
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div>
+ </div>
+</div>
+<div class="bs-example bs-example-padded-bottom">
+ <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
+ Launch demo modal
+ </button>
+</div>
+{% endexample %}
+
## Varying modal content based on trigger button
Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](http://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on `relatedTarget`.
-<div class="bs-example" style="padding-bottom: 24px;">
+{% example html %}
+<div class="bs-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button>
-
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
@@ -287,42 +341,7 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff
</div>
</div>
</div>
-
-{% highlight html %}
-<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
-<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
-<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button>
-
-<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">&times;</span>
- <span class="sr-only">Close</span>
- </button>
- <h4 class="modal-title" id="exampleModalLabel">New message</h4>
- </div>
- <div class="modal-body">
- <form>
- <div class="form-group">
- <label for="recipient-name" class="control-label">Recipient:</label>
- <input type="text" class="form-control" id="recipient-name">
- </div>
- <div class="form-group">
- <label for="message-text" class="control-label">Message:</label>
- <textarea class="form-control" id="message-text"></textarea>
- </div>
- </form>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary">Send message</button>
- </div>
- </div>
- </div>
-</div>
-{% endhighlight %}
+{% endexample %}
{% highlight js %}
$('#exampleModal').on('show.bs.modal', function (event) {
@@ -336,6 +355,10 @@ $('#exampleModal').on('show.bs.modal', function (event) {
})
{% endhighlight %}
+## Modals with dynamic heights
+
+If the height of a modal changes while it is open, you should call `$('#myModal').data('bs.modal').handleUpdate()` to readjust the modal's position in case a scrollbar appears.
+
## Usage
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.
@@ -423,7 +446,7 @@ Manually hides a modal. **Returns to the caller before the modal has actually be
### Events
-Bootstrap's modal class exposes a few events for hooking into modal functionality.
+Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`).
<div class="table-responsive">
<table class="table table-bordered table-striped">
diff --git a/docs/javascript/popovers.md b/docs/javascript/popovers.md
index fc5206e8a..e1e2c9664 100644
--- a/docs/javascript/popovers.md
+++ b/docs/javascript/popovers.md
@@ -289,7 +289,8 @@ Toggles an element's popover. **Returns to the caller before the popover has act
#### .popover('destroy')
-Hides and destroys an element's popover.
+Hides and destroys an element's popover. Popvoers that use delegation (which are created using [the `selector` option](#popovers-options)) cannot be individually destroyed on descendant trigger elements.
+
{% highlight js %}$('#element').popover('destroy'){% endhighlight %}
diff --git a/docs/javascript/scrollspy.md b/docs/javascript/scrollspy.md
index 5ae045fd1..892d641da 100644
--- a/docs/javascript/scrollspy.md
+++ b/docs/javascript/scrollspy.md
@@ -74,9 +74,9 @@ body {
{% endhighlight %}
{% highlight html %}
-<body data-spy="scroll" data-target=".navbar-example">
+<body data-spy="scroll" data-target="#navbar-example">
...
- <div class="navbar-example">
+ <div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
@@ -90,7 +90,7 @@ body {
After adding `position: relative;` in your CSS, call the scrollspy via JavaScript:
{% highlight js %}
-$('body').scrollspy({ target: '.navbar-example' })
+$('body').scrollspy({ target: '#navbar-example' })
{% endhighlight %}
<div class="bs-callout bs-callout-danger">
diff --git a/docs/javascript/tooltips.md b/docs/javascript/tooltips.md
index 2e8e11470..aa5d8661f 100644
--- a/docs/javascript/tooltips.md
+++ b/docs/javascript/tooltips.md
@@ -259,7 +259,7 @@ Toggles an element's tooltip. **Returns to the caller before the tooltip has act
#### .tooltip('destroy')
-Hides and destroys an element's tooltip.
+Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using [the `selector` option](#tooltips-options)) cannot be individually destroyed on descendant trigger elements.
{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}