kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Add new extra large size for modal containers

Browse source
This commit is contained in:
Juan Carlos González Cabrero 2016-05-17 15:14:07 +02:00
parent cfb25f6995
commit 95dffb3279
3 changed files with 35 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
docs/components/modal.md
View file

@ -422,14 +422,26 @@ Embedding YouTube videos in modals requires additional JavaScript not in Bootstr
## Optional sizes ## Optional sizes
Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
<div class="bd-example"> <div class="bd-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>
</div> </div>
{% highlight html %} {% highlight html %}
<!-- Extra large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
...
</div>
</div>
</div>
<!-- Large modal --> <!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> <button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
@ -453,6 +465,23 @@ Modals have two optional sizes, available via modifier classes to be placed on a
</div> </div>
{% endhighlight %} {% endhighlight %}
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myExtraLargeModalLabel">Extra large modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg"> <div class="modal-dialog modal-lg">
<div class="modal-content"> <div class="modal-content">

4
scss/_modal.scss
View file

@ -140,3 +140,7 @@
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
.modal-lg { max-width: $modal-lg; } .modal-lg { max-width: $modal-lg; }
} }
@include media-breakpoint-up(xl) {
.modal-xl { max-width: $modal-xl; }
}

1
scss/_variables.scss
View file

@ -791,6 +791,7 @@ $modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-border-width !default; $modal-footer-border-width: $modal-header-border-width !default;
$modal-header-padding: 15px !default; $modal-header-padding: 15px !default;
$modal-xl: 1200px !default;
$modal-lg: 800px !default; $modal-lg: 800px !default;
$modal-md: 500px !default; $modal-md: 500px !default;
$modal-sm: 300px !default; $modal-sm: 300px !default;