bulma/docs/grid.html
2018-02-13 09:38:04 +00:00

184 lines
3.6 KiB
HTML

---
---
<!DOCTYPE html>
<html lang="en" class="has-navbar-fixed-top {% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
{% include head.html %}
<body>
<section class="section grid-container">
<div class="grid has-4-columns">
<div class="cell is-4-wide">
Header
</div>
<div class="cell is-1-wide">
Side
</div>
<div class="cell is-3-wide">
Main: Donec orci arcu, consectetur quis justo vel, dapibus laoreet tellus. In non nunc sed risus commodo porta non quis arcu. Praesent ornare ante vel placerat porta. Sed interdum lacus id gravida tempor. Proin rhoncus, sapien in dictum molestie, massa lorem vestibulum elit, a efficitur nibh odio id nisl. Morbi venenatis enim sed quam commodo, vel viverra libero tempus. Etiam aliquet, erat non vulputate pellentesque, sapien lorem auctor nibh, sed tempus orci tortor id ex. Cras gravida quis arcu id sagittis. Proin vitae elit sit amet odio vehicula fringilla ut vitae urna. Sed mollis ornare mauris, quis aliquam elit facilisis id. Donec ante dolor, iaculis a laoreet ac, sollicitudin sed tortor. Donec posuere, arcu sed elementum elementum, nunc tellus ultrices erat, eget malesuada erat orci nec nulla. Cras vehicula arcu interdum, bibendum libero vitae, tincidunt erat. Cras ut lectus quis quam tempor dictum sit amet vel orci.
</div>
<div class="cell is-4-wide">
Footer
</div>
</div>
<h2 class="title">2 columns</h2>
<div class="grid has-2-columns">
<div class="cell">
Cell
</div>
<div class="cell is-2-wide">
Cell
</div>
<div class="cell is-4-tall">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
</div>
<h2 class="title">3 columns</h2>
<div class="grid has-3-columns">
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
</div>
<h2 class="title">4 columns</h2>
<div class="grid has-4-columns">
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
</div>
<h2 class="title">5 columns</h2>
<div class="grid has-5-columns">
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
</div>
<h2 class="title">6 columns</h2>
<div class="grid has-6-columns">
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
</div>
</section>
<script src="{{ site.url }}/lib/grid.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
</body>
</html>