mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
126
docs/_includes/library/components/breadcrumb.html
Normal file
126
docs/_includes/library/components/breadcrumb.html
Normal file
@@ -0,0 +1,126 @@
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb is-right" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-home" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span>Bulma</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span>Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-puzzle-piece" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span>Components</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="#">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-thumbs-up" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span>Breadcrumb</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb is-small" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="breadcrumb is-large" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
<li><a href="#">Documentation</a></li>
|
||||
<li><a href="#">Components</a></li>
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
105
docs/_includes/library/components/card.html
Normal file
105
docs/_includes/library/components/card.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/1280x960.png" alt="Placeholder image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-48x48">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/96x96.png" alt="Placeholder image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-4">John Smith</p>
|
||||
<p class="subtitle is-6">@johnsmith</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
|
||||
<a href="https://bulma.io">@bulmaio</a>. <a href="#css">#css</a> <a href="#responsive">#responsive</a>
|
||||
<br>
|
||||
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">Card header</p>
|
||||
<button class="card-header-icon" aria-label="more options">
|
||||
<span class="icon">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/1280x960.png" alt="Placeholder image">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget
|
||||
metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis
|
||||
consectetur purus sit amet fermentum.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<footer class="card-footer">
|
||||
<a href="#" class="card-footer-item">Save</a>
|
||||
<a href="#" class="card-footer-item">Edit</a>
|
||||
<a href="#" class="card-footer-item">Delete</a>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">Component</p>
|
||||
<button class="card-header-icon" aria-label="more options">
|
||||
<span class="icon">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<a href="#">@bulmaio</a>. <a href="#css">#css</a> <a href="#responsive">#responsive</a>
|
||||
<br>
|
||||
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<a href="#" class="card-footer-item">Save</a>
|
||||
<a href="#" class="card-footer-item">Edit</a>
|
||||
<a href="#" class="card-footer-item">Delete</a>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title">
|
||||
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
|
||||
</p>
|
||||
<p class="subtitle">Jeff Atwood</p>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<p class="card-footer-item">
|
||||
<span> View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a> </span>
|
||||
</p>
|
||||
<p class="card-footer-item">
|
||||
<span> Share on <a href="#">Facebook</a> </span>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
150
docs/_includes/library/components/dropdown.html
Normal file
150
docs/_includes/library/components/dropdown.html
Normal file
@@ -0,0 +1,150 @@
|
||||
<div style="height: 20rem;">
|
||||
<div class="dropdown is-active">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
|
||||
<span>Dropdown button</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-menu" id="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content" role="presentation">
|
||||
<button role="menuitem" class="dropdown-item">Dropdown item</button>
|
||||
<a role="menuitem" class="dropdown-item"> Other dropdown item </a>
|
||||
<a role="menuitem" href="#" class="dropdown-item is-active"> Active dropdown item </a>
|
||||
<a role="menuitem" href="#" class="dropdown-item"> Other dropdown item </a>
|
||||
<hr class="dropdown-divider">
|
||||
<a role="menuitem" href="#" class="dropdown-item"> With a divider </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 20rem;">
|
||||
<div class="dropdown is-active">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
|
||||
<span>Content</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu2" role="menu">
|
||||
<div class="dropdown-content" role="presentation">
|
||||
<div role="presentation" class="dropdown-item">
|
||||
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
|
||||
</div>
|
||||
<hr role="presentation" class="dropdown-divider">
|
||||
<div role="presentation" class="dropdown-item">
|
||||
<p>You simply need to use a <code><div></code> instead.</p>
|
||||
</div>
|
||||
<hr role="presentation" class="dropdown-divider">
|
||||
<a role="menuitem" href="#" class="dropdown-item"> This is a link </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
|
||||
<span>Click me</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
|
||||
<div class="dropdown-content" role="presentation">
|
||||
<a role="menuitem" href="#" class="dropdown-item"> Overview </a>
|
||||
<a role="menuitem" href="#" class="dropdown-item"> Modifiers </a>
|
||||
<a role="menuitem" href="#" class="dropdown-item"> Grid </a>
|
||||
<a role="menuitem" href="#" class="dropdown-item"> Form </a>
|
||||
<a role="menuitem" href="#" class="dropdown-item"> Elements </a>
|
||||
<a role="menuitem" href="#" class="dropdown-item"> Components </a>
|
||||
<a role="menuitem" href="#" class="dropdown-item"> Layout </a>
|
||||
<hr class="dropdown-divider">
|
||||
<a role="menuitem" href="#" class="dropdown-item"> More </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown is-hoverable">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
|
||||
<span>Hover me</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
|
||||
<div class="dropdown-content" role="presentation">
|
||||
<div class="dropdown-item">
|
||||
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown is-active">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu5">
|
||||
<span>Left aligned</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-menu" id="dropdown-menu5" role="menu">
|
||||
<div class="dropdown-content" role="presentation">
|
||||
<div role="menuitem" class="dropdown-item">
|
||||
<p>The dropdown is <strong>left-aligned</strong> by default.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown is-right is-active">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu6">
|
||||
<span>Right aligned</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-menu" id="dropdown-menu6" role="menu">
|
||||
<div class="dropdown-content" role="presentation">
|
||||
<div role="menuitem" class="dropdown-item">
|
||||
<p>Add the <code>is-right</code> modifier for a <strong>right-aligned</strong> dropdown.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown is-up">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu7">
|
||||
<span>Dropup button</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-angle-up" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu7" role="menu">
|
||||
<div class="dropdown-content" role="presentation">
|
||||
<div class="dropdown-item">
|
||||
<p>
|
||||
You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
28
docs/_includes/library/components/menu.html
Normal file
28
docs/_includes/library/components/menu.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<aside class="menu">
|
||||
<p class="menu-label">General</p>
|
||||
<ul class="menu-list">
|
||||
<li><a>Dashboard</a></li>
|
||||
<li><a>Customers</a></li>
|
||||
</ul>
|
||||
<p class="menu-label">Administration</p>
|
||||
<ul class="menu-list">
|
||||
<li><a>Team Settings</a></li>
|
||||
<li>
|
||||
<a class="is-active">Manage Your Team</a>
|
||||
<ul>
|
||||
<li><a>Members</a></li>
|
||||
<li><a>Plugins</a></li>
|
||||
<li><a>Add a member</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a>Invitations</a></li>
|
||||
<li><a>Cloud Storage Environment Settings</a></li>
|
||||
<li><a>Authentication</a></li>
|
||||
</ul>
|
||||
<p class="menu-label">Transactions</p>
|
||||
<ul class="menu-list">
|
||||
<li><a>Payments</a></li>
|
||||
<li><a>Transfers</a></li>
|
||||
<li><a>Balance</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
91
docs/_includes/library/components/message.html
Normal file
91
docs/_includes/library/components/message.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<article class="message">
|
||||
<div class="message-header">
|
||||
<p>Hello World</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis
|
||||
placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
|
||||
<a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
|
||||
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem
|
||||
eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{% for status in site.data.colors.status %}
|
||||
<article class="message is-{{ status }}">
|
||||
<div class="message-header">
|
||||
<p>Hello World</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis
|
||||
placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
|
||||
<a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="message is-{{ status }}">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis
|
||||
placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
|
||||
<a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales.
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
|
||||
<article class="message is-small">
|
||||
<div class="message-header">
|
||||
<p>Hello World</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis
|
||||
placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
|
||||
<a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
|
||||
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem
|
||||
eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="message is-normal">
|
||||
<div class="message-header">
|
||||
<p>Hello World</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis
|
||||
placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
|
||||
<a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
|
||||
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem
|
||||
eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="message is-medium">
|
||||
<div class="message-header">
|
||||
<p>Hello World</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis
|
||||
placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
|
||||
<a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
|
||||
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem
|
||||
eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="message is-large">
|
||||
<div class="message-header">
|
||||
<p>Hello World</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis
|
||||
placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
|
||||
<a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
|
||||
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem
|
||||
eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
72
docs/_includes/library/components/modal.html
Normal file
72
docs/_includes/library/components/modal.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<div class="buttons">
|
||||
<button class="button js-modal-trigger" data-target="modal-empty">Empty</button>
|
||||
<button class="button js-modal-trigger" data-target="modal-image">Image</button>
|
||||
<button class="button js-modal-trigger" data-target="modal-box">Box</button>
|
||||
<button class="button js-modal-trigger" data-target="modal-card">Card</button>
|
||||
</div>
|
||||
|
||||
<div id="modal-empty" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<!-- Any other Bulma elements you want -->
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
|
||||
<div id="modal-image" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<p class="image is-4by3">
|
||||
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/1280x960.png" alt="">
|
||||
</p>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
|
||||
<div id="modal-box" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
|
||||
<div class="modal-content">
|
||||
<div class="box">
|
||||
<p>Modal JS example</p>
|
||||
<!-- Your content -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
|
||||
<div id="modal-card" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Modal title</p>
|
||||
<button class="delete" aria-label="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<div class="buttons">
|
||||
<button class="button is-success">Save changes</button>
|
||||
<button class="button">Cancel</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
112
docs/_includes/library/components/navbar.html
Normal file
112
docs/_includes/library/components/navbar.html
Normal file
@@ -0,0 +1,112 @@
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="https://bulma.io">
|
||||
<img alt="Placeholder" src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navbarBasicExample" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item"> Home </a>
|
||||
|
||||
<a class="navbar-item"> Documentation </a>
|
||||
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> More </a>
|
||||
|
||||
<div class="navbar-dropdown">
|
||||
<a class="navbar-item"> About </a>
|
||||
<a class="navbar-item"> Jobs </a>
|
||||
<a class="navbar-item"> Contact </a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item"> Report an issue </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<a class="button is-primary">
|
||||
<strong>Sign up</strong>
|
||||
</a>
|
||||
<a class="button is-light"> Log in </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar is-transparent">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="https://bulma.io">
|
||||
<img
|
||||
src="https://bulma.io/images/bulma-logo.png"
|
||||
alt="Bulma: a modern CSS framework based on Flexbox"
|
||||
width="112"
|
||||
height="28"
|
||||
>
|
||||
</a>
|
||||
<div class="navbar-burger" data-target="navbarExampleTransparentExample">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navbarExampleTransparentExample" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="https://bulma.io/"> Home </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link" href="https://bulma.io/documentation/overview/start/"> Docs </a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<a class="navbar-item" href="https://bulma.io/documentation/overview/start/"> Overview </a>
|
||||
<a class="navbar-item" href="https://bulma.io/documentation/overview/modifiers/"> Modifiers </a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item" href="https://bulma.io/documentation/columns/basics/"> Columns </a>
|
||||
<a class="navbar-item is-selected" href="https://bulma.io/documentation/layout/container/"> Layout </a>
|
||||
<a class="navbar-item" href="https://bulma.io/documentation/form/general/"> Form </a>
|
||||
<a class="navbar-item" href="https://bulma.io/documentation/elements/box/"> Elements </a>
|
||||
<a class="navbar-item" href="https://bulma.io/documentation/components/breadcrumb/"> Components </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a
|
||||
class="bd-tw-button button"
|
||||
data-social-network="Twitter"
|
||||
data-social-action="tweet"
|
||||
data-social-target="https://bulma.io"
|
||||
target="_blank"
|
||||
href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=https://bulma.io&via=jgthms"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
<span> Tweet </span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/releases/download/0.9.4/bulma-0.9.4.zip">
|
||||
<span class="icon">
|
||||
<i class="fas fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
127
docs/_includes/library/components/pagination.html
Normal file
127
docs/_includes/library/components/pagination.html
Normal file
@@ -0,0 +1,127 @@
|
||||
<nav class="pagination" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 1">1</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 45">45</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 47">47</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 86">86</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="pagination" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous is-disabled" title="This is the first page">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li>
|
||||
<a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 2">2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 3">3</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="pagination is-right" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="pagination is-rounded" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="pagination is-small" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="pagination is-medium" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="pagination is-large" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
108
docs/_includes/library/components/panel.html
Normal file
108
docs/_includes/library/components/panel.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<nav class="panel">
|
||||
<p class="panel-heading">Repositories</p>
|
||||
<div class="panel-block">
|
||||
<p class="control has-icons-left">
|
||||
<input class="input" type="text" placeholder="Search">
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<p class="panel-tabs">
|
||||
<a class="is-active">All</a>
|
||||
<a>Public</a>
|
||||
<a>Private</a>
|
||||
<a>Sources</a>
|
||||
<a>Forks</a>
|
||||
</p>
|
||||
<a class="panel-block is-active">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
bulma
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
marksheet
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
minireset.css
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
jgthms.github.io
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-code-branch" aria-hidden="true"></i>
|
||||
</span>
|
||||
daniellowtw/infboard
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-code-branch" aria-hidden="true"></i>
|
||||
</span>
|
||||
mojs
|
||||
</a>
|
||||
<label class="panel-block">
|
||||
<input type="checkbox">
|
||||
remember me
|
||||
</label>
|
||||
<div class="panel-block">
|
||||
<button class="button is-link is-outlined is-fullwidth">Reset all filters</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% for status in site.data.colors.status %}
|
||||
<article class="panel is-{{ status }}">
|
||||
<p class="panel-heading">
|
||||
{{ status | capitalize }}
|
||||
</p>
|
||||
<p class="panel-tabs">
|
||||
<a class="is-active">All</a>
|
||||
<a>Public</a>
|
||||
<a>Private</a>
|
||||
<a>Sources</a>
|
||||
<a>Forks</a>
|
||||
</p>
|
||||
<div class="panel-block">
|
||||
<p class="control has-icons-left">
|
||||
<input class="input is-{{ status }}" type="text" placeholder="Search">
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<a class="panel-block is-active">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
bulma
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
marksheet
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
minireset.css
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fas fa-book" aria-hidden="true"></i>
|
||||
</span>
|
||||
jgthms.github.io
|
||||
</a>
|
||||
</article>
|
||||
{% endfor %}
|
||||
308
docs/_includes/library/components/tabs.html
Normal file
308
docs/_includes/library/components/tabs.html
Normal file
@@ -0,0 +1,308 @@
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-right">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-small">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-medium">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-large">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
<li><a>Music</a></li>
|
||||
<li><a>Videos</a></li>
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-toggle">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-toggle is-toggle-rounded">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-file-alt"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-fullwidth">
|
||||
<ul>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
|
||||
<span>Left</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
|
||||
<span>Up</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span>Right</span>
|
||||
<span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-centered is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-toggle is-fullwidth">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-centered is-boxed is-medium">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tabs is-toggle is-fullwidth is-large">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
Reference in New Issue
Block a user