mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
388 lines
13 KiB
HTML
388 lines
13 KiB
HTML
---
|
|
title: Content
|
|
layout: docs
|
|
theme: library
|
|
doc-tab: elements
|
|
doc-subtab: content
|
|
breadcrumb:
|
|
- home
|
|
- documentation
|
|
- elements
|
|
- elements-content
|
|
meta:
|
|
colors: false
|
|
sizes: true
|
|
variables: true
|
|
---
|
|
{% capture content_pre %} <!DOCTYPE html> <html> <head>
|
|
<title>Hello World</title> </head> <body> <p>Lorem
|
|
ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae
|
|
mollis.</p> </body> </html> {% endcapture %}
|
|
{% capture content_example %}
|
|
<div class="content">
|
|
<h1>Hello World</h1>
|
|
<p>
|
|
Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing
|
|
elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius
|
|
lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat
|
|
odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub>
|
|
works as well!
|
|
</p>
|
|
<h2>Second level</h2>
|
|
<p>
|
|
Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit.
|
|
Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin
|
|
pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem
|
|
rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
|
|
</p>
|
|
<ul>
|
|
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
|
|
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
|
|
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
|
|
<li>Ut non enim metus.</li>
|
|
</ul>
|
|
<h3>Third level</h3>
|
|
<p>
|
|
Quisque ante lacus, malesuada ac auctor vitae, congue
|
|
<a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec,
|
|
fringilla condimentum orci. Fusce eu rutrum tellus.
|
|
</p>
|
|
<ol>
|
|
<li>Donec blandit a lorem id convallis.</li>
|
|
<li>Cras gravida arcu at diam gravida gravida.</li>
|
|
<li>Integer in volutpat libero.</li>
|
|
<li>Donec a diam tellus.</li>
|
|
<li>Aenean nec tortor orci.</li>
|
|
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
|
|
<li>Vivamus maximus ultricies pulvinar.</li>
|
|
</ol>
|
|
<blockquote>
|
|
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
|
|
ipsum, ut blandit est tellus sit amet turpis.
|
|
</blockquote>
|
|
<p>
|
|
Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et
|
|
<em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque
|
|
consectetur, et lobortis nisi molestie.
|
|
</p>
|
|
<p>
|
|
Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis
|
|
vulputate risus in luctus. Maecenas vestibulum interdum commodo.
|
|
</p>
|
|
<dl>
|
|
<dt>Web</dt>
|
|
<dd>The part of the Internet that contains websites and web pages</dd>
|
|
<dt>HTML</dt>
|
|
<dd>A markup language for creating web pages</dd>
|
|
<dt>CSS</dt>
|
|
<dd>A technology to make HTML look better</dd>
|
|
</dl>
|
|
<p>
|
|
Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl,
|
|
suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac
|
|
erat ante.
|
|
</p>
|
|
<h4>Fourth level</h4>
|
|
<p>
|
|
Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris
|
|
euismod metus a tellus laoreet, at elementum ex efficitur.
|
|
</p>
|
|
<pre>{{ content_pre }}</pre>
|
|
<p>
|
|
Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non.
|
|
Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta
|
|
condimentum in eu justo. Nulla id iaculis sapien.
|
|
</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>One</th>
|
|
<th>Two</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Three</td>
|
|
<td>Four</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Five</td>
|
|
<td>Six</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Seven</td>
|
|
<td>Eight</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Nine</td>
|
|
<td>Ten</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Eleven</td>
|
|
<td>Twelve</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>
|
|
Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit
|
|
sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum
|
|
rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam
|
|
tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo
|
|
est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae
|
|
ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar.
|
|
Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor
|
|
cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.
|
|
</p>
|
|
<h5>Fifth level</h5>
|
|
<p>
|
|
Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt
|
|
ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit
|
|
volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue
|
|
laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
|
|
</p>
|
|
<figure>
|
|
<img src="{{site.url}}/assets/images/placeholders/256x256.png" />
|
|
<img src="{{site.url}}/assets/images/placeholders/256x256.png" />
|
|
<figcaption>Figure 1: Some beautiful placeholders</figcaption>
|
|
</figure>
|
|
<h6>Sixth level</h6>
|
|
<p>
|
|
Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus
|
|
sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut
|
|
sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada
|
|
ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse
|
|
euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius
|
|
sapien odio vitae est. Etiam at cursus metus.
|
|
</p>
|
|
</div>
|
|
{% endcapture %}
|
|
{% capture content_ol_html_example %}
|
|
<div class="content">
|
|
<ol type="1">
|
|
<li>Coffee</li>
|
|
<li>Tea</li>
|
|
<li>Milk</li>
|
|
</ol>
|
|
<ol type="A">
|
|
<li>Coffee</li>
|
|
<li>Tea</li>
|
|
<li>Milk</li>
|
|
</ol>
|
|
<ol type="a">
|
|
<li>Coffee</li>
|
|
<li>Tea</li>
|
|
<li>Milk</li>
|
|
</ol>
|
|
<ol type="I">
|
|
<li>Coffee</li>
|
|
<li>Tea</li>
|
|
<li>Milk</li>
|
|
</ol>
|
|
<ol type="i">
|
|
<li>Coffee</li>
|
|
<li>Tea</li>
|
|
<li>Milk</li>
|
|
</ol>
|
|
</div>
|
|
{% endcapture %}
|
|
{% capture content_ol_css_example %}
|
|
<div class="content">
|
|
<ol class="is-lower-alpha">
|
|
<li>Coffee</li>
|
|
<li>Tea</li>
|
|
<li>Milk</li>
|
|
</ol>
|
|
<ol class="is-lower-roman">
|
|
<li>Coffee</li>
|
|
<li>Tea</li>
|
|
<li>Milk</li>
|
|
</ol>
|
|
<ol class="is-upper-alpha">
|
|
<li>Coffee</li>
|
|
<li>Tea</li>
|
|
<li>Milk</li>
|
|
</ol>
|
|
<ol class="is-upper-roman">
|
|
<li>Coffee</li>
|
|
<li>Tea</li>
|
|
<li>Milk</li>
|
|
</ol>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use
|
|
<code>content</code> as container. It can handle almost any HTML tag:
|
|
</p>
|
|
<ul>
|
|
<li><code><p></code> paragraphs</li>
|
|
<li><code><ul></code> <code><ol></code> <code><dl></code> lists</li>
|
|
<li><code><h1></code> to <code><h6></code> headings</li>
|
|
<li><code><blockquote></code> quotes</li>
|
|
<li><code><em></code> and <code><strong></code></li>
|
|
<li><code><table></code> <code><tr></code> <code><th></code> <code><td></code> tables</li>
|
|
</ul>
|
|
<p>
|
|
This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some
|
|
<strong>text</strong>. For example, it's used for the paragraph you're currently reading.
|
|
</p>
|
|
</div>
|
|
|
|
{% include docs/elements/anchor.html name="Full example" %}
|
|
|
|
<div class="content">
|
|
Here is an example of the <code>content</code> Bulma element with all the supported HTML tags:
|
|
</div>
|
|
|
|
{% include docs/elements/snippet.html content=content_example %}
|
|
{% include docs/elements/anchor.html name="Ordered lists alternatives" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
<strong>Ordered lists</strong> <code><ol></code> support different <strong>types</strong> of items markers. To
|
|
modify them, use either:
|
|
</p>
|
|
<ul>
|
|
<li>the corresponding HTML attribute value</li>
|
|
<li>
|
|
one of the following CSS modifier classes: <code>is-lower-alpha</code>, <code>is-lower-roman</code>,
|
|
<code>is-upper-alpha</code> or
|
|
<code>is-upper-roman</code>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{% include docs/elements/snippet.html content=content_ol_html_example %}
|
|
{% include docs/elements/snippet.html content=content_ol_css_example %}
|
|
{% include docs/elements/anchor.html name="Sizes" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font
|
|
size.
|
|
</p>
|
|
</div>
|
|
|
|
{% capture small_example %}
|
|
<div class="content is-small">
|
|
<h1>Hello World</h1>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan,
|
|
metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo
|
|
nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
|
|
erat vel, interdum mattis neque.
|
|
</p>
|
|
<h2>Second level</h2>
|
|
<p>
|
|
Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit.
|
|
Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin
|
|
pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem
|
|
rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
|
|
</p>
|
|
<ul>
|
|
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
|
|
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
|
|
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
|
|
<li>Ut non enim metus.</li>
|
|
</ul>
|
|
</div>
|
|
{% endcapture %}
|
|
{% capture normal_example %}
|
|
<div class="content is-normal">
|
|
<h1>Hello World</h1>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan,
|
|
metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo
|
|
nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
|
|
erat vel, interdum mattis neque.
|
|
</p>
|
|
<h2>Second level</h2>
|
|
<p>
|
|
Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit.
|
|
Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin
|
|
pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem
|
|
rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
|
|
</p>
|
|
<ul>
|
|
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
|
|
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
|
|
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
|
|
<li>Ut non enim metus.</li>
|
|
</ul>
|
|
</div>
|
|
{% endcapture %}
|
|
{% capture medium_example %}
|
|
<div class="content is-medium">
|
|
<h1>Hello World</h1>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan,
|
|
metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo
|
|
nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
|
|
erat vel, interdum mattis neque.
|
|
</p>
|
|
<h2>Second level</h2>
|
|
<p>
|
|
Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit.
|
|
Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin
|
|
pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem
|
|
rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
|
|
</p>
|
|
<ul>
|
|
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
|
|
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
|
|
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
|
|
<li>Ut non enim metus.</li>
|
|
</ul>
|
|
</div>
|
|
{% endcapture %}
|
|
{% capture large_example %}
|
|
<div class="content is-large">
|
|
<h1>Hello World</h1>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan,
|
|
metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo
|
|
nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
|
|
erat vel, interdum mattis neque.
|
|
</p>
|
|
<h2>Second level</h2>
|
|
<p>
|
|
Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit.
|
|
Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin
|
|
pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem
|
|
rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
|
|
</p>
|
|
<ul>
|
|
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
|
|
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
|
|
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
|
|
<li>Ut non enim metus.</li>
|
|
</ul>
|
|
</div>
|
|
{% endcapture %}
|
|
|
|
<div class="content">
|
|
<h4>Small size <code>content</code></h4>
|
|
</div>
|
|
|
|
{% include docs/elements/snippet.html content=small_example %}
|
|
|
|
<div class="content">
|
|
<h4>Normal size <code>content</code> <em>(default)</em></h4>
|
|
</div>
|
|
|
|
{% include docs/elements/snippet.html content=normal_example %}
|
|
|
|
<div class="content">
|
|
<h4>Medium size <code>content</code></h4>
|
|
</div>
|
|
|
|
{% include docs/elements/snippet.html content=medium_example %}
|
|
|
|
<div class="content">
|
|
<h4>Large size <code>content</code></h4>
|
|
</div>
|
|
|
|
{% include docs/elements/snippet.html content=large_example %}
|
|
|