Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-17 10:54:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add highlight

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-02 17:34:44 +01:00
parent 270d37d2d4
commit d5372f08af
8 changed files with 86 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
docs/documentation/components/navbar.html
View File

@@ -7,7 +7,31 @@ doc-subtab: navbar
{% include subnav-components.html %}
{% capture navbar_example %}
{% include navbar.html %}
{% include navbar.html id="Example" %}
{% endcapture %}
{% capture navbar_brand_example %}
<nav class="navbar">
<div class="navbar-brand">
<!-- nav items, nav burger ... -->
</div>
</nav>
{% endcapture %}
{% capture navbar_brand_items_example %}
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
</a>
<div class="navbar-burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
{% endcapture %}
<section class="section">
@@ -35,7 +59,7 @@ doc-subtab: navbar
<code>.navbar</code> the <strong>main</strong> container
<ul>
<li>
<code>.navbar-brand</code> the <strong>left side</strong>, which usually contains the <strong>logo</strong> and optionally some links or icons
<code>.navbar-brand</code> the <strong>left side</strong>, <strong class="has-text-success">always visible</strong>, which usually contains the <strong>logo</strong> and optionally some links or icons
<ul>
<li>
<code>.navbar-burger</code> the <strong>hamburger</strong> icon, which toggles the navbar menu on touch devices
@@ -82,5 +106,37 @@ doc-subtab: navbar
{% highlight html %}{{navbar_example}}{% endhighlight %}
<hr>
<h3 class="title">Navbar brand</h3>
<div class="content">
<p>
The <code>.navbar-brand</code> is the left side of the navbar. It can contain:
</p>
<ul>
<li>
a number of <code>.navbar-item</code>
</li>
<li>
the <code>.navbar-burger</code> as last child
</li>
</ul>
</div>
{% highlight html %}{{navbar_brand_example}}{% endhighlight %}
<div class="content">
<p>
The navbar brand is <strong>always visible</strong>: on both touch devices (< 1000px) and desktop (1000px +). As a result, it is recommended to only use a few navbar items to avoid <strong>overflowing</strong> horizontally on small devices.
</p>
</div>
<div class="example is-paddingless">
{{navbar_brand_items_example}}
</div>
{% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}
</div>
</section>