initial commit: migrated from FossilSCM to git
This commit is contained in:
Brian Sakal
@@ -0,0 +1,472 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Flexbox grid - Layout - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Layout includes flexbox based responsive grid system with 12 columns. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/layout/grid.html">
|
||||
<meta property="og:title" content="Flexbox grid - Layout - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Layout includes flexbox based responsive grid system with 12 columns. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/layout/grid.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="grid">
|
||||
<h3 class="s-title">Flexbox grid<a class="anchor" href="#grid" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Layout includes flexbox based responsive grid system with 12 columns.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column">
|
||||
<div class="bg-primary text-secondary docs-block"></div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bg-secondary text-primary docs-block"></div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bg-primary text-secondary docs-block"></div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bg-secondary text-primar docs-block"></div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bg-primary text-secondary docs-block"></div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bg-secondary text-primar docs-block"></div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bg-primary text-secondary docs-block"></div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bg-secondary text-primar docs-block"></div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bg-primary text-secondary docs-block"></div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bg-secondary text-primar docs-block"></div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bg-primary text-secondary docs-block"></div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bg-secondary text-primar docs-block"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column col-12">
|
||||
<div class="bg-gray docs-block">col-12 (100%)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column col-9">
|
||||
<div class="bg-gray docs-block">col-9 (75%)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column col-6">
|
||||
<div class="bg-gray docs-block">col-6 (50%)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column col-3">
|
||||
<div class="bg-gray docs-block">col-3 (25%)</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- flexbox grid example --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-3"</span>></span>col-3<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-2"</span>></span>col-2<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-1"</span>></span>col-1<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<p>Add the <code>columns</code> class to a container with the <code>container</code> class.
|
||||
And add any element you want with the <code>column</code> class inside the container. These columns will take up the space equally.
|
||||
You can specific the width of each column by adding class <code>col-<1-12></code>.
|
||||
</p>
|
||||
<h4 class="s-subtitle" id="grid-gapless">Gapless grid<a class="anchor" href="#grid-gapless" aria-hidden="true">#</a></h4>
|
||||
<p>And you can add the <code>col-gapless</code> class to the <code>columns</code> to have gapless columns.</p>
|
||||
<div class="docs-demo columns col-gapless">
|
||||
<div class="column col-6">
|
||||
<div class="bg-gray docs-block">col-6 (gapless)</div>
|
||||
</div>
|
||||
<div class="column col-6">
|
||||
<div class="bg-secondary text-primary docs-block">col-6 (gapless)</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- gapless columns --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns col-gapless"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<p>By default, Spectre grid has multi-line flexbox enabled. You can add the <code>col-oneline</code> class to <code>columns</code> to make all its child columns positioned in the same single row.</p>
|
||||
<div class="docs-demo columns col-oneline">
|
||||
<div class="column col-8">
|
||||
<div class="bg-gray docs-block">col-8</div>
|
||||
</div>
|
||||
<div class="column col-8">
|
||||
<div class="bg-gray docs-block">col-8</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- one line columns --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns col-oneline"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-8"</span>></span>col-8<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-8"</span>></span>col-8<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="grid-nesting">Grid nesting<a class="anchor" href="#grid-nesting" aria-hidden="true">#</a></h4>
|
||||
<p>To nest grids, add the new <code>columns</code> and <code>column</code> structure within an existing column.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6">
|
||||
<div class="bg-gray docs-block">col-6</div>
|
||||
<div class="columns">
|
||||
<div class="column col-6">
|
||||
<div class="bg-secondary text-primary docs-block">col-6</div>
|
||||
</div>
|
||||
<div class="column col-6">
|
||||
<div class="bg-secondary text-primary docs-block">col-6</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6">
|
||||
<div class="bg-gray docs-block">col-6</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- grid nesting example --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>></span>col-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="grid-offset">Column offset<a class="anchor" href="#grid-offset" aria-hidden="true">#</a></h4>
|
||||
<p>
|
||||
The Flexbox grid provides margin auto utilities to set offset.
|
||||
There are <code>col-mx-auto</code>, <code>col-ml-auto</code> and <code>col-mr-auto</code> to set margins between columns without using empty columns.
|
||||
</p>
|
||||
<div class="columns text-center">
|
||||
<div class="column col-2">
|
||||
<div class="bg-gray docs-block">col-2</div>
|
||||
</div>
|
||||
<div class="column col-4 col-mx-auto">
|
||||
<div class="bg-secondary text-primary docs-block">col-4 col-mx-auto</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns text-center">
|
||||
<div class="column col-2">
|
||||
<div class="bg-gray docs-block">col-2</div>
|
||||
</div>
|
||||
<div class="column col-4 col-ml-auto">
|
||||
<div class="bg-secondary text-primary docs-block">col-4 col-ml-auto</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns text-center">
|
||||
<div class="column col-4 col-ml-auto">
|
||||
<div class="bg-secondary text-primary docs-block">col-4 col-ml-auto</div>
|
||||
</div>
|
||||
<div class="column col-2">
|
||||
<div class="bg-gray docs-block">col-2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns text-center">
|
||||
<div class="column col-4 col-mx-auto">
|
||||
<div class="bg-secondary text-primary docs-block">col-4 col-mx-auto</div>
|
||||
</div>
|
||||
<div class="column col-2">
|
||||
<div class="bg-gray docs-block">col-2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns text-center">
|
||||
<div class="column col-4 col-mr-auto">
|
||||
<div class="bg-secondary text-primary docs-block">col-4 col-mr-auto</div>
|
||||
</div>
|
||||
<div class="column col-2">
|
||||
<div class="bg-gray docs-block">col-2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns text-center">
|
||||
<div class="column col-4 col-mx-auto">
|
||||
<div class="bg-secondary text-primary docs-block">col-4 col-mx-auto</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- grid offset example --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-4 col-mr-auto"</span>></span>col-4 col-mr-auto<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-2"</span>></span>col-2<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="column-auto">Auto width column<a class="anchor" href="#column-auto" aria-hidden="true">#</a></h4>
|
||||
<p>You can add the <code>col-auto</code> class to the <code>column</code> to have auto width columns.
|
||||
There are <code>col-xl-auto</code>, <code>col-lg-auto</code>, <code>col-md-auto</code>, <code>col-sm-auto</code> and <code>col-xs-auto</code> to set auto width in different viewport sizes.
|
||||
</p>
|
||||
<div class="columns">
|
||||
<div class="column col-auto">
|
||||
<div class="bg-secondary text-primary docs-block">col-auto</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bg-gray docs-block">col</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column col-lg-auto col-6">
|
||||
<div class="bg-secondary text-primary docs-block">col-lg-auto</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="bg-gray docs-block">col</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- auto width column example --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-auto"</span>></span>col-auto<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span>col<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-lg-auto col-6"</span>></span>col-lg-auto<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>></span>col<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,277 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Hero - Layout - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="The Hero container shows key featured content or information. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/layout/hero.html">
|
||||
<meta property="og:title" content="Hero - Layout - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="The Hero container shows key featured content or information. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/layout/hero.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="hero">
|
||||
<h3 class="s-title">Hero<a class="anchor" href="#hero" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>The Hero container shows key featured content or information.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column">
|
||||
<div class="hero bg-gray">
|
||||
<div class="hero-body">
|
||||
<h1>Hero title</h1>
|
||||
<p>This is a hero example</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- hero example --></span>
|
||||
</code></pre>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column">
|
||||
<div class="hero hero-sm bg-dark">
|
||||
<div class="hero-body">
|
||||
<h1>Hero title</h1>
|
||||
<p>This is a hero example</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column">
|
||||
<div class="hero hero-lg bg-primary">
|
||||
<div class="hero-body">
|
||||
<h1>Hero title</h1>
|
||||
<p>This is a hero example</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,300 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Navbar - Layout - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Navbar is a layout container that appears in the header of apps and websites. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/layout/navbar.html">
|
||||
<meta property="og:title" content="Navbar - Layout - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Navbar is a layout container that appears in the header of apps and websites. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/layout/navbar.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="navbar">
|
||||
<h3 class="s-title">Navbar<a class="anchor" href="#navbar" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Navbar is a layout container that appears in the header of apps and websites.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column">
|
||||
<div class="navbar">
|
||||
<div class="navbar-section"><a class="navbar-brand text-bold mr-2" href="#navbar">SPECTRE.CSS</a><a class="btn btn-link" href="#navbar">Docs</a><a class="btn btn-link" href="https://github.com/picturepan2/spectre">GitHub</a></div>
|
||||
<div class="navbar-section">
|
||||
<div class="input-group input-inline">
|
||||
<input class="form-input" type="text" placeholder="search">
|
||||
<button class="btn btn-primary input-group-btn">Search</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements.
|
||||
Each section with the <code>navbar-section</code> class will be evenly distributed in the container.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">header</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-brand mr-2"</span>></span>Spectre.css<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>Docs<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>GitHub<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">section</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group input-inline"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"search"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary input-group-btn"</span>></span>Search<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">section</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">header</span>></span>
|
||||
</code></pre>
|
||||
<p>You can use <code>navbar-center</code> class to have a centered section.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<div class="navbar">
|
||||
<div class="navbar-section"><a class="btn btn-link" href="#navbar">Docs</a><a class="btn btn-link" href="#navbar">Examples</a></div>
|
||||
<div class="navbar-center"><img src="../img/spectre-logo.svg" alt="Spectre.css"></div>
|
||||
<div class="navbar-section"><a class="btn btn-link" href="https://twitter.com/spectrecss">Twitter</a><a class="btn btn-link" href="https://github.com/picturepan2/spectre">GitHub</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">header</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>Docs<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>Examples<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">section</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-center"</span>></span>
|
||||
<span class="hljs-comment"><!-- centered logo or brand --></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">section</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">section</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-section"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>Twitter<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>GitHub<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">section</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">header</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,538 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Responsive - Layout - Spectre.css CSS Framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive layout grid system and responsive visibility utilities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="author" content="Yan Zhu">
|
||||
<meta property="og:url" content="https://picturepan2.github.io/spectre/layout/responsive.html">
|
||||
<meta property="og:title" content="Responsive - Layout - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Responsive layout grid system and responsive visibility utilities. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@spectrecss">
|
||||
<meta name="twitter:creator" content="@picturepan2">
|
||||
<link rel="shortcut icon" href="../img/favicons/favicon.ico">
|
||||
<link rel="icon" href="../img/favicons/favicon.png">
|
||||
<link rel="stylesheet" href="../dist/spectre.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-icons.min.css">
|
||||
<link rel="stylesheet" href="../dist/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="../dist/docs.min.css">
|
||||
<link rel="canonical" href="https://picturepan2.github.io/spectre/layout/responsive.html">
|
||||
</head>
|
||||
<body>
|
||||
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
||||
<div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a>
|
||||
<div class="btns d-flex">
|
||||
<input class="docs-search form-input" type="text" placeholder="Search Docs"><a class="btn ml-1" href="https://www.paypal.me/picturepan2" target="_blank">PayPal</a><a class="btn btn-primary ml-1" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-sidebar off-canvas-sidebar" id="sidebar">
|
||||
<div class="docs-brand"><a class="docs-logo" href="../index.html"><img src="../img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
||||
<h2>SPECTRE</h2><small class="label label-secondary text-bold">DOCS</small></a>
|
||||
</div>
|
||||
<div class="docs-nav">
|
||||
<div class="accordion-container">
|
||||
<div class="accordion">
|
||||
<input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../getting-started/installation.html">Installation</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/custom.html">Custom version</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/browsers.html">Browser support</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../getting-started/whatsnew.html">What's new</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../elements/typography.html">Typography</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/tables.html">Tables</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/buttons.html">Buttons</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/forms.html">Forms</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/icons.html">Icons.css</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/labels.html">Labels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/code.html">Code</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../elements/media.html">Media</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
|
||||
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../layout/grid.html">Flexbox grid</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/responsive.html">Responsive</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/hero.html">Hero</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../layout/navbar.html">Navbar</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-components">Components</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../components/accordions.html">Accordions</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/avatars.html">Avatars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/badges.html">Badges</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/bars.html">Bars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/breadcrumbs.html">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/cards.html">Cards</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/chips.html">Chips</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/empty.html">Empty states</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/menu.html">Menu</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/modals.html">Modals</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/nav.html">Nav</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/pagination.html">Pagination</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/panels.html">Panels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/popovers.html">Popovers</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/steps.html">Steps</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tabs.html">Tabs</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tiles.html">Tiles</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/toasts.html">Toasts</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../components/tooltips.html">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-utilities">Utilities</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../utilities/colors.html">Colors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/cursors.html">Cursors</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/display.html">Display</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/divider.html">Divider</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/loading.html">Loading</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/position.html">Position</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/shapes.html">Shapes</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../utilities/text.html">Text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion">
|
||||
<input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
|
||||
<label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label>
|
||||
<div class="accordion-body">
|
||||
<ul class="menu menu-nav">
|
||||
<li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/carousels.html">Carousels</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/comparison.html">Comparison sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/filters.html">Filters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/meters.html">Meters</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/off-canvas.html">Off-canvas</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/parallax.html">Parallax</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/progress.html">Progress</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/sliders.html">Sliders</a>
|
||||
</li>
|
||||
<li class="menu-item"><a href="../experimentals/timelines.html">Timelines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><a class="off-canvas-overlay" href="#close"></a>
|
||||
<div class="off-canvas-content">
|
||||
<div class="docs-content" id="content">
|
||||
<div class="container" id="responsive">
|
||||
<h3 class="s-title">Responsive<a class="anchor" href="#responsive" aria-hidden="true">#</a></h3>
|
||||
<div class="docs-ad">
|
||||
<div class="hide-md text-center">
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
<div class="show-md text-center">
|
||||
<!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins>
|
||||
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
|
||||
</div>
|
||||
</div>
|
||||
<p>Spectre provides a neat responsive layout grid system and responsive visibility utilities.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-10 col-lg-8 col-md-6 col-sm-4">
|
||||
<div class="bg-gray docs-block">
|
||||
<div class="text-primary">col-10</div>
|
||||
<div class="text-dark hide-lg">col-lg-8</div>
|
||||
<div class="text-primary show-lg">col-lg-8</div>
|
||||
<div class="text-dark hide-md">col-md-6</div>
|
||||
<div class="text-primary show-md">col-md-6</div>
|
||||
<div class="text-dark hide-sm">col-sm-4</div>
|
||||
<div class="text-primary show-sm">col-sm-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-2 col-lg-4 col-md-6 col-sm-8">
|
||||
<div class="bg-gray docs-block">
|
||||
<div class="text-primary">col-2</div>
|
||||
<div class="text-dark hide-lg">col-lg-4</div>
|
||||
<div class="text-primary show-lg">col-lg-4</div>
|
||||
<div class="text-dark hide-md">col-md-6</div>
|
||||
<div class="text-primary show-md">col-md-6</div>
|
||||
<div class="text-dark hide-sm">col-sm-8</div>
|
||||
<div class="text-primary show-sm">col-sm-8</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>There are <code>col-xs-<1-12></code>, <code>col-sm-<1-12></code>, <code>col-md-<1-12></code>, <code>col-lg-<1-12></code> and <code>col-xl-<1-12></code> available for flexible grid across mobile, tablet and desktop viewport usage.</p>
|
||||
<ul>
|
||||
<li><code>col-xs-<1-12></code> apply to window width smaller than or equal to <strong>480px</strong>.</li>
|
||||
<li><code>col-sm-<1-12></code> apply to window width smaller than or equal to <strong>600px</strong>.</li>
|
||||
<li><code>col-md-<1-12></code> apply to window width smaller than or equal to <strong>840px</strong>.</li>
|
||||
<li><code>col-lg-<1-12></code> apply to window width smaller than or equal to <strong>960px</strong>.</li>
|
||||
<li><code>col-xl-<1-12></code> apply to window width smaller than or equal to <strong>1280px</strong>.</li>
|
||||
<li><code>col-<1-12></code> apply to all window width, including the width wider than <strong>1280px</strong>.</li>
|
||||
</ul>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-xs-6"</span>></span>col-xs-6<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-xs-3"</span>></span>col-xs-3<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-xs-3"</span>></span>col-xs-3<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="responsive-container">Responsive container<a class="anchor" href="#responsive-container" aria-hidden="true">#</a></h4>
|
||||
<p>
|
||||
The responsive layout also provides fixed-width containers.
|
||||
Use <code>grid-xs</code>(480px), <code>grid-sm</code>(600px), <code>grid-md</code>(840px), <code>grid-lg</code>(960px) or <code>grid-xl</code>(1280px) to the container for a fixed-width container with the specific max-width.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- 100% width container with max-width set to grid-lg (960px) --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container grid-lg"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="responsive-visibility">Responsive visibility<a class="anchor" href="#responsive-visibility" aria-hidden="true">#</a></h4>
|
||||
<p>The responsive visibility utilities help show and hide elements on specific viewport sizes.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<table class="docs-table table table-striped text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>size-xs</th>
|
||||
<th>size-sm</th>
|
||||
<th>size-md</th>
|
||||
<th>size-lg</th>
|
||||
<th>size-xl</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-left">hide-xs</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-left">hide-sm</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-left">hide-md</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-left">hide-lg</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-left">hide-xl</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<p>For hiding elements on specific viewport sizes, there are classes <code>hide-xs</code>, <code>hide-sm</code>, <code>hide-md</code>, <code>hide-lg</code> and <code>hide-xl</code> available.</p>
|
||||
<ul>
|
||||
<li><code>hide-xs</code> hides elements when the window width is smaller than or equal to <strong>480px</strong>.</li>
|
||||
<li><code>hide-sm</code> hides elements when the window width is smaller than or equal to <strong>600px</strong>.</li>
|
||||
<li><code>hide-md</code> hides elements when the window width is smaller than or equal to <strong>840px</strong>.</li>
|
||||
<li><code>hide-lg</code> hides elements when the window width is smaller than or equal to <strong>960px</strong>.</li>
|
||||
<li><code>hide-xl</code> hides elements when the window width is smaller than or equal to <strong>1280px</strong>.</li>
|
||||
</ul>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<table class="docs-table table table-striped text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>size-xs</th>
|
||||
<th>size-sm</th>
|
||||
<th>size-md</th>
|
||||
<th>size-lg</th>
|
||||
<th>size-xl</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-left">show-xs</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-left">show-sm</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-left">show-md</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-left">show-lg</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-secondary docs-dot"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-left">show-xl</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="bg-primary docs-dot"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<p>For showing elements on specific viewport sizes, there are classes <code>show-xs</code>, <code>show-sm</code>, <code>show-md</code>, <code>show-lg</code> and <code>show-xl</code> available.</p>
|
||||
<ul>
|
||||
<li><code>show-xs</code> shows elements when the window width is smaller than or equal to <strong>480px</strong>.</li>
|
||||
<li><code>show-sm</code> shows elements when the window width is smaller than or equal to <strong>600px</strong>.</li>
|
||||
<li><code>show-md</code> shows elements when the window width is smaller than or equal to <strong>840px</strong>.</li>
|
||||
<li><code>show-lg</code> shows elements when the window width is smaller than or equal to <strong>960px</strong>.</li>
|
||||
<li><code>show-xl</code> shows elements when the window width is smaller than or equal to <strong>1280px</strong>.</li>
|
||||
</ul>
|
||||
<h4 class="s-subtitle" id="responsive-resizer">Responsive Resizer<a class="anchor" href="#responsive-resizer" aria-hidden="true">#</a></h4>
|
||||
<p>
|
||||
Spectre also has a responsive web test tool Responsive Resizer.
|
||||
You can clone the <a href="https://github.com/picturepan2/responsive-resizer" target="_blank">GitHub Repo</a> to use it locally or use it online.
|
||||
</p>
|
||||
<p><a class="btn btn-primary" href="https://picturepan2.github.io/responsive-resizer/" target="_blank">Responsive Resizer</a></p>
|
||||
<div class="docs-ad docs-ad-sidebar text-center">
|
||||
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-footer container grid-lg" id="copyright">
|
||||
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · <a href="https://www.patreon.com/spectrecss" target="_blank">Patreon Sponsor</a> · Version <span class="version"></span></p>
|
||||
<p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: 'bede06373c5a1fa3c1bbe8401e24c653',
|
||||
indexName: 'picturepan2_spectre',
|
||||
inputSelector: '.docs-search',
|
||||
debug: true
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-2702768-8', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user