mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Add x-fifth documentation
This commit is contained in:
Jeremy Thomas
@@ -6,6 +6,12 @@ doc-subtab: sizes
|
||||
---
|
||||
|
||||
{% capture columns_sizes %}
|
||||
<div class="columns">
|
||||
<div class="column is-four-fifths">is-four-fifths</div>
|
||||
<div class="column">Auto</div>
|
||||
<div class="column">Auto</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-three-quarters">is-three-quarters</div>
|
||||
<div class="column">Auto</div>
|
||||
@@ -18,12 +24,24 @@ doc-subtab: sizes
|
||||
<div class="column">Auto</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-three-fifths">is-three-fifths</div>
|
||||
<div class="column">Auto</div>
|
||||
<div class="column">Auto</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">is-half</div>
|
||||
<div class="column">Auto</div>
|
||||
<div class="column">Auto</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-two-fifths">is-two-fifths</div>
|
||||
<div class="column">Auto</div>
|
||||
<div class="column">Auto</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">is-one-third</div>
|
||||
<div class="column">Auto</div>
|
||||
@@ -34,6 +52,12 @@ doc-subtab: sizes
|
||||
<div class="column is-one-quarter">is-one-quarter</div>
|
||||
<div class="column">Auto</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-fifth">is-one-fifth</div>
|
||||
<div class="column">Auto</div>
|
||||
<div class="column">Auto</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture columns_offset %}
|
||||
@@ -41,6 +65,10 @@ doc-subtab: sizes
|
||||
<div class="column is-half is-offset-one-quarter"></div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-three-fifths is-offset-one-fifth"></div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-4 is-offset-8"></div>
|
||||
</div>
|
||||
@@ -100,6 +128,40 @@ doc-subtab: sizes
|
||||
<p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/new-tag.html version="0.6.1" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can now use the following multiples of <code>20%</code> as well:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-four-fifths</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-three-fifths</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-two-fifths</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-one-fifth</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-four-fifths">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-four-fifths</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-three-quarters">
|
||||
<p class="bd-notification is-info">
|
||||
@@ -107,10 +169,10 @@ doc-subtab: sizes
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">Auto</p>
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -121,10 +183,24 @@ doc-subtab: sizes
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">Auto</p>
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-three-fifths">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-three-fifths</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -135,10 +211,24 @@ doc-subtab: sizes
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-danger">Auto</p>
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-two-fifths">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-two-fifths</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -165,6 +255,23 @@ doc-subtab: sizes
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-fifth">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-one-fifth</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-full">
|
||||
@@ -198,9 +305,6 @@ doc-subtab: sizes
|
||||
<div class="column is-2">
|
||||
<p class="bd-notification is-info"><code>is-2</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
@@ -228,14 +332,14 @@ doc-subtab: sizes
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<p class="bd-notification is-info"><code>is-3</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
@@ -260,14 +364,14 @@ doc-subtab: sizes
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<p class="bd-notification is-info"><code>is-4</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
@@ -289,14 +393,14 @@ doc-subtab: sizes
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-5">
|
||||
<p class="bd-notification is-info"><code>is-5</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
@@ -315,14 +419,14 @@ doc-subtab: sizes
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<p class="bd-notification is-info"><code>is-6</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
@@ -338,14 +442,14 @@ doc-subtab: sizes
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-7">
|
||||
<p class="bd-notification is-info"><code>is-7</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
@@ -358,14 +462,14 @@ doc-subtab: sizes
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-8">
|
||||
<p class="bd-notification is-info"><code>is-8</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
@@ -375,30 +479,33 @@ doc-subtab: sizes
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-9">
|
||||
<p class="bd-notification is-info"><code>is-9</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-10">
|
||||
<p class="bd-notification is-info"><code>is-10</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
@@ -406,7 +513,7 @@ doc-subtab: sizes
|
||||
<p class="bd-notification is-info"><code>is-11</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-warning has-text-centered">1</p>
|
||||
<p class="bd-notification is-success has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -427,6 +534,15 @@ doc-subtab: sizes
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-three-fifths is-offset-one-fifth">
|
||||
<p class="bd-notification is-info">
|
||||
<code class="html">is-three-fifths</code><br>
|
||||
<code class="html">is-offset-one-fifth</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-4 is-offset-8">
|
||||
<p class="bd-notification is-info">
|
||||
@@ -445,7 +561,9 @@ doc-subtab: sizes
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_offset }}{% endhighlight %}
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}{{ columns_offset }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Narrow column" %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user