136 lines
4.2 KiB
Plaintext
136 lines
4.2 KiB
Plaintext
# TODO: Add Usage form http://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior
|
|
|
|
# Navs
|
|
# Nav - Bootstrap 4
|
|
snippet nav
|
|
<ul class="nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="${1:#}">${2:Link}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="${1:#}">${2:Link}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="${1:#}">${2:Another link}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="${1:#}">${3:Disabled}</a>
|
|
</li>
|
|
</ul>
|
|
endsnippet
|
|
|
|
# Nav inline - Bootstrap 4
|
|
snippet navin
|
|
<nav class="nav">
|
|
<a class="nav-link active" href="${1:#}">${2:Active}</a>
|
|
<a class="nav-link" href="${1:#}">${2:Link}</a>
|
|
<a class="nav-link" href="${1:#}">${2:Another link}</a>
|
|
<a class="nav-link disabled" href="${1:#}">${3:Disabled}</a>
|
|
</nav>
|
|
endsnippet
|
|
|
|
# Nav tabs - Bootstrap 4
|
|
snippet navtb
|
|
<ul class="nav nav-tabs">
|
|
<li class="nav-item">
|
|
<a href="${1:#}" class="nav-link active">${2:Active}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="${1:#}" class="nav-link">${2:Link}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="${1:#}" class="nav-link">${2:Another link}</a>
|
|
</li>
|
|
<li class="nav-item disabled">
|
|
<a href="${1:#}" class="nav-link">${3:Disabled}</a>
|
|
</li>
|
|
</ul>
|
|
endsnippet
|
|
|
|
# Nav pills - Bootstrap 4
|
|
snippet navpl
|
|
<ul class="nav nav-pills">
|
|
<li class="nav-item">
|
|
<a href="${1:#}" class="nav-link active">${2:Active}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="${1:#}" class="nav-link">${2:Link}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="${1:#}" class="nav-link">${2:Another link}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="${1:#}" class="nav-link disabled">${3:Disabled}</a>
|
|
</li>
|
|
</ul>
|
|
endsnippet
|
|
|
|
# Nav pills stacked - Bootstrap 4
|
|
snippet navplsk
|
|
<ul class="nav nav-pills nav-stacked">
|
|
<li class="nav-item">
|
|
<a href="${1:#}" class="nav-link active">${2:Active}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="${1:#}" class="nav-link">${2:Link}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="${1:#}" class="nav-link">${2:Another link}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="${1:#}" class="nav-link disabled">${3:Disabled}</a>
|
|
</li>
|
|
</ul>
|
|
endsnippet
|
|
|
|
# Nav tabs w/ dropdown - Bootstrap 4
|
|
snippet navtbdd
|
|
<ul class="nav nav-tabs">
|
|
<li class="nav-item">
|
|
<a href="${1:#}" class="nav-link active">${2:Active}</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="${3:#}">${4:Action}</a>
|
|
<a class="dropdown-item" href="${3:#}">${4:Another action}</a>
|
|
<a class="dropdown-item" href="${3:#}">${4:Something else here}</a>
|
|
${5:<div class="dropdown-divider"></div>}
|
|
<a class="dropdown-item" href="${3:#}">${4:Separated link}</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="${1:#}" class="nav-link">${2:Another link}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="${1:#}" class="nav-link disabled">${2:Disabled}</a>
|
|
</li>
|
|
</ul>
|
|
endsnippet
|
|
|
|
# Nav pills w/ dropdown - Bootstrap 4
|
|
snippet navpldd
|
|
<ul class="nav nav-pills">
|
|
<li class="nav-item">
|
|
<a href="${1:#}" class="nav-link active">${2:Active}</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="${3:#}" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="${3:#}">${4:Action}</a>
|
|
<a class="dropdown-item" href="${3:#}">${4:Another action}</a>
|
|
<a class="dropdown-item" href="${3:#}">${4:Something else here}</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="${3:#}">${4:Separated link}</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="${1:#}" class="nav-link">${2:Another link}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="${1:#}" class="nav-link disabled">${2:Disabled}</a>
|
|
</li>
|
|
</ul>
|
|
endsnippet
|
|
|