diff options
| author | Kevin Kirsche <[email protected]> | 2015-02-02 10:35:21 -0500 |
|---|---|---|
| committer | Chris Rebert <[email protected]> | 2015-02-19 16:14:06 -0800 |
| commit | 504435e0b07e6c638df995959bb1f0a4a182ceca (patch) | |
| tree | 21c6cf27e3054fef24ab49621aa951cd35dc3495 /docs | |
| parent | e9afc74b016d638356b4174d261f7e88face09c2 (diff) | |
| download | bootstrap-504435e0b07e6c638df995959bb1f0a4a182ceca.tar.xz bootstrap-504435e0b07e6c638df995959bb1f0a4a182ceca.zip | |
Fix #15712: Add example of how to use grid system within a modal
Closes #15725 by merging a tweaked version of it.
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/_includes/js/modal.html | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html index d84579599..1b653d17c 100644 --- a/docs/_includes/js/modal.html +++ b/docs/_includes/js/modal.html @@ -218,6 +218,102 @@ $('#myModal').on('shown.bs.modal', function () { </div> {% endhighlight %} + <h2 id="modals-grid-system">Using the grid system</h2> + <p>To take advantage of the Bootstrap grid system within a modal, just nest <code>.container-fluid</code> within the <code>.modal-body</code> and then use the normal grid system classes within this container.</p> +<!-- sample modal content --> + <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><!-- /.modal-content --> + </div><!-- /.modal-dialog --> + </div><!-- /.modal --> +<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><!-- /example --> +{% highlight html %} +<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" 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="gridSystemModalLabel">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><!-- /.modal-content --> + </div><!-- /.modal-dialog --> + </div><!-- /.modal --> + +{% endhighlight %} + <h2 id="modals-related-target">Varying modal content based on trigger button</h2> <p>Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use <code>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML <code>data-*</code> attributes</a> (possibly <a href="http://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on <code>relatedTarget</code>,</p> <div class="bs-example"> |