mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Update docs to match current version
This commit is contained in:
yoostk
Jeremy Thomas
parent
26a084c3b7
commit
f894429815
@ -1,749 +0,0 @@
|
||||
---
|
||||
layout: documentation
|
||||
doc-tab: grid
|
||||
---
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Grid</h1>
|
||||
<h2 class="subtitle">A simple way to build columns</h2>
|
||||
<hr>
|
||||
<div class="content">
|
||||
<p>To build a <strong>grid</strong>, just:</p>
|
||||
<ol>
|
||||
<li>Add a <code>columns</code> container</li>
|
||||
<li>Add as many <code>column</code> elements as you want</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p class="notification is-info">First column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success">Second column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning">Third column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-danger">Fourth column</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
First column
|
||||
</div>
|
||||
<div class="column">
|
||||
Second column
|
||||
</div>
|
||||
<div class="column">
|
||||
Third column
|
||||
</div>
|
||||
<div class="column">
|
||||
Fourth column
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Sizes</h3>
|
||||
<div class="content">
|
||||
<p>If you want to change the <strong>size</strong> of a single column, you can use one the following classes:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-three-quarters</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-two-thirds</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-half</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-one-third</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-one-quarter</code>
|
||||
</li>
|
||||
</ul>
|
||||
<p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-three-quarters">
|
||||
<p class="notification is-info">
|
||||
<code class="html">is-three-quarters</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-danger">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-two-thirds">
|
||||
<p class="notification is-info">
|
||||
<code class="html">is-two-thirds</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-danger">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<p class="notification is-info">
|
||||
<code class="html">is-half</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-danger">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<p class="notification is-info">
|
||||
<code class="html">is-one-third</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
<p class="notification is-info">
|
||||
<code class="html">is-one-quarter</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="columns">
|
||||
<div class="column is-three-quarters">
|
||||
<p class="notification is-info">
|
||||
<code class="html">is-three-quarters</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-danger">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-two-thirds">
|
||||
<p class="notification is-info">
|
||||
<code class="html">is-two-thirds</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-danger">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<p class="notification is-info">
|
||||
<code class="html">is-half</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-danger">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<p class="notification is-info">
|
||||
<code class="html">is-one-third</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
<p class="notification is-info">
|
||||
<code class="html">is-one-quarter</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h4 class="title is-4">12 columns</h4>
|
||||
<div class="content">
|
||||
<p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
|
||||
<ul>
|
||||
<li><code>is-2</code></li>
|
||||
<li><code>is-3</code></li>
|
||||
<li><code>is-4</code></li>
|
||||
<li><code>is-5</code></li>
|
||||
<li><code>is-6</code></li>
|
||||
<li><code>is-7</code></li>
|
||||
<li><code>is-8</code></li>
|
||||
<li><code>is-9</code></li>
|
||||
<li><code>is-10</code></li>
|
||||
<li><code>is-11</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="message is-danger">
|
||||
<p class="message-header">Naming</p>
|
||||
<p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-2">
|
||||
<p class="notification is-info"><code>is-2</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<p class="notification is-info"><code>is-3</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<p class="notification is-info"><code>is-4</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-5">
|
||||
<p class="notification is-info"><code>is-5</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<p class="notification is-info"><code>is-6</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-7">
|
||||
<p class="notification is-info"><code>is-7</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-8">
|
||||
<p class="notification is-info"><code>is-8</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-9">
|
||||
<p class="notification is-info"><code>is-9</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-10">
|
||||
<p class="notification is-info"><code>is-10</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-11">
|
||||
<p class="notification is-info"><code>is-11</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Offset</h3>
|
||||
<div class="content">
|
||||
<p>While you can use <em>empty columns</em> (like <code><div class="column"></div></code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-half is-offset-one-quarter">
|
||||
<p class="notification is-info">
|
||||
<code class="html">is-half</code><br>
|
||||
<code class="html">is-offset-one-quarter</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-4 is-offset-8">
|
||||
<p class="notification is-info">
|
||||
<code class="html">is-4</code><br>
|
||||
<code class="html">is-offset-8</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-11 is-offset-1">
|
||||
<p class="notification is-info">
|
||||
<code class="html">is-11</code><br>
|
||||
<code class="html">is-offset-1</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-half is-offset-one-quarter"></div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-4 is-offset-8"></div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-11 is-offset-1"></div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Responsiveness</h3>
|
||||
<div class="content">
|
||||
<p>By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.</p>
|
||||
<p>If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:</p>
|
||||
</div>
|
||||
<div class="columns is-mobile">
|
||||
<div class="column">
|
||||
<p class="notification is-info">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success">2</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning">3</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-danger">4</p>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="columns is-mobile">
|
||||
<div class="column">1</div>
|
||||
<div class="column">2</div>
|
||||
<div class="column">3</div>
|
||||
<div class="column">4</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
<div class="message is-info">
|
||||
<p class="message-header">Resize</p>
|
||||
<p class="message-body">If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>If you <em>only</em> want columns on <strong>desktop</strong>, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:</p>
|
||||
</div>
|
||||
<div class="columns is-desktop">
|
||||
<div class="column">
|
||||
<p class="notification is-info">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success">2</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning">3</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-danger">4</p>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="columns is-desktop">
|
||||
<div class="column">1</div>
|
||||
<div class="column">2</div>
|
||||
<div class="column">3</div>
|
||||
<div class="column">4</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h4 class="title is-4">Different sizes per breakpoint</h4>
|
||||
<div class="content">
|
||||
<p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
|
||||
</div>
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
|
||||
<p class="notification is-info">
|
||||
<code>is-half-mobile</code><br>
|
||||
<code>is-one-third-tablet</code><br>
|
||||
<code>is-one-quarter-desktop</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message is-info">
|
||||
<p class="message-header">Resize</p>
|
||||
<p class="message-body">If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.</p>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
|
||||
<code>is-half-mobile</code><br>
|
||||
<code>is-one-third-tablet</code><br>
|
||||
<code>is-one-quarter-desktop</code>
|
||||
</div>
|
||||
<div class="column">1</div>
|
||||
<div class="column">1</div>
|
||||
<div class="column">1</div>
|
||||
<div class="column">1</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Multiline</h3>
|
||||
<div class="content">
|
||||
<p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
|
||||
</div>
|
||||
<div class="columns is-multiline is-mobile">
|
||||
<div class="column is-one-quarter">
|
||||
<p class="notification is-info"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="notification is-success"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="notification is-warning"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="notification is-danger"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<p class="notification is-info"><code>is-half</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="notification is-success"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="notification is-warning"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="notification is-danger"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-info">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="columns is-multiline is-mobile">
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<code>is-half</code>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column">
|
||||
Auto
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Gapless</h3>
|
||||
<div class="content">
|
||||
<p>If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:</p>
|
||||
</div>
|
||||
<div class="columns is-gapless">
|
||||
<div class="column">
|
||||
<p class="notification is-info">First column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-success">Second column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-warning">Third column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-danger">Fourth column</p>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="columns is-gapless">
|
||||
<div class="column">First column</div>
|
||||
<div class="column">Second column</div>
|
||||
<div class="column">Third column</div>
|
||||
<div class="column">Fourth column</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
<div class="content">
|
||||
<p>You can combine it with the <code>is-multiline</code> modifier:</p>
|
||||
</div>
|
||||
<div class="columns is-multiline is-mobile is-gapless">
|
||||
<div class="column is-one-quarter">
|
||||
<p class="notification is-info"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="notification is-success"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="notification is-warning"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="notification is-danger"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<p class="notification is-info"><code>is-half</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="notification is-success"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="notification is-warning"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<p class="notification is-danger"><code>is-one-quarter</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="notification is-info">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="columns is-gapless is-multiline is-mobile">
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<code>is-half</code>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column">
|
||||
Auto
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
@ -18,7 +18,7 @@ doc-subtab: container
|
||||
<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>.nav</code></li>
|
||||
<li><code>.hero</code></li>
|
||||
<li><code>.section</code></li>
|
||||
<li><code>.footer</code></li>
|
||||
|
||||
@ -1,257 +0,0 @@
|
||||
---
|
||||
layout: documentation
|
||||
doc-tab: navbar
|
||||
---
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Navbar</h1>
|
||||
<h2 class="subtitle">A multi-purpose <strong>horizontal navbar</strong>, which can contain almost any other element</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>The <strong>structure</strong> of a navbar is the following:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>navbar</code>: main container
|
||||
<ul>
|
||||
<li><code>navbar-left</code> for the left side</li>
|
||||
<li>
|
||||
<code>navbar-right</code> for the right side
|
||||
<ul>
|
||||
<li><code>navbar-item</code> for each individual element</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>In a <code>navbar-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>navbar</code>, they will always be <strong>vertically aligned</strong>.</p>
|
||||
</div>
|
||||
|
||||
<div class="structure">
|
||||
<nav class="navbar structure-item is-structure-container" title="navbar">
|
||||
<div class="navbar-left structure-item" title="navbar-left">
|
||||
<div class="navbar-item">
|
||||
<p class="subtitle is-5">
|
||||
<strong>123</strong> posts
|
||||
</p>
|
||||
</div>
|
||||
<div class="navbar-item">
|
||||
<p class="control has-addons">
|
||||
<input class="input" type="text" placeholder="Find a post">
|
||||
<button class="button">
|
||||
Search
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-right structure-item" title="navbar-right">
|
||||
<p class="navbar-item">
|
||||
<strong>All</strong>
|
||||
</p>
|
||||
<p class="navbar-item">
|
||||
<a>Published</a>
|
||||
</p>
|
||||
<p class="navbar-item">
|
||||
<a>Drafts</a>
|
||||
</p>
|
||||
<p class="navbar-item">
|
||||
<a>Deleted</a>
|
||||
</p>
|
||||
<p class="navbar-item">
|
||||
<a class="button is-success">
|
||||
New
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<nav class="navbar">
|
||||
<div class="navbar-left">
|
||||
<div class="navbar-item">
|
||||
<p class="subtitle is-5">
|
||||
<strong>123</strong> posts
|
||||
</p>
|
||||
</div>
|
||||
<div class="navbar-item">
|
||||
<p class="control has-addons">
|
||||
<input class="input" type="text" placeholder="Find a post">
|
||||
<button class="button">
|
||||
Search
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-right">
|
||||
<p class="navbar-item">
|
||||
<strong>All</strong>
|
||||
</p>
|
||||
<p class="navbar-item">
|
||||
<a>Published</a>
|
||||
</p>
|
||||
<p class="navbar-item">
|
||||
<a>Drafts</a>
|
||||
</p>
|
||||
<p class="navbar-item">
|
||||
<a>Deleted</a>
|
||||
</p>
|
||||
<p class="navbar-item">
|
||||
<a class="button is-success">
|
||||
New
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<!-- Main container -->
|
||||
<nav class="navbar">
|
||||
<!-- Left side -->
|
||||
<div class="navbar-left">
|
||||
<div class="navbar-item">
|
||||
<p class="subtitle is-5">
|
||||
<strong>123</strong> posts
|
||||
</p>
|
||||
</div>
|
||||
<div class="navbar-item">
|
||||
<p class="control has-addons">
|
||||
<input class="input" type="text" placeholder="Find a post">
|
||||
<button class="button">
|
||||
Search
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right side -->
|
||||
<div class="navbar-right">
|
||||
<p class="navbar-item"><strong>All</strong></p>
|
||||
<p class="navbar-item"><a>Published</a></p>
|
||||
<p class="navbar-item"><a>Drafts</a></p>
|
||||
<p class="navbar-item"><a>Deleted</a></p>
|
||||
<p class="navbar-item"><a class="button is-success">New</a></p>
|
||||
</div>
|
||||
</nav>
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
<h3 class="title">Centered navbar</h3>
|
||||
|
||||
<div class="content">
|
||||
If you want a <strong>centered navbar</strong>, you can use as many <code>navbar-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>navbar</code> container.
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<nav class="navbar">
|
||||
<div class="navbar-item has-text-centered">
|
||||
<p class="heading">Tweets</p>
|
||||
<p class="title">3,456</p>
|
||||
</div>
|
||||
<div class="navbar-item has-text-centered">
|
||||
<p class="heading">Following</p>
|
||||
<p class="title">123</p>
|
||||
</div>
|
||||
<div class="navbar-item has-text-centered">
|
||||
<p class="heading">Followers</p>
|
||||
<p class="title">456K</p>
|
||||
</div>
|
||||
<div class="navbar-item has-text-centered">
|
||||
<p class="heading">Likes</p>
|
||||
<p class="title">789</p>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<nav class="navbar">
|
||||
<div class="navbar-item has-text-centered">
|
||||
<p class="heading">Tweets</p>
|
||||
<p class="title">3,456</p>
|
||||
</div>
|
||||
<div class="navbar-item has-text-centered">
|
||||
<p class="heading">Following</p>
|
||||
<p class="title">123</p>
|
||||
</div>
|
||||
<div class="navbar-item has-text-centered">
|
||||
<p class="heading">Followers</p>
|
||||
<p class="title">456K</p>
|
||||
</div>
|
||||
<div class="navbar-item has-text-centered">
|
||||
<p class="heading">Likes</p>
|
||||
<p class="title">789</p>
|
||||
</div>
|
||||
</nav>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="example">
|
||||
<nav class="navbar">
|
||||
<p class="navbar-item has-text-centered">
|
||||
<a class="link is-info">Home</a>
|
||||
</p>
|
||||
<p class="navbar-item has-text-centered">
|
||||
<a class="link is-info">Menu</a>
|
||||
</p>
|
||||
<p class="navbar-item has-text-centered">
|
||||
<img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 33px;">
|
||||
</p>
|
||||
<p class="navbar-item has-text-centered">
|
||||
<a class="link is-info">Reservations</a>
|
||||
</p>
|
||||
<p class="navbar-item has-text-centered">
|
||||
<a class="link is-info">Contact</a>
|
||||
</p>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<nav class="navbar">
|
||||
<p class="navbar-item has-text-centered">
|
||||
<a class="link is-info">Home</a>
|
||||
</p>
|
||||
<p class="navbar-item has-text-centered">
|
||||
<a class="link is-info">Menu</a>
|
||||
</p>
|
||||
<p class="navbar-item has-text-centered">
|
||||
<img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 33px;">
|
||||
</p>
|
||||
<p class="navbar-item has-text-centered">
|
||||
<a class="link is-info">Reservations</a>
|
||||
</p>
|
||||
<p class="navbar-item has-text-centered">
|
||||
<a class="link is-info">Contact</a>
|
||||
</p>
|
||||
</nav>
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
<h3 class="title">Mobile navbar</h3>
|
||||
<div class="content">
|
||||
By default, for space concerns, the navbar is vertical on mobile. If you want the navbar to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>navbar</code> container.
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<nav class="navbar is-mobile">
|
||||
<div class="navbar-item has-text-centered">
|
||||
<p class="heading">Tweets</p>
|
||||
<p class="title">3,456</p>
|
||||
</div>
|
||||
<div class="navbar-item has-text-centered">
|
||||
<p class="heading">Following</p>
|
||||
<p class="title">123</p>
|
||||
</div>
|
||||
<div class="navbar-item has-text-centered">
|
||||
<p class="heading">Followers</p>
|
||||
<p class="title">456K</p>
|
||||
</div>
|
||||
<div class="navbar-item has-text-centered">
|
||||
<p class="heading">Likes</p>
|
||||
<p class="title">789</p>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Loading…
Reference in New Issue
Block a user