E032 - alex1221/bootlint-customization GitHub Wiki
Bootstrap模态所需的DOM结构非常具体。.modal, .modal-dialog, .modal-content, .modal-body 这些结构是为了能够在所有支持的浏览器上正常运行, 但是其他部分是可选的，如果需要，则必须符合特定的结构.
正确的的模态示例，其中包含所有可选部件：
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body</p>
</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>.modal-dialog 必须是 .modal 紧邻的子级。
错误的:
<div class="modal fade">
<div class="my-awesome-wrapper">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>One fine body</p>
</div>
</div>
</div>
</div>
</div>正确的:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>One fine body</p>
</div>
</div>
</div>
</div>.modal-content 必须是 .modal-dialog 紧邻的子级。
错误的:
<div class="modal fade">
<div class="modal-content">
<div class="modal-body">
<p>One fine body</p>
</div>
</div>
</div>正确的:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>One fine body</p>
</div>
</div>
</div>
</div>.modal-header 是可选的,但是如果需要, 必须是 .modal-content 紧邻的子级。
错误的:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
Modal title
</div>
<div class="modal-content">
<div class="modal-body">
<p>One fine body</p>
</div>
</div>
</div>
</div>正确的:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
Modal title
</div>
<div class="modal-body">
<p>One fine body</p>
</div>
</div>
</div>
</div>.modal-body 必须是 .modal-content 紧邻的子级。
错误的:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-body">
<p>One fine body</p>
</div>
</div>
</div>正确的:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>One fine body</p>
</div>
</div>
</div>
</div>.modal-footer 是可选的,但是如果需要, 必须是.modal-content 紧邻的子级。
错误的:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>One fine body</p>
</div>
</div>
<div class="modal-footer">
One pretty footer
</div>
</div>
</div>正确的:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>One fine body</p>
</div>
<div class="modal-footer">
One pretty footer
</div>
</div>
</div>
</div>.modal-title 是可选的,但是如果需要, 必须是 .modal-header 紧邻的子级。
错误的:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<h4 class="modal-title">Modal title</h4>
<div class="modal-body">
<p>One fine body</p>
</div>
</div>
</div>
</div>正确的:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body</p>
</div>
</div>
</div>
</div>