mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Add show code
This commit is contained in:
Jeremy Thomas
@@ -427,122 +427,45 @@ doc-subtab: hero
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-primary is-medium">
|
||||
<div class="hero-head">
|
||||
<header class="nav">
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item is-active">
|
||||
Home
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Examples
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Documentation
|
||||
</a>
|
||||
<span class="nav-item">
|
||||
<a class="button is-primary is-inverted">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title">
|
||||
Title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<nav class="tabs">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Modifiers</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Grid</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Components</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
{% capture heroNavbarA %}
|
||||
<section class="hero is-primary is-medium">
|
||||
<!-- Hero header: will stick at the top -->
|
||||
<!-- Hero head: will stick at the top -->
|
||||
<div class="hero-head">
|
||||
<header class="nav">
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="images/bulma-type-white.png" alt="Logo">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item">
|
||||
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item is-active">
|
||||
Home
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Examples
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Documentation
|
||||
</a>
|
||||
<span class="nav-item">
|
||||
<a class="button is-primary is-inverted">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
<span class="navbar-burger burger" data-target="navbarMenuHeroA">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navbarMenuHeroA" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-active">
|
||||
Home
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Examples
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Documentation
|
||||
</a>
|
||||
<span class="navbar-item">
|
||||
<a class="button is-primary is-inverted">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Hero content: will be in the middle -->
|
||||
@@ -573,299 +496,181 @@ doc-subtab: hero
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture heroNavbarB %}
|
||||
<section class="hero is-info is-large">
|
||||
<div class="hero-head">
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item">
|
||||
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
<span class="navbar-burger burger" data-target="navbarMenuHeroB">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navbarMenuHeroB" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-active">
|
||||
Home
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Examples
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Documentation
|
||||
</a>
|
||||
<span class="navbar-item">
|
||||
<a class="button is-info is-inverted">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title">
|
||||
Title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<nav class="tabs is-boxed is-fullwidth">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Modifiers</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Grid</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Components</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture heroNavbarC %}
|
||||
<section class="hero is-success is-fullheight">
|
||||
<!-- Hero head: will stick at the top -->
|
||||
<div class="hero-head">
|
||||
<header class="navbar">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item">
|
||||
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
<span class="navbar-burger burger" data-target="navbarMenuHeroC">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navbarMenuHeroC" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-active">
|
||||
Home
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Examples
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Documentation
|
||||
</a>
|
||||
<span class="navbar-item">
|
||||
<a class="button is-success is-inverted">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!-- Hero content: will be in the middle -->
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<h1 class="title">
|
||||
Title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Subtitle
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero footer: will stick at the bottom -->
|
||||
<div class="hero-foot">
|
||||
<nav class="tabs is-boxed is-fullwidth">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li class="is-active"><a>Overview</a></li>
|
||||
<li><a>Modifiers</a></li>
|
||||
<li><a>Grid</a></li>
|
||||
<li><a>Elements</a></li>
|
||||
<li><a>Components</a></li>
|
||||
<li><a>Layout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="bd-example">
|
||||
{{ heroNavbarA }}
|
||||
</div>
|
||||
|
||||
<div class="bd-highlight-clipped">
|
||||
{% highlight html %}{{ heroNavbarA }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<section class="hero is-info is-large">
|
||||
<div class="hero-head">
|
||||
<header class="nav">
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item is-active">
|
||||
Home
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Examples
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Documentation
|
||||
</a>
|
||||
<span class="nav-item">
|
||||
<a class="button is-info is-inverted">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title">
|
||||
Title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<nav class="tabs is-boxed is-fullwidth">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Modifiers</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Grid</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Components</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
{{ heroNavbarB }}
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero is-info is-large">
|
||||
<!-- Hero header: will stick at the top -->
|
||||
<div class="hero-head">
|
||||
<header class="nav">
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item is-active">
|
||||
Home
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Examples
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Documentation
|
||||
</a>
|
||||
<span class="nav-item">
|
||||
<a class="button is-info is-inverted">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="bd-highlight-clipped">
|
||||
{% highlight html %}{{ heroNavbarB }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<!-- Hero content: will be in the middle -->
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<h1 class="title">
|
||||
Title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Subtitle
|
||||
</h2>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ heroNavbarC }}
|
||||
</div>
|
||||
|
||||
<!-- Hero footer: will stick at the bottom -->
|
||||
<div class="hero-foot">
|
||||
<nav class="tabs is-boxed is-fullwidth">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li class="is-active"><a>Overview</a></li>
|
||||
<li><a>Modifiers</a></li>
|
||||
<li><a>Grid</a></li>
|
||||
<li><a>Elements</a></li>
|
||||
<li><a>Components</a></li>
|
||||
<li><a>Layout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="bd-highlight-clipped">
|
||||
{% highlight html %}{{ heroNavbarC }}{% endhighlight %}
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
<section class="hero is-success is-fullheight">
|
||||
<div class="hero-head">
|
||||
<header class="nav">
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item is-active">
|
||||
Home
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Examples
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Documentation
|
||||
</a>
|
||||
<span class="nav-item">
|
||||
<a class="button is-success is-inverted">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title">
|
||||
Title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-foot">
|
||||
<nav class="tabs is-boxed is-fullwidth">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Modifiers</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Grid</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Elements</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Components</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Layout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero is-success is-fullheight">
|
||||
<!-- Hero header: will stick at the top -->
|
||||
<div class="hero-head">
|
||||
<header class="nav">
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="images/bulma-type-white.png" alt="Logo">
|
||||
</a>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item is-active">
|
||||
Home
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Examples
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Documentation
|
||||
</a>
|
||||
<span class="nav-item">
|
||||
<a class="button is-success is-inverted">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<!-- Hero content: will be in the middle -->
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<h1 class="title">
|
||||
Title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Subtitle
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero footer: will stick at the bottom -->
|
||||
<div class="hero-foot">
|
||||
<nav class="tabs is-boxed is-fullwidth">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li class="is-active"><a>Overview</a></li>
|
||||
<li><a>Modifiers</a></li>
|
||||
<li><a>Grid</a></li>
|
||||
<li><a>Elements</a></li>
|
||||
<li><a>Components</a></li>
|
||||
<li><a>Layout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user