mirror of
https://github.com/jgthms/bulma
synced 2026-03-19 11:54:30 -07:00
Bulma v9 website (#3249)
* Add Bulma v9 * Add vendor dependencies * Fix native * Fix sponsors * Add style attribute
This commit is contained in:
Jeremy Thomas
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Container
|
||||
layout: documentation
|
||||
fullwidth: true
|
||||
hide_categories: true
|
||||
doc-tab: layout
|
||||
doc-subtab: container
|
||||
@@ -185,14 +186,10 @@ meta:
|
||||
<p>The values <strong>960</strong>, <strong>1152</strong> and <strong>1344</strong> have been chosen because they are divisible by both <strong>12</strong> and <strong>16</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% include layout/main-close.html show_categories=true %}
|
||||
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_example}}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_example }}{% endhighlight %}
|
||||
|
||||
<!-- -->
|
||||
@@ -204,24 +201,16 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_widescreen_example}}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_widescreen_example }}{% endhighlight %}
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{ container_fullhd_example }}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_fullhd_example }}{% endhighlight %}
|
||||
|
||||
<!-- -->
|
||||
@@ -243,24 +232,16 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{ container_max_desktop_example }}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_max_desktop_example }}{% endhighlight %}
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{ container_max_widescreen_example }}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_max_widescreen_example }}{% endhighlight %}
|
||||
|
||||
<!-- -->
|
||||
@@ -283,14 +264,10 @@ meta:
|
||||
right sides, add the <code>is-fluid</code> modifier:</p>
|
||||
</div>
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="bd-example is-fullwidth py-5">
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_fluid_example}}
|
||||
</div>
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% highlight html %}{{ container_fluid_example }}{% endhighlight %}
|
||||
|
||||
{% include elements/variables.html type='element' data=site.data.variables.elements.container %}
|
||||
{% include components/variables.html type='element' data=site.data.variables.elements.container %}
|
||||
|
||||
@@ -30,4 +30,4 @@ breadcrumb:
|
||||
|
||||
{% include elements/snippet.html content=footer_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/variables.html %}
|
||||
{% include components/variables.html %}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Hero
|
||||
layout: documentation
|
||||
fullwidth: true
|
||||
hide_categories: true
|
||||
hide_fortyfour: true
|
||||
doc-tab: layout
|
||||
@@ -38,481 +39,183 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include layout/main-close.html show_categories=true %}
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="bd-example">
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Hero title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Hero subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% highlight html %}
|
||||
{% capture hero_example %}
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Hero title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Hero subtitle
|
||||
</h2>
|
||||
</div>
|
||||
<p class="title">
|
||||
Hero title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Hero subtitle
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
<div class="content">
|
||||
As with buttons, you can choose one of the <strong>8 different colors</strong>:
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% include elements/snippet.html content=hero_example horizontal=true fullwidth=true %}
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Primary title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Primary subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Primary title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Primary subtitle
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bd-example">
|
||||
<section class="hero is-info">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Info title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Info subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<section class="hero is-success">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Success title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Success subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<section class="hero is-link">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Link title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Link subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<section class="hero is-warning">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Warning title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Warning subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<section class="hero is-danger">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Danger title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Danger subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<section class="hero is-light">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Light title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Light subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<section class="hero is-dark">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Dark title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Dark subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
{% include elements/anchor.html name="Gradients" %}
|
||||
<div class="content">
|
||||
By adding the <code>is-bold</code> modifier, you can generate a subtle <strong>gradient</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-primary is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Primary bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Primary bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<section class="hero is-medium is-primary is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Primary bold title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Primary bold subtitle
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-info is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Info bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Info bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-success is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Success bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Success bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-warning is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Warning bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Warning bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-danger is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Danger bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Danger bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-light is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Light bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Light bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
<section class="hero is-medium is-dark is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Dark bold title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Dark bold subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
<div class="content">
|
||||
<p>
|
||||
You can have even more imposing banners by using one of <strong>3 different sizes</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
medium
|
||||
</li>
|
||||
<li>
|
||||
large
|
||||
</li>
|
||||
<li>
|
||||
fullheight
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
<div class="bd-example">
|
||||
<section class="hero is-primary is-medium">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Medium title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Medium subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero is-primary is-medium">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Medium title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Medium subtitle
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bd-example">
|
||||
<section class="hero is-info is-large">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Large title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Large subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero is-info is-large">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Large title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Large subtitle
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
|
||||
<div id="fullheight-hero" class="bd-example is-fullwidth">
|
||||
<section class="hero is-success is-fullheight">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Fullheight title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Fullheight subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="content">
|
||||
As with buttons, you can choose one of the <strong>8 different colors</strong>:
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero is-success is-fullheight">
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
<section class="hero is-{{ color }}">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Fullheight title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Fullheight subtitle
|
||||
</h2>
|
||||
<p class="title">
|
||||
{{ color | capitalize }} hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
{{ color | capitalize }} subtitle
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar horizontal=true fullwidth=true %}
|
||||
{% endfor %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can have even more imposing banners by using one of <strong>5 different sizes</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>is-small</code></li>
|
||||
<li><code>is-medium</code></li>
|
||||
<li><code>is-large</code></li>
|
||||
<li><code>is-halfheight</code></li>
|
||||
<li><code>is-fullheight</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% capture small_hero %}
|
||||
<section class="hero is-small is-primary">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
Small hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Small subtitle
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=small_hero horizontal=true fullwidth=true %}
|
||||
|
||||
{% capture medium_hero %}
|
||||
<section class="hero is-medium is-link">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
Medium hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Medium subtitle
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=medium_hero horizontal=true fullwidth=true %}
|
||||
|
||||
{% capture large_hero %}
|
||||
<section class="hero is-large is-info">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
Large hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Large subtitle
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=large_hero horizontal=true fullwidth=true %}
|
||||
|
||||
<div id="halfheight-hero"></div>
|
||||
|
||||
{% capture halfheight_example %}
|
||||
<section class="hero is-success is-halfheight">
|
||||
<div class="hero-body">
|
||||
<div class="">
|
||||
<p class="title">
|
||||
Half height hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Half height subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=halfheight_example horizontal=true fullwidth=true %}
|
||||
|
||||
<div id="fullheight-hero"></div>
|
||||
|
||||
{% capture fullheight_example %}
|
||||
<section class="hero is-danger is-fullheight">
|
||||
<div class="hero-body">
|
||||
<div class="">
|
||||
<p class="title">
|
||||
Fullheight hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Fullheight subtitle
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=fullheight_example horizontal=true fullwidth=true %}
|
||||
|
||||
<!-- Fullheight with navbar -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
{% include elements/anchor.html name="Fullheight with navbar" %}
|
||||
<div class="content">
|
||||
<p>
|
||||
If you are using a <a href="{{ site.url }}/documentation/components/navbar/#fixed-navbar">fixed navbar</a>, you can use the <code>is-fullheight-with-navbar</code> modifier on the hero for it to occupy the viewport height minus the navbar height.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% include elements/anchor.html name="Fullheight with navbar" %}
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
{% include examples/navbar-basic.html %}
|
||||
<section class="hero is-link is-fullheight-with-navbar">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Fullheight hero with navbar
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
If you are using a <a href="{{ site.url }}/documentation/components/navbar/#fixed-navbar">fixed navbar</a>, you can use the <code>is-fullheight-with-navbar</code> modifier on the hero for it to occupy the viewport height minus the navbar height.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
{% capture fullheight_with_navbar_example %}
|
||||
{% include examples/navbar-basic.html %}
|
||||
|
||||
{% highlight html %}
|
||||
<section class="hero is-link is-fullheight-with-navbar">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<p class="title">
|
||||
Fullheight hero with navbar
|
||||
</p>
|
||||
</div>
|
||||
<p class="title">
|
||||
Fullheight hero with navbar
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=fullheight_with_navbar_example horizontal=true fullwidth=true %}
|
||||
|
||||
<!-- Fullheight with 3 parts -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
{% include elements/anchor.html name="Fullheight hero in 3 parts" %}
|
||||
<div class="content">
|
||||
<p>To obtain a hero that will cover the whole height of the viewport, you can split it in <strong>3 vertical parts</strong>:</p>
|
||||
{% include elements/anchor.html name="Fullheight hero in 3 parts" %}
|
||||
|
||||
<div class="content">
|
||||
<p>To obtain a hero that will cover the whole height of the viewport, you can split it in <strong>3 vertical parts</strong>:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>hero</code>
|
||||
<ul>
|
||||
<li>
|
||||
<code>hero</code>
|
||||
<ul>
|
||||
<li><code>hero-head</code> (always at the top)</li>
|
||||
<li><code>hero-body</code> (always vertically centered)</li>
|
||||
<li><code>hero-foot</code> (always at the bottom)</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>hero-head</code> (always at the top)</li>
|
||||
<li><code>hero-body</code> (always vertically centered)</li>
|
||||
<li><code>hero-foot</code> (always at the bottom)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% capture heroNavbarA %}
|
||||
<section class="hero is-primary is-medium">
|
||||
@@ -558,12 +261,12 @@ meta:
|
||||
<!-- Hero content: will be in the middle -->
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<h1 class="title">
|
||||
<p class="title">
|
||||
Title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Subtitle
|
||||
</h2>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -709,12 +412,12 @@ meta:
|
||||
<!-- Hero content: will be in the middle -->
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<h1 class="title">
|
||||
<p class="title">
|
||||
Title
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Subtitle
|
||||
</h2>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -736,12 +439,8 @@ meta:
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
<section class="section is-fullwidth">
|
||||
{% include elements/snippet.html content=heroNavbarA horizontal=true more=true %}
|
||||
{% include elements/snippet.html content=heroNavbarB horizontal=true more=true %}
|
||||
{% include elements/snippet.html content=heroNavbarC horizontal=true more=true %}
|
||||
</section>
|
||||
{% include elements/snippet.html content=heroNavbarA horizontal=true fullwidth=true more=true %}
|
||||
{% include elements/snippet.html content=heroNavbarB horizontal=true fullwidth=true more=true %}
|
||||
{% include elements/snippet.html content=heroNavbarC horizontal=true fullwidth=true more=true %}
|
||||
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
{% include elements/variables.html type='component' hide_content=true %}
|
||||
{% include components/variables.html type='component' hide_content=true %}
|
||||
|
||||
@@ -142,49 +142,6 @@ breadcrumb:
|
||||
<p>In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be <strong>vertically centered</strong>.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-structure">
|
||||
<nav class="level bd-structure-item bd-is-structure-container" title="level">
|
||||
<div class="level-left bd-structure-item" title="level-left">
|
||||
<div class="level-item">
|
||||
<p class="subtitle is-5">
|
||||
<strong>123</strong> posts
|
||||
</p>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Find a post">
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button">
|
||||
Search
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right bd-structure-item" title="level-right">
|
||||
<p class="level-item">
|
||||
<strong>All</strong>
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a>Published</a>
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a>Drafts</a>
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a>Deleted</a>
|
||||
</p>
|
||||
<p class="level-item">
|
||||
<a class="button is-success">
|
||||
New
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=nav_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Centered level" %}
|
||||
|
||||
@@ -75,6 +75,7 @@ breadcrumb:
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture media_nested_example %}
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
@@ -140,6 +141,7 @@ breadcrumb:
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
@@ -165,48 +167,13 @@ breadcrumb:
|
||||
<p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code">media object</a> is a UI element perfect for repeatable and nestable content.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-structure">
|
||||
<article class="media">
|
||||
<figure class="media-left bd-structure-item" title="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content bd-structure-item bd-is-structure-right" title="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level">
|
||||
<div class="level-left">
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-reply"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-retweet"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fas fa-heart"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="media-right bd-structure-item" title="media-right">
|
||||
<button class="delete"></button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=media_example horizontal=true more=true %}
|
||||
{% include elements/snippet.html content=media_example more=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons... or even a <strong>nav bar</strong>.</p>
|
||||
<p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons… or even a <strong>navbar</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=media_bis_example horizontal=true more=true %}
|
||||
{% include elements/snippet.html content=media_bis_example more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Nesting" %}
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Section
|
||||
layout: documentation
|
||||
fullwidth: true
|
||||
doc-tab: layout
|
||||
doc-subtab: section
|
||||
breadcrumb:
|
||||
@@ -11,26 +12,48 @@ breadcrumb:
|
||||
---
|
||||
|
||||
{% capture section_example %}
|
||||
<body>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
|
||||
</h2>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
<section class="section">
|
||||
<h1 class="title">Section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
|
||||
</h2>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture section_medium_example %}
|
||||
<section class="section is-medium">
|
||||
<h1 class="title">Medium section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
|
||||
</h2>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture section_large_example %}
|
||||
<section class="section is-large">
|
||||
<h1 class="title">Large section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
|
||||
</h2>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>Use sections as <strong>direct</strong> children of <code>body</code>.</p>
|
||||
<p>
|
||||
The <code>section</code> components are simple layout elements with responsive padding. They are best used as <strong>direct</strong> children of <code>body</code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ section_example }}{% endhighlight %}
|
||||
{% include elements/snippet.html content=section_example horizontal=true fullwidth=true %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/variables.html %}
|
||||
{% include elements/snippet.html content=section_medium_example horizontal=true fullwidth=true %}
|
||||
|
||||
{% include elements/snippet.html content=section_large_example horizontal=true fullwidth=true %}
|
||||
|
||||
{% include components/variables.html %}
|
||||
|
||||
Reference in New Issue
Block a user