mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add basic navbar example
This commit is contained in:
Jeremy Thomas
parent
9a5c7efe6c
commit
39bdeacf46
@ -14,6 +14,69 @@ meta:
|
|||||||
variables: true
|
variables: true
|
||||||
---
|
---
|
||||||
|
|
||||||
|
{% capture navbar_basic_example %}
|
||||||
|
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||||
|
<div class="navbar-brand">
|
||||||
|
<a class="navbar-item" href="{{ site.url }}">
|
||||||
|
<img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
<span aria-hidden="true"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="navbarBasicExample" class="navbar-menu">
|
||||||
|
<div class="navbar-start">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="navbar-item">
|
||||||
|
Documentation
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-item has-dropdown is-hoverable">
|
||||||
|
<a class="navbar-link">
|
||||||
|
More
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-dropdown">
|
||||||
|
<a class="navbar-item">
|
||||||
|
About
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Jobs
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Contact
|
||||||
|
</a>
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Report an issue
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-end">
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="buttons">
|
||||||
|
<a class="button is-primary">
|
||||||
|
<strong>Sign up</strong>
|
||||||
|
</a>
|
||||||
|
<a class="button is-light">
|
||||||
|
Log in
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
{% capture navbar_example %}
|
{% capture navbar_example %}
|
||||||
{% include examples/navbar.html id="Default" %}
|
{% include examples/navbar.html id="Default" %}
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
@ -594,6 +657,20 @@ $(document).ready(function() {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{% include elements/anchor.html name="Basic Navbar" %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
To <strong>get started quickly</strong>, here is what a complete basic navbar looks like:
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bd-example is-paddingless">
|
||||||
|
{{ navbar_basic_example }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{ navbar_basic_example }}{% endhighlight %}
|
||||||
|
|
||||||
{% include elements/anchor.html name="Navbar brand" %}
|
{% include elements/anchor.html name="Navbar brand" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
|||||||
@ -1,41 +0,0 @@
|
|||||||
---
|
|
||||||
---
|
|
||||||
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<title>Bulma test page</title>
|
|
||||||
<link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
|
|
||||||
<script defer src="{{ site.data.icons.fontawesome5 }}"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- <object type="application/x-shockwave-flash" data="https://htmlreference.io/assets/golf.swf">
|
|
||||||
<param name="movie" value="https://htmlreference.io/assets/golf.swf">
|
|
||||||
<param name="wmode" value="transparent">
|
|
||||||
<p>You need to enable Flash to view this content.</p>
|
|
||||||
</object> -->
|
|
||||||
<!-- <embed src="https://www.youtube.com/embed/kmk43_2dtn0" width="640" height="480"> -->
|
|
||||||
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/hK8ONv4wcbA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
|
|
||||||
<!-- <iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> -->
|
|
||||||
{% include global/navbar.html %}
|
|
||||||
{% include index/focus.html %}
|
|
||||||
<!-- {% include test/from-to.html %} -->
|
|
||||||
<!-- {% include test/features.html %} -->
|
|
||||||
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
|
||||||
<script async defer type="text/javascript">(function(d, s, id) {
|
|
||||||
var js, fjs = d.getElementsByTagName(s)[0];
|
|
||||||
if (d.getElementById(id)) return;
|
|
||||||
js = d.createElement(s); js.id = id;
|
|
||||||
js.async = true;
|
|
||||||
js.defer = true;
|
|
||||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
|
|
||||||
fjs.parentNode.insertBefore(js, fjs);
|
|
||||||
}(document, 'script', 'facebook-jssdk'));</script>
|
|
||||||
<script src="{{ site.url }}/vendor/clipboard-1.7.1.min.js"></script>
|
|
||||||
<script src="{{ site.url }}/vendor/js.cookie-2.1.4.min.js"></script>
|
|
||||||
<script src="{{ site.url }}/lib/main.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue
Block a user