diff options
Diffstat (limited to 'docs/javascript')
| -rw-r--r-- | docs/javascript/carousel.md | 1 | ||||
| -rw-r--r-- | docs/javascript/modal.md | 103 | ||||
| -rw-r--r-- | docs/javascript/popovers.md | 3 | ||||
| -rw-r--r-- | docs/javascript/scrollspy.md | 6 | ||||
| -rw-r--r-- | docs/javascript/tooltips.md | 2 |
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">×</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">×</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 %} |