diff options
Update Navbar Docs
1 files changed, 26 insertions, 8 deletions
| -rw-r--r-- | docs/layout.html | 34 |
diff --git a/docs/layout.html b/docs/layout.html index 4709f81..c05fc1f 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -393,6 +393,23 @@ <section class="notes"> <p>The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the <code>navbar-section</code> class will be evenly distributed in the container.</p> </section> + +<!-- navbar example --> +<pre class="code" data-lang="HTML"><code><<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">"navbar"</span>> + <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-section"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"navbar-brand mr-10"</span>>Spectre.css<<span class="tag">/a</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>Docs<<span class="tag">/a</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"https://github.com/picturepan2/spectre"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>GitHub<<span class="tag">/a</span>> + <<span class="tag">/section</span>> + <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-section"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group input-inline"</span>> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span> /> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary input-group-btn"</span>>Search<<span class="tag">/button</span>> + <<span class="tag">/div</span>> + <<span class="tag">/section</span>> +<<span class="tag">/header</span>> +</code></pre> + <div class="columns"> <div class="column col-12"> <section class="navbar"> @@ -410,21 +427,22 @@ </section> </div> </div> + <section class="notes"> + <p>You can use <code>navbar-center</code> class to have a centered section.</p> + </section> <!-- navbar example --> <pre class="code" data-lang="HTML"><code><<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">"navbar"</span>> - <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-primary"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"navbar-brand mr-10"</span>>Spectre.css<<span class="tag">/a</span>> - <<span class="tag">/section</span>> <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-section"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>Docs<<span class="tag">/a</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"https://github.com/picturepan2/spectre"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>GitHub<<span class="tag">/a</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>Examples<<span class="tag">/a</span>> + <<span class="tag">/section</span>> + <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-center"</span>> + <span class="com"><!-- centered logo or brand --></span> <<span class="tag">/section</span>> <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-section"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group input-inline"</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span> /> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary input-group-btn"</span>>Search<<span class="tag">/button</span>> - <<span class="tag">/div</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>Twitter<<span class="tag">/a</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>GitHub<<span class="tag">/a</span>> <<span class="tag">/section</span>> <<span class="tag">/header</span>> </code></pre> |