rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

flex the modal header so we can remove custom styles

Browse Source 
updates the dom order in our docs to match (floated content comes first, but no need for that in flexbox)
This commit is contained in:
Mark Otto 2016-12-24 17:26:19 -08:00 committed by Mark Otto
parent e7f8ca08b0
commit 33746dc63e
2 changed files with 14 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/components/modal.md
View File

@ -45,10 +45,10 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<h5 class="modal-title">Modal title</h5>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Modal body text goes here.</p> <p>Modal body text goes here.</p>
@ -67,10 +67,10 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<h5 class="modal-title">Modal title</h5>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Modal body text goes here.</p> <p>Modal body text goes here.</p>
@ -92,10 +92,10 @@ Toggle a working modal demo by clicking the button below. It will slide down and
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Woohoo, you're reading this text in a modal!</p> <p>Woohoo, you're reading this text in a modal!</p>
@ -125,10 +125,10 @@ Toggle a working modal demo by clicking the button below. It will slide down and
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<h4 class="modal-title" id="exampleModalLabel">Modal title</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
... ...
@ -150,10 +150,10 @@ When modals become too long for the user's viewport or device, they scroll indep
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
@ -200,10 +200,10 @@ When modals become too long for the user's viewport or device, they scroll indep
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
</div> </div>
<div class="modal-body"> <div class="modal-body">
... ...
@ -225,10 +225,10 @@ When modals become too long for the user's viewport or device, they scroll indep
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<h5>Popover in a modal</h5> <h5>Popover in a modal</h5>
@ -269,8 +269,8 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h5 class="modal-title" id="gridModalLabel">Grids in modals</h5> <h5 class="modal-title" id="gridModalLabel">Grids in modals</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="container-fluid bd-example-row"> <div class="container-fluid bd-example-row">
@ -360,10 +360,10 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form> <form>
@ -458,10 +458,10 @@ Modals have two optional sizes, available via modifier classes to be placed on a
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
... ...
@ -473,12 +473,11 @@ Modals have two optional sizes, available via modifier classes to be placed on a
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm"> <div class="modal-dialog modal-sm">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
... ...

8
scss/_modal.scss
View File

@ -77,13 +77,11 @@
// Modal header // Modal header
// Top section of the modal w/ title and dismiss // Top section of the modal w/ title and dismiss
.modal-header { .modal-header {
display: flex;
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
align-items: center; // vertically center it
padding: $modal-header-padding; padding: $modal-header-padding;
border-bottom: $modal-header-border-width solid $modal-header-border-color; border-bottom: $modal-header-border-width solid $modal-header-border-color;
@include clearfix;
}
// Close icon
.modal-header .close {
margin-top: -2px;
} }
// Title text within header // Title text within header