mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add new elements
This commit is contained in:
Jeremy Thomas
parent
02e5e3b71e
commit
c2654bd6c6
519
docs/index.html
519
docs/index.html
@ -494,125 +494,438 @@ route: index
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-asterisk"></i>
|
||||
</span>
|
||||
And all the usual <strong>elements</strong>
|
||||
And all the usual <strong>elements</strong> and <strong>components</strong>
|
||||
</a>
|
||||
</h3>
|
||||
<h4 class="subtitle is-4">Buttons, form controls, menus, tabs, titles, notifications, etc.</h4>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section is-medium" style="padding-top: 0;">
|
||||
<div class="container">
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="Image">
|
||||
</figure>
|
||||
<div class="column is-2">
|
||||
<h4 class="title is-4"><strong>Elements</strong></h4>
|
||||
</div>
|
||||
<div class="column is-10">
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4">Form</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-48x48">
|
||||
<img src="{{site.url}}/images/placeholders/96x96.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-4">Card</p>
|
||||
<p class="subtitle is-6">Subtitle</p>
|
||||
<div class="column is-9">
|
||||
<div class="field">
|
||||
<label class="label">Form label</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
</select>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<textarea class="textarea" placeholder="Textarea"></textarea>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">
|
||||
Checkbox
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<label class="radio">
|
||||
<input type="radio" name="question">
|
||||
Radio
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="question">
|
||||
Buttons
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<a class="button is-primary">Button</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4">Box</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
<div class="box">
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="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. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fa fa-reply"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fa fa-retweet"></i></span>
|
||||
</a>
|
||||
<a class="level-item">
|
||||
<span class="icon is-small"><i class="fa fa-heart"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4">Button</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control"><a class="button">Button</a></div>
|
||||
<div class="control"><a class="button is-white">White</a></div>
|
||||
<div class="control"><a class="button is-light">Light</a></div>
|
||||
<div class="control"><a class="button is-dark">Dark</a></div>
|
||||
<div class="control"><a class="button is-black">Black</a></div>
|
||||
<div class="control"><a class="button is-link">Link</a></div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
|
||||
<br>
|
||||
<small>11:09 PM - 1 Jan 2016</small>
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control"><a class="button is-primary">Primary</a></div>
|
||||
<div class="control"><a class="button is-info">Info</a></div>
|
||||
<div class="control"><a class="button is-success">Success</a></div>
|
||||
<div class="control"><a class="button is-warning">Warning</a></div>
|
||||
<div class="control"><a class="button is-danger">Danger</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4">Notification</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
<div class="notification">
|
||||
<button class="delete"></button>
|
||||
Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <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. Sit amet,
|
||||
consectetur adipiscing elit
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4">Tags</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
<span class="tag is-black">Black</span>
|
||||
<span class="tag is-dark">Dark</span>
|
||||
<span class="tag is-light">Light</span>
|
||||
<span class="tag is-white">White</span>
|
||||
<span class="tag is-primary">Primary</span>
|
||||
<span class="tag is-info">Info</span>
|
||||
<span class="tag is-success">Success</span>
|
||||
<span class="tag is-warning">Warning</span>
|
||||
<span class="tag is-danger">Danger</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="title">Title</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<span class="select">
|
||||
<select>
|
||||
<option>Dropdown</option>
|
||||
</select>
|
||||
</span>
|
||||
</p>
|
||||
<p class="control is-expanded">
|
||||
<input class="input" type="text" placeholder="Text input">
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">
|
||||
Checkbox
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<label class="radio">
|
||||
<input type="radio" name="question">
|
||||
Radio
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="question">
|
||||
Buttons
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<a class="button is-primary">Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="tabs is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fa fa-inbox"></i></span>
|
||||
<span>Inbox</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fa fa-user"></i></span>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fa fa-comments-o"></i></span>
|
||||
<span>Comments</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fa fa-cog"></i></span>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p class="block">
|
||||
<span class="tag is-dark">Tag<a class="delete is-small"></a></span>
|
||||
<span class="tag is-info">Two<a class="delete is-small"></a></span>
|
||||
<span class="tag is-danger">Three<a class="delete is-small"></a></span>
|
||||
</p>
|
||||
<div class="message is-warning">
|
||||
<div class="message-header">
|
||||
Hello world
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-2">
|
||||
<h4 class="title is-4"><strong>Components</strong></h4>
|
||||
</div>
|
||||
<div class="column is-10">
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4">Card</h4>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Message
|
||||
<div class="column is-9">
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img src="http://localhost:4000/images/placeholders/1280x960.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-48x48">
|
||||
<img src="http://localhost:4000/images/placeholders/96x96.png" alt="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>@bulmaio</a>.
|
||||
<a>#css</a> <a>#responsive</a>
|
||||
<br>
|
||||
<small>11:09 PM - 1 Jan 2016</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-half">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notification is-success">
|
||||
<a class="delete"></a>
|
||||
Success!
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4">Dropdown</h4>
|
||||
</div>
|
||||
<div class="column is-9" style="height: 16rem;">
|
||||
<div class="dropdown is-active">
|
||||
<div class="dropdown-trigger">
|
||||
<a class="button">
|
||||
<span>Dropdown button</span>
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-angle-down"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-content">
|
||||
<a class="dropdown-item">
|
||||
Dropdown item
|
||||
</a>
|
||||
<a class="dropdown-item">
|
||||
Other dropdown item
|
||||
</a>
|
||||
<a class="dropdown-item is-active">
|
||||
Active dropdown item
|
||||
</a>
|
||||
<a class="dropdown-item">
|
||||
Other item
|
||||
</a>
|
||||
<hr class="dropdown-divider">
|
||||
<a class="dropdown-item">
|
||||
With a divider
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4">Message</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
<article class="message is-primary">
|
||||
<div class="message-header">
|
||||
<p>Primary</p>
|
||||
<button class="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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4">Pagination</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
<nav class="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li>
|
||||
<a class="pagination-link">1</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link">45</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link is-current">46</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link">47</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link">86</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4">Panel</h4>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<nav class="panel" style="max-width: 320px;">
|
||||
<p class="panel-heading">
|
||||
Repositories
|
||||
</p>
|
||||
<div class="panel-block">
|
||||
<p class="control has-icons-left">
|
||||
<input class="input is-small" type="text" placeholder="Search">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-search"></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="fa fa-book"></i>
|
||||
</span>
|
||||
bulma
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fa fa-book"></i>
|
||||
</span>
|
||||
marksheet
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fa fa-book"></i>
|
||||
</span>
|
||||
minireset.css
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fa fa-book"></i>
|
||||
</span>
|
||||
jgthms.github.io
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fa fa-code-fork"></i>
|
||||
</span>
|
||||
daniellowtw/infBoard
|
||||
</a>
|
||||
<a class="panel-block">
|
||||
<span class="panel-icon">
|
||||
<i class="fa fa-code-fork"></i>
|
||||
</span>
|
||||
mojs
|
||||
</a>
|
||||
<label class="panel-block">
|
||||
<input type="checkbox">
|
||||
Remember me
|
||||
</label>
|
||||
<div class="panel-block">
|
||||
<button class="button is-primary is-outlined is-fullwidth">
|
||||
Reset all filters
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
<h4 class="subtitle is-4">Tabs</h4>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
<div class="tabs is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fa fa-image"></i></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fa fa-music"></i></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fa fa-film"></i></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user