dotvim/vim/UltiSnips/html_bootstrap4_components-lists.snippets

88 lines
3 KiB
Plaintext

# Lists
# List - Bootstrap 4
snippet lis
<ul class="list-group">
<li class="list-group-item">${1:Cras justo odio}</li>
<li class="list-group-item">${1:Dapibus ac facilisis in}</li>
<li class="list-group-item">${1:Morbi leo risus}</li>
</ul>
endsnippet
# List label - Bootstrap 4
snippet lisla
<ul class="list-group">
<li class="list-group-item">
<span class="label label-default label-pill pull-right">${1:14}</span>
${2:Cras justo odio}
</li>
<li class="list-group-item">
<span class="label label-default label-pill pull-right">${1:2}</span>
${2:Dapibus ac facilisis in}
</li>
<li class="list-group-item">
<span class="label label-default label-pill pull-right">${1:1}</span>
${2:Morbi leo risus}
</li>
</ul>
endsnippet
# List linked - Bootstrap 4
snippet lisli
<div class="list-group">
<a href="#" class="list-group-item active">${1:Cras justo odio}</a>
<a href="#" class="list-group-item">${1:Dapibus ac facilisis in}</a>
<a href="#" class="list-group-item">${1:Morbi leo risus}</a>
</div>
endsnippet
# List button - Bootstrap 4
snippet lisbtn
<div class="list-group">
<button type="button" class="list-group-item">${1:Cras justo odio}</button>
<button type="button" class="list-group-item">${1:Dapibus ac facilisis in}</button>
<button type="button" class="list-group-item">${1:Morbi leo risus}</button>
</div>
endsnippet
# List disabled items - Bootstrap 4
snippet lisdis
<div class="list-group">
<a href="#" class="list-group-item disabled">${1:Cras justo odio}</a>
<a href="#" class="list-group-item">${1:Dapibus ac facilisis in}</a>
<a href="#" class="list-group-item">${1:Morbi leo risus}</a>
</div>
endsnippet
# List context - Bootstrap 4
snippet lisco
<ul class="list-group">
<li class="list-group-item list-group-item-${1:success|info|warning|danger}">${2:Dapibus ac facilisis in}</li>
</ul>
endsnippet
# List context (div -> a href...) - Bootstrap 4
snippet liscoa
<div class="list-group">
<a href="#" class="list-group-item list-group-item-${1:success|info|warning|danger}">${2:Dapibus ac facilisis in}</a>
</div>
endsnippet
# List custom content - Bootstrap 4
snippet liscc
<div class="list-group">
<a href="${3:#}" class="list-group-item active">
<h4 class="list-group-item-heading">${1:List group item heading}</h4>
<p class="list-group-item-text">${2:Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.}</p>
</a>
<a href="${3:#}" class="list-group-item">
<h4 class="list-group-item-heading">${1:List group item heading}</h4>
<p class="list-group-item-text">${2:Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.}</p>
</a>
<a href="${3:#}" class="list-group-item">
<h4 class="list-group-item-heading">${1:List group item heading}</h4>
<p class="list-group-item-text">${2:Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.}</p>
</a>
</div>
endsnippet