2796 lines
154 KiB
HTML
2796 lines
154 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<!-- Mirrored from winstrap.mwspace.it/controls.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 09 Jun 2020 16:12:29 GMT -->
|
|
<head>
|
|
<!-- This is the generated HTML file of the demo page -->
|
|
<meta charset="utf-8" />
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<title>winstrap Tutorial</title>
|
|
|
|
<link rel="stylesheet" href="css/winstrap.minb0fc.css?0.5.13" />
|
|
<script src="js/vendor/jquery.min.js"></script>
|
|
<!--[if lt IE 9]>
|
|
<script src="js/vendor/html5shiv.min.js"></script>
|
|
<script src="js/vendor/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar navbar-default">
|
|
|
|
<div class="navbar-global theme-default">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<a href="http://www.microsoft.com/" class="navbar-brand">
|
|
<img src="../assets.onestore.ms/cdnfiles/onestorerolling-1511-11008/shell/v3/images/logo/microsoft.png" alt="Microsoft" height="23" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="navbar-local color-accent theme-dark">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<i class="glyph glyph-hamburger"></i>
|
|
</button>
|
|
|
|
<a href="index-2.html" class="navbar-brand">
|
|
<img src="images/winstrap_white.svg" alt="Winstrap" height="29" />
|
|
</a>
|
|
|
|
</div>
|
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
|
|
<ul class="nav navbar-nav">
|
|
<li class="dropdown">
|
|
<a href="colors.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Colors<i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="colors.html">All colors</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="colors.html#bootstrap-colors">Bootstrap colors</a></li>
|
|
<li><a href="colors.html#mdl-colors">MDL colors</a></li>
|
|
<li><a href="colors.html#mdl-alt-colors">MDL alt colors</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="typography.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Typography<i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="typography.html">All typography</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="typography.html#fonts">Fonts</a></li>
|
|
<li><a href="typography.html#sizes">Sizes</a></li>
|
|
<li><a href="typography.html#headings">Headings</a></li>
|
|
<li><a href="typography.html#subheadings">Subheadings</a></li>
|
|
<li><a href="typography.html#paragraphs">Paragraphs</a></li>
|
|
<li><a href="typography.html#captions">Captions</a></li>
|
|
<li><a href="typography.html#glyphs">Glyphs</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="layout.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Layout<i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="layout.html">All layout</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="layout.html#page-header">Page header</a></li>
|
|
<li><a href="layout.html#grid">Grid</a></li>
|
|
<li><a href="layout.html#grid-small-gutters">Small gutters</a></li>
|
|
<li><a href="layout.html#spacers">Spacers</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="controls.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Controls<i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="controls.html">All controls</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="controls.html#buttons">Buttons</a></li>
|
|
<li><a href="controls.html#toggle-switch">Toggle Switch</a></li>
|
|
<li><a href="controls.html#forms">Forms</a></li>
|
|
<li><a href="controls.html#putbox">Put box</a></li>
|
|
<li><a href="controls.html#progress">Progress bar</a></li>
|
|
<li><a href="controls.html#loader">Progress ring</a></li>
|
|
<li><a href="controls.html#dropdown">Dropdown</a></li>
|
|
<li><a href="controls.html#tooltips">Tooltips</a></li>
|
|
<li><a href="controls.html#flyouts">Flyouts</a></li>
|
|
<li><a href="controls.html#dialogs">Dialogs</a></li>
|
|
<li><a href="controls.html#tabs">Tabs</a></li>
|
|
<li><a href="controls.html#navs">Navbar</a></li>
|
|
<li><a href="controls.html#side-nav">Side navigation</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="components.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Components<i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="components.html">All components</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="components.html#breadcrumb">Breadcrumb</a></li>
|
|
<li><a href="components.html#back-to-top">Back to top</a></li>
|
|
<li><a href="components.html#rating">Rating</a></li>
|
|
<li><a href="components.html#labels">Labels</a></li>
|
|
<li><a href="components.html#media">Media</a></li>
|
|
<li><a href="components.html#tables">Tables</a></li>
|
|
<li><a href="components.html#responsive-table">Responsive table</a></li>
|
|
<li><a href="components.html#list-items">List items</a></li>
|
|
<li><a href="components.html#entity-list">Entity list</a></li>
|
|
<li><a href="components.html#pagination">Pagination</a></li>
|
|
<li><a href="components.html#jumbotron">Jumbotron</a></li>
|
|
<li><a href="alerts.html">Alerts</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a class="color-type-secondary" href="http://winjsdevelop.azurewebsites.net/">Win Js</a>
|
|
</li>
|
|
<li>
|
|
<a class="color-type-secondary" href="#changelog" data-toggle="modal">Changelog</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="modal modal-center" id="changelog" tabindex="-1" role="dialog" aria-labelledby="changelog-label" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<i class="glyph glyph-cancel" aria-hidden="true"></i>
|
|
</button>
|
|
<h4 class="modal-title" id="changelog-label">Changelog</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<dl>
|
|
<dt class="m-t-sm">0.5.12</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Bug fixes.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.11</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Added 5 new glyphs to the symbols font.</li>
|
|
<li>Updated Bootstrap to v3.3.7.</li>
|
|
<li>Added <a href="components.html#entity-list">Entity list</a> and <a href="controls.html#putbox">Put box.</a></li>
|
|
<li>Added <code>!important</code> to spacer classes.</li>
|
|
<li>Bug fixes.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.8</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Added default styling for <code><pre></code>, <code><blockquote></code>, <code><ul></code>, <code><ol></code>, and <code><dl></code>.</li>
|
|
<li>Fixed Jumbotron max-width issue on wide screen width.</li>
|
|
<li>Navbar styling bug fixes.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.7</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Updated glyph fonts. Glyph style is now aligned with Windows 10.</li>
|
|
<li>Added new <a href="typography.html#glyphs">glyphs</a>.</li>
|
|
<li>Removed fixed width from <code>.container</code> layout.</li>
|
|
<li>Prebuilt and minified CSS files. NPM and Bower packages now come with prebuilt <code>dist</code> folder and minified CSS files.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.6</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Simplified <a href="components.html#jumbotron">Jumbotron</a>.</li>
|
|
<li>Added <code>.compressed</code> option to <a href="controls.html#navs">Navbar</a>.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.5</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Big update to <a href="controls.html#navs">Navbar</a> allowing two navbars to stack.</li>
|
|
<li>Added variable font path with <code>!default</code> declaration to enable you to set the path based on your project needs</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.5.3</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Added <a href="controls.html#side-nav">side-nav</a> control.</li>
|
|
<li>Moved bower to devDependency in package.json.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.4.12</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Updated toggle switch, tooltip, popover, and link button.</li>
|
|
<li>Added color themes to <code><a></code> and fixed states.</li>
|
|
<li>Changed color theme classes.</li>
|
|
<li>Updated breadcrumb styling.</li>
|
|
<li>Changed font-family variable names.</li>
|
|
<li>Updated glyphs font path.</li>
|
|
<li>Fixed checkbox glyph issue.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.4.9</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Typography:</li>
|
|
<li>Updated type ramp, classes, mixins, and functions.</li>
|
|
<li>Added type controls (headings, subheadings, paragraphs, and captions).</li>
|
|
<li>Glyphs:</li>
|
|
<li>Changed glyph names to be more semantic.</li>
|
|
<li>Added glyph function to get a glyph's unicode value.</li>
|
|
<li>Other changes:</li>
|
|
<li>Added Navbar component</li>
|
|
<li>Updated Dropdown control</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.4.4</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Updates and fixes for:</li>
|
|
<li><a href="typography.html#fonts">Responsive type</a></li>
|
|
<li><a href="controls.html#buttons">Push buttons</a></li>
|
|
<li><a href="controls.html#buttons">Toggle buttons</a></li>
|
|
<li><a href="controls.html#toggle-switch">Toggle switch</a></li>
|
|
<li><a href="components.html#back-to-top">Back-to-top button</a></li>
|
|
<li><a href="controls.html#forms">Select box</a></li>
|
|
<li><a href="alerts.html">Alerts</a></li>
|
|
<li><a href="components.html#tables">Tables</a></li>
|
|
<li><a href="components.html#jumbotron">Jumbotron and highlight bar</a></li>
|
|
<li><a href="components.html#pagination">Pagination</a></li>
|
|
<li><a href="components.html#pager">Pager</a></li>
|
|
<li>Default <code><p></code> spacing</li>
|
|
<li>Remove MDL 1.0 controls and components</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.4.0</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>New colors and color naming that reflect the latest MDL colors.</li>
|
|
<li>Remove <code>win-</code> prefix from class and variable names.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.3.2</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Rename to Winstrap.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.1.1</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Add <code>win-</code> prefix to:</li>
|
|
<li><a href="components.html#list-items">list items</a></li>
|
|
<li><a href="components.html#refine-list">refine list</a></li>
|
|
<li><a href="typography.html#fonts">typography utilities</a></li>
|
|
<li><a href="tabs.html">media browser component</a></li>
|
|
<li><a href="components.html#back-to-top">back to top component</a></li>
|
|
<li><a href="alerts.html">alert stack component</a></li>
|
|
<li><a href="layout.html#section">section component</a></li>
|
|
<li>Extend the Bootstrap grid with a <a href="layout.html#grid-small-gutters">small gutter option</a>.</li>
|
|
<li>Add a <a href="images/bootstrap-winjs.html">placeholder logo</a>.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt class="m-t-sm">0.1.0</dt>
|
|
<dd>
|
|
<ul class="list-unstyled">
|
|
<li>Initialize bootstrap-winjs.</li>
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-header">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h1>Controls</h1>
|
|
<ul class="nav nav-pills" data-scroll="smooth">
|
|
<li role="presentation">
|
|
<a href="#buttons">Buttons</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#toggle-switch">Toggle Switch</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#forms">Forms</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#putbox">Put box</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#progress">Progress</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#loader">Loader</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#dropdown">Dropdown</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#tooltips">Tooltips</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#flyouts">Flyouts</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#dialogs">Dialogs</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#tabs">Tabs</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#navs">Navbar</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#side-nav">Side Navigation</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<section class="section" id="buttons">
|
|
<header class="section-header ">
|
|
<h1 class="section-title ">
|
|
<a href="#buttons">Push button</a>
|
|
</h1>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<div class="col-md-24">
|
|
<p>A button gives thes user a way to trigger an immediate action. The colors used for the bakground and text of buttons have been vetted to meet a minimum color contrast ratio of 4.5:1 for accesibility purposes.
|
|
</div>
|
|
<div class="col-md-24">
|
|
<h4>Default</h4>
|
|
<div class="btn-group">
|
|
<a class="btn btn-primary theme-default">Primary</a>
|
|
<a class="btn btn-default theme-default">Secondary</a>
|
|
<a class="btn btn-link theme-default">Button link</a>
|
|
</div>
|
|
|
|
<pre><code class="language-xml"><div class="btn-group">
|
|
<a class="btn btn-primary">Primary</a>
|
|
<a class="btn btn-default">Secondary</a>
|
|
<a class="btn btn-link">Button link</a>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>All buttons should be wrapped in a <code><div class="btn-group"></code> in order to receive their proper vertical and horizontal spacing.</li>
|
|
<li>Use the <code>.btn-</code> classes on the <code><a></code>, <code><button></code>, or <code><input></code> tags.</li>
|
|
<li><code>.btn-primary</code> indicates the primary action.</li>
|
|
<li><code>.btn-secondary</code> indicates the default action.</li>
|
|
<li><code>.btn-link</code> is used when the user needs a lighter-weight appearance.</li>
|
|
<li><code>.btn-success</code>, <code>.btn-info</code>, <code>.btn-warning</code>, and <code>.btn-danger</code> are optional classes that come from Bootstrap.</li>
|
|
<li>The <code>disabled</code> attribute can be applied to the <code><a></code>, <code><button></code>, or <code><input></code> tags.</li>
|
|
<li>The <code>.active</code> class can be applied to the <code><a></code> tag to pre-select a button.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<h4>Alt</h4>
|
|
<div class="color-black" style="padding: 0 2em 2em; margin-bottom: 1em;">
|
|
<div class="btn-group">
|
|
<a class="btn btn-block btn-primary theme-alt">Primary</a>
|
|
<a class="btn btn-block btn-secondary theme-alt">Secondary</a>
|
|
<a class="btn btn-block btn-link theme-alt">Button link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<h4>On solid color</h4>
|
|
<div class="color-fill-accent-vivid-high" style="padding: 0 2em 2em; margin-bottom: 1em;">
|
|
<div class="btn-group">
|
|
<a class="btn btn-block btn-primary theme-dark">Primary</a>
|
|
<a class="btn btn-block btn-secondary theme-dark">Secondary</a>
|
|
<a class="btn btn-block btn-link theme-dark">Button link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<h4>On light image</h4>
|
|
<div class="example-light-image-bg" style="padding: 0 2em 2em; margin-bottom: 1em;">
|
|
<div class="btn-group">
|
|
<a class="btn btn-block btn-primary theme-light">Primary</a>
|
|
<a class="btn btn-block btn-secondary theme-light">Secondary</a>
|
|
<a class="btn btn-block btn-link theme-light">Button link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<h4>On dark image</h4>
|
|
<div class="example-dark-image-bg" style="padding: 0 2em 2em; margin-bottom: 1em;">
|
|
<div class="btn-group">
|
|
<a class="btn btn-block btn-primary theme-dark">Primary</a>
|
|
<a class="btn btn-block btn-secondary theme-dark">Secondary</a>
|
|
<a class="btn btn-block btn-link theme-dark">Button link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xs-24">
|
|
<pre><code class="language-xml"><div class="btn-group">
|
|
<a class="btn btn-block btn-primary">Primary</a>
|
|
<a class="btn btn-block btn-secondary">Secondary</a>
|
|
<a class="btn btn-block btn-link">Button link</a>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>In addition to those options listed above for Push Buttons, the following theme classes can be applied to the <code><a></code>, <code><button></code>, or <code><input></code> tag: <code>.theme-default</code>, <code>.theme-alt</code>, <code>.theme-light</code> or <code>.theme-dark</code>.</li>
|
|
<li>Use the <code>.btn-block</code> class on the <code><a></code>, <code><button></code>, or <code><input></code> tags to make them full-width and stacked.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<hr />
|
|
<!-- Toggle Buttons -->
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h2>Toggle Button</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h4>Default</h4>
|
|
<div class="btn-group">
|
|
<button type="button" autocomplete="off" class="btn btn-default theme-default" data-toggle="button" aria-pressed="false">Toggle Button</button>
|
|
<button type="button" autocomplete="off" class="btn btn-default theme-default" data-toggle="button" disabled aria-pressed="false">Disabled</button>
|
|
</div>
|
|
|
|
<script>
|
|
window.addEventListener('onload', function()
|
|
{
|
|
$("[data-toggle='button']").button("toggle");
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- On dark background -->
|
|
<div class="col-md-6">
|
|
<h4>Alt</h4>
|
|
<div class="color-black" style="padding: 0 1em 1em; margin-bottom: 0.5em;">
|
|
<div class="btn-group">
|
|
<button type="button" autocomplete="off" class="btn btn-default btn-toggle theme-alt" data-toggle="button" aria-pressed="false">Toggle Button</button>
|
|
<button type="button" autocomplete="off" class="btn btn-default btn-toggle theme-alt" data-toggle="button" aria-pressed="false" disabled>Disabled</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- On colored background -->
|
|
<div class="col-md-6">
|
|
<h4>On solid color</h4>
|
|
<div class="color-fill-accent-vivid-high" style="padding: 0 1em 1em; margin-bottom: 0.5em;">
|
|
<div class="btn-group">
|
|
<button type="button" autocomplete="off" class="btn btn-default theme-dark" data-toggle="button" aria-pressed="false">Toggle Button</button>
|
|
<button type="button" autocomplete="off" class="btn btn-default theme-dark" data-toggle="button" aria-pressed="false" disabled>Disabled</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- On light image -->
|
|
<div class="col-md-6">
|
|
<h4>On light image</h4>
|
|
<div class="example-light-image-bg" style="padding: 0 1em 1em; margin-bottom: 0.5em; background-position: center;">
|
|
<div class="btn-group">
|
|
<button type="button" autocomplete="off" class="btn btn-default theme-light" data-toggle="button" aria-pressed="false">Toggle Button</button>
|
|
<button type="button" autocomplete="off" class="btn btn-default theme-light" data-toggle="button" aria-pressed="false" disabled>Disabled</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- On dark image -->
|
|
<div class="col-md-6">
|
|
<h4>On dark image</h4>
|
|
<div class="example-dark-image-bg" style="padding: 0 1em 1em; margin-bottom: 0.5em;">
|
|
<div class="btn-group">
|
|
<button type="button" autocomplete="off" class="btn btn-default theme-dark" data-toggle="button" aria-pressed="false">Toggle Button</button>
|
|
<button type="button" autocomplete="off" class="btn btn-default theme-dark" data-toggle="button" aria-pressed="false" disabled>Disabled</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-24">
|
|
<pre><code class="language-xml"><div class="btn-group">
|
|
<button type="button" autocomplete="off" class="btn btn-default" data-toggle="button" aria-pressed="false">Toggle Button</button>
|
|
<button type="button" autocomplete="off" class="btn btn-default theme-dark" data-toggle="button" aria-pressed="false" disabled>Disabled</button>
|
|
</div>
|
|
<script>
|
|
$("[data-toggle='button']").button("toggle");
|
|
</script>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>The following theme classes can be applied to the <code><button></code> tag: <code>.theme-default</code>, <code>.theme-alt</code>, <code>.theme-light</code> or <code>.theme-dark</code>.</li>
|
|
<li>Apply the <code>.active</code> class to the <code><button></code> tag to pre-select the button.</li>
|
|
<li>The <code>disabled</code> attribute can be applied to the <code><button></code> tag.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<hr />
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h2>Checkbox Toggle Button</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h4>Default</h4>
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-default theme-default active">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 1
|
|
</label>
|
|
<label class="btn btn-default theme-default">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 2
|
|
</label>
|
|
<label class="btn btn-default theme-default">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 3
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<h4>Alt</h4>
|
|
<div class="color-black" style="padding: 0 1em 1em; margin-bottom: 0.5em;">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-default theme-alt active">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 1
|
|
</label>
|
|
<label class="btn btn-default theme-alt">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 2
|
|
</label>
|
|
<label class="btn btn-default theme-alt">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 3
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h4>On solid color</h4>
|
|
<div class="color-fill-accent-vivid-high" style="padding: 0 1em 1em; margin-bottom: 0.5em;">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-default theme-dark active">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 1
|
|
</label>
|
|
<label class="btn btn-default theme-dark">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 2
|
|
</label>
|
|
<label class="btn btn-default theme-dark">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 3
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<h4>On light image</h4>
|
|
<div class="example-light-image-bg" style="padding: 0 1em 1em; margin-bottom: 0.5em;">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-default theme-light active">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 1
|
|
</label>
|
|
<label class="btn btn-default theme-light">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 2
|
|
</label>
|
|
<label class="btn btn-default theme-light">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 3
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h4>On dark image</h4>
|
|
<div class="example-dark-image-bg" style="padding: 0 1em 1em; margin-bottom: 0.5em;">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-default theme-dark active">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 1
|
|
</label>
|
|
<label class="btn btn-default theme-dark">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 2
|
|
</label>
|
|
<label class="btn btn-default theme-dark">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 3
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<pre><code class="language-xml"><div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-default active">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 1
|
|
</label>
|
|
<label class="btn btn-default">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 2
|
|
</label>
|
|
<label class="btn btn-default">
|
|
<input type="checkbox" autocomplete="off"> Checkbox 3
|
|
</label>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>The following theme classes can be applied to the <code><label></code> tag: <code>.theme-default</code>, <code>.theme-alt</code>, <code>.theme-light</code> or <code>.theme-dark</code>.</li>
|
|
<li>Apply the <code>.active</code> class to the <code><label></code> tag to pre-select the button.</li>
|
|
<li>The <code>disabled</code> attribute can be applied to the <code><label></code> tag.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<hr />
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h2>Radio Toggle Buttons</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h4>Default</h4>
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-default theme-default active">
|
|
<input type="radio" name="options" id="option1" autocomplete="off"> Radio 1
|
|
</label>
|
|
<label class="btn btn-default theme-default">
|
|
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
|
|
</label>
|
|
<label class="btn btn-default theme-default">
|
|
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<h4>Alt</h4>
|
|
<div class="color-black" style="padding: 0 1em 1em; margin-bottom: 0.5em;">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-primary theme-alt active">
|
|
<input type="radio" name="options" id="option1" autocomplete="off"> Radio 1
|
|
</label>
|
|
<label class="btn btn-primary theme-alt">
|
|
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
|
|
</label>
|
|
<label class="btn btn-primary theme-alt">
|
|
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h4>On Solid Color</h4>
|
|
<div class="color-fill-accent-vivid-high" style="padding: 0 1em 1em; margin-bottom: 0.5em;">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-default theme-dark active">
|
|
<input type="radio" name="options" id="option1" autocomplete="off"> Radio 1
|
|
</label>
|
|
<label class="btn btn-default theme-dark">
|
|
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
|
|
</label>
|
|
<label class="btn btn-default theme-dark">
|
|
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<h4>On light image</h4>
|
|
<div class="example-light-image-bg" style="padding: 0 1em 1em; margin-bottom: 0.5em;">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-default theme-light active">
|
|
<input type="radio" name="options" id="option1" autocomplete="off"> Radio 1
|
|
</label>
|
|
<label class="btn btn-default theme-light">
|
|
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
|
|
</label>
|
|
<label class="btn btn-default theme-light">
|
|
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h4>On Dark Image</h4>
|
|
<div class="example-dark-image-bg" style="padding: 0 1em 1em; margin-bottom: 0.5em;">
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-default theme-dark active">
|
|
<input type="radio" name="options" id="option1" autocomplete="off"> Radio 1
|
|
</label>
|
|
<label class="btn btn-default theme-dark">
|
|
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
|
|
</label>
|
|
<label class="btn btn-default theme-dark">
|
|
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<pre><code class="language-xml"><div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-default active">
|
|
<input type="radio" name="options" id="option1" autocomplete="off"> Radio 1
|
|
</label>
|
|
<label class="btn btn-default">
|
|
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
|
|
</label>
|
|
<label class="btn btn-default">
|
|
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
|
|
</label>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>The following theme classes can be applied to the <code><label></code> tag: <code>.theme-default</code>, <code>.theme-alt</code>, <code>.theme-light</code> or <code>.theme-dark</code>.</li>
|
|
<li>Apply the <code>.active</code> class to the <code><label></code> tag to pre-select the button.</li>
|
|
<li>The <code>disabled</code> attribute can be applied to the <code><label></code> tag.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<section class="section" id="toggle-switch">
|
|
<header class="section-header ">
|
|
<h1 class="section-title ">
|
|
<a href="#toggle-switch">Toggle Switch</a>
|
|
</h1>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<div class="col-md-24">
|
|
|
|
<!-- On light background -->
|
|
<h4>Default</h4>
|
|
<div style="padding: 0 2em 2em; margin-bottom: 0.5em;">
|
|
<div class="btn-group">
|
|
<button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
|
|
<span class="stateLabel stateLabel-on">On</span>
|
|
<span class="stateLabel stateLabel-off">Off</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- On dark background -->
|
|
<div class="col-md-6">
|
|
<h4>Alt</h4>
|
|
<div class="color-black" style="padding: 0 2em 2em; margin-bottom: 0.5em;">
|
|
<div class="btn-group">
|
|
<button type="button" data-toggle="button" class="btn btn-toggle-switch theme-alt" autocomplete="off" aria-pressed="false">
|
|
<span class="stateLabel stateLabel-on">On</span>
|
|
<span class="stateLabel stateLabel-off">Off</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- On colored background -->
|
|
<div class="col-md-6">
|
|
<h4>On solid color</h4>
|
|
<div class="color-fill-accent-vivid-high" style="padding: 0 2em 2em; margin-bottom: 0.5em;">
|
|
<div class="btn-group">
|
|
<button type="button" data-toggle="button" class="btn btn-toggle-switch theme-dark" autocomplete="off" aria-pressed="false">
|
|
<span class="stateLabel stateLabel-on">On</span>
|
|
<span class="stateLabel stateLabel-off">Off</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- On light image -->
|
|
<div class="col-md-6">
|
|
<h4>On light image</h4>
|
|
<div class="example-light-image-bg" style="padding: 0 2em 2em; margin-bottom: 0.5em; background-position: center;">
|
|
<div class="btn-group">
|
|
<button type="button" data-toggle="button" class="btn btn-toggle-switch theme-light" autocomplete="off" aria-pressed="false">
|
|
<span class="stateLabel stateLabel-on">On</span>
|
|
<span class="stateLabel stateLabel-off">Off</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- On dark image -->
|
|
<div class="col-md-6">
|
|
<h4>On dark image</h4>
|
|
<div class="example-dark-image-bg" style="padding: 0 2em 2em; margin-bottom: 0.5em;">
|
|
<div class="btn-group">
|
|
<button type="button" data-toggle="button" class="btn btn-toggle-switch theme-dark" autocomplete="off" aria-pressed="false">
|
|
<span class="stateLabel stateLabel-on">On</span>
|
|
<span class="stateLabel stateLabel-off">Off</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-24">
|
|
<pre><code class="language-xml"><div class="btn-group">
|
|
<button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
|
|
<span class="stateLabel stateLabel-on">On</span>
|
|
<span class="stateLabel stateLabel-off">Off</span>
|
|
</button>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>The following theme classes can be applied to the <code><button></code> tag: <code>.theme-default</code>, <code>.theme-alt</code>, <code>.theme-light</code> or <code>.theme-dark</code>.</li>
|
|
<li>Apply the <code>.active</code> class to the <code><button></code> tag to put the toggle switch in the On position.</li>
|
|
<li>The <code>disabled</code> attribute can be applied to the <code><button></code> tag.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<section class="section" id="forms">
|
|
<header class="section-header">
|
|
<h1 class="section-title">
|
|
<a href="#forms">Forms</a>
|
|
</h1>
|
|
<p>Individual form controls automatically receive some global styling. By default, <code><input></code>, <code><textarea></code>, and <code><select></code> elements with the <code>.form-control</code> class are set to a recommended width of 296px by setting <code>max-width: 296px</code>.
|
|
</header>
|
|
<div class="row">
|
|
|
|
<!-- On light surface -->
|
|
<div class="col-xs-24 col-lg-8">
|
|
<h4>Default theme</h4>
|
|
<form style="padding: 1em;">
|
|
<div class="form-group">
|
|
<label for="exampleInputEmail1">Email address</label>
|
|
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="exampleInputPassword1">Password</label>
|
|
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="exampleInputFile">File input</label>
|
|
<input type="file" id="exampleInputFile">
|
|
<p class="help-block">Example block-level help text here.</p>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<p class="form-group-label">Checkbox</p>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox"></input>
|
|
<span>Rest</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" checked></input>
|
|
<span>Checked</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" disabled="true"></input>
|
|
<span>Disabled</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" class="checkbox-indeterminate"></input>
|
|
<span>Indeterminate</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<p class="form-group-label">Radio buttons</p>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name='radio1'>
|
|
<span>Radio</span>
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name='radio1' checked="checked">
|
|
<span>Checked</span>
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name='radio1' disabled="true">
|
|
<span>Disabled</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-default">Submit</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- On dark surface -->
|
|
<div class="col-xs-24 col-lg-8">
|
|
<h4>Alt theme</h4>
|
|
<form class="theme-alt color-fill-vivid-high" style="padding: 1em;">
|
|
<div class="form-group">
|
|
<label for="exampleInputEmail1">Email address</label>
|
|
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="exampleInputPassword1">Password</label>
|
|
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="exampleInputFile">File input</label>
|
|
<input type="file" id="exampleInputFile">
|
|
<p class="help-block">Example block-level help text here.</p>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<p class="form-group-label">Checkbox</p>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox"></input>
|
|
<span>Rest</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" checked></input>
|
|
<span>Checked</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" disabled="true"></input>
|
|
<span>Disabled</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" class="checkbox-indeterminate"></input>
|
|
<span>Indeterminate</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<p class="form-group-label">Radio buttons</p>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name='radio1'>
|
|
<span>Radio</span>
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name='radio1' checked="checked">
|
|
<span>Checked</span>
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name='radio1' disabled="true">
|
|
<span>Disabled</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-default theme-alt">Submit</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- On colored surface -->
|
|
<div class="col-xs-24 col-lg-8">
|
|
<h4>Dark Theme</h4>
|
|
<form class="theme-dark color-fill-accent-vivid-high" style="padding: 1em;">
|
|
<div class="form-group">
|
|
<label for="exampleInputEmail1">Email address</label>
|
|
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="exampleInputPassword1">Password</label>
|
|
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="exampleInputFile">File input</label>
|
|
<input type="file" id="exampleInputFile">
|
|
<p class="help-block">Example block-level help text here.</p>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<p class="form-group-label">Checkbox</p>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox"></input>
|
|
<span>Rest</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" checked></input>
|
|
<span>Checked</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" disabled="true"></input>
|
|
<span>Disabled</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" class="checkbox-indeterminate"></input>
|
|
<span>Indeterminate</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<p class="form-group-label">Radio buttons</p>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name='radio1'>
|
|
<span>Radio</span>
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name='radio1' checked="checked">
|
|
<span>Checked</span>
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name='radio1' disabled="true">
|
|
<span>Disabled</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-default theme-dark">Submit</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="col-xs-24">
|
|
<pre><code class="language-xml"><form>
|
|
<div class="form-group">
|
|
<label for="exampleInputEmail1">Email address</label>
|
|
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="exampleInputPassword1">Password</label>
|
|
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="exampleInputFile">File input</label>
|
|
<input type="file" id="exampleInputFile">
|
|
<p class="help-block">Example block-level help text here.</p>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<p class="form-group-label">Checkbox</p>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox"></input>
|
|
<span>Rest</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" checked></input>
|
|
<span>Checked</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" disabled="true"></input>
|
|
<span>Disabled</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" id="foo"></input>
|
|
<span>Indeterminate</span>
|
|
</label>
|
|
<script type="text/javascript">
|
|
(function () {
|
|
$("#foo").prop("indeterminate", true);
|
|
})();
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<p class="form-group-label">Radio buttons</p>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name='radio1'>
|
|
<span>Radio</span>
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name='radio1' checked="checked">
|
|
<span>Checked</span>
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name='radio1' disabled="true">
|
|
<span>Disabled</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-default">Submit</button>
|
|
</form>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>Wrap labels and controls in <code><div class="form-group"></code> for optimum spacing.</li>
|
|
<li>The following theme classes can be applied to the <code><form></code> or <code><div class="form-group"></code> tags: <code>.theme-default</code>, <code>.theme-alt</code> or <code>.theme-dark</code>. Note: if <code><button></code> is inside <code><form></code> or <code>.form-group</code>, it does not automatically inherit the theme class.<br>
|
|
See documentation on <a href="controls.html#buttons">Buttons</a> for applying theme classes.</li>
|
|
<li>The <code>disabled</code> attribute can be applied to the <code><input></code> tags for all the form controls above.</li>
|
|
<li>To get an indeterminate checkbox, apply the <code>.checkbox-indeterminate</code> class to the <code><input type="checkbox"></code> tag along with the required JavaScript.</li>
|
|
<li>The <code>checked</code> attribute is placed within the input tag of either checkbox or radio to indicate the it is pre-selected.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<hr />
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h2>Text Input</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h4>Default</h4>
|
|
<form style="padding: 1em;">
|
|
<div class="form-group">
|
|
<label>Text</label>
|
|
<input type='text' class='form-control'/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="disabled">Text</label>
|
|
<input type='text' class='form-control' value="Disabled value" disabled="disabled" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Text Area</label>
|
|
<textarea class='form-control'></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Alt -->
|
|
<div class="col-xs-24 col-sm-12 col-md-6">
|
|
<h4>Alt</h4>
|
|
<form class="theme-alt color-fill-vivid-high p-xxs">
|
|
<div class="form-group">
|
|
<label>Text</label>
|
|
<input type='text' class='form-control'/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="disabled">Text</label>
|
|
<input type='text' class='form-control' value="Disabled value" disabled="disabled" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Text Area</label>
|
|
<textarea class='form-control'></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- On Color -->
|
|
<div class="col-xs-24 col-sm-12 col-md-6">
|
|
<h4>On solid color</h4>
|
|
<form class="theme-on-color color-fill-accent-vivid-high p-xxs">
|
|
<div class="form-group">
|
|
<label>Text</label>
|
|
<input type='text' class='form-control'/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="disabled">Text</label>
|
|
<input type='text' class='form-control' value="Disabled value" disabled="disabled" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Text Area</label>
|
|
<textarea class='form-control'></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- On light image -->
|
|
<div class="col-xs-24 col-sm-12 col-md-6">
|
|
<h4>On light image</h4>
|
|
<form class="theme-light example-light-image-bg p-xxs">
|
|
<div class="form-group">
|
|
<label>Text</label>
|
|
<input type='text' class='form-control'/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="disabled">Text</label>
|
|
<input type='text' class='form-control' value="Disabled value" disabled="disabled" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Text Area</label>
|
|
<textarea class='form-control'></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- On dark image -->
|
|
<div class="col-xs-24 col-sm-12 col-md-6">
|
|
<h4>On dark image</h4>
|
|
<form class="theme-dark example-dark-image-bg p-xxs">
|
|
<div class="form-group">
|
|
<label>Text</label>
|
|
<input type='text' class='form-control'/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="disabled">Text</label>
|
|
<input type='text' class='form-control' value="Disabled value" disabled="disabled" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Text Area</label>
|
|
<textarea class='form-control'></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="col-xs-24">
|
|
<pre><code class="language-xml"><form>
|
|
<div class="form-group">
|
|
<label>Text</label>
|
|
<input type='text' class='form-control'/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="disabled">Text</label>
|
|
<input type='text' class='form-control' value="Disabled value" disabled="disabled" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Text Area</label>
|
|
<textarea class='form-control'></textarea>
|
|
</div>
|
|
</form>
|
|
</code></pre>
|
|
</div>
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>The following theme classes can be applied to the <code><form></code> or <code><div class="form-group"></code> tags: <code>.theme-default</code>, <code>.theme-alt</code>, <code>.theme-light</code> or <code>.theme-dark</code>.</li>
|
|
<li>The <code>disabled</code> attribute can be applied to the <code><input></code> or <code><textarea></code> tags.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h2>Combo</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-24 col-sm-12 col-md-6">
|
|
<h4>Default</h4>
|
|
<form style="padding:12px;">
|
|
<div class="form-group">
|
|
<div class="combobox">
|
|
<select class="form-control">
|
|
<option>Lorem</option>
|
|
<option>ipsum</option>
|
|
<option>dolor</option>
|
|
<option>sit</option>
|
|
<option>amet</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<select multiple class="form-control">
|
|
<option>Lorem</option>
|
|
<option>ipsum</option>
|
|
<option>dolor</option>
|
|
<option>sit</option>
|
|
<option>amet</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-24 col-sm-12 col-md-6">
|
|
<h4>Alt</h4>
|
|
<form class="theme-alt color-fill-vivid-high p-xxs">
|
|
<div class="form-group">
|
|
<div class="combobox">
|
|
<select class="form-control">
|
|
<option>Lorem</option>
|
|
<option>ipsum</option>
|
|
<option>dolor</option>
|
|
<option>sit</option>
|
|
<option>amet</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<select multiple class="form-control">
|
|
<option>Lorem</option>
|
|
<option>ipsum</option>
|
|
<option>dolor</option>
|
|
<option>sit</option>
|
|
<option>amet</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="col-xs-24 col-sm-12 col-md-6">
|
|
<h4>On solid color</h4>
|
|
<form class="theme-on-color color-fill-accent-vivid-high p-xxs">
|
|
<div class="form-group">
|
|
<div class="combobox">
|
|
<select class="form-control">
|
|
<option>Lorem</option>
|
|
<option>ipsum</option>
|
|
<option>dolor</option>
|
|
<option>sit</option>
|
|
<option>amet</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<select multiple class="form-control">
|
|
<option>Lorem</option>
|
|
<option>ipsum</option>
|
|
<option>dolor</option>
|
|
<option>sit</option>
|
|
<option>amet</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="col-xs-24 col-sm-12 col-md-6">
|
|
<h4>On light image</h4>
|
|
<form class="theme-light example-light-image-bg p-xxs">
|
|
<div class="form-group">
|
|
<div class="combobox">
|
|
<select class="form-control">
|
|
<option>Lorem</option>
|
|
<option>ipsum</option>
|
|
<option>dolor</option>
|
|
<option>sit</option>
|
|
<option>amet</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<select multiple class="form-control">
|
|
<option>Lorem</option>
|
|
<option>ipsum</option>
|
|
<option>dolor</option>
|
|
<option>sit</option>
|
|
<option>amet</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="col-xs-24 col-sm-12 col-md-6">
|
|
<h4>On dark image</h4>
|
|
<form class="theme-dark example-dark-image-bg p-xxs">
|
|
<div class="form-group">
|
|
<div class="combobox">
|
|
<select class="form-control">
|
|
<option>Lorem</option>
|
|
<option>ipsum</option>
|
|
<option>dolor</option>
|
|
<option>sit</option>
|
|
<option>amet</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<select multiple class="form-control">
|
|
<option>Lorem</option>
|
|
<option>ipsum</option>
|
|
<option>dolor</option>
|
|
<option>sit</option>
|
|
<option>amet</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<pre><code class="language-xml"><form>
|
|
<div class="form-group">
|
|
<div class="combobox">
|
|
<select class="form-control">
|
|
<option>Lorem</option>
|
|
<option>ipsum</option>
|
|
<option>dolor</option>
|
|
<option>sit</option>
|
|
<option>amet</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<select multiple class="form-control">
|
|
<option>Lorem</option>
|
|
<option>ipsum</option>
|
|
<option>dolor</option>
|
|
<option>sit</option>
|
|
<option>amet</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</code></pre>
|
|
</div>
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>The following theme classes can be applied to the <code><form></code> tag: <code>.theme-default</code>, <code>.theme-alt</code>, <code>.theme-light</code> or <code>.theme-dark</code>.</li>
|
|
<li>The <code>disabled</code> attribute can be applied to the <code><select></code> tags above.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<hr />
|
|
<section class="section" id="putbox">
|
|
<header class="section-header row">
|
|
<h1 class="section-title col-xs-24">
|
|
<a href="#putbox">Put Box</a>
|
|
</h1>
|
|
</header>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h4 class="section-title">Default</h4>
|
|
<div class="m-t-xxxs p-t-xxxs p-b-xs">
|
|
<div class="putbox">
|
|
<div class="putbox-icon">
|
|
<span class="glyph glyph-clock"></span>
|
|
</div>
|
|
<div class="putbox-content">
|
|
<div class="content-title">Time format:</div>
|
|
<form class="content-form">
|
|
<input type="text" class="form-control" value="H:i"/>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="putbox">
|
|
<div class="putbox-icon">
|
|
<span class="glyph glyph-picture"></span>
|
|
</div>
|
|
<div class="putbox-content">
|
|
<div class="content-title">New photos will save to:</div>
|
|
<form class="content-form">
|
|
<div class="combobox">
|
|
<select class="form-control">
|
|
<option>This PC (C:)</option>
|
|
<option>Local Disk (D:)</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
<a href="#" class="btn btn-link btn-block">Advanced options</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<h4 class="section-title">Alt</h4>
|
|
<div class="m-t-xxxs p-t-xxxs p-b-xs p-l-xs color-bg-dark-vivid-high">
|
|
<div class="putbox theme-alt">
|
|
<div class="putbox-icon">
|
|
<span class="glyph glyph-clock"></span>
|
|
</div>
|
|
<div class="putbox-content">
|
|
<div class="content-title">Time format:</div>
|
|
<form class="content-form theme-alt">
|
|
<input type="text" class="form-control" value="H:i"/>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="putbox theme-alt">
|
|
<div class="putbox-icon">
|
|
<span class="glyph glyph-picture"></span>
|
|
</div>
|
|
<div class="putbox-content">
|
|
<div class="content-title">New photos will save to:</div>
|
|
<form class="content-form theme-alt">
|
|
<div class="combobox">
|
|
<select class="form-control">
|
|
<option>This PC (C:)</option>
|
|
<option>Local Disk (D:)</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
<a href="#" class="btn btn-link btn-block">Advanced options</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<pre><code class="language-xml"> <div class="putbox">
|
|
<div class="putbox-icon">
|
|
<span class="glyph glyph-clock"></span>
|
|
</div>
|
|
<div class="putbox-content">
|
|
<div class="content-title">Time format:</div>
|
|
<form class="content-form">
|
|
<input type="text" class="form-control" value="H:i"/>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="putbox">
|
|
<div class="putbox-icon">
|
|
<span class="glyph glyph-picture"></span>
|
|
</div>
|
|
<div class="putbox-content">
|
|
<div class="content-title">New photos will save to:</div>
|
|
<form class="content-form">
|
|
<div class="combobox">
|
|
<select class="form-control">
|
|
<option>This PC (C:)</option>
|
|
<option>Local Disk (D:)</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
<a href="#" class="btn btn-link btn-block">Advanced options</a>
|
|
</div>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<hr />
|
|
<section class="section" id="progress">
|
|
<header class="section-header row">
|
|
<h1 class="section-title col-xs-24">
|
|
<a href="#progress">Progress</a>
|
|
</h1>
|
|
</header>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h3>Determinate progress bar</h3>
|
|
</div>
|
|
|
|
<div class="col-xs-24">
|
|
<div style="padding:20px;">
|
|
<div class="col-xs-24">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
|
|
<span class="sr-only">60% Complete</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="padding:20px; background-color:#000;">
|
|
<div class="col-xs-24">
|
|
<div class="progress theme-alt">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
|
|
<span class="sr-only">60% Complete</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="padding:20px; background-color:#0078D7;">
|
|
<div class="col-xs-24">
|
|
<div class="progress theme-dark">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
|
|
<span class="sr-only">60% Complete</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<pre><code class="language-xml"><div class="progress">
|
|
<div class="progress-bar" role="progressbar"
|
|
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
|
|
style="width: 60%;">
|
|
<span class="sr-only">60%</span>
|
|
</div>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>The following theme classes can be applied to the <code><div class="progress"></code> tag: <code>.theme-default</code>, <code>.theme-alt</code> or <code>.theme-dark</code>.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<hr />
|
|
<section class="section" id="loader">
|
|
<header class="section-header row">
|
|
<h1 class="section-title col-xs-24">
|
|
<a href="#loader">Indeterminate Progress</a>
|
|
</h1>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24" >
|
|
|
|
<h3>Progress Ring</h3>
|
|
|
|
<p>
|
|
<div class="progress-ring">
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
</div>
|
|
|
|
<div class="progress-ring progress-medium">
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
</div>
|
|
|
|
<div class="progress-ring progress-large">
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
</div>
|
|
</p>
|
|
|
|
<pre><code class="language-xml"><div class="progress-ring">
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-24 m-b-sm">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<pre><code>{> progress-ring-guidance.md}
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Progress Bar</h3>
|
|
|
|
<p>
|
|
<div class="progress-bar">
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
</div>
|
|
</p>
|
|
|
|
<pre><code class="language-xml"><div class="progress-bar">
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
<div class="progress-circle"></div>
|
|
</div>
|
|
</code></pre>
|
|
|
|
<div class="col-md-24 m-b-sm">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>To center the progress bar, the parent control should have <code>text-align</code> to <code>center</code>. E.g. <code><div style="text-align: center"></code>.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
<hr />
|
|
<section class="section row" id="dropdown">
|
|
<header class="section-header">
|
|
<h1 class="section-title col-xs-24">
|
|
<a href="#dropdown">Dropdown</a>
|
|
</h1>
|
|
</header>
|
|
<div class="col-xs-24">
|
|
<p>
|
|
This is a simple dropdown menu with links inside. The dropdown code has specific accessibility settings.
|
|
</p>
|
|
|
|
<h4>Default</h4>
|
|
<div class="btn-group">
|
|
<div class="dropdown">
|
|
<button id="dropdown-1" class="btn btn-dropdown dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
|
|
Dropdown sample
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-example">
|
|
<li><a href="#">Item 1</a></li>
|
|
<li><a href="#">Item 2</a></li>
|
|
<li><a href="#" class="disabled">Disabled</a></li>
|
|
</ul>
|
|
</div> </div>
|
|
</div>
|
|
<div class="col-xs-24 col-sm-12 col-md-6">
|
|
<h4>On color</h4>
|
|
<div class="color-blue p-v-xxs p-h-xxs">
|
|
<div class="dropdown theme-on-color">
|
|
<button id="dropdown-2" class="btn btn-dropdown dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
|
|
Dropdown sample
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-example">
|
|
<li><a href="#">Item 1</a></li>
|
|
<li><a href="#">Item 2</a></li>
|
|
<li><a href="#" class="disabled">Disabled</a></li>
|
|
</ul>
|
|
</div> </div>
|
|
</div>
|
|
<div class="col-xs-24 col-sm-12 col-md-6">
|
|
<h4>Alt-theme</h4>
|
|
<div class="color-black p-v-xxs p-h-xxs">
|
|
<div class="dropdown theme-alt">
|
|
<button id="dropdown-3" class="btn btn-dropdown dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
|
|
Dropdown sample
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-example">
|
|
<li><a href="#">Item 1</a></li>
|
|
<li><a href="#">Item 2</a></li>
|
|
<li><a href="#" class="disabled">Disabled</a></li>
|
|
</ul>
|
|
</div> </div>
|
|
</div>
|
|
<div class="col-xs-24 col-sm-12 col-md-6">
|
|
<h4>On light image</h4>
|
|
<div class="example-light-image-bg p-v-xxs p-h-xxs">
|
|
<div class="dropdown theme-light">
|
|
<button id="dropdown-4" class="btn btn-dropdown dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
|
|
Dropdown sample
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-example">
|
|
<li><a href="#">Item 1</a></li>
|
|
<li><a href="#">Item 2</a></li>
|
|
<li><a href="#" class="disabled">Disabled</a></li>
|
|
</ul>
|
|
</div> </div>
|
|
</div>
|
|
<div class="col-xs-24 col-sm-12 col-md-6">
|
|
<h4>On dark image</h4>
|
|
<div class="example-dark-image-bg p-v-xxs p-h-xxs">
|
|
<div class="dropdown theme-dark">
|
|
<button id="dropdown-5" class="btn btn-dropdown dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
|
|
Dropdown sample
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-example">
|
|
<li><a href="#">Item 1</a></li>
|
|
<li><a href="#">Item 2</a></li>
|
|
<li><a href="#" class="disabled">Disabled</a></li>
|
|
</ul>
|
|
</div> </div>
|
|
</div>
|
|
<div class="col-xs-24">
|
|
<pre><code class="language-xml"><div class="dropdown">
|
|
<button id="example-dropdown" class="btn btn-dropdown dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
|
|
Dropdown sample
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-example">
|
|
<li><a href="#">Item 1</a></li>
|
|
<li><a href="#">Item 2</a></li>
|
|
<li><a href="#" class="disabled">Disabled</a></li>
|
|
</ul>
|
|
</div>```
|
|
</code></pre>
|
|
</div>
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>The following theme classes can be applied to the <code><div class="dropdown"></code> tag: <code>.theme-default</code>, <code>.theme-alt</code>, <code>.theme-light</code> or <code>.theme-dark</code>.</li>
|
|
<li>The <code>disabled</code> attribute can be applied to the <code><button></code> tag to disable the control or the <code>.disabled</code> class can be applied to an <code><a></code> tag to disable an item in the dropdown menu.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<hr />
|
|
<section class="section" id="tooltips">
|
|
<header class="section-header row">
|
|
<h1 class="section-title col-xs-24">
|
|
<a href="#tooltips">Tooltips</a>
|
|
</h1>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24" style="margin-bottom: 1em;">
|
|
<p>
|
|
This is <a href="javascript:void(0)" data-toggle="tooltip" title="Tooltip content">a simple tooltip</a> on top (default).
|
|
On the <a href="javascript:void(0)" data-toggle="tooltip" data-placement="left" title="Tooltip content">left</a>.
|
|
On the <a href="javascript:void(0)" data-toggle="tooltip" data-placement="bottom" title="Tooltip content">bottom</a>.
|
|
On the <a href="javascript:void(0)" data-toggle="tooltip" data-placement="right" title="Tooltip content">right</a>.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-xs-24" style="margin-bottom: 2em;">
|
|
<p>You can also place them on buttons.</p>
|
|
<button class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Tooltip content">Tooltip left</button>
|
|
<button class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip content">Tooltip top</button>
|
|
<button class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Tooltip content">Tooltip bottom</button>
|
|
<button class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Tooltip content">Tooltip right</button>
|
|
</div>
|
|
|
|
<div class="col-xs-24" style="margin-bottom: 2em;">
|
|
<p>Tooltips are also available in alt color.</p>
|
|
<button class="btn btn-primary theme-alt" data-toggle="tooltip" data-placement="right" title="Tooltip content">Tooltip in alt color</button>
|
|
</div>
|
|
|
|
<div class="col-md-24" style="margin-bottom: 1em">
|
|
<p>To enable the tooltip on the HTML:</p>
|
|
|
|
<pre><code class="language-xml"><span data-toggle="tooltip" title="Tooltip content">
|
|
Has a tooltip
|
|
</span>
|
|
</code></pre>
|
|
</div>
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>The following theme classes can be applied to the <code><span data-toggle="tooltip"></code> tag: <code>.theme-default</code>, <code>.theme-alt</code>, <code>.theme-light</code> or <code>.theme-dark</code>.</li>
|
|
<li>The <code>data-placement</code> attribute can be set to the following values: <code>top</code>, <code>right</code>, <code>bottom</code> or <code>left</code> and governs the placement of the tooltip with respect to the entry point. It is applied to the <code><span data-toggle="tooltip"></code> tag. The default value is <code>top</code>.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<p>And the required JavaScript initialization:</p>
|
|
|
|
<pre><code class="language-javascript">$(function () {
|
|
$('[data-toggle="tooltip"]').tooltip({
|
|
template: '<div class="tooltip" role="tooltip"><div class="tooltip-inner"></div></div>'
|
|
});
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<hr />
|
|
<section class="section" id="flyouts">
|
|
<header class="section-header row">
|
|
<h1 class="section-title col-md-24">
|
|
<a href="#flyouts">Flyouts</a>
|
|
</h1>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<div class="col-md-24">
|
|
<p>Flyouts, referred to as Popovers by Bootstrap, expose small overlays of content when an element is selected.</p>
|
|
<button type="button" class="btn btn-primary" data-toggle="popover" data-content="Flyout content">Toggle flyout</button>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<p>Four flyout directions are available: left, top, bottom, and right aligned. Indicate the direction in the <code>data-placement</code> attribute.</p>
|
|
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="left" data-content="Flyout content">Flyout on left</button>
|
|
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" data-content="Flyout content">Flyout on top</button>
|
|
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="bottom" data-content="Flyout content">Flyout on bottom</button>
|
|
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="right" data-content="Flyout content">Flyout on right</button>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<p>Indicate the flyout's color theme in the <code>data-theme</code> attribute.</p>
|
|
<button type="button" class="btn btn-primary" data-toggle="popover" data-theme="theme-alt" data-content="Flyout content">Flyout in alt theme</button>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<pre><code class="language-xml"><button type="button"
|
|
class="btn btn-primary"
|
|
data-toggle="popover"
|
|
data-content="Flyout content">
|
|
Toggle flyout
|
|
</button>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>The <code>data-theme</code> attribute can be set to the following values: <code>theme-default</code>, <code>theme-alt</code>, <code>theme-light</code> or <code>theme-dark</code>. It is applied to the <code><button></code> tag.</li>
|
|
<li>The <code>data-placement</code> attribute can be set to the values: <code>top</code>, <code>right</code>, <code>bottom</code> or <code>left</code> and governs the placement of the flyout with respect to the entry point. It is applied to the <code><button></code> tag. The default value is <code>right</code>.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<pre><code class="language-javascript">$(function () {
|
|
$('[data-toggle="popover"]').each(function () {
|
|
var $element = $(this);
|
|
|
|
$element.popover({
|
|
template: '<div class="popover" role="tooltip"><div class="popover-content"></div></div>'
|
|
}).data('bs.popover').tip().addClass($element.data("theme"));
|
|
});
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<h3>Dismissible flyout</h3>
|
|
<p>To dismiss flyouts on the next click, use the focus trigger.</p>
|
|
<a tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="focus" data-content="This is a dismissible flyout. The next click outside of the button dismisses this flyout.">Dismissible flyout</a>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<pre><code class="language-xml"><a role="button"
|
|
class="btn btn-primary"
|
|
tabindex="0"
|
|
data-toggle="popover"
|
|
data-trigger="focus"
|
|
data-content="Flyout content">
|
|
Dismissible flyout
|
|
</a>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>Dismissible flyouts also require use of the <code><a></code> tag, not the <code><button></code> tag, and must include the <code>role="button"</code> and <code>tabindex</code> attributes.</li>
|
|
<li>The <code>data-theme</code> attribute can be set to the following values: <code>theme-default</code>, <code>theme-alt</code>, <code>theme-light</code> or <code>theme-dark</code>. It is applied to the <code><a></code> tag.</li>
|
|
<li>The <code>data-placement</code> attribute can be set to the following values: <code>top</code>, <code>right</code>, <code>bottom</code> or <code>left</code> and governs the placement of the flyout with respect to the entry point. It is applied to the <code><a></code> tag. The default value is <code>right</code>.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-md-24">
|
|
<pre><code class="language-javascript">$(function () {
|
|
$('[data-toggle="popover"]').each(function () {
|
|
var $element = $(this);
|
|
|
|
$element.popover({
|
|
template: '<div class="popover" role="tooltip"><div class="popover-content"></div></div>'
|
|
}).data('bs.popover').tip().addClass($element.data("theme"));
|
|
});
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<h3>Closing button</h3>
|
|
<p>Adding a button inside of a flyout can be triggered with JavaScript. Insert <code>id="#btn-close"</code> within the html to call the flyout content specified in the script tags.</p>
|
|
<button type="button" id="btn-close" class="btn btn-primary" role="button">Flyout with button</button>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<pre><code class="language-xml"><button type="button"
|
|
role="button"
|
|
id="btn-close"
|
|
class="btn btn-primary">
|
|
Flyout with button
|
|
</button>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>To add a button that doesn't close the flyout when clicked, remove the <code>onclick="$("#btn-close").popover("hide");"</code> element from the JS below.</li>
|
|
<li>The <code>data-theme</code> attribute can be set to the following values: <code>theme-default</code>, <code>theme-alt</code>, <code>theme-light</code> or <code>theme-dark</code>. It is applied to the <code><button></code> tag.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-md-24">
|
|
<pre><code class="language-javascript">$(function () {
|
|
if ($('#btn-close').length) {
|
|
$('#btn-close').popover({
|
|
placement: 'right',
|
|
html: 'true',
|
|
content: 'This is a flyout with a button. <button type="button" class="btn btn-primary ' + $('#btn-close').data("theme") + '"onclick="$(&quot;#btn-close&quot;).popover(&quot;hide&quot;);">Button</button>',
|
|
template: '<div class="popover" role="tooltip"><div class="popover-content"></div></div>'
|
|
}).data('bs.popover').tip().addClass($('#btn-close').data("theme"));
|
|
}
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<hr />
|
|
<section class="section" id="dialogs">
|
|
<header class="section-header row">
|
|
<h1 class="section-title col-xs-24">
|
|
<a href="#dialogs">Dialogs</a>
|
|
</h1>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-sample">
|
|
Launch demo dialog
|
|
</button>
|
|
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-sample-alt">
|
|
Launch dialog in alt theme
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal modal-center-vertical" id="modal-sample" tabindex="-1" role="dialog" aria-labelledby="modal-sample-label" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="modal-sample-label">Dialog title</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary">Button</button>
|
|
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal modal-center-vertical theme-alt" id="modal-sample-alt" tabindex="-1" role="dialog" aria-labelledby="modal-sample-label" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="modal-sample-label">Dialog in alt theme</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-10">
|
|
<p>Example with a button to launch the dialog:</p>
|
|
|
|
<pre><code class="language-xml"><div class="btn-group">
|
|
<button type="button" class="btn btn-primary btn-lg"
|
|
data-toggle="modal"
|
|
data-target="#modal-sample">
|
|
Launch demo dialog
|
|
</button>
|
|
</div>
|
|
</code></pre>
|
|
|
|
<p>Launching the dialog with the <a href="http://getbootstrap.com/javascript/#modals-methods" target="_blank">JavaScript API</a>:</p>
|
|
|
|
<pre><code class="language-javascript">$('#modal-sample').modal('show');
|
|
</code></pre>
|
|
|
|
<p>Closing the dialog with the <a href="http://getbootstrap.com/javascript/#modals-methods" target="_blank">JavaScript API</a>:</p>
|
|
|
|
<pre><code class="language-javascript">$('#modal-sample').modal('hide');
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-14">
|
|
<p>By default the dialog is already in the DOM:</p>
|
|
|
|
<pre><code class="language-xml"><div class="modal" id="modal-sample"
|
|
tabindex="-1" role="dialog"
|
|
aria-labelledby="modal-sample-label" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="modal-sample-label">
|
|
Dialog title
|
|
</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
Lorem ipsum dolor sit amet.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary">
|
|
Button
|
|
</button>
|
|
<button type="button" class="btn btn-info"
|
|
data-dismiss="modal">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code></pre>
|
|
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>The following theme classes can be applied to the <code><div class="modal"></code> tag: <code>.theme-default</code> or <code>.theme-alt</code>.</li>
|
|
<li>Add the <code>.modal-center-vertical</code> class to the <code><div class="modal"></code> tag in order to center the dialog vertically.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</section>
|
|
<hr />
|
|
<section class="section" id="tabs">
|
|
<header class="section-header row">
|
|
<h1 class="section-title col-xs-24">
|
|
<a href="#tabs">Tabs</a>
|
|
</h1>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<p>The Bootstrap Tabs component is styled to match the MDL Pivot control.</p>
|
|
|
|
<!-- Nav tabs -->
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
|
|
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
|
|
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
|
|
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
|
|
</ul>
|
|
<br>
|
|
<p>Pivots are available in the alt theme as well.</p>
|
|
<!-- Nav tabs alt color -->
|
|
<ul class="nav nav-tabs theme-alt" role="tablist" style="background-color:#000;">
|
|
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
|
|
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
|
|
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
|
|
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
|
|
</ul>
|
|
<br>
|
|
<!-- Tab panes -->
|
|
<div class="tab-content">
|
|
<div role="tabpanel" class="tab-pane active" id="home">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat sollicitudin dui mollis imperdiet. Nam fringilla sed odio sit amet luctus. In hac habitasse platea dictumst. Nunc non nulla in quam porttitor pretium eget congue metus. Morbi volutpat nisl ut urna interdum mollis. Cras pretium nisi vel neque vulputate, a luctus purus dictum. Mauris non mauris semper, consectetur nisi id, lacinia libero. Curabitur ante diam, viverra at sagittis quis, ullamcorper quis felis. Curabitur maximus tellus non sagittis finibus. Nullam ut dolor tincidunt nisi fermentum suscipit. Maecenas eleifend lorem sit amet massa tristique facilisis. Nunc varius velit et magna suscipit gravida. Phasellus lobortis congue magna ut iaculis. Sed sodales ut tortor a interdum. Maecenas sagittis augue augue, eu sollicitudin libero volutpat eu. Phasellus tempor lobortis gravida.
|
|
</div>
|
|
<div role="tabpanel" class="tab-pane" id="profile">
|
|
Integer in libero dapibus, finibus est at, ultricies ligula. Quisque euismod sodales cursus. Fusce finibus volutpat ex, sit amet molestie tortor. Integer pellentesque accumsan lectus viverra vehicula. Suspendisse porttitor arcu risus, a lacinia ligula sodales eu. Morbi consectetur sem at ex aliquet venenatis non id erat. Duis fermentum risus id massa auctor auctor. Nam hendrerit posuere laoreet. Praesent nisl libero, euismod eget faucibus quis, dignissim at tortor. Morbi nec neque vel diam maximus ultrices. Nam condimentum imperdiet metus, et lobortis enim vulputate non. Nam et neque enim. Quisque in blandit nunc, eu ornare tellus. Integer eget urna tincidunt libero maximus accumsan.
|
|
</div>
|
|
<div role="tabpanel" class="tab-pane" id="messages">
|
|
Morbi porta elit vel ante tempus, vel fringilla augue tincidunt. Donec vehicula lorem velit, at pulvinar purus maximus at. Sed id libero interdum, pellentesque magna eu, varius ex. Morbi quis leo consequat, tempor massa ut, gravida enim. Nam a neque in turpis dapibus varius ut ut tortor. Cras sagittis massa nisi. Aliquam mollis, lectus molestie finibus vulputate, neque sem posuere tellus, eu dapibus erat massa id tortor. Vivamus sed dictum sapien, et tristique odio. Quisque ac ligula viverra, sollicitudin sapien in, sollicitudin est. Cras ultrices malesuada porttitor. Nunc non enim eget eros gravida sodales.
|
|
</div>
|
|
<div role="tabpanel" class="tab-pane" id="settings">
|
|
Suspendisse scelerisque neque nisi, a luctus arcu aliquet sit amet. Nullam vel consectetur mi. Nam imperdiet, tellus id accumsan posuere, risus eros tempor libero, a facilisis lacus dolor vitae sem. Fusce dolor leo, hendrerit sagittis diam sed, sodales luctus felis. Aenean accumsan ullamcorper ipsum, tincidunt tempor metus blandit sit amet. Duis sagittis gravida purus vel bibendum. Aliquam sagittis ligula a elementum interdum. Duis placerat ligula lorem.
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<pre><code class="language-xml"><!-- Nav tabs -->
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
|
|
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
|
|
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
|
|
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
|
|
</ul>
|
|
|
|
<!-- Tab panes -->
|
|
<div class="tab-content">
|
|
<div role="tabpanel" class="tab-pane active" id="home">...</div>
|
|
<div role="tabpanel" class="tab-pane" id="profile">...</div>
|
|
<div role="tabpanel" class="tab-pane" id="messages">...</div>
|
|
<div role="tabpanel" class="tab-pane" id="settings">...</div>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>The following theme classes can be applied to the <code><ul></code> tag: <code>.theme-default</code> or <code>.theme-alt</code>.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
<hr />
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<section class="section" id="buttons">
|
|
<header class="section-header ">
|
|
<h1 class="section-title ">
|
|
<a name="navs">Navbar</a>
|
|
</h1>
|
|
</header>
|
|
<nav class="navbar navbar-default">
|
|
<div class="navbar-global theme-default">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<i class="glyph glyph-hamburger"></i>
|
|
</button>
|
|
|
|
<a href="http://www.microsoft.com/" class="navbar-brand">
|
|
<img src="../assets.onestore.ms/cdnfiles/onestorerolling-1511-11008/shell/v3/images/logo/microsoft.png" alt="Microsoft" height="23" />
|
|
</a>
|
|
</div>
|
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
|
<ul class="nav navbar-nav">
|
|
<li class="dropdown">
|
|
<a href="colors.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Store <i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="colors.html">Store home</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="colors.html#bootstrap-colors">Devices</a></li>
|
|
<li><a href="colors.html#mdl-colors">Software</a></li>
|
|
<li><a href="colors.html#mdl-alt-colors">Apps</a></li>
|
|
<li><a href="colors.html#mdl-alt-colors">Games</a></li>
|
|
<li><a href="colors.html#mdl-alt-colors">Entertainment</a></li>
|
|
<li><a href="colors.html#mdl-alt-colors">Business & education</a></li>
|
|
<li><a href="colors.html#mdl-alt-colors">Sale</a></li>
|
|
<li><a href="colors.html#mdl-alt-colors">Find a store</a></li>
|
|
<li><a href="colors.html#mdl-alt-colors">Gift cards</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="typography.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Products <i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="typography.html">Software & services</a></li>
|
|
<li><a href="typography.html#fonts">Devices & Xbox</a></li>
|
|
<li><a href="typography.html#sizes">For business</a></li>
|
|
<li><a href="typography.html#headings">For developers & IT pros</a></li>
|
|
<li><a href="typography.html#subheadings">For students & educators</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="layout.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Support <i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="layout.html">Windows</a></li>
|
|
<li><a href="layout.html#page-header">Office</a></li>
|
|
<li><a href="layout.html#grid">Surface</a></li>
|
|
<li><a href="layout.html#grid-small-gutters">Xbox</a></li>
|
|
<li><a href="layout.html#spacers">Windows phone</a></li>
|
|
<li><a href="layout.html#spacers">By resource</a></li>
|
|
<li><a href="layout.html#spacers">Security & updates</a></li>
|
|
<li><a href="layout.html#spacers">Popular topics</a></li>
|
|
<li><a href="layout.html#spacers">Sales & orders</a></li>
|
|
<li><a href="layout.html#spacers">Contact us</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<form class="navbar-form navbar-right" role="search">
|
|
<div class="form-group">
|
|
<input type="search" class="form-control" placeholder="Search">
|
|
</div>
|
|
<button type="submit" class="btn btn-default"></button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar-local color-accent theme-dark">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<i class="glyph glyph-hamburger"></i>
|
|
</button>
|
|
<a class="navbar-brand" href="#">Brand</a>
|
|
</div>
|
|
|
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
|
|
<ul class="nav navbar-nav">
|
|
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
|
|
<li><a href="#">Link</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li role="separator" class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
<li role="separator" class="divider"></li>
|
|
<li><a href="#">One more separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="#">Link</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li role="separator" class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<pre><code class="language-xml"><nav class="navbar navbar-default">
|
|
<div class="navbar-global theme-default">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<i class="glyph glyph-hamburger"></i>
|
|
</button>
|
|
|
|
<a href="http://www.microsoft.com" class="navbar-brand">
|
|
<img src="https://assets.onestore.ms/cdnfiles/onestorerolling-1511-11008/shell/v3/images/logo/microsoft.png" alt="Microsoft" height="23" />
|
|
</a>
|
|
</div>
|
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
|
<ul class="nav navbar-nav">
|
|
<li class="dropdown">
|
|
<a href="colors.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Store <i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="colors.html">Store home</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="colors.html#bootstrap-colors">Devices</a></li>
|
|
<li><a href="colors.html#mdl-colors">Software</a></li>
|
|
<li><a href="colors.html#mdl-alt-colors">Apps</a></li>
|
|
<li><a href="colors.html#mdl-alt-colors">Games</a></li>
|
|
<li><a href="colors.html#mdl-alt-colors">Entertainment</a></li>
|
|
<li><a href="colors.html#mdl-alt-colors">Business &amp; education</a></li>
|
|
<li><a href="colors.html#mdl-alt-colors">Sale</a></li>
|
|
<li><a href="colors.html#mdl-alt-colors">Find a store</a></li>
|
|
<li><a href="colors.html#mdl-alt-colors">Gift cards</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="typography.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Products <i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="typography.html">Software &amp; services</a></li>
|
|
<li><a href="typography.html#fonts">Devices &amp; Xbox</a></li>
|
|
<li><a href="typography.html#sizes">For business</a></li>
|
|
<li><a href="typography.html#headings">For developers &amp; IT pros</a></li>
|
|
<li><a href="typography.html#subheadings">For students &amp; educators</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="layout.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Support <i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="layout.html">Windows</a></li>
|
|
<li><a href="layout.html#page-header">Office</a></li>
|
|
<li><a href="layout.html#grid">Surface</a></li>
|
|
<li><a href="layout.html#grid-small-gutters">Xbox</a></li>
|
|
<li><a href="layout.html#spacers">Windows phone</a></li>
|
|
<li><a href="layout.html#spacers">By resource</a></li>
|
|
<li><a href="layout.html#spacers">Security &amp; updates</a></li>
|
|
<li><a href="layout.html#spacers">Popular topics</a></li>
|
|
<li><a href="layout.html#spacers">Sales &amp; orders</a></li>
|
|
<li><a href="layout.html#spacers">Contact us</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<form class="navbar-form navbar-right" role="search">
|
|
<div class="form-group">
|
|
<input type="search" class="form-control" placeholder="Search">
|
|
</div>
|
|
<button type="submit" class="btn btn-default"></button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar-local color-accent theme-dark">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<i class="glyph glyph-hamburger"></i>
|
|
</button>
|
|
<a class="navbar-brand" href="#">Brand</a>
|
|
</div>
|
|
|
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
|
|
<ul class="nav navbar-nav">
|
|
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
|
|
<li><a href="#">Link</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li role="separator" class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
<li role="separator" class="divider"></li>
|
|
<li><a href="#">One more separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="#">Link</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <i class="glyph glyph-chevron-down-2"></i></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li role="separator" class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</code></pre>
|
|
<div class="row">
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>The Winstrap navbar supports all of the options from the Bootstrap navbar.</li>
|
|
<li>Align nav links, forms, buttons, or text, using the <code>.navbar-left</code> or <code>.navbar-right</code> utility classes.</li>
|
|
<li>To use global and local navigation bars together (as seen above and on Microsoft web sites) use the standard bootstrap markup, wrapping <code>.container</code> or <code>.container-fluid</code> in <code>.navbar-global</code> or <code>.navbar-local</code>.</li>
|
|
<li>When using a single navigation bar, <code>.navigation-global</code> will give you a 48px navbar and <code>.navigation-local</code> will give you a 72px navbar.</li>
|
|
<li>Using <code>.compressed</code> with <code>.navbar-nav</code> will create extra space at <code>$vp4</code> if you have too many/too long nav items. If your nav still doesn't fit when using <code>.compressed</code> then consider using less nav items or renaming long nav items.</li>
|
|
<li>Themes require <code>.navbar-global</code> and <code>.navbar-local</code> and are applied as siblings (ex: <code>.navbar-global.theme-default</code>)</li>
|
|
<li><code>.theme-dark</code> works with <code>$color-accent</code> and applies all the right interactive states accordingly.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div> <hr />
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<section class="section" id="side-nav">
|
|
<header class="section-header ">
|
|
<h1 class="section-title ">
|
|
<a name="navs">Side navigation</a>
|
|
</h1>
|
|
</header>
|
|
|
|
<section class="section">
|
|
<h3>Large side navigation</h3>
|
|
<p>
|
|
Large side nav is a one-level deep side navigation with an optional label. Use in cases where site structure calls for flat, single-level architecture. </p>
|
|
<div class="row m-t-md">
|
|
<div class="col-md-6">
|
|
<a class="btn btn-lightweight no-outline navigation-btn">Mountain Ranges</a>
|
|
<nav role="navigation" id="sidenav" class="nav side-navigation side-navigation-large theme-default">
|
|
<div class="navigation-label">Mountain Ranges</div>
|
|
<button type="button" class="close" data-dismiss="side-navigation" aria-label="close">
|
|
<i class="glyph glyph-cancel"></i>
|
|
</button>
|
|
<ul>
|
|
<li><a href="#">The Cascades</a></li>
|
|
<li><a href="#" class="active">The Olympic Mountains</a></li>
|
|
<li><a href="#">The Sierra Nevadas</a></li>
|
|
<li><a href="#">The Rocky Mountains</a></li>
|
|
<li><a href="#">Appalachian Mountains</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div class="col-xs-24 col-md-18 navigation-section">
|
|
<pre><code class="language-xml"><a class="btn btn-lightweight no-outline navigation-btn">Mountain Ranges</a>
|
|
<nav role="navigation" id="sidenav" class="nav side-navigation side-navigation-large theme-default">
|
|
<div class="navigation-label">Mountain Ranges</div>
|
|
<button type="button" class="close" data-dismiss="side-navigation" aria-label="close">
|
|
<i class="glyph glyph-cancel"></i>
|
|
</button>
|
|
<ul>
|
|
<li><a href="#">The Cascades</a></li>
|
|
<li><a href="#" class="active">The Olympic Mountains</a></li>
|
|
<li><a href="#">The Sierra Nevadas</a></li>
|
|
<li><a href="#">The Rocky Mountains</a></li>
|
|
<li><a href="#">Appalachian Mountains</a></li>
|
|
</ul>
|
|
</nav>
|
|
</code></pre>
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>Use <code>.active</code> on nav link to denote current page/state in navigation</li>
|
|
<li>If you have a solid dark color or black background, add <code>.theme-alt</code> at the same level as <code>.side-navigation</code> to get white navigation links.</li>
|
|
<li><code>.side-navigation</code> begins as <code>display: none;</code> at <code>$vp1</code> and becomes visible at <code>$vp3</code></li>
|
|
<li><code>a.navigation-btn</code> is visible on <code>$vp1</code> and <code>$vp2</code> to enable toggling visibility of <code>.side-navigation</code></li>
|
|
<li>Use your own JavaScript to show/hide navigation on <code>$vp1</code> and <code>$vp2</code>, though you can use ours below as a reference</li>
|
|
</ul>
|
|
</div>
|
|
<pre><code class="language-javascript">if ($('.side-navigation').length) {
|
|
var closeBtn = $('.close');
|
|
var sideAffix = $('.side-navigation-affix');
|
|
var sideBtn = $('a.navigation-btn');
|
|
var sideNav = $('.side-navigation-large');
|
|
var sideSection = $('.navigation-section');
|
|
var sideTopSpacing = 48;
|
|
|
|
if ($('.side-navigation-small').length) {
|
|
sideNav = $('.side-navigation-small');
|
|
}
|
|
|
|
var topOffset = sideSection.offset().top - sideTopSpacing;
|
|
var bottomOffset = $('body').height() - sideSection.offset().top - sideSection.height();
|
|
|
|
sideAffix.affix({
|
|
offset: {
|
|
top: topOffset,
|
|
bottom: bottomOffset
|
|
}
|
|
});
|
|
|
|
sideAffix.width(sideNav.parent().width());
|
|
|
|
sideBtn.on('click', function(){
|
|
sideNav.css("display", "block");
|
|
sideSection.css("display", "none");
|
|
sideBtn.css("display", "none");
|
|
$('body').css("overflow", "hidden");
|
|
});
|
|
closeBtn.on('click', function(){
|
|
sideNav.css("display", "");
|
|
sideSection.css("display", "");
|
|
sideBtn.css("display", "inline-block");
|
|
$('body').css("overflow", "");
|
|
});
|
|
}```
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3>Small side navigation</h3>
|
|
<p>
|
|
Small side nav is a two-level deep side navigation. Use in cases where site structure calls for nested, two-level architecture. </p>
|
|
<div class="row m-t-md">
|
|
<div class="col-md-6">
|
|
<a class="btn btn-lightweight no-outline navigation-btn">Father John Misty</a>
|
|
<ul role="navigation" id="sidenav-small" class="nav side-navigation side-navigation-small theme-default">
|
|
<button type="button" class="close" data-dismiss="side-navigation" aria-label="close">
|
|
<i class="glyph glyph-cancel"></i>
|
|
</button>
|
|
|
|
<li class="active side-nav-c2">
|
|
<a data-toggle="collapse" data-parent="#sidenav-small" href="#father-john-misty" aria-expanded="true" aria-controls="#father-john-misty">Father John Misty</a>
|
|
<ul class="nav collapse in" id="father-john-misty">
|
|
<li><a href="#sidenav-small">Fear Fun</a></li>
|
|
<li><a href="#sidenav-small" class="active">I Love You Honeybear</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="side-nav-c2">
|
|
<a data-toggle="collapse" data-parent="#sidenav-small" href="#the-national" aria-expanded="false" aria-controls="#the-national">The National</a>
|
|
<ul class="nav collapse" id="the-national">
|
|
<li><a href="#sidenav-small">The National</a></li>
|
|
<li><a href="#sidenav-small">Songs for Dirty Lovers</a></li>
|
|
<li><a href="#sidenav-small">Alligator</a></li>
|
|
<li><a href="#sidenav-small">Boxer</a></li>
|
|
<li><a href="#sidenav-small">High Violet</a></li>
|
|
<li><a href="#sidenav-small">Trouble Will Find Me</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="side-nav-c2">
|
|
<a data-toggle="collapse" data-parent="#sidenav-small" href="#the-strokes" aria-expanded="false" aria-controls="#the-strokes">The Strokes</a>
|
|
<ul class="nav collapse" id="the-strokes">
|
|
<li><a href="#sidenav-small">Is this it?</a></li>
|
|
<li><a href="#sidenav-small">Room on Fire</a></li>
|
|
<li><a href="#sidenav-small">First Impressions of Earth</a></li>
|
|
<li><a href="#sidenav-small">Angels</a></li>
|
|
<li><a href="#sidenav-small">Comedown Machine</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="side-nav-c2">
|
|
<a data-toggle="collapse" data-parent="#sidenav-small" href="#glass-animals" aria-expanded="false" aria-controls="#glass-animals">Glass Animals</a>
|
|
<ul class="nav collapse" id="glass-animals">
|
|
<li><a href="#sidenav-small">Zaba</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="side-nav-c2">
|
|
<a data-toggle="collapse" data-parent="#sidenav-small" href="#imagine-dragons" aria-expanded="false" aria-controls="#imagine-dragons">Imagine Dragons</a>
|
|
<ul class="nav collapse" id="imagine-dragons">
|
|
<li><a href="#sidenav-small">Night Vision</a></li>
|
|
<li><a href="#sidenav-small">Smoke + Mirrors</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-xs-24 col-md-18">
|
|
<pre><code class="language-xml"><a class="btn btn-lightweight no-outline navigation-btn">Father John Misty</a>
|
|
<ul role="navigation" id="sidenav-small" class="nav side-navigation side-navigation-small theme-default">
|
|
<button type="button" class="close" data-dismiss="side-navigation" aria-label="close">
|
|
<i class="glyph glyph-cancel"></i>
|
|
</button>
|
|
|
|
<li class="active side-nav-c2">
|
|
<a data-toggle="collapse" data-parent="#sidenav-small" href="#father-john-misty" aria-expanded="true" aria-controls="#father-john-misty">Father John Misty</a>
|
|
<ul class="nav collapse in" id="father-john-misty">
|
|
<li><a href="#sidenav-small">Fear Fun</a></li>
|
|
<li><a href="#sidenav-small" class="active">I Love You Honeybear</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="side-nav-c2">
|
|
<a data-toggle="collapse" data-parent="#sidenav-small" href="#the-national" aria-expanded="false" aria-controls="#the-national">The National</a>
|
|
<ul class="nav collapse" id="the-national">
|
|
<li><a href="#sidenav-small">The National</a></li>
|
|
<li><a href="#sidenav-small">Songs for Dirty Lovers</a></li>
|
|
<li><a href="#sidenav-small">Alligator</a></li>
|
|
<li><a href="#sidenav-small">Boxer</a></li>
|
|
<li><a href="#sidenav-small">High Violet</a></li>
|
|
<li><a href="#sidenav-small">Trouble Will Find Me</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="side-nav-c2">
|
|
<a data-toggle="collapse" data-parent="#sidenav-small" href="#the-strokes" aria-expanded="false" aria-controls="#the-strokes">The Strokes</a>
|
|
<ul class="nav collapse" id="the-strokes">
|
|
<li><a href="#sidenav-small">Is this it?</a></li>
|
|
<li><a href="#sidenav-small">Room on Fire</a></li>
|
|
<li><a href="#sidenav-small">First Impressions of Earth</a></li>
|
|
<li><a href="#sidenav-small">Angels</a></li>
|
|
<li><a href="#sidenav-small">Comedown Machine</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="side-nav-c2">
|
|
<a data-toggle="collapse" data-parent="#sidenav-small" href="#glass-animals" aria-expanded="false" aria-controls="#glass-animals">Glass Animals</a>
|
|
<ul class="nav collapse" id="glass-animals">
|
|
<li><a href="#sidenav-small">Zaba</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="side-nav-c2">
|
|
<a data-toggle="collapse" data-parent="#sidenav-small" href="#imagine-dragons" aria-expanded="false" aria-controls="#imagine-dragons">Imagine Dragons</a>
|
|
<ul class="nav collapse" id="imagine-dragons">
|
|
<li><a href="#sidenav-small">Night Vision</a></li>
|
|
<li><a href="#sidenav-small">Smoke + Mirrors</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</code></pre>
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>Use <code>.active</code> on <code>li.side-nav-c2</code> and it's child <code>a</code> nav link to denote current selected category and link</li>
|
|
<li>If you have a solid dark color or black background, add <code>.theme-alt</code> at the same level as <code>.side-navigation</code> to get white navigation links</li>
|
|
<li>Add <code>.panel</code> to <code>li.side-nav-c2</code> for full accordion operation</li>
|
|
<li><code>.side-navigation</code> begins as <code>display: none;</code> at <code>$vp1</code> and becomes visible at <code>$vp3</code></li>
|
|
<li><code>a.navigation-btn</code> is visible on <code>$vp1</code> and <code>$vp2</code> to enable toggling visibility of <code>.side-navigation</code></li>
|
|
<li>Use your own JavaScript to show/hide navigation on <code>$vp1</code> and <code>$vp2</code>, though you can use the example from <code>.side-navigation-large</code> above as a reference</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</div>
|
|
</div></div>
|
|
|
|
|
|
<a href="#top" class="back-to-top">
|
|
<i class="glyph glyph-up"></i>
|
|
<span class="sr-only">Back to top</span>
|
|
</a>
|
|
|
|
<script src="js/vendor/bootstrap.min.js"></script>
|
|
<script src="js/app.js"></script></body>
|
|
|
|
<!-- Mirrored from winstrap.mwspace.it/controls.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 09 Jun 2020 16:12:29 GMT -->
|
|
</html>
|