mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
Add x-fifth documentation
This commit is contained in:
Jeremy Thomas
parent
30b53bf815
commit
426249f36c
@ -109,7 +109,7 @@ th {
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #fff;
|
||||
background-color: white;
|
||||
font-size: 16px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@ -7862,6 +7862,34 @@ label.panel-block:hover {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > .column.is-one-fifth {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > .column.is-two-fifths {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > .column.is-three-fifths {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > .column.is-four-fifths {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > .column.is-offset-three-quarters {
|
||||
margin-left: 75%;
|
||||
}
|
||||
@ -7882,6 +7910,22 @@ label.panel-block:hover {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > .column.is-offset-one-fifth {
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > .column.is-offset-two-fifths {
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > .column.is-offset-three-fifths {
|
||||
margin-left: 60%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > .column.is-offset-four-fifths {
|
||||
margin-left: 80%;
|
||||
}
|
||||
|
||||
.columns.is-mobile > .column.is-1 {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
@ -8056,6 +8100,30 @@ label.panel-block:hover {
|
||||
flex: none;
|
||||
width: 25%;
|
||||
}
|
||||
.column.is-one-fifth-mobile {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 20%;
|
||||
}
|
||||
.column.is-two-fifths-mobile {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 40%;
|
||||
}
|
||||
.column.is-three-fifths-mobile {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 60%;
|
||||
}
|
||||
.column.is-four-fifths-mobile {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 80%;
|
||||
}
|
||||
.column.is-offset-three-quarters-mobile {
|
||||
margin-left: 75%;
|
||||
}
|
||||
@ -8071,6 +8139,18 @@ label.panel-block:hover {
|
||||
.column.is-offset-one-quarter-mobile {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.column.is-offset-one-fifth-mobile {
|
||||
margin-left: 20%;
|
||||
}
|
||||
.column.is-offset-two-fifths-mobile {
|
||||
margin-left: 40%;
|
||||
}
|
||||
.column.is-offset-three-fifths-mobile {
|
||||
margin-left: 60%;
|
||||
}
|
||||
.column.is-offset-four-fifths-mobile {
|
||||
margin-left: 80%;
|
||||
}
|
||||
.column.is-1-mobile {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
@ -8223,6 +8303,30 @@ label.panel-block:hover {
|
||||
flex: none;
|
||||
width: 25%;
|
||||
}
|
||||
.column.is-one-fifth, .column.is-one-fifth-tablet {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 20%;
|
||||
}
|
||||
.column.is-two-fifths, .column.is-two-fifths-tablet {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 40%;
|
||||
}
|
||||
.column.is-three-fifths, .column.is-three-fifths-tablet {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 60%;
|
||||
}
|
||||
.column.is-four-fifths, .column.is-four-fifths-tablet {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 80%;
|
||||
}
|
||||
.column.is-offset-three-quarters, .column.is-offset-three-quarters-tablet {
|
||||
margin-left: 75%;
|
||||
}
|
||||
@ -8238,6 +8342,18 @@ label.panel-block:hover {
|
||||
.column.is-offset-one-quarter, .column.is-offset-one-quarter-tablet {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.column.is-offset-one-fifth, .column.is-offset-one-fifth-tablet {
|
||||
margin-left: 20%;
|
||||
}
|
||||
.column.is-offset-two-fifths, .column.is-offset-two-fifths-tablet {
|
||||
margin-left: 40%;
|
||||
}
|
||||
.column.is-offset-three-fifths, .column.is-offset-three-fifths-tablet {
|
||||
margin-left: 60%;
|
||||
}
|
||||
.column.is-offset-four-fifths, .column.is-offset-four-fifths-tablet {
|
||||
margin-left: 80%;
|
||||
}
|
||||
.column.is-1, .column.is-1-tablet {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
@ -8390,6 +8506,30 @@ label.panel-block:hover {
|
||||
flex: none;
|
||||
width: 25%;
|
||||
}
|
||||
.column.is-one-fifth-touch {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 20%;
|
||||
}
|
||||
.column.is-two-fifths-touch {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 40%;
|
||||
}
|
||||
.column.is-three-fifths-touch {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 60%;
|
||||
}
|
||||
.column.is-four-fifths-touch {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 80%;
|
||||
}
|
||||
.column.is-offset-three-quarters-touch {
|
||||
margin-left: 75%;
|
||||
}
|
||||
@ -8405,6 +8545,18 @@ label.panel-block:hover {
|
||||
.column.is-offset-one-quarter-touch {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.column.is-offset-one-fifth-touch {
|
||||
margin-left: 20%;
|
||||
}
|
||||
.column.is-offset-two-fifths-touch {
|
||||
margin-left: 40%;
|
||||
}
|
||||
.column.is-offset-three-fifths-touch {
|
||||
margin-left: 60%;
|
||||
}
|
||||
.column.is-offset-four-fifths-touch {
|
||||
margin-left: 80%;
|
||||
}
|
||||
.column.is-1-touch {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
@ -8557,6 +8709,30 @@ label.panel-block:hover {
|
||||
flex: none;
|
||||
width: 25%;
|
||||
}
|
||||
.column.is-one-fifth-desktop {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 20%;
|
||||
}
|
||||
.column.is-two-fifths-desktop {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 40%;
|
||||
}
|
||||
.column.is-three-fifths-desktop {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 60%;
|
||||
}
|
||||
.column.is-four-fifths-desktop {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 80%;
|
||||
}
|
||||
.column.is-offset-three-quarters-desktop {
|
||||
margin-left: 75%;
|
||||
}
|
||||
@ -8572,6 +8748,18 @@ label.panel-block:hover {
|
||||
.column.is-offset-one-quarter-desktop {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.column.is-offset-one-fifth-desktop {
|
||||
margin-left: 20%;
|
||||
}
|
||||
.column.is-offset-two-fifths-desktop {
|
||||
margin-left: 40%;
|
||||
}
|
||||
.column.is-offset-three-fifths-desktop {
|
||||
margin-left: 60%;
|
||||
}
|
||||
.column.is-offset-four-fifths-desktop {
|
||||
margin-left: 80%;
|
||||
}
|
||||
.column.is-1-desktop {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
@ -8724,6 +8912,30 @@ label.panel-block:hover {
|
||||
flex: none;
|
||||
width: 25%;
|
||||
}
|
||||
.column.is-one-fifth-widescreen {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 20%;
|
||||
}
|
||||
.column.is-two-fifths-widescreen {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 40%;
|
||||
}
|
||||
.column.is-three-fifths-widescreen {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 60%;
|
||||
}
|
||||
.column.is-four-fifths-widescreen {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 80%;
|
||||
}
|
||||
.column.is-offset-three-quarters-widescreen {
|
||||
margin-left: 75%;
|
||||
}
|
||||
@ -8739,6 +8951,18 @@ label.panel-block:hover {
|
||||
.column.is-offset-one-quarter-widescreen {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.column.is-offset-one-fifth-widescreen {
|
||||
margin-left: 20%;
|
||||
}
|
||||
.column.is-offset-two-fifths-widescreen {
|
||||
margin-left: 40%;
|
||||
}
|
||||
.column.is-offset-three-fifths-widescreen {
|
||||
margin-left: 60%;
|
||||
}
|
||||
.column.is-offset-four-fifths-widescreen {
|
||||
margin-left: 80%;
|
||||
}
|
||||
.column.is-1-widescreen {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
@ -8891,6 +9115,30 @@ label.panel-block:hover {
|
||||
flex: none;
|
||||
width: 25%;
|
||||
}
|
||||
.column.is-one-fifth-fullhd {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 20%;
|
||||
}
|
||||
.column.is-two-fifths-fullhd {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 40%;
|
||||
}
|
||||
.column.is-three-fifths-fullhd {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 60%;
|
||||
}
|
||||
.column.is-four-fifths-fullhd {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 80%;
|
||||
}
|
||||
.column.is-offset-three-quarters-fullhd {
|
||||
margin-left: 75%;
|
||||
}
|
||||
@ -8906,6 +9154,18 @@ label.panel-block:hover {
|
||||
.column.is-offset-one-quarter-fullhd {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.column.is-offset-one-fifth-fullhd {
|
||||
margin-left: 20%;
|
||||
}
|
||||
.column.is-offset-two-fifths-fullhd {
|
||||
margin-left: 40%;
|
||||
}
|
||||
.column.is-offset-three-fifths-fullhd {
|
||||
margin-left: 60%;
|
||||
}
|
||||
.column.is-offset-four-fifths-fullhd {
|
||||
margin-left: 80%;
|
||||
}
|
||||
.column.is-1-fullhd {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
|
||||
@ -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" %}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user