mirror of
https://github.com/jgthms/bulma
synced 2026-03-16 10:34:29 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
23
docs/_includes/docs/examples/navbar-basic.html
Normal file
23
docs/_includes/docs/examples/navbar-basic.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div id="navMenu" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item">
|
||||
Home
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<a class="button is-dark">Github</a>
|
||||
<a class="button is-link">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
62
docs/_includes/docs/examples/navbar-bottom.html
Normal file
62
docs/_includes/docs/examples/navbar-bottom.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<nav id="navbarBottom" class="navbar is-fixed-bottom has-shadow is-hidden">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
{% include svg/bulma-logo.html %}
|
||||
</a>
|
||||
<div class="navbar-burger" data-target="navbarExample{{ include.id }}">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navbarExample{{ include.id }}" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="{{ site.url }}/"> Home </a>
|
||||
<div class="navbar-item has-dropdown has-dropdown-up is-hoverable">
|
||||
<a class="navbar-link" href="{{ site.url }}/documentation/overview/start/"> Docs </a>
|
||||
<div class="navbar-dropdown">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/start/"> Overview </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/"> Modifiers </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/"> Columns </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/layout/container/"> Layout </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/"> Form </a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/"> Elements </a>
|
||||
<a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/"> Components </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a
|
||||
class="bd-tw-button button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="https://bulma.io"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=https://bulma.io&via=jgthms"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
<span> Tweet </span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="{{ site.data.meta.download }}">
|
||||
<span class="icon">
|
||||
<i class="fas fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
62
docs/_includes/docs/examples/navbar-color.html
Normal file
62
docs/_includes/docs/examples/navbar-color.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<nav class="navbar is-{{ include.color }}">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
{% include svg/bulma-current.svg %}
|
||||
</a>
|
||||
<div class="navbar-burger js-burger" data-target="navMenuColor{{ include.color }}-example">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuColor{{ include.color }}-example" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="{{ site.url }}/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-active">
|
||||
<a class="navbar-link" href="{{ site.url }}/documentation/overview/start/"> Docs </a>
|
||||
<div class="navbar-dropdown">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/start/"> Overview </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/"> Modifiers </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/"> Columns </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/layout/container/"> Layout </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/"> Form </a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/"> Elements </a>
|
||||
<a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/"> Components </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a
|
||||
class="bd-tw-button button is-{{ include.color }} is-soft"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="https://bulma.io"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=https://bulma.io&via=jgthms"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
<span> Tweet </span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-{{ include.color }} is-light" href="{{ site.data.meta.download }}">
|
||||
<span class="icon">
|
||||
<i class="fas fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
62
docs/_includes/docs/examples/navbar.html
Normal file
62
docs/_includes/docs/examples/navbar.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<nav class="navbar{% if include.transparent %} is-transparent{% endif %}">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
{% include svg/bulma-logo.html %}
|
||||
</a>
|
||||
<div class="navbar-burger js-burger" data-target="navbarExample{{ include.id }}">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navbarExample{{ include.id }}" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="{{ site.url }}/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-active">
|
||||
<a class="navbar-link" href="{{ site.url }}/documentation/overview/start/"> Docs </a>
|
||||
<div class="navbar-dropdown{% if include.boxed %} is-boxed{% endif %}">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/start/"> Overview </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/"> Modifiers </a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/"> Columns </a>
|
||||
<a class="navbar-item is-selected" href="{{ site.url }}/documentation/layout/container/"> Layout </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/"> Form </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/"> Elements </a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/components/breadcrumb/"> Components </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a
|
||||
class="bd-tw-button button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="https://bulma.io"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=https://bulma.io&via=jgthms"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
<span> Tweet </span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="{{ site.data.meta.download }}">
|
||||
<span class="icon">
|
||||
<i class="fas fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
Reference in New Issue
Block a user