mirror of
https://github.com/jgthms/bulma
synced 2026-03-20 12:24:28 -07:00
Add docs folder
This commit is contained in:
Jeremy Thomas
70
docs/documentation/layout/container.html
Normal file
70
docs/documentation/layout/container.html
Normal file
@@ -0,0 +1,70 @@
|
||||
---
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
doc-subtab: container
|
||||
---
|
||||
|
||||
{% include subnav-layout.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Container</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple <strong>container</strong> to center your content horizontally
|
||||
</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>.container</code> class can be used in any context, but mostly as a <strong>direct child</strong> of either:</p>
|
||||
<ul>
|
||||
<li><code>.header</code></li>
|
||||
<li><code>.hero</code></li>
|
||||
<li><code>.section</code></li>
|
||||
<li><code>.footer</code></li>
|
||||
</ul>
|
||||
<p>On <strong>mobile</strong> and <strong>tablet</strong>, the container will have a margin of <strong>20px</strong> on both the left and right sides.</p>
|
||||
<p>On <strong>desktop</strong> (> 980px), the container will have a maximum width of <strong>960px</strong> and will be <strong>horizontally centered</strong>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<div class="container">
|
||||
<div class="notification">
|
||||
This container is <strong>centered</strong> on desktop.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="container">
|
||||
<div class="notification">
|
||||
This container is <strong>centered</strong> on desktop.
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="container">
|
||||
<hr>
|
||||
<h3 class="title">Fluid container</h3>
|
||||
<div class="content">
|
||||
<p>If you don't want to have a maximum width but want to keep the 20px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example is-fullwidth">
|
||||
<div class="container is-fluid">
|
||||
<div class="notification">
|
||||
This container is <strong>fluid</strong>: it will have a 20px gap on either side.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="container is-fluid">
|
||||
<div class="notification">
|
||||
This container is <strong>fluid</strong>: it will have a 20px gap on either side, on any viewport size.
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
</section>
|
||||
54
docs/documentation/layout/footer.html
Normal file
54
docs/documentation/layout/footer.html
Normal file
@@ -0,0 +1,54 @@
|
||||
---
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
doc-subtab: footer
|
||||
---
|
||||
|
||||
{% include subnav-layout.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Footer</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons...
|
||||
</h2>
|
||||
|
||||
<div class="example">
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>. The source code is licensed
|
||||
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
|
||||
is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC ANS 4.0</a>.
|
||||
</p>
|
||||
<p>
|
||||
<a class="icon" href="https://github.com/jgthms/bulma">
|
||||
<i class="fa fa-github"></i>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>. The source code is licensed
|
||||
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
|
||||
is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC ANS 4.0</a>.
|
||||
</p>
|
||||
<p>
|
||||
<a class="icon" href="https://github.com/jgthms/bulma">
|
||||
<i class="fa fa-github"></i>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</section>
|
||||
870
docs/documentation/layout/hero.html
Normal file
870
docs/documentation/layout/hero.html
Normal file
@@ -0,0 +1,870 @@
|
||||
---
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
doc-subtab: hero
|
||||
---
|
||||
|
||||
{% include subnav-layout.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Hero</h1>
|
||||
<h2 class="subtitle">
|
||||
An imposing <strong>hero banner</strong> to showcase something
|
||||
</h2>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="example">
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Hero title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Hero subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Hero title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Hero subtitle
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h3 class="title">Colors</h3>
|
||||
<h4 class="subtitle">
|
||||
As with buttons, you can choose one of the <strong>7 different colors</strong>
|
||||
</h4>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="example">
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Primary title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Primary subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Primary title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Primary subtitle
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<section class="hero is-info">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Info title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Info subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<section class="hero is-success">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Success title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Success subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<section class="hero is-warning">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Warning title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Warning subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<section class="hero is-danger">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Danger title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Danger subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<section class="hero is-light">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Light title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Light subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<section class="hero is-dark">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Dark title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Dark subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h3 class="title">
|
||||
Gradients
|
||||
<span class="tag is-warning">Experimental</span>
|
||||
</h3>
|
||||
<h4 class="subtitle">
|
||||
By adding the <code>is-bold</code> modifier, you can generate a subtle <strong>gradient</strong>
|
||||
</h4>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="example">
|
||||
<section class="hero is-medium is-primary is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Primary bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Primary bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<section class="hero is-medium is-primary is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Primary bold title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Primary bold subtitle
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
<div class="example">
|
||||
<section class="hero is-medium is-info is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Info bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Info bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="example">
|
||||
<section class="hero is-medium is-success is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Success bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Success bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="example">
|
||||
<section class="hero is-medium is-warning is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Warning bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Warning bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="example">
|
||||
<section class="hero is-medium is-danger is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Danger bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Danger bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="example">
|
||||
<section class="hero is-medium is-light is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Light bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Light bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="example">
|
||||
<section class="hero is-medium is-dark is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Dark bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Dark bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h3 class="title">Sizes</h3>
|
||||
<h4 class="subtitle">
|
||||
You can have even more imposing banners by using one of <strong>3 different sizes</strong>
|
||||
</h4>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="example">
|
||||
<section class="hero is-primary is-medium">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Medium title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Medium subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero is-primary is-medium">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Medium title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Medium subtitle
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<section class="hero is-info is-large">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Large title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Large subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero is-info is-large">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Large title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Large subtitle
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="example is-fullwidth">
|
||||
<section class="hero is-success is-fullheight">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Full Height title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Full Height subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero is-success is-fullheight">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Full Height title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Full Height subtitle
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h3 class="title">Full height hero</h3>
|
||||
<h4 class="subtitle">And vertically centered</h4>
|
||||
<div class="content">
|
||||
<p>You can split the hero in <strong>3 vertical parts</strong>:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>hero</code>
|
||||
<ul>
|
||||
<li><code>hero-head</code> (always at the top)</li>
|
||||
<li><code>hero-body</code> (always vertically centered)</li>
|
||||
<li><code>hero-foot</code> (always at the bottom)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="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.baseurl }}/images/bulma-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 %}
|
||||
<section class="hero is-primary is-medium">
|
||||
<!-- 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-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>
|
||||
|
||||
<!-- 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">
|
||||
<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 %}
|
||||
|
||||
<div class="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.baseurl }}/images/bulma-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>
|
||||
</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-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>
|
||||
|
||||
<!-- 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 %}
|
||||
|
||||
<div class="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.baseurl }}/images/bulma-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-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>
|
||||
42
docs/documentation/layout/section.html
Normal file
42
docs/documentation/layout/section.html
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
doc-subtab: section
|
||||
---
|
||||
|
||||
{% include subnav-layout.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
|
||||
</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>Use sections as <strong>direct</strong> children of <code>body</code>.</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<body>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="heading">
|
||||
<h1 class="title">Section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user