mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-29 23:09:05 +02:00
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
This commit is contained in:
Mark Otto
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user