Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add columns section

Browse Source
This commit is contained in:
Jeremy Thomas
2017-08-14 18:25:14 +01:00
parent ab5a72b202
commit 6fe43b8f94
39 changed files with 2669 additions and 2070 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
docs/documentation/grid/columns.html
View File

@@ -313,7 +313,7 @@ doc-subtab: columns
<p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
</div>
<div class="columns">
<div class="columns is-variable">
<div class="column">
<p class="bd-notification is-info">First column</p>
</div>
@@ -330,7 +330,7 @@ doc-subtab: columns
{% highlight html %}{{ columns }}{% endhighlight %}
{% include heading.html name="Sizes" %}
{% include anchor.html name="Sizes" %}
<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>
@@ -655,7 +655,7 @@ doc-subtab: columns
</div>
</div>
{% include heading.html name="Offset" %}
{% include anchor.html name="Offset" %}
<div class="content">
<p>
@@ -692,7 +692,7 @@ doc-subtab: columns
{% highlight html %}{{ columns_offset }}{% endhighlight %}
{% include heading.html name="Centering columns" %}
{% include anchor.html name="Centering columns" %}
<div class="content">
<p>
@@ -719,31 +719,31 @@ doc-subtab: columns
<div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
<p class="bd-notification is-info">
<p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
First Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-success">
<p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
Our Second Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-danger">
<p class="bd-notification is-danger" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
Third Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-info">
<p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
The Fourth Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-success">
<p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
<code class="html">is-narrow</code><br>
Fifth Column
</p>
@@ -752,7 +752,7 @@ doc-subtab: columns
{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
{% include heading.html name="Responsiveness" %}
{% include anchor.html name="Responsiveness" %}
<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>
@@ -827,7 +827,7 @@ doc-subtab: columns
</div>
{% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}
{% include heading.html name="Nesting" %}
{% include anchor.html name="Nesting" %}
<div class="content">
<p>
@@ -888,7 +888,7 @@ doc-subtab: columns
{% highlight html %}{{ columns_nesting }}{% endhighlight %}
{% include heading.html name="Multiline" %}
{% include anchor.html name="Multiline" %}
<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>
@@ -925,7 +925,7 @@ doc-subtab: columns
{% highlight html %}{{ columns_multiline }}{% endhighlight %}
{% include heading.html name="Gapless" %}
{% include anchor.html name="Gapless" %}
<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>
@@ -979,7 +979,7 @@ doc-subtab: columns
</div>
{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
{% include heading.html name="Narrow column" %}
{% include anchor.html name="Narrow column" %}
<div class="content">
<p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>