131 lines
5.8 KiB
Plaintext
131 lines
5.8 KiB
Plaintext
# TODO: Add Usage form http://v4-alpha.getbootstrap.com/components/modal/#usage
|
|
|
|
# Modals
|
|
# Modal - Bootstrap 4
|
|
snippet mod
|
|
<div class="modal fade" id="${3:modal-1}">
|
|
<div class="modal-dialog" role="document">
|
|
<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">${1:Modal title}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>${2:One fine body…}</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
endsnippet
|
|
|
|
# Modal sizes- Bootstrap 4
|
|
snippet modsz
|
|
<div class="modal fade" id="${3:bd-example-modal}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-${1:lg|sm}">
|
|
<div class="modal-content">
|
|
${2:...}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
endsnippet
|
|
|
|
# Modal grid- Bootstrap 4
|
|
snippet modgr
|
|
<div id="${4:gridSystemModal}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<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">${1:Modal title}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-4">${2:.col-md-4}</div>
|
|
<div class="col-md-4 col-md-offset-4">${2:.col-md-4 .col-md-offset-4}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3 col-md-offset-3">${2:.col-md-3 .col-md-offset-3}</div>
|
|
<div class="col-md-2 col-md-offset-4">${2:.col-md-2 .col-md-offset-4}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 col-md-offset-3">${2:.col-md-6 .col-md-offset-3}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-9">
|
|
${2:Level 1: .col-sm-9}
|
|
<div class="row">
|
|
<div class="col-xs-8 col-sm-6">
|
|
${3:Level 2: .col-xs-8 .col-sm-6}
|
|
</div>
|
|
<div class="col-xs-4 col-sm-6">
|
|
${3:Level 2: .col-xs-4 .col-sm-6}
|
|
</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="bd-example bd-example-padded-bottom">
|
|
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#${4:gridSystemModal}">
|
|
${5:Launch demo modal}
|
|
</button>
|
|
</div>
|
|
endsnippet
|
|
|
|
# Modal content based- Bootstrap 4
|
|
snippet modcb
|
|
<div class="bd-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="@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" role="document">
|
|
<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">${1: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>
|
|
</div>
|
|
endsnippet
|
|
|
|
# Modal content based- Bootstrap 4
|
|
snippet modbtn
|
|
<button class="btn btn-primary" data-toggle="modal" data-target="#${1:bd-example-modal}">${2:Large modal}</button>
|
|
endsnippet
|
|
|