Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-20 12:24:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Container broken layout

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-09 16:15:58 +01:00
parent f0074aa339
commit 25d0ea1136
18 changed files with 1262 additions and 1244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
docs/documentation/form/checkbox.html
View File

@@ -1,8 +1,18 @@
---
title: Checkbox
subtitle: "The 2-state <strong>checkbox</strong> in its native format"
layout: documentation
doc-tab: form
doc-subtab: checkbox
breadcrumb:
- home
- documentation
- form
- form-checkbox
meta:
colors: false
sizes: false
variables: false
---
{% capture checkbox_example %}
@@ -26,60 +36,41 @@ doc-subtab: checkbox
</label>
{% endcapture %}
{% include subnav/subnav-form.html %}
<div class="content">
<p>
The <code>checkbox</code> class is a simple wrapper around the <code>&lt;input type="checkbox"&gt;</code> HTML element. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
</p>
</div>
<section class="section">
<div class="container">
<h1 class="title">Checkbox</h1>
<h2 class="subtitle">
The 2-state <strong>checkbox</strong> in its native format
</h2>
{%
include meta.html
colors=false
sizes=false
variables=false
%}
<hr>
<div class="content">
<p>
The <code>checkbox</code> class is a simple wrapper around the <code>&lt;input type="checkbox"&gt;</code> HTML element. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
</p>
</div>
<div class="columns">
<div class="column is-half">
{{checkbox_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{checkbox_example}}{% endhighlight %}
</div>
</div>
<div class="content">
<p>
You can add <strong>links</strong> to your checkbox, or even <strong>disable</strong> it.
</p>
</div>
<div class="columns">
<div class="column is-half">
{{checkbox_link_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{checkbox_link_example}}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column is-half">
{{checkbox_disabled_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{checkbox_disabled_example}}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column is-half">
{{checkbox_example}}
</div>
</section>
<div class="column is-half highlight-full">
{% highlight html %}{{checkbox_example}}{% endhighlight %}
</div>
</div>
<div class="content">
<p>
You can add <strong>links</strong> to your checkbox, or even <strong>disable</strong> it.
</p>
</div>
<div class="columns">
<div class="column is-half">
{{checkbox_link_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{checkbox_link_example}}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column is-half">
{{checkbox_disabled_example}}
</div>
<div class="column is-half highlight-full">
{% highlight html %}{{checkbox_disabled_example}}{% endhighlight %}
</div>
</div>