107 lines
3.3 KiB
Plaintext
107 lines
3.3 KiB
Plaintext
# Navbars
|
|
# Navbar - Bootstrap 4
|
|
snippet nvb
|
|
<nav class="navbar navbar-light bg-faded">
|
|
<a class="navbar-brand" href="${3:#}">{4:Navbar}</a>
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="${1:#}">${2:Home} <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="${1:#}">${2:Features}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="${1:#}">${2:Pricing}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="${1:#}">${2:About}</a>
|
|
</li>
|
|
</ul>
|
|
<form class="form-inline navbar-form pull-right">
|
|
<input class="form-control" type="text" placeholder="Search">
|
|
<button class="btn btn-success-outline" type="submit">Search</button>
|
|
</form>
|
|
</nav>
|
|
endsnippet
|
|
|
|
# Navbar color - Bootstrap 4
|
|
snippet nvbc
|
|
<nav class="navbar navbar-${1:dark|light} bg-${2:inverse|primary} ${3:style="background-color: #e3f2fd;"}">
|
|
${4:<!-- Navbar content -->}
|
|
</nav>
|
|
endsnippet
|
|
|
|
# Navbar container out - Bootstrap 4
|
|
snippet nvbconout
|
|
<div class="container">
|
|
<nav class="navbar navbar-light bg-faded">
|
|
<a class="navbar-brand" href="${1:#}">${2:Navbar}</a>
|
|
</nav>
|
|
</div>
|
|
endsnippet
|
|
|
|
# Navbar container in - Bootstrap 4
|
|
snippet nvbconin
|
|
<nav class="navbar navbar-light bg-faded">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="${1:#}">${2:Navbar}</a>
|
|
</div>
|
|
</nav>
|
|
endsnippet
|
|
|
|
# Navbar fixed top - Bootstrap 4
|
|
snippet nvbft
|
|
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
|
|
<a class="navbar-brand" href="${1:#}">${2:Fixed top}</a>
|
|
</nav>
|
|
endsnippet
|
|
|
|
# Navbar fixed bottom - Bootstrap 4
|
|
snippet nvbfb
|
|
<nav class="navbar navbar-fixed-bottom navbar-light bg-faded">
|
|
<a class="navbar-brand" href="${1:#}">${2:Fixed bottom}</a>
|
|
</nav>
|
|
endsnippet
|
|
|
|
# Navbar collapse - Bootstrap 4
|
|
snippet nvbclp
|
|
<div class="collapse" id="${1:exCollapsingNavbar}">
|
|
<div class="bg-inverse p-a">
|
|
<h4>${2:Collapsed content}</h4>
|
|
<span class="text-muted">${3:Toggleable via the navbar brand.}</span>
|
|
</div>
|
|
</div>
|
|
<nav class="navbar navbar-light bg-faded">
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#${1:exCollapsingNavbar}">
|
|
☰
|
|
</button>
|
|
</nav>
|
|
endsnippet
|
|
|
|
# Navbar toggler - Bootstrap 4
|
|
snippet nvbtg
|
|
<nav class="navbar navbar-light bg-faded">
|
|
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#${1:exCollapsingNavbar2}">
|
|
☰
|
|
</button>
|
|
<div class="collapse navbar-toggleable-xs" id="${1:exCollapsingNavbar2}">
|
|
<a class="navbar-brand" href="#">Responsive navbar</a>
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-item active">
|
|
<a class="nav-link" href="${2:#}">${3:Home} <span class="sr-only">(current)</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="${2:#}">${3:Features}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="${2:#}">${3:Pricing}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="${2:#}">${3:About}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
endsnippet
|
|
|