initial commit: migrated from FossilSCM to git
This commit is contained in:
Brian Sakal
@@ -0,0 +1,388 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Buttons - Elements - 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="Buttons include simple button styles for actions in different types and sizes. 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/elements/buttons.html">
|
||||
<meta property="og:title" content="Buttons - Elements - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Buttons include simple button styles for actions in different types and sizes. 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/elements/buttons.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="" checked="checked"/>
|
||||
<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=""/>
|
||||
<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="buttons">
|
||||
<h3 class="s-title">Buttons<a class="anchor" href="#buttons" 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>Buttons include simple button styles for actions in different types and sizes.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<button class="btn">default button</button>
|
||||
<button class="btn btn-primary">primary button</button>
|
||||
<button class="btn btn-link">link button</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add the <code>btn</code> class to <a>, <input> or <button> elements for a default button.
|
||||
There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span>default button<span class="hljs-tag"></<span class="hljs-name">button</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"</span>></span>primary button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>link button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="buttons-colors">Button colors<a class="anchor" href="#buttons-colors" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<button class="btn btn-success">success button</button>
|
||||
<button class="btn btn-error">error button</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add the <code>btn-success</code> or <code>btn-error</code> class for success (green) or error (red) button color.
|
||||
If you need more button colors, please use <a href="../getting-started/custom.html#variables-buttons">button mixins</a> to create your own button color variants.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-success"</span>></span>success button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-error"</span>></span>error button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="buttons-sizes">Button sizes<a class="anchor" href="#buttons-sizes" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<button class="btn btn-primary btn-lg">large <i class="icon icon-arrow-down"></i></button>
|
||||
<button class="btn btn-primary btn-lg">large button</button>
|
||||
</div>
|
||||
<div class="column col-12">
|
||||
<button class="btn btn-primary">normal <i class="icon icon-arrow-down"></i></button>
|
||||
<button class="btn btn-primary">normal button</button>
|
||||
</div>
|
||||
<div class="column col-12">
|
||||
<button class="btn btn-primary btn-sm">small <i class="icon icon-arrow-down"></i></button>
|
||||
<button class="btn btn-primary btn-sm">small button</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add the <code>btn-sm</code> or <code>btn-lg</code> class for small or large button size.
|
||||
Also, you can add the <code>btn-block</code> class for a full-width button.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-lg"</span>></span>large button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-sm"</span>></span>small button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-block"</span>></span>block button<span class="hljs-tag"></<span class="hljs-name">button</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 btn-lg"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> large<span class="hljs-tag"></<span class="hljs-name">button</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"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> normal<span class="hljs-tag"></<span class="hljs-name">button</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 btn-sm"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> small<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
</code></pre>
|
||||
<p>Please note that you could use the <code>btn-action</code> class for a square button, or add another <code>s-circle</code> class for a round button, which is often used as a Float Action Button (FAB).</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-xs-12">
|
||||
<button class="btn btn-action btn-primary btn-lg"><i class="icon icon-menu"></i></button>
|
||||
<button class="btn btn-action btn-primary"><i class="icon icon-menu"></i></button>
|
||||
<button class="btn btn-action btn-primary btn-sm"><i class="icon icon-menu"></i></button>
|
||||
</div>
|
||||
<div class="column col-xs-12">
|
||||
<button class="btn btn-action btn-primary btn-lg s-circle"><i class="icon icon-arrow-up"></i></button>
|
||||
<button class="btn btn-action btn-primary s-circle"><i class="icon icon-arrow-up"></i></button>
|
||||
<button class="btn btn-action btn-primary btn-sm s-circle"><i class="icon icon-arrow-up"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action s-circle"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="buttons-states">Button states<a class="anchor" href="#buttons-states" aria-hidden="true">#</a></h4>
|
||||
<p>Add the <code>active</code> class for active button state style.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<button class="btn active">default active</button>
|
||||
<button class="btn btn-primary active">primary active</button>
|
||||
<button class="btn btn-link active">link active</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for disabled button state style.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<button class="btn disabled" tabindex="-1">default disabled</button>
|
||||
<button class="btn btn-primary" disabled="" tabindex="-1">primary disabled</button>
|
||||
<button class="btn btn-link" disabled="" tabindex="-1">link disabled</button>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- buttons with disabled state --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn disabled"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>></span>disabled button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>></span>disabled button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
</code></pre>
|
||||
<p>A button with the <code>loading</code> class can show loading indicator.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<button class="btn loading">default button</button>
|
||||
<button class="btn btn-primary loading">primary button</button>
|
||||
<button class="btn btn-link loading">link button</button>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- buttons with loading state --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn loading"</span>></span>button<span class="hljs-tag"></<span class="hljs-name">button</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 loading"</span>></span>primary button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="buttons-groups">Button groups<a class="anchor" href="#buttons-groups" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-md-12">
|
||||
<div class="btn-group">
|
||||
<button class="btn">first button</button>
|
||||
<button class="btn">second button</button>
|
||||
<button class="btn">third button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 col-md-12">
|
||||
<div class="btn-group btn-group-block">
|
||||
<button class="btn btn-primary">first button</button>
|
||||
<button class="btn btn-primary">second button</button>
|
||||
<button class="btn btn-primary">third button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 col-md-12">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm active">first button</button>
|
||||
<button class="btn btn-sm">second button</button>
|
||||
<button class="btn btn-sm">third button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 col-md-12">
|
||||
<div class="btn-group btn-group-block">
|
||||
<button class="btn btn-primary btn-sm active">first button</button>
|
||||
<button class="btn btn-primary btn-sm">second button</button>
|
||||
<button class="btn btn-primary btn-sm">third button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>If you want to use buttons as a group, add the <code>btn-group</code> class to the container.
|
||||
You can add the <code>btn-group-block</code> class for a full-width button group.
|
||||
</p>
|
||||
<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">"btn-group btn-group-block"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span>first button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span>second button<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span>third button<span class="hljs-tag"></<span class="hljs-name">button</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,265 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Code - Elements - 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="Code is used for styling inline and multiline code snippets. 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/elements/code.html">
|
||||
<meta property="og:title" content="Code - Elements - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Code is used for styling inline and multiline code snippets. 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/elements/code.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="" checked="checked"/>
|
||||
<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=""/>
|
||||
<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="code">
|
||||
<h3 class="s-title">Code<a class="anchor" href="#code" 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>Code is used for styling inline and multiline code snippets.</p>
|
||||
<h4 class="s-subtitle" id="code-inline">Inline code<a class="anchor" href="#code-inline" aria-hidden="true">#</a></h4>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- inline code --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">code</span>></span>code<span class="hljs-tag"></<span class="hljs-name">code</span>></span>
|
||||
</code></pre>
|
||||
<p>For inline code, you can use the <code> element. </p>
|
||||
<h4 class="s-subtitle" id="code-snippet">Code snippet<a class="anchor" href="#code-snippet" aria-hidden="true">#</a></h4>
|
||||
<p>For multiline code snippet blocks, you can use <pre> with the <code>code</code> class as a container, and add <code> inside it.
|
||||
The <code>data-lang</code> attribute is rendered as the language name in the top right.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- code snippets --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span>
|
||||
Submit
|
||||
<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
</code></pre>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">pre</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"code"</span> <span class="hljs-attr">data-lang</span>=<span class="hljs-string">"HTML"</span>></span><span class="hljs-tag"><<span class="hljs-name">code</span>></span><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"com"</span>></span>&lt;!-- code snippets --&gt;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
||||
&lt;<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tag"</span>></span>button<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"atn"</span>></span>class<span class="hljs-tag"></<span class="hljs-name">span</span>></span>=<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"atv"</span>></span>&quot;btn&quot;<span class="hljs-tag"></<span class="hljs-name">span</span>></span>&gt;
|
||||
Submit
|
||||
&lt;<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tag"</span>></span>/button<span class="hljs-tag"></<span class="hljs-name">span</span>></span>&gt;
|
||||
<span class="hljs-tag"></<span class="hljs-name">code</span>></span><span class="hljs-tag"></<span class="hljs-name">pre</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,989 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Forms - Elements - 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="Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. 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/elements/forms.html">
|
||||
<meta property="og:title" content="Forms - Elements - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. 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/elements/forms.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="" checked="checked"/>
|
||||
<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=""/>
|
||||
<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="forms">
|
||||
<h3 class="s-title">Forms<a class="anchor" href="#forms" 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>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.</p>
|
||||
<h4 class="s-subtitle" id="forms-input">Form input<a class="anchor" href="#forms-input" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="input-example-1">Name</label>
|
||||
<input class="form-input" id="input-example-1" type="text" placeholder="Name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="input-example-2">Email</label>
|
||||
<input class="form-input" id="input-example-2" type="email" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form input control --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>></span>Name<span class="hljs-tag"></<span class="hljs-name">label</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">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="forms-textarea">Form textarea<a class="anchor" href="#forms-textarea" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="input-example-3">Message</label>
|
||||
<textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form textarea control --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-3"</span>></span>Message<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-3"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="forms-select">Form select<a class="anchor" href="#forms-select" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="form-group">
|
||||
<select class="form-select">
|
||||
<option>Choose an option</option>
|
||||
<option>Slack</option>
|
||||
<option>Skype</option>
|
||||
<option>Hipchat</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<select class="form-select" multiple="">
|
||||
<option>Choose an option</option>
|
||||
<option>Slack</option>
|
||||
<option>Skype</option>
|
||||
<option>Hipchat</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form select control --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-select"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Choose an option<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Slack<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Skype<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Hipchat<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">select</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="forms-radio">Form radio<a class="anchor" href="#forms-radio" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Gender</label>
|
||||
<label class="form-radio">
|
||||
<input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
|
||||
</label>
|
||||
<label class="form-radio">
|
||||
<input type="radio" name="gender"><i class="form-icon"></i> Female
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form radio control --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span>></span>Gender<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">checked</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Male
|
||||
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Female
|
||||
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="forms-switch">Form switch<a class="anchor" href="#forms-switch" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="form-switch">
|
||||
<input type="checkbox"><i class="form-icon"></i> Send me emails with news and tips
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-switch">
|
||||
<input type="checkbox" checked=""><i class="form-icon"></i> Send me emails with news and tips
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form switch control --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-switch"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Send me emails with news and tips
|
||||
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="forms-checkbox">Form checkbox<a class="anchor" href="#forms-checkbox" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="form-group">
|
||||
<label class="form-checkbox">
|
||||
<input type="checkbox"><i class="form-icon"></i> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-checkbox">
|
||||
<input type="checkbox" checked=""><i class="form-icon"></i> Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form checkbox control --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Remember me
|
||||
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column">
|
||||
<div class="form-group">
|
||||
<label class="form-checkbox">
|
||||
<input id="docs-demo-checkbox" type="checkbox"><i class="form-icon"></i> Select all
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById("docs-demo-checkbox").indeterminate = true;
|
||||
|
||||
</script>
|
||||
<p>You can change checkbox to indeterminate state by setting the <code>indeterminate</code> property of input checkboxes to <code>true</code>.</p>
|
||||
<h4 class="s-subtitle" id="forms-inline">Inline forms<a class="anchor" href="#forms-inline" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label class="form-radio form-inline">
|
||||
<input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
|
||||
</label>
|
||||
<label class="form-radio form-inline">
|
||||
<input type="radio" name="gender"><i class="form-icon"></i> Female
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-checkbox form-inline">
|
||||
<input type="checkbox"><i class="form-icon"></i> Checkbox 1
|
||||
</label>
|
||||
<label class="form-checkbox form-inline">
|
||||
<input type="checkbox" checked=""><i class="form-icon"></i> Checkbox 2
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<p>You can add the <code>form-inline</code> class to the form components to make them inline in one row.</p>
|
||||
<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">"form-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio form-inline"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Male
|
||||
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio form-inline"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Female
|
||||
<span class="hljs-tag"></<span class="hljs-name">label</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">"form-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox form-inline"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Checkbox 1
|
||||
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox form-inline"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">""</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Checkbox 2
|
||||
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="forms-horizontal">Horizontal forms<a class="anchor" href="#forms-horizontal" aria-hidden="true">#</a></h4>
|
||||
<p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the <form> container.
|
||||
And add the <code>col-<1-12></code> and <code>col-xs/sm/lg/xl-<1-12></code> class to the child elements for responsive form row layout.
|
||||
</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-9 col-sm-12">
|
||||
<form class="form-horizontal" action="#forms">
|
||||
<div class="form-group">
|
||||
<div class="col-3 col-sm-12">
|
||||
<label class="form-label" for="input-example-4">Name</label>
|
||||
</div>
|
||||
<div class="col-9 col-sm-12">
|
||||
<input class="form-input" id="input-example-4" type="text" placeholder="Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3 col-sm-12">
|
||||
<label class="form-label" for="input-example-5">Email</label>
|
||||
</div>
|
||||
<div class="col-9 col-sm-12">
|
||||
<input class="form-input" id="input-example-5" type="email" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3 col-sm-12">
|
||||
<label class="form-label">Gender</label>
|
||||
</div>
|
||||
<div class="col-9 col-sm-12">
|
||||
<label class="form-radio">
|
||||
<input type="radio" name="gender"><i class="form-icon"></i> Male
|
||||
</label>
|
||||
<label class="form-radio">
|
||||
<input type="radio" name="gender" checked=""><i class="form-icon"></i> Female
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3 col-sm-12">
|
||||
<label class="form-label">Source</label>
|
||||
</div>
|
||||
<div class="col-9 col-sm-12">
|
||||
<select class="form-select" multiple="">
|
||||
<option>Slack</option>
|
||||
<option>Skype</option>
|
||||
<option>Hipchat</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-9 col-sm-12 col-ml-auto">
|
||||
<label class="form-switch">
|
||||
<input type="checkbox"><i class="form-icon"></i> Send me emails with news and tips
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3 col-sm-12">
|
||||
<label class="form-label" for="input-example-6">Message</label>
|
||||
</div>
|
||||
<div class="col-9 col-sm-12">
|
||||
<textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-9 col-sm-12 col-ml-auto">
|
||||
<label class="form-checkbox">
|
||||
<input type="checkbox"><i class="form-icon"></i> Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-horizontal"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-3 col-sm-12"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>></span>Name<span class="hljs-tag"></<span class="hljs-name">label</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">"col-9 col-sm-12"</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">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</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-comment"><!-- form structure --></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="forms-sizes">Form sizes<a class="anchor" href="#forms-sizes" aria-hidden="true">#</a></h4>
|
||||
<p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-4 col-xs-12">
|
||||
<label class="form-label label-sm">Label</label>
|
||||
</div>
|
||||
<div class="column col-4 col-xs-12">
|
||||
<input class="form-input input-sm" type="text" placeholder="Name">
|
||||
</div>
|
||||
<div class="column col-4 col-xs-12">
|
||||
<select class="form-select select-sm">
|
||||
<option>Choose an option</option>
|
||||
<option>Slack</option>
|
||||
<option>Skype</option>
|
||||
<option>Hipchat</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="column col-4 col-xs-12">
|
||||
<label class="form-label label-lg">Label</label>
|
||||
</div>
|
||||
<div class="column col-4 col-xs-12">
|
||||
<input class="form-input input-lg" type="text" placeholder="Name">
|
||||
</div>
|
||||
<div class="column col-4 col-xs-12">
|
||||
<select class="form-select select-lg">
|
||||
<option>Choose an option</option>
|
||||
<option>Slack</option>
|
||||
<option>Skype</option>
|
||||
<option>Hipchat</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<p>You can add the <code>input-sm</code>/<code>input-lg</code> classes to the input-checkbox, input-radio and input-switch to have different sizes.</p>
|
||||
<h4 class="s-subtitle" id="forms-icons">Form icons<a class="anchor" href="#forms-icons" aria-hidden="true">#</a></h4>
|
||||
<p>Spectre Forms components has <a href="icons.html">Spectre Icons</a> support.</p>
|
||||
<p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to <input> element.
|
||||
And add the icon with <code>form-icon</code> class next to the <input>.
|
||||
</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-4 col-xs-12">
|
||||
<div class="has-icon-left">
|
||||
<input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 col-xs-12">
|
||||
<div class="has-icon-left tooltip" data-tooltip="Lorem ipsum dolor sit amet">
|
||||
<input class="form-input" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 col-xs-12">
|
||||
<div class="has-icon-left">
|
||||
<input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 col-xs-12">
|
||||
<div class="has-icon-right">
|
||||
<input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 col-xs-12">
|
||||
<div class="has-icon-right">
|
||||
<input class="form-input" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 col-xs-12">
|
||||
<div class="has-icon-right">
|
||||
<input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form input with Spectre icon --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-icon-left"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon icon icon-check"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<p>You can use the <code>loading</code> class for loading or posting state.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-4 col-xs-12">
|
||||
<div class="has-icon-right">
|
||||
<input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon loading"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 col-xs-12">
|
||||
<div class="has-icon-right">
|
||||
<input class="form-input" type="text" placeholder="Name"><i class="form-icon loading"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-4 col-xs-12">
|
||||
<div class="has-icon-right">
|
||||
<input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon loading"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form input with loading icon --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-icon-right"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon loading"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="forms-input">Input types<a class="anchor" href="#forms-input" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-9 col-sm-12">
|
||||
<form class="form-horizontal" action="#forms">
|
||||
<div class="form-group">
|
||||
<div class="col-3">
|
||||
<label class="form-label" for="input-example-8">Email</label>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<input class="form-input" id="input-example-8" type="email" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3">
|
||||
<label class="form-label" for="input-example-9">URL</label>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<input class="form-input" id="input-example-9" type="url" placeholder="URL" value="https://github.com/picturepan2/spectre">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3">
|
||||
<label class="form-label" for="input-example-10">Search</label>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<input class="form-input" id="input-example-10" type="search" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3">
|
||||
<label class="form-label" for="input-example-11">Tel</label>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<input class="form-input" id="input-example-11" type="tel" placeholder="Tel" value="1-(888)-888-8888">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3">
|
||||
<label class="form-label" for="input-example-12">Password</label>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<input class="form-input" id="input-example-12" type="password" placeholder="Password" value="123456789">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3">
|
||||
<label class="form-label" for="input-example-13">Number</label>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<input class="form-input" id="input-example-13" type="number" placeholder="00" value="66">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3">
|
||||
<label class="form-label" for="input-example-14">Date</label>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<input class="form-input" id="input-example-14" type="date" value="2016-12-31">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3">
|
||||
<label class="form-label" for="input-example-15">Color</label>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<input class="form-input" id="input-example-15" type="color" value="#5755d9">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3">
|
||||
<label class="form-label" for="input-example-16">File</label>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<input class="form-input" id="input-example-16" type="file">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="s-subtitle" id="forms-input-groups">Input groups<a class="anchor" href="#forms-input-groups" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="input-group">
|
||||
<input class="form-input input-sm" type="text" placeholder="username">
|
||||
<select class="form-select select-sm">
|
||||
<option>Slack</option>
|
||||
<option>Skype</option>
|
||||
<option>Hipchat</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="input-group"><span class="input-group-addon addon-sm">slack.com/</span>
|
||||
<input class="form-input input-sm" type="text" placeholder="site name">
|
||||
<button class="btn btn-primary input-group-btn btn-sm">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="input-group">
|
||||
<input class="form-input" type="text" placeholder="username">
|
||||
<select class="form-select">
|
||||
<option>Slack</option>
|
||||
<option>Skype</option>
|
||||
<option>Hipchat</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="input-group"><span class="input-group-addon">slack.com/</span>
|
||||
<input class="form-input" type="text" placeholder="site name">
|
||||
<button class="btn btn-primary input-group-btn">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="input-group">
|
||||
<label class="form-switch">
|
||||
<input type="checkbox"><i class="form-icon"></i>
|
||||
</label>
|
||||
<input class="form-input" type="text" placeholder="name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="input-group">
|
||||
<label class="form-checkbox">
|
||||
<input type="checkbox"><i class="form-icon"></i>
|
||||
</label>
|
||||
<input class="form-input" type="text" placeholder="name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="input-group">
|
||||
<input class="form-input input-lg" type="text" placeholder="username">
|
||||
<select class="form-select select-lg">
|
||||
<option>Slack</option>
|
||||
<option>Skype</option>
|
||||
<option>Hipchat</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<div class="input-group"><span class="input-group-addon addon-lg">slack.com/</span>
|
||||
<input class="form-input input-lg" type="text" placeholder="site name">
|
||||
<button class="btn btn-primary input-group-btn btn-lg">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>If you want to attach text and button along with an input, add the <code>input-group</code> class to the input container.
|
||||
And add the <code>input-group-addon</code> class to the text element and <code>input-group-btn</code> to the button element.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- normal input group --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
|
||||
<span class="hljs-comment"><!-- large input group --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon addon-lg"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input input-lg"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
|
||||
<span class="hljs-comment"><!-- normal input group with button --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</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>Submit<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="forms-validation">Form validation styles<a class="anchor" href="#forms-validation" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-9 col-sm-12">
|
||||
<fieldset>
|
||||
<legend>Input</legend>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="input-example-17">Name</label>
|
||||
<input class="form-input is-success" id="input-example-17" type="text" placeholder="Name">
|
||||
<p class="form-input-hint">The name is valid.</p>
|
||||
</div>
|
||||
<div class="form-group has-error">
|
||||
<label class="form-label" for="input-example-18">Password</label>
|
||||
<input class="form-input" id="input-example-18" type="password" placeholder="Password">
|
||||
<p class="form-input-hint">Passwords must have at least 8 characters.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Select</legend>
|
||||
<div class="form-group">
|
||||
<select class="form-select is-error">
|
||||
<option>Choose an option</option>
|
||||
<option>Slack</option>
|
||||
<option>Skype</option>
|
||||
<option>Hipchat</option>
|
||||
</select>
|
||||
<p class="form-input-hint">The option is invalid.</p>
|
||||
</div>
|
||||
<div class="form-group has-success">
|
||||
<select class="form-select">
|
||||
<option>Choose an option</option>
|
||||
<option>Slack</option>
|
||||
<option>Skype</option>
|
||||
<option>Hipchat</option>
|
||||
</select>
|
||||
<p class="form-input-hint">The option is available.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Checkbox, Radio and Switch (Error state only)</legend>
|
||||
<div class="form-group">
|
||||
<label class="form-checkbox is-error">
|
||||
<input type="checkbox" checked=""><i class="form-icon"></i> I'm not a robot.
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group has-error">
|
||||
<label class="form-radio">
|
||||
<input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
|
||||
</label>
|
||||
<label class="form-radio">
|
||||
<input type="radio" name="gender"><i class="form-icon"></i> Female
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-switch is-error">
|
||||
<input type="checkbox" checked=""><i class="form-icon"></i> Send me emails with news and tips
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<p>To use form validation styles, you can either add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements.
|
||||
Use the <code>form-input-hint</code> class to provide form validation success and error messages.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">form</span>></span>
|
||||
<span class="hljs-comment"><!-- form validation class: has-success --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group has-success"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>></span>Name<span class="hljs-tag"></<span class="hljs-name">label</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">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input-hint"</span>></span>The name is invalid.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
|
||||
<span class="hljs-comment"><!-- form validation class: is-success --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>></span>Name<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input is-success"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input-hint"</span>></span>The name is invalid.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
|
||||
<span class="hljs-comment"><!-- form validation example for checkbox, radio and switch --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox is-error"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Remember me
|
||||
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
|
||||
</code></pre>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-9 col-sm-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="input-example-21">Email</label>
|
||||
<input class="form-input" id="input-example-21" type="text" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,14}$">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="input-example-22">Password</label>
|
||||
<input class="form-input" id="input-example-22" type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>You can use input <code>pattern</code> attribute to validate the value as well.</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- pattern validation example for Email --></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">"email"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Email"</span> <span class="hljs-attr">pattern</span>=<span class="hljs-string">"[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$"</span>></span>
|
||||
|
||||
<span class="hljs-comment"><!-- pattern validation example for password (8 or more characters that are of at least one number, and one uppercase and lowercase letter) --></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">"password"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Password"</span> <span class="hljs-attr">pattern</span>=<span class="hljs-string">"^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$"</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="forms-disabled">Form disabled styles<a class="anchor" href="#forms-disabled" aria-hidden="true">#</a></h4>
|
||||
<p>
|
||||
Add the <code>disabled</code> attribute to the element or <fieldset> for a disabled form components style.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12">
|
||||
<form action="#forms">
|
||||
<fieldset disabled="">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="input-example-19">Name</label>
|
||||
<input class="form-input" id="input-example-19" type="text" placeholder="Name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Gender</label>
|
||||
<label class="form-radio">
|
||||
<input type="radio" name="gender" disabled=""><i class="form-icon"></i> Male
|
||||
</label>
|
||||
<label class="form-radio">
|
||||
<input type="radio" name="gender" disabled=""><i class="form-icon"></i> Female
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<select class="form-select" disabled="">
|
||||
<option>Choose an option</option>
|
||||
<option>Slack</option>
|
||||
<option>Skype</option>
|
||||
<option>Hipchat</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-switch">
|
||||
<input type="checkbox" disabled=""><i class="form-icon"></i> Send me emails with news and tips
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="input-example-20">Message</label>
|
||||
<textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled=""></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-checkbox">
|
||||
<input type="checkbox" disabled=""><i class="form-icon"></i> Remember me
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"#forms"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">disabled</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-19"</span>></span>Name<span class="hljs-tag"></<span class="hljs-name">label</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">id</span>=<span class="hljs-string">"input-example-19"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</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">"form-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span>></span>Gender<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">disabled</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Male
|
||||
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">disabled</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Female
|
||||
<span class="hljs-tag"></<span class="hljs-name">label</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">"form-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-select"</span> <span class="hljs-attr">disabled</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Choose an option<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Slack<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Skype<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>Hipchat<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">select</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">"form-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-switch"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">disabled</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Send me emails with news and tips
|
||||
<span class="hljs-tag"></<span class="hljs-name">label</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">"form-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-20"</span>></span>Message<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-20"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">disabled</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</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">"form-group"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">disabled</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Remember me
|
||||
<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">fieldset</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,441 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Icons - Elements - 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="Icons are single-element, responsive and pure CSS icons. 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/elements/icons.html">
|
||||
<meta property="og:title" content="Icons - Elements - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Icons are single-element, responsive and pure CSS icons. 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/elements/icons.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="" checked="checked"/>
|
||||
<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=""/>
|
||||
<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="icons">
|
||||
<h3 class="s-title">Icons.css<a class="anchor" href="#icons" aria-hidden="true">#</a></h3>
|
||||
<p><small class="label label-secondary">CSS ONLY</small></p>
|
||||
<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>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column">
|
||||
<div class="toast toast-primary">Spectre.css Icons will be moved to a new <a href="https://github.com/picturepan2/icons.css" target="_blank">GitHub Repo</a> while Spectre will only include basic icons.</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
Icons.css are single-element, responsive and pure CSS icons.
|
||||
You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web <head> to have these CSS icons.
|
||||
</p>
|
||||
<h4 class="s-subtitle" id="icons-navigation">Navigation icons<a class="anchor" href="#icons-navigation" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-arrow-up"></i></button>
|
||||
<p>icon-arrow-up</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-arrow-right"></i></button>
|
||||
<p>icon-arrow-right</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-arrow-down"></i></button>
|
||||
<p>icon-arrow-down</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-arrow-left"></i></button>
|
||||
<p>icon-arrow-left</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-upward"></i></button>
|
||||
<p>icon-upward</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-forward"></i></button>
|
||||
<p>icon-forward</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-downward"></i></button>
|
||||
<p>icon-downward</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-back"></i></button>
|
||||
<p>icon-back</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-caret"></i></button>
|
||||
<p>icon-caret</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-menu"></i></button>
|
||||
<p>icon-menu</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-apps"></i></button>
|
||||
<p>icon-apps</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-more-horiz"></i></button>
|
||||
<p>icon-more-horiz</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-more-vert"></i></button>
|
||||
<p>icon-more-vert</p>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="s-subtitle" id="icons-action">Action icons<a class="anchor" href="#icons-action" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-resize-horiz"></i></button>
|
||||
<p>icon-resize-horiz</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-resize-vert"></i></button>
|
||||
<p>icon-resize-vert</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-plus"></i></button>
|
||||
<p>icon-plus</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-minus"></i></button>
|
||||
<p>icon-minus</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-cross"></i></button>
|
||||
<p>icon-cross</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-check"></i></button>
|
||||
<p>icon-check</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-stop"></i></button>
|
||||
<p>icon-stop</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-shutdown"></i></button>
|
||||
<p>icon-shutdown</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-refresh"></i></button>
|
||||
<p>icon-refresh</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-search"></i></button>
|
||||
<p>icon-search</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-flag"></i></button>
|
||||
<p>icon-flag</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-bookmark"></i></button>
|
||||
<p>icon-bookmark</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-edit"></i></button>
|
||||
<p>icon-edit</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-delete"></i></button>
|
||||
<p>icon-delete</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-share"></i></button>
|
||||
<p>icon-share</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-download"></i></button>
|
||||
<p>icon-download</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-upload"></i></button>
|
||||
<p>icon-upload</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-copy"></i></button>
|
||||
<p>icon-copy</p>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="s-subtitle" id="icons-object">Object icons<a class="anchor" href="#icons-object" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-mail"></i></button>
|
||||
<p>icon-mail</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-people"></i></button>
|
||||
<p>icon-people</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-message"></i></button>
|
||||
<p>icon-message</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-photo"></i></button>
|
||||
<p>icon-photo</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-time"></i></button>
|
||||
<p>icon-time</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-location"></i></button>
|
||||
<p>icon-location</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-link"></i></button>
|
||||
<p>icon-link</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<button class="btn btn-primary btn-action btn-lg"><i class="icon icon-emoji"></i></button>
|
||||
<p>icon-emoji</p>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-menu"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="icons-sizes">Icon sizes<a class="anchor" href="#icons-sizes" aria-hidden="true">#</a></h4>
|
||||
<p>Use <code>icon-2x</code>, <code>icon-3x</code> and <code>icon-4x</code> classes to increase icon sizes.
|
||||
You can set <code>font-size</code> to have different icon sizes.
|
||||
</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-3 col-md-6">
|
||||
<p><i class="icon icon-2x icon-mail"></i></p>
|
||||
<p>icon-2x (32px)</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<p><i class="icon icon-3x icon-mail"></i></p>
|
||||
<p>icon-3x (48px)</p>
|
||||
</div>
|
||||
<div class="column col-3 col-md-6">
|
||||
<p><i class="icon icon-4x icon-mail"></i></p>
|
||||
<p>icon-4x (64px)</p>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-2x icon-mail"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</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,263 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Labels - Elements - 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="Labels are formatted text tags for highlighted, informative 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/elements/labels.html">
|
||||
<meta property="og:title" content="Labels - Elements - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Labels are formatted text tags for highlighted, informative 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/elements/labels.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="" checked="checked"/>
|
||||
<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=""/>
|
||||
<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="labels">
|
||||
<h3 class="s-title">Labels<a class="anchor" href="#labels" 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>Labels are formatted text tags for highlighted, informative information.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column"><span class="label mr-1">default label</span><span class="label label-primary mr-1">primary label</span><span class="label label-secondary mr-1">secondary label</span><span class="label label-success mr-1">success label</span><span class="label label-warning mr-1">warning label</span><span class="label label-error">error label</span></div>
|
||||
</div>
|
||||
<p>Add the <code>label</code> class to <span> or <small> elements.
|
||||
You can add another class <code>label-primary</code>, <code>label-secondary</code>, <code>label-success</code>, <code>label-warning</code> and <code>label-error</code> for colored labels.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- normal labels --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span>></span>default label<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-primary"</span>></span>primary label<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="labels-rounded">Rounded labels<a class="anchor" href="#labels-rounded" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column"><span class="label label-rounded mr-1">default label</span><span class="label label-rounded label-primary">primary label</span></div>
|
||||
</div>
|
||||
<p>Add the <code>label-rounded</code> class to have rounded labels.</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- rounded labels --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-rounded label-primary"</span>></span>primary label<span class="hljs-tag"></<span class="hljs-name">span</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,309 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Media - Elements - 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="Media includes responsive images, figures and video classes. 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/elements/media.html">
|
||||
<meta property="og:title" content="Media - Elements - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Media includes responsive images, figures and video classes. 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/elements/media.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="" checked="checked"/>
|
||||
<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=""/>
|
||||
<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="media">
|
||||
<h3 class="s-title">Media<a class="anchor" href="#media" 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>Media includes responsive images, figures and video classes.</p>
|
||||
<h4 class="s-subtitle" id="media-images">Images<a class="anchor" href="#media-images" aria-hidden="true">#</a></h4>
|
||||
<p>Add the <code>img-responsive</code> class to <img> elements. The images will scale with the parent sizes.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12"><img class="img-responsive rounded" src="../img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper"></div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive ..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span>
|
||||
</code></pre>
|
||||
<p>Add the <code>img-fit-contain</code> or <code>img-fit-cover</code> class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container).
|
||||
This feature can replace the classic background image trick. Microsoft Edge support <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank">is shipped</a> with Build Number 16299+.
|
||||
</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12">
|
||||
<figure class="figure"><img class="img-fit-contain rounded" src="../img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;">
|
||||
<figcaption class="figure-caption text-center">img-fit-contain</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<figure class="figure"><img class="img-fit-cover rounded" src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;">
|
||||
<figcaption class="figure-caption text-center">img-fit-cover</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-fit-contain ..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-fit-cover ..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="media-figure">Figure<a class="anchor" href="#media-figure" aria-hidden="true">#</a></h4>
|
||||
<p>You can use the element <figure> for an image with a caption.
|
||||
Add the <code>figure</code> class to <figure> element.
|
||||
The images with the <code>img-responsive</code> class will be responsive.
|
||||
And the included class <code>figure-caption</code> will provide basic style for caption.
|
||||
Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment.
|
||||
</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<figure class="figure"><img class="img-responsive rounded" src="../img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
|
||||
<figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"figure"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive ..."</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-yosemite-2.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"macOS Yosemite Wallpaper"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">figcaption</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"figure-caption text-center"</span>></span>macOS Yosemite wallpaper<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="media-video">Video<a class="anchor" href="#media-video" aria-hidden="true">#</a></h4>
|
||||
<p>For responsive video, add a container with the <code>video-responsive</code> class.
|
||||
Insert any YouTube, Youku or other iframe/embed video inside the container.
|
||||
The ratio is 16:9 by default.
|
||||
You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.
|
||||
</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<div class="video-responsive">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen=""></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>For responsive <video> elements, you can add the <code>video-responsive</code> class directly.</p>
|
||||
<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">"video-responsive video-responsive-4-3"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">allowfullscreen</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">video</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-responsive"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"..."</span>></span>...<span class="hljs-tag"></<span class="hljs-name">video</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,413 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Tables - Elements - 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="Tables include default styles for tables and data sets. 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/elements/tables.html">
|
||||
<meta property="og:title" content="Tables - Elements - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Tables include default styles for tables and data sets. 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/elements/tables.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="" checked="checked"/>
|
||||
<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=""/>
|
||||
<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="tables">
|
||||
<h3 class="s-title">Tables<a class="anchor" href="#tables" 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>Tables include default styles for tables and data sets.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Genre</th>
|
||||
<th>Release date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>The Shawshank Redemption</td>
|
||||
<td>Crime, Drama</td>
|
||||
<td>14 October 1994</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>The Godfather</td>
|
||||
<td>Crime, Drama</td>
|
||||
<td>24 March 1972</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Schindler's List</td>
|
||||
<td>Biography, Drama, History</td>
|
||||
<td>4 February 1994</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Se7en</td>
|
||||
<td>Crime, Drama, Mystery</td>
|
||||
<td>22 September 1995</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add the <code>table</code> class to any <table> element.
|
||||
The class will add padding, border and emphasized table header.
|
||||
</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">thead</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>name<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>genre<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>release date<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">thead</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">tbody</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>The Shawshank Redemption<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Crime, Drama<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>14 October 1994<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">tbody</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">table</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="tables-striped">Striped tables<a class="anchor" href="#tables-striped" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Genre</th>
|
||||
<th>Release date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>The Shawshank Redemption</td>
|
||||
<td>Crime, Drama</td>
|
||||
<td>14 October 1994</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>The Godfather</td>
|
||||
<td>Crime, Drama</td>
|
||||
<td>24 March 1972</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Schindler's List</td>
|
||||
<td>Biography, Drama, History</td>
|
||||
<td>4 February 1994</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Se7en</td>
|
||||
<td>Crime, Drama, Mystery</td>
|
||||
<td>22 September 1995</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<p>Use the <code>table-striped</code> class to <table> to add zebra striped style.
|
||||
For hoverable table rows, you can add the <code>table-hover</code> class to enable hover style.
|
||||
</p>
|
||||
<p>Use the <code>active</code> class to make <tr> element highlighted.</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table table-striped table-hover"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">thead</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>name<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>genre<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">th</span>></span>release date<span class="hljs-tag"></<span class="hljs-name">th</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">thead</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">tbody</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>The Shawshank Redemption<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>Crime, Drama<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">td</span>></span>14 October 1994<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">tbody</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">table</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="tables-scroll">Scrollable tables<a class="anchor" href="#tables-scroll" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<table class="table table-scroll">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Rating</th>
|
||||
<th>Duration</th>
|
||||
<th>Genre</th>
|
||||
<th>Release date</th>
|
||||
<th>Director</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>The Shawshank Redemption</td>
|
||||
<td>R</td>
|
||||
<td>2h 22min</td>
|
||||
<td>Crime, Drama</td>
|
||||
<td>14 October 1994</td>
|
||||
<td>Frank Darabont</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>The Godfather</td>
|
||||
<td>R</td>
|
||||
<td>2h 55min</td>
|
||||
<td>Crime, Drama</td>
|
||||
<td>24 March 1972</td>
|
||||
<td>Francis Ford Coppola</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Schindler's List</td>
|
||||
<td>R</td>
|
||||
<td>3h 15min</td>
|
||||
<td>Biography, Drama, History</td>
|
||||
<td>4 February 1994</td>
|
||||
<td>Steven Spielberg</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Se7en</td>
|
||||
<td>R</td>
|
||||
<td>2h 7min</td>
|
||||
<td>Crime, Drama, Mystery</td>
|
||||
<td>22 September 1995</td>
|
||||
<td>David Fincher</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add the <code>table-scroll</code> class to <table> to have a horizontally scrollable table.</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table table-scroll"</span>></span>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">table</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,439 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Typography - Elements - 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="Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements. 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/elements/typography.html">
|
||||
<meta property="og:title" content="Typography - Elements - Spectre.css CSS Framework">
|
||||
<meta property="og:description" content="Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements. 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/elements/typography.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="" checked="checked"/>
|
||||
<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=""/>
|
||||
<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="typography">
|
||||
<h3 class="s-title">Typography<a class="anchor" href="#typography" 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>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p>
|
||||
<h4 class="s-subtitle" id="typography-headings">Headings<a class="anchor" href="#typography-headings" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-12">
|
||||
<h1>H1 Heading <small class="label">40px</small></h1>
|
||||
</div>
|
||||
<div class="column col-12">
|
||||
<h2>H2 Heading <small class="label">32px</small></h2>
|
||||
</div>
|
||||
<div class="column col-12">
|
||||
<h3>H3 Heading <small class="label">28px</small></h3>
|
||||
</div>
|
||||
<div class="column col-12">
|
||||
<h4>H4 Heading <small class="label">24px</small></h4>
|
||||
</div>
|
||||
<div class="column col-12">
|
||||
<h5>H5 Heading <small class="label">20px</small></h5>
|
||||
</div>
|
||||
<div class="column col-12">
|
||||
<h6>H6 Heading <small class="label">16px</small></h6>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>H1 Heading<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>H1 Heading <span class="hljs-tag"><<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span>></span>40px<span class="hljs-tag"></<span class="hljs-name">small</span>></span><span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"h1"</span>></span>H1 Heading<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="typography-paragraphs">Paragraphs<a class="anchor" href="#typography-paragraphs" aria-hidden="true">#</a></h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur <a href="#typography">adipiscing elit</a>.
|
||||
Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
|
||||
</p>
|
||||
<p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, ...<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="typography-semantic-text">Semantic text elements<a class="anchor" href="#typography-semantic-text" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-6 col-xs-12"><abbr title="Internationalization">I18N</abbr><code class="ml-2">abbr</code></div>
|
||||
<div class="column col-6 col-xs-12"><strong>Bold</strong><code class="ml-2">strong</code><code class="ml-2">b</code></div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<cite>Citation</cite><code class="ml-2">cite</code>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12"><code>Hello World!</code><code class="ml-2">code</code></div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<del>Deleted</del><code class="ml-2">del</code>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12"><em>Emphasis</em><code class="ml-2">em</code></div>
|
||||
<div class="column col-6 col-xs-12"><i>Italic</i><code class="ml-2">i</code></div>
|
||||
<div class="column col-6 col-xs-12"><ins>Inserted</ins><code class="ml-2">ins</code></div>
|
||||
<div class="column col-6 col-xs-12"><kbd>Ctrl + S</kbd><code class="ml-2">kbd</code></div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<mark>Highlighted</mark><code class="ml-2">mark</code>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<ruby>漢
|
||||
<rt>kan</rt>字
|
||||
<rt>ji</rt>
|
||||
</ruby><code class="ml-2">ruby</code>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<s>Strikethrough</s><code class="ml-2">s</code>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12"><samp>Sample</samp><code class="ml-2">samp</code></div>
|
||||
<div class="column col-6 col-xs-12">Text <sub>Subscripted</sub><code class="ml-2">sub</code></div>
|
||||
<div class="column col-6 col-xs-12">Text <sup>Superscripted</sup><code class="ml-2">sup</code></div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<time>20:00</time><code class="ml-2">time</code>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<u>Underline</u><code class="ml-2">u</code>
|
||||
</div>
|
||||
<div class="column col-6 col-xs-12">
|
||||
<var>x</var> =
|
||||
<var>y</var> + 2<code class="ml-2">var</code>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="s-subtitle" id="typography-east-asian">Optimized for East Asian fonts<a class="anchor" href="#typography-east-asian" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column">
|
||||
<p class="h5"><small class="lang-zh-hans">你好</small>, <small class="lang-ja">こんにちは</small>, <small class="lang-ko">안녕하세요</small></p>
|
||||
<p class="h6">Chinese (Simplified)</p>
|
||||
<p class="lang-zh-hans">革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。</p>
|
||||
<p class="h6">Chinese (Tranditional)</p>
|
||||
<p class="lang-zh-hant">山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」</p>
|
||||
<p class="h6">Japanese</p>
|
||||
<p class="lang-ja">祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。</p>
|
||||
<p class="h6">Korean</p>
|
||||
<p class="lang-ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Add the <code>lang</code> attribute to the <html> element or use the class <code>lang-zh</code>, <code>lang-zh-hans</code>, <code>lang-zh-hant</code>, <code>lang-ja</code> or <code>lang-ko</code> to have better Asian CJK (Chinese, Japanese and Korean) font support.</p>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"zh-Hans"</span>></span>……<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lang-zh-hans"</span>></span>革命不是请客吃饭，不是做文章……<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lang-ja"</span>></span>祇園精舎の鐘の声、諸行無常の響きあり……<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lang-ko"</span>></span>나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||||
</code></pre>
|
||||
<p>And you can use the <code>lang-cjk</code> class or the <code>lang</code> attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.</p>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column">
|
||||
<p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。</p>
|
||||
<p lang="ja">
|
||||
<del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"lang-cjk"</span>></span><span class="hljs-tag"><<span class="hljs-name">u</span>></span>祇園<span class="hljs-tag"></<span class="hljs-name">u</span>></span><span class="hljs-tag"><<span class="hljs-name">u</span>></span>精舎<span class="hljs-tag"></<span class="hljs-name">u</span>></span>の鐘の声、諸行無常の響きあり。……<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ja"</span>></span><span class="hljs-tag"><<span class="hljs-name">del</span>></span>祇園<span class="hljs-tag"></<span class="hljs-name">del</span>></span><span class="hljs-tag"><<span class="hljs-name">del</span>></span>精舎<span class="hljs-tag"></<span class="hljs-name">del</span>></span>の鐘の声、諸行無常の響きあり。……<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="typography-fonts">Fonts<a class="anchor" href="#typography-fonts" aria-hidden="true">#</a></h4>
|
||||
<p>Spectre sets the most common and best <code>font-family</code> for each OS with fallback support in old systems.
|
||||
There are also fonts targeted East Asian typography.
|
||||
</p>
|
||||
<pre class="code"><code><span class="hljs-comment">/* Western typography targeted */</span>
|
||||
<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;
|
||||
<span class="hljs-comment">/* Monospace typography targeted */</span>
|
||||
<span class="hljs-attribute">font-family</span>: <span class="hljs-string">"SF Mono"</span>, <span class="hljs-string">"Segoe UI Mono"</span>, <span class="hljs-string">"Roboto Mono"</span>, Menlo, Courier, monospace;
|
||||
|
||||
<span class="hljs-comment">/* Chinese (lang="zh" and lang="zh-Hans") targeted */</span>
|
||||
<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"PingFang SC"</span>, <span class="hljs-string">"Hiragino Sans GB"</span>, <span class="hljs-string">"Microsoft YaHei"</span>, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;
|
||||
<span class="hljs-comment">/* Chinese (lang="zh-Hant") targeted */</span>
|
||||
<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"PingFang TC"</span>, <span class="hljs-string">"Hiragino Sans CNS"</span>, <span class="hljs-string">"Microsoft JhengHei"</span>, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;
|
||||
<span class="hljs-comment">/* Japanese (lang="ja") targeted */</span>
|
||||
<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"Hiragino Sans"</span>, <span class="hljs-string">"Hiragino Kaku Gothic Pro"</span>, <span class="hljs-string">"Yu Gothic"</span>, YuGothic, Meiryo, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;
|
||||
<span class="hljs-comment">/* Korean (lang="ko") targeted */</span>
|
||||
<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"Malgun Gothic"</span>, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="typography-blockquote">Blockquote<a class="anchor" href="#typography-blockquote" aria-hidden="true">#</a></h4>
|
||||
<blockquote>
|
||||
<p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.</p>
|
||||
<cite>- Bill Gates</cite>
|
||||
</blockquote>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">blockquote</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">cite</span>></span>- Bill Gates<span class="hljs-tag"></<span class="hljs-name">cite</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span>
|
||||
</code></pre>
|
||||
<h4 class="s-subtitle" id="typography-lists">Lists<a class="anchor" href="#typography-lists" aria-hidden="true">#</a></h4>
|
||||
<div class="docs-demo columns">
|
||||
<div class="column col-4 col-xs-12">
|
||||
<ul class="list">
|
||||
<li>list item 1</li>
|
||||
<li>list item 2
|
||||
<ul>
|
||||
<li>list item 2.1</li>
|
||||
<li>list item 2.2</li>
|
||||
<li>list item 2.3</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>list item 3</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column col-4 col-xs-12">
|
||||
<ol class="list">
|
||||
<li>list item 1</li>
|
||||
<li>list item 2
|
||||
<ol>
|
||||
<li>list item 2.1</li>
|
||||
<li>list item 2.2</li>
|
||||
<li>list item 2.3</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>list item 3</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="column col-4 col-xs-12">
|
||||
<dl class="list">
|
||||
<dt>description list term 1</dt>
|
||||
<dd>description list description 1</dd>
|
||||
<dt>description list term 2</dt>
|
||||
<dd>description list description 2</dd>
|
||||
<dt>description list term 3</dt>
|
||||
<dd>description list description 3</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- unordered list --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 2
|
||||
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 2.1<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 2.2<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 2.3<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 3<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
|
||||
|
||||
<span class="hljs-comment"><!-- description list --></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">dl</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">dt</span>></span>description list term<span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">dd</span>></span>description list description<span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">dl</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>
|
||||
Reference in New Issue
Block a user