3392 lines
168 KiB
HTML
3392 lines
168 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<!-- Mirrored from winstrap.mwspace.it/components.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>Components</h1>
|
||
|
||
<ul class="nav nav-pills" data-scroll="smooth">
|
||
<li role="presentation">
|
||
<a href="#breadcrumb">Breadcrumb</a>
|
||
</li>
|
||
<li role="presentation">
|
||
<a href="#back-to-top">Back to top</a>
|
||
</li>
|
||
<li role="presentation">
|
||
<a href="#rating">Rating</a>
|
||
</li>
|
||
<li role="presentation">
|
||
<a href="#labels">Labels</a>
|
||
</li>
|
||
<li role="presentation">
|
||
<a href="#media">Media</a>
|
||
</li>
|
||
<li role="presentation">
|
||
<a href="#tables">Tables</a>
|
||
</li>
|
||
<li role="presentation">
|
||
<a href="#responsive-table">Responsive table</a>
|
||
</li>
|
||
<li role="presentation">
|
||
<a href="#list-items">List items</a>
|
||
</li>
|
||
<li role="presentation">
|
||
<a href="#entity-list">Entity list</a>
|
||
</li>
|
||
<li role="presentation">
|
||
<a href="#pagination">Pagination</a>
|
||
</li>
|
||
<li role="presentation">
|
||
<a href="#jumbotron">Jumbotron</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<section class="section" id="breadcrumb">
|
||
<header class="section-header row">
|
||
<h1 class="section-title col-xs-24">
|
||
<a href="#breadcrumb">Breadcrumb</a>
|
||
</h1>
|
||
</header>
|
||
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<ol class="breadcrumb">
|
||
<li><a href="#">Parent page</a></li>
|
||
<li><a href="#">Child page</a></li>
|
||
<li><a href="#">Section</a></li>
|
||
<li class="active">Current</li>
|
||
</ol>
|
||
|
||
<pre><code class="language-xml"><ol class="breadcrumb">
|
||
<li><a href="#">Parent page</a></li>
|
||
<li><a href="#">Child page</a></li>
|
||
<li><a href="#">Section</a></li>
|
||
<li class="active">Current</li>
|
||
</ol>
|
||
</code></pre>
|
||
</div>
|
||
|
||
<div class="col-md-24">
|
||
<div class="guidance guidance-usage m-t-xs">
|
||
<ul>
|
||
<li>To show a trailing separator, add an <code><li /></code> as the last item in the <code><ol></code>.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<hr />
|
||
<section class="section" id="back-to-top">
|
||
<header class="section-header row">
|
||
<h1 class="section-title col-xs-24">
|
||
<a href="#back-to-top">Back to top</a>
|
||
</h1>
|
||
</header>
|
||
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<p>
|
||
This link uses <a href="http://getbootstrap.com/javascript/#affix">Bootstrap's affix</a> and should be a direct child of the body of the HTML document. It should be near the end.
|
||
</p>
|
||
|
||
<pre><code class="language-xml"><a href="#top" class="back-to-top">
|
||
<i class="glyph glyph-up"></i>
|
||
<span class="sr-only">Back to top</span>
|
||
</a>
|
||
</code></pre>
|
||
|
||
<div class="guidance guidance-usage m-t-xs">
|
||
<ul>
|
||
<li>The following theme classes can be applied to the <code><a></code> tag: <code>.theme-default</code> or <code>.theme-alt</code>.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-12">
|
||
<p>
|
||
This component must be initialized with JavaScript.
|
||
It is displayed when the user has scrolled two times to viewport height.
|
||
</p>
|
||
|
||
<pre><code class="language-javascript">$(function () {
|
||
var backToTop = $('.back-to-top'),
|
||
threshold = 2 * $(window).height();
|
||
|
||
// Displayed when we've scrolled 2x the viewport height
|
||
if (backToTop.length === 0 ||
|
||
$(document).height() < threshold) {
|
||
return;
|
||
}
|
||
|
||
backToTop.affix({
|
||
offset: {
|
||
top: threshold
|
||
}
|
||
});
|
||
|
||
// Smooth scroll to top
|
||
backToTop.click(function () {
|
||
$('html, body').animate({ scrollTop: 0 }, {
|
||
duration: 750,
|
||
easing: 'swing'
|
||
});
|
||
|
||
return false; // prevent default href
|
||
});
|
||
});
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<hr />
|
||
<section class="section" id="rating">
|
||
<header class="section-header row">
|
||
<h1 class="section-title col-xs-24">
|
||
<a href="#rating">Rating</a>
|
||
</h1>
|
||
</header>
|
||
|
||
<!-- Default -->
|
||
<div class="row" style="margin-bottom: 2em;">
|
||
<div class="col-md-12">
|
||
<div class="color-fill-accent-neutral-high" style="padding: 1em; margin-bottom: 0.5em;">
|
||
<div class="rating">
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><div class="rating">
|
||
<div class="rating-stars">
|
||
<!-- Background stars -->
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<!-- Set the rating percentage as an inline style -->
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
|
||
</div>
|
||
|
||
<div class="col-md-12">
|
||
<div class="color-fill-accent-vivid-high" style="padding: 1em; margin-bottom: 0.5em;">
|
||
<div class="rating color-alt">
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><div class="rating color-alt">
|
||
<div class="rating-stars">
|
||
<!-- Background stars -->
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<!-- Set the rating percentage as an inline style -->
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Top Label -->
|
||
<div class="row" style="margin-bottom: 2em;">
|
||
<div class="col-md-12">
|
||
<div class="color-fill-accent-neutral-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
|
||
<div class="rating">
|
||
<div class="rating-label rating-label-top">Top label</div>
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><div class="rating">
|
||
<div class="rating-label rating-label-top">Top label</div>
|
||
<div class="rating-stars">
|
||
<!-- Background stars -->
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<!-- Set the rating percentage as an inline style -->
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
|
||
</div>
|
||
|
||
<div class="col-md-12">
|
||
<div class="color-fill-accent-vivid-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
|
||
<div class="rating color-alt">
|
||
<div class="rating-label rating-label-top">Top label</div>
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><div class="rating color-alt">
|
||
<div class="rating-label rating-label-top">Top label</div>
|
||
<div class="rating-stars">
|
||
<!-- Background stars -->
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<!-- Set the rating percentage as an inline style -->
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Left Label -->
|
||
<div class="row" style="margin-bottom: 2em;">
|
||
<div class="col-md-12">
|
||
<div class="color-fill-accent-neutral-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
|
||
<div class="rating">
|
||
<div class="rating-label rating-label-left">Left label</div>
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><div class="rating">
|
||
<div class="rating-label rating-label-left">Left label</div>
|
||
<div class="rating-stars">
|
||
<!-- Background stars -->
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<!-- Set the rating percentage as an inline style -->
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
|
||
</div>
|
||
|
||
<div class="col-md-12">
|
||
<div class="color-fill-accent-vivid-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
|
||
<div class="rating color-alt">
|
||
<div class="rating-label rating-label-left">Left label</div>
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><div class="rating color-alt">
|
||
<div class="rating-label rating-label-left">Left label</div>
|
||
<div class="rating-stars">
|
||
<!-- Background stars -->
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<!-- Set the rating percentage as an inline style -->
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Small - top Label -->
|
||
<div class="row" style="margin-bottom: 2em;">
|
||
<div class="col-md-12">
|
||
<div class="color-fill-accent-neutral-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
|
||
<div class="rating rating-small">
|
||
<div class="rating-label rating-label-top">Top label</div>
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><div class="rating rating-small">
|
||
<div class="rating-label rating-label-top">Top label</div>
|
||
<div class="rating-stars">
|
||
<!-- Background stars -->
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<!-- Set the rating percentage as an inline style -->
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
|
||
</div>
|
||
|
||
<div class="col-md-12">
|
||
<div class="color-fill-accent-vivid-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
|
||
<div class="rating rating-small color-alt">
|
||
<div class="rating-label rating-label-top">Top label</div>
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><div class="rating rating-small color-alt">
|
||
<div class="rating-label rating-label-top">Top label</div>
|
||
<div class="rating-stars">
|
||
<!-- Background stars -->
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<!-- Set the rating percentage as an inline style -->
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Small - left Label -->
|
||
<div class="row" style="margin-bottom: 2em;">
|
||
<div class="col-md-12">
|
||
<div class="color-fill-accent-neutral-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
|
||
<div class="rating rating-small">
|
||
<div class="rating-label rating-label-left">Left label</div>
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><div class="rating rating-small">
|
||
<div class="rating-label rating-label-left">Left label</div>
|
||
<div class="rating-stars">
|
||
<!-- Background stars -->
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<!-- Set the rating percentage as an inline style -->
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
|
||
</div>
|
||
|
||
<div class="col-md-12">
|
||
<div class="color-fill-accent-vivid-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
|
||
<div class="rating rating-small color-alt">
|
||
<div class="rating-label rating-label-left">Left label</div>
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><div class="rating rating-small color-alt">
|
||
<div class="rating-label rating-label-left">Left label</div>
|
||
<div class="rating-stars">
|
||
<!-- Background stars -->
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<!-- Set the rating percentage as an inline style -->
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Small - right Label -->
|
||
<div class="row" style="margin-bottom: 1em;">
|
||
<div class="col-md-12">
|
||
<div class="color-fill-accent-neutral-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
|
||
<div class="rating rating-small">
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
<div class="rating-label rating-label-right">Right label</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><div class="rating rating-small">
|
||
<div class="rating-stars">
|
||
<!-- Background stars -->
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<!-- Set the rating percentage as an inline style -->
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
<div class="rating-label rating-label-right">Right label</div>
|
||
</div>
|
||
</code></pre>
|
||
|
||
</div>
|
||
|
||
<div class="col-md-12">
|
||
<div class="color-fill-accent-vivid-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
|
||
<div class="rating rating-small color-alt">
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
<div class="rating-label rating-label-right">Right label</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><div class="rating rating-small color-alt">
|
||
<div class="rating-stars">
|
||
<!-- Background stars -->
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<!-- Set the rating percentage as an inline style -->
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
<div class="rating-label rating-label-right">Right label</div>
|
||
</div>
|
||
</code></pre>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- User value -->
|
||
<div class="row" style="margin-bottom: 1em;">
|
||
<div class="col-xs-24">
|
||
<h2>User rating</h2>
|
||
</div>
|
||
|
||
<div class="col-md-12">
|
||
<div class="color-fill-accent-neutral-high" style="padding: 1em; margin-bottom: 0.5em;">
|
||
<div class="rating">
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value rating-stars-value-user" style="width: 70%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><div class="rating">
|
||
<div class="rating-stars">
|
||
<!-- Background stars -->
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<!-- Set the rating percentage as an inline style -->
|
||
<ul class="rating-stars-value rating-stars-value-user" style="width: 70%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
|
||
</div>
|
||
|
||
<div class="col-md-12">
|
||
<div class="color-fill-accent-vivid-high" style="padding: 1em; margin-bottom: 0.5em;">
|
||
<div class="rating color-alt">
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 70%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><div class="rating color-alt">
|
||
<div class="rating-stars">
|
||
<!-- Background stars -->
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<!-- Set the rating percentage as an inline style -->
|
||
<ul class="rating-stars-value rating-stars-value-user" style="width: 70%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Clickable -->
|
||
<div class="row" style="margin-bottom: 1em;">
|
||
<div class="col-xs-24">
|
||
<h2>Clickable rating</h2>
|
||
</div>
|
||
|
||
<div class="col-md-12">
|
||
<div class="color-fill-accent-neutral-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
|
||
<div class="rating">
|
||
<div class="rating-label rating-label-top">Rate this stuff:</div>
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 70%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<div class="rating-stars-input">
|
||
<button class="rating-btn" title="1"><i class="glyph glyph-star"></i></button><button class="rating-btn" title="2">
|
||
<i class="glyph glyph-star"></i></button><button class="rating-btn" title="3">
|
||
<i class="glyph glyph-star"></i></button><button class="rating-btn" title="4">
|
||
<i class="glyph glyph-star"></i></button><button class="rating-btn" title="5">
|
||
<i class="glyph glyph-star"></i></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><div class="rating">
|
||
<div class="rating-label rating-label-top">Rate this stuff:</div>
|
||
<div class="rating-stars">
|
||
<!-- Background stars -->
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<!-- Set the rating percentage as an inline style -->
|
||
<ul class="rating-stars-value" style="width: 70%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<div class="rating-stars-input">
|
||
<button class="rating-btn" title="1"><i class="glyph glyph-star"></i></button><button class="rating-btn" title="2">
|
||
<i class="glyph glyph-star"></i></button><button class="rating-btn" title="3">
|
||
<i class="glyph glyph-star"></i></button><button class="rating-btn" title="4">
|
||
<i class="glyph glyph-star"></i></button><button class="rating-btn" title="5">
|
||
<i class="glyph glyph-star"></i></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
|
||
</div>
|
||
|
||
<div class="col-md-12">
|
||
<div class="color-fill-accent-vivid-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
|
||
<div class="rating color-alt">
|
||
<div class="rating-label rating-label-top">Rate this stuff:</div>
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 70%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<div class="rating-stars-input">
|
||
<button class="rating-btn" title="1"><i class="glyph glyph-star"></i></button><button class="rating-btn" title="2">
|
||
<i class="glyph glyph-star"></i></button><button class="rating-btn" title="3">
|
||
<i class="glyph glyph-star"></i></button><button class="rating-btn" title="4">
|
||
<i class="glyph glyph-star"></i></button><button class="rating-btn" title="5">
|
||
<i class="glyph glyph-star"></i></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><div class="rating color-alt">
|
||
<div class="rating-label rating-label-top">Rate this stuff:</div>
|
||
<div class="rating-stars">
|
||
<!-- Background stars -->
|
||
<ul class="rating-stars-background">
|
||
<!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<!-- Set the rating percentage as an inline style -->
|
||
<ul class="rating-stars-value" style="width: 70%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<div class="rating-stars-input">
|
||
<button class="rating-btn" title="1"><i class="glyph glyph-star"></i></button><button class="rating-btn" title="2">
|
||
<i class="glyph glyph-star"></i></button><button class="rating-btn" title="3">
|
||
<i class="glyph glyph-star"></i></button><button class="rating-btn" title="4">
|
||
<i class="glyph glyph-star"></i></button><button class="rating-btn" title="5">
|
||
<i class="glyph glyph-star"></i></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-24">
|
||
<p>The interaction might be implemented through a MVVM library. This is the jQuery sample of this demo:</p>
|
||
|
||
<pre><code class="language-javascript">$(function () {
|
||
// Star rating
|
||
$('.rating-btn').on('mouseenter', function () {
|
||
var active = $(this);
|
||
|
||
// Highlight the hovered star and the previous stars
|
||
$(this).prevAll('.rating-btn').addClass('active');
|
||
$(this).addClass('active');
|
||
|
||
// Remove highlighting of the following stars
|
||
$(this).nextAll('.rating-btn').removeClass('active');
|
||
});
|
||
|
||
// Remove highlight of all stars when leaving the container
|
||
$('.rating-stars-input').on('mouseleave', function () {
|
||
$(this).find('.rating-btn').removeClass('active');
|
||
});
|
||
});
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<hr />
|
||
<section class="section" id="labels">
|
||
<header class="section-header row">
|
||
<h1 class="section-title col-xs-24">
|
||
<a href="#labels">Labels</a>
|
||
</h1>
|
||
</header>
|
||
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<p>Labels inside headings</p>
|
||
<h1>This is h1 <span class="label label-default">Default</span></h1>
|
||
<h2>This is h2 <span class="label label-primary">Primary</span></h2>
|
||
<h3>This is h3 <span class="label label-success">Success</span></h3>
|
||
<h4>This is h4 <span class="label label-info">Info</span></h4>
|
||
<h5>This is h5 <span class="label label-warning">Warning</span></h5>
|
||
<h6>This is h6 <span class="label label-danger">Danger</span></h6>
|
||
<p>
|
||
Labels inside a line of text
|
||
<span class="label label-default">Default</span>
|
||
<span class="label label-primary">Primary</span>
|
||
<span class="label label-success">Success</span>
|
||
<span class="label label-info">Info</span>
|
||
<span class="label label-warning">Warning</span>
|
||
<span class="label label-danger">Danger</span>
|
||
</p>
|
||
|
||
<pre><code class="language-xml"><span class="label label-default">Default</span>
|
||
<span class="label label-primary">Primary</span>
|
||
<span class="label label-success">Success</span>
|
||
<span class="label label-info">Info</span>
|
||
<span class="label label-warning">Warning</span>
|
||
<span class="label label-danger">Danger</span>
|
||
</code></pre>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<hr />
|
||
<section class="section" id="media">
|
||
<header class="section-header row">
|
||
<h1 class="section-title col-xs-24">
|
||
<a href="#media">Media</a>
|
||
</h1>
|
||
</header>
|
||
<div class="row">
|
||
<div class="col-md-24">
|
||
<p><strong>Vertical media</strong> with the image on top and the caption below. It’s the default behavior and the simplest markup.</p>
|
||
<div class="col-md-4">
|
||
<figure class="media">
|
||
<div class="media-img ratio-movie">
|
||
<a href="#">
|
||
<img src="../lorempixel.com/219/300/technics/6/index.html" alt="" />
|
||
</a>
|
||
</div>
|
||
<figcaption class="media-caption">
|
||
<h4 class="media-header">
|
||
<a href="#">Header</a>
|
||
</h4>
|
||
<div class="media-subheader">
|
||
<a href="#">Subheader</a>
|
||
</div>
|
||
<div class="rating rating-small">
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="media-price">
|
||
<s>$1,499.99</s> $1,299.99
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
<div class="col-md-20">
|
||
<pre><code class="language-xml"><figure class="media">
|
||
<div class="media-img ratio-movie">
|
||
<a href="#">
|
||
<img src="#" alt="" />
|
||
</a>
|
||
</div>
|
||
<figcaption class="media-caption">
|
||
<h4 class="media-header">
|
||
<a href="#">Header</a>
|
||
</h4>
|
||
<div class="media-subheader">
|
||
<a href="#">Subheader</a>
|
||
</div>
|
||
<div class="rating rating-small">
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="media-price">
|
||
<s>$1,499.99</s> $1,299.99
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-24">
|
||
<p><strong>Horizontal media</strong> with the image to the left and the caption to the right. It uses the grid to layout the elements accurately.</p>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<figure class="media row">
|
||
<div class="media-img ratio-movie">
|
||
<a href="#">
|
||
<img src="../lorempixel.com/219/300/technics/6/index.html" alt="" />
|
||
</a>
|
||
</div>
|
||
<figcaption class="media-caption col-sm-16">
|
||
<h4 class="media-header">
|
||
<a href="#">Header</a>
|
||
</h4>
|
||
<div class="media-subheader">
|
||
<a href="#">Subheader</a>
|
||
</div>
|
||
<div class="rating rating-small">
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="media-price">
|
||
<s>$4.99</s> $3.20
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
<div class="col-md-20">
|
||
<pre><code class="language-xml"><figure class="media row">
|
||
<div class="media-img ratio-movie">
|
||
<a href="">
|
||
<img src="#" alt="" />
|
||
</a>
|
||
</div>
|
||
<figcaption class="media-caption col-sm-16">
|
||
<h4 class="media-header">
|
||
<a href="">Header</a>
|
||
</h4>
|
||
<div class="media-subheader">
|
||
<a href="">Subheader</a>
|
||
</div>
|
||
<div class="rating rating-small">
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li><li>
|
||
<i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="media-price">
|
||
<s>$4.99</s> $3.20
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-24">
|
||
<h2>Media with play glyph</h2>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<figure class="media">
|
||
<div class="media-img media-img-has-play ratio-movie">
|
||
<a href="#">
|
||
<img src="../lorempixel.com/219/300/technics/2/index.html" alt="" />
|
||
<i class="glyph glyph-play"></i>
|
||
</a>
|
||
</div>
|
||
</figure>
|
||
</div>
|
||
<div class="col-md-20">
|
||
<pre><code class="language-xml"><figure class="media">
|
||
<div class="media-img media-img-has-play ratio-movie">
|
||
<a href="#">
|
||
<img src="#" alt="" />
|
||
<i class="glyph glyph-play"></i>
|
||
</a>
|
||
</div>
|
||
</figure>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<h2>Media with play glyph and progress bar</h2>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<figure class="media">
|
||
<div class="media-img media-img-has-play ratio-movie">
|
||
<a href="#">
|
||
<img src="../lorempixel.com/219/300/technics/2/index.html" alt="" />
|
||
<i class="glyph glyph-play"></i>
|
||
</a>
|
||
|
||
<div class="progress progress-media">
|
||
<div class="progress-bar" role="progressbar"
|
||
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
|
||
style="width: 60%;">
|
||
<!-- Accessibility -->
|
||
<span class="sr-only">60%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<figcaption class="media-caption">
|
||
<h4 class="media-header">
|
||
<a href="#">Header</a>
|
||
</h4>
|
||
<div class="media-price">
|
||
Ends in 6 hours
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
<div class="col-md-20">
|
||
<pre><code class="language-xml"><figure class="media">
|
||
<div class="media-img ratio-movie">
|
||
<a href="#">
|
||
<img src="#" alt="" />
|
||
<i class="glyph glyph-play"></i>
|
||
</a>
|
||
|
||
<div class="progress progress-media">
|
||
<div class="progress-bar" role="progressbar"
|
||
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
|
||
style="width: 60%;">
|
||
<!-- Accessibility -->
|
||
<span class="sr-only">60%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<figcaption class="media-caption">
|
||
<h4 class="media-header">
|
||
<a href="#">Header</a>
|
||
</h4>
|
||
<div class="media-price">
|
||
Ends in 6 hours
|
||
</div>
|
||
<div class="rating">
|
||
<div class="rating-stars">
|
||
<ul class="rating-stars-background">
|
||
<li><i class="glyph glyph-star"></i></li>
|
||
<li><i class="glyph glyph-star"></i></li>
|
||
<li><i class="glyph glyph-star"></i></li>
|
||
<li><i class="glyph glyph-star"></i></li>
|
||
<li><i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
<ul class="rating-stars-value" style="width: 80%">
|
||
<li><i class="glyph glyph-star"></i></li>
|
||
<li><i class="glyph glyph-star"></i></li>
|
||
<li><i class="glyph glyph-star"></i></li>
|
||
<li><i class="glyph glyph-star"></i></li>
|
||
<li><i class="glyph glyph-star"></i></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="row">
|
||
<div class="col-md-24">
|
||
<h2>Media with label</h2>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<figure class="media">
|
||
<div class="media-img media-img-has-label ratio-movie">
|
||
<a href="#">
|
||
<img src="../lorempixel.com/800/800/technics/index.html" alt="" />
|
||
</a>
|
||
<span class="media-img-label">Season 1</span>
|
||
<div class="progress progress-media">
|
||
<div class="progress-bar" role="progressbar"
|
||
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
|
||
style="width: 60%;"></div>
|
||
<!-- Accessibility -->
|
||
<span class="sr-only">60%</span>
|
||
</div>
|
||
</div>
|
||
<figcaption>
|
||
<h4 class="media-header">
|
||
<a href="#">Header</a>
|
||
</h4>
|
||
<div class="media-price">
|
||
Ends in 6 hours
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
|
||
<div class="col-md-20">
|
||
<pre><code class="language-xml"><figure class="media">
|
||
<div class="media-img media-img-has-label ratio-movie">
|
||
<a href="#">
|
||
<img src="#" alt="" />
|
||
</a>
|
||
<span class="media-img-label">Season 1</span>
|
||
<div class="progress progress-media">
|
||
<div class="progress-bar" role="progressbar"
|
||
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
|
||
style="width: 60%;"></div>
|
||
<!-- Accessibility -->
|
||
<span class="sr-only">60%</span>
|
||
</div>
|
||
</div>
|
||
<figcaption>
|
||
<h4 class="media-header">
|
||
<a href="#">Header</a>
|
||
</h4>
|
||
<div class="media-price">
|
||
Ends in 6 hours
|
||
</div>
|
||
</figcaption>
|
||
</figure>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<h2 id="media-image-ratio">Forcing image ratio in media elements</h2>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<figure class="media">
|
||
<div class="media-img ratio-movie">
|
||
<a href="#">
|
||
<img src="../lorempixel.com/219/300/technics/4/index.html" alt="" />
|
||
</a>
|
||
</div>
|
||
</figure>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<figure class="media">
|
||
<div class="media-img ratio-1-1">
|
||
<a href="#">
|
||
<img src="../lorempixel.com/219/300/technics/4/index.html" alt="" />
|
||
</a>
|
||
</div>
|
||
</figure>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<figure class="media">
|
||
<div class="media-img ratio-16-9">
|
||
<a href="#">
|
||
<img src="../lorempixel.com/219/300/technics/4/index.html" alt="" />
|
||
</a>
|
||
</div>
|
||
</figure>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<figure class="media">
|
||
<div class="media-img ratio-2-1">
|
||
<a href="#">
|
||
<img src="../lorempixel.com/219/300/technics/4/index.html" alt="" />
|
||
</a>
|
||
</div>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-24">
|
||
<pre><code class="language-xml"><figure class="media">
|
||
<div class="media-img">
|
||
<a href="#">
|
||
<img src="#" alt="" />
|
||
</a>
|
||
</div>
|
||
</figure>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-24">
|
||
<div class="guidance guidance-usage m-t-xs">
|
||
<ul>
|
||
<li>Here are the different classes used above (from left-to-right) to set the width-to-height ratio: <code>.ratio-movie</code>, <code>.ratio-1-1</code>, <code>.ratio-16-9</code> and <code>.ratio-2-1</code>. Apply these classes to the <code><div class="media-img"></code> tag.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<hr />
|
||
<section class="section" id="tables">
|
||
<header class="section-header row">
|
||
<h1 class="section-title col-xs-24">
|
||
<a href="#tables">Tables</a>
|
||
</h1>
|
||
</header>
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<h4>Generic Table with Subtitle label</h4>
|
||
<div class="table-responsive">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>Item</th>
|
||
<th>Description</th>
|
||
<th class="text-right">Price</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Gadget Alpha</td>
|
||
<td>This is the amazing new Gadget Alpha.</td>
|
||
<td class="text-right">$0.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Bravo</td>
|
||
<td>Also available is the Gadget Bravo which provides B.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Charlie</td>
|
||
<td>This is the lorem ipsumist Gadget Charlie.</td>
|
||
<td class="text-right">$1.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Delta</td>
|
||
<td>Also available is the Gadget Bravo which provides B.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Echo</td>
|
||
<td>Gadget Delta is a solor dit lipsum for consumers.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Foxtrot</td>
|
||
<td>Gadget Echo provides solor dit for professionals.</td>
|
||
<td class="text-right">$1.99</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<h4>Generic Table with Subtitle label (alt theme)</h4>
|
||
<div class="table-responsive">
|
||
<table class="table theme-alt">
|
||
<thead>
|
||
<tr>
|
||
<th>Item</th>
|
||
<th>Description</th>
|
||
<th class="text-right">Price</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Gadget Alpha</td>
|
||
<td>This is the amazing new Gadget Alpha.</td>
|
||
<td class="text-right">$0.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Bravo</td>
|
||
<td>Also available is the Gadget Bravo which provides B.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Charlie</td>
|
||
<td>This is the lorem ipsumist Gadget Charlie.</td>
|
||
<td class="text-right">$1.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Delta</td>
|
||
<td>Also available is the Gadget Bravo which provides B.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Echo</td>
|
||
<td>Gadget Delta is a solor dit lipsum for consumers.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Foxtrot</td>
|
||
<td>Gadget Echo provides solor dit for professionals.</td>
|
||
<td class="text-right">$1.99</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<pre><code class="language-xml"><div class="table-responsive">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>Item</th>
|
||
<th>Description</th>
|
||
<th class="text-right">Price</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Gadget Alpha</td>
|
||
<td>This is the amazing new Gadget Alpha.</td>
|
||
<td class="text-right">$0.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Bravo</td>
|
||
<td>Also available is the Gadget Bravo which provides B.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Charlie</td>
|
||
<td>This is the lorem ipsumist Gadget Charlie.</td>
|
||
<td class="text-right">$1.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Delta</td>
|
||
<td>Also available is the Gadget Bravo which provides B.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Echo</td>
|
||
<td>Gadget Delta is a solor dit lipsum for consumers.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Foxtrot</td>
|
||
<td>Gadget Echo provides solor dit for professionals.</td>
|
||
<td class="text-right">$1.99</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</code></pre>
|
||
|
||
</div>
|
||
|
||
<div class="row">
|
||
<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><table></code> tag: <code>.theme-default</code> or <code>.theme-alt</code>.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<h4>A generic table with bottom borders.</h4>
|
||
<div class="table-responsive">
|
||
<table class="table table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th>Item</th>
|
||
<th>Description</th>
|
||
<th class="text-right">Price</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Gadget Alpha</td>
|
||
<td>This is the amazing new Gadget Alpha.</td>
|
||
<td class="text-right">$0.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Bravo</td>
|
||
<td>Also available is the Gadget Bravo which provides B.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Charlie</td>
|
||
<td>This is the lorem ipsumist Gadget Charlie.</td>
|
||
<td class="text-right">$1.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Delta</td>
|
||
<td>Also available is the Gadget Bravo which provides B.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Echo</td>
|
||
<td>Gadget Delta is a solor dit lipsum for consumers.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Foxtrot</td>
|
||
<td>Gadget Echo provides solor dit for professionals.</td>
|
||
<td class="text-right">$1.99</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<h4>A generic table with bottom borders. With Alternate Theme</h4>
|
||
<div class="table-responsive">
|
||
<table class="table table-striped theme-alt">
|
||
<thead>
|
||
<tr>
|
||
<th>Item</th>
|
||
<th>Description</th>
|
||
<th class="text-right">Price</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Gadget Alpha</td>
|
||
<td>This is the amazing new Gadget Alpha.</td>
|
||
<td class="text-right">$0.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Bravo</td>
|
||
<td>Also available is the Gadget Bravo which provides B.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Charlie</td>
|
||
<td>This is the lorem ipsumist Gadget Charlie.</td>
|
||
<td class="text-right">$1.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Delta</td>
|
||
<td>Also available is the Gadget Bravo which provides B.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Echo</td>
|
||
<td>Gadget Delta is a solor dit lipsum for consumers.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Foxtrot</td>
|
||
<td>Gadget Echo provides solor dit for professionals.</td>
|
||
<td class="text-right">$1.99</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<pre><code class="language-xml"> <div class="table-responsive">
|
||
<table class="table table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th>Item</th>
|
||
<th>Description</th>
|
||
<th class="text-right">Price</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Gadget Alpha</td>
|
||
<td>This is the amazing new Gadget Alpha.</td>
|
||
<td class="text-right">$0.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Bravo</td>
|
||
<td>Also available is the Gadget Bravo which provides B.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Charlie</td>
|
||
<td>This is the lorem ipsumist Gadget Charlie.</td>
|
||
<td class="text-right">$1.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Delta</td>
|
||
<td>Also available is the Gadget Bravo which provides B.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Echo</td>
|
||
<td>Gadget Delta is a solor dit lipsum for consumers.</td>
|
||
<td class="text-right">$2.99</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Gadget Foxtrot</td>
|
||
<td>Gadget Echo provides solor dit for professionals.</td>
|
||
<td class="text-right">$1.99</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-24">
|
||
<div class="guidance guidance-usage m-t-xs">
|
||
<ul>
|
||
<li>The <code>.table-striped</code> class on the <code><table></code> tag will give you bottom borders on each row.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<hr />
|
||
<section class="section" id="responsive-table">
|
||
<header class="section-header row">
|
||
<h1 class="section-title col-xs-24">
|
||
<a href="#responsive-table">Responsive Table</a>
|
||
</h1>
|
||
</header>
|
||
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<p>
|
||
Instead of using a table this component uses a list, the grid and columns to layout its items.
|
||
</p>
|
||
|
||
<ol class="list-items">
|
||
<li class="list-items-row">
|
||
<div class="row">
|
||
<div class="col-md-2">
|
||
<strong>1</strong>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<a>Link</a>
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4 text-right">
|
||
<a>Link</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="list-items-row">
|
||
<div class="row">
|
||
<div class="col-md-2">
|
||
<strong>2</strong>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<a>Link</a>
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4 text-right">
|
||
<a>Link</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="list-items-row">
|
||
<div class="row">
|
||
<div class="col-md-2">
|
||
<strong>3</strong>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<a>Link</a>
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4 text-right">
|
||
<a>Link</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
|
||
<pre><code class="language-xml"><ol class="list-items">
|
||
<li class="list-items-row">
|
||
<div class="row">
|
||
<div class="col-md-2"> <!-- if you want more than one column at a narrow viewport-->
|
||
<strong>1</strong> <!-- adjust the grid settings appropriately-->
|
||
</div>
|
||
<div class="s-col-6-24">
|
||
<a>Link</a>
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4">
|
||
<a>Link</a>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<hr />
|
||
<section class="section" id="list-items">
|
||
<header class="section-header row">
|
||
<h1 class="section-title col-xs-24">
|
||
<a href="#list-items">List items</a>
|
||
</h1>
|
||
</header>
|
||
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<p>
|
||
Instead of using a table this component uses a list, the grid and columns to layout its items.
|
||
Click on a row to expand or collapse the details.
|
||
</p>
|
||
|
||
<ol class="list-items">
|
||
<li class="list-items-row">
|
||
<div data-toggle="collapse" aria-expanded="false" data-target="#list-item-line-1">
|
||
<div class="row">
|
||
<div class="col-md-2">
|
||
<i class="glyph glyph-add"></i>
|
||
<i class="glyph glyph-remove"></i>
|
||
<strong>1</strong>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<a>Link</a>
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4 text-right">
|
||
<a>Link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="collapse" id="list-item-line-1">
|
||
<div class="row">
|
||
<div class="col-md-18 col-md-offset-2">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||
</div>
|
||
<div class="col-md-4 text-right">
|
||
<button class="btn btn-primary btn-sm">Button</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="list-items-row">
|
||
<div data-toggle="collapse" aria-expanded="false" data-target="#list-item-line-2">
|
||
<div class="row">
|
||
<div class="col-md-2">
|
||
<i class="glyph glyph-add"></i>
|
||
<i class="glyph glyph-remove"></i>
|
||
<strong>2</strong>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<a>Link</a>
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4 text-right">
|
||
<a>Link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="collapse" id="list-item-line-2">
|
||
<div class="row">
|
||
<div class="col-md-18 col-md-offset-2">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||
</div>
|
||
<div class="col-md-4 text-right">
|
||
<button class="btn btn-primary btn-sm">Button</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="list-items-row">
|
||
<div data-toggle="collapse" aria-expanded="false" data-target="#list-item-line-3">
|
||
<div class="row">
|
||
<div class="col-md-2">
|
||
<i class="glyph glyph-add"></i>
|
||
<i class="glyph glyph-remove"></i>
|
||
<strong>3</strong>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<a>Link</a>
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4 text-right">
|
||
<a>Link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="collapse" id="list-item-line-3">
|
||
<div class="row">
|
||
<div class="col-md-18 col-md-offset-2">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||
</div>
|
||
<div class="col-md-4 text-right">
|
||
<button class="btn btn-primary btn-sm">Button</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
|
||
<pre><code class="language-xml"><ol class="list-items">
|
||
<li class="list-items-row">
|
||
<div data-toggle="collapse" aria-expanded="false" data-target="#list-item-line-1">
|
||
<div class="row">
|
||
<div class="col-md-2">
|
||
<i class="glyph glyph-add"></i>
|
||
<i class="glyph glyph-remove"></i>
|
||
<strong>1</strong>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<a>Link</a>
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4">
|
||
Text
|
||
</div>
|
||
<div class="col-md-4 text-right">
|
||
<a>Link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="collapse" id="list-item-line-1">
|
||
<div class="row">
|
||
<div class="col-md-18 col-md-offset-2">
|
||
Lorem ipsum dolor sit amet.
|
||
</div>
|
||
<div class="col-md-4 text-right">
|
||
<button class="btn btn-primary btn-sm">Button</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<hr />
|
||
<section class="section" id="entity-list">
|
||
<header class="section-header row">
|
||
<h1 class="section-title col-xs-24">
|
||
<a href="#entity-list">Entity list</a>
|
||
</h1>
|
||
</header>
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<p>List items with nested UI as used in the Windows Settings app, with the option to make the items expandable.</p>
|
||
</div>
|
||
<div class="col-xs-24">
|
||
<h4 class="section-title">
|
||
Expandable entity list
|
||
</h4>
|
||
</div>
|
||
<div class="col-md-12 p-r-sm p-v-xxs">
|
||
<div class="entity-list entity-list-expandable">
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-mail"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">25.3 MB</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Mail and Calendar</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
<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>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<button class="btn btn-default" disabled="disabled">Uninstall</button>
|
||
<button class="btn btn-default">Move</button>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-camera"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">44.5 MB</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Camera</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<button class="btn btn-default" disabled="disabled">Uninstall</button>
|
||
<button class="btn btn-default">Move</button>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-report-hacked"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">Unavailable</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Defender</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<button class="btn btn-default" disabled="disabled">Uninstall</button>
|
||
<button class="btn btn-default" disabled="disabled">Move</button>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<img src="../lorempixel.com/30/30/technics"/>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">Unavailable</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">App</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<a href="#" class="btn btn-link btn-block">Advanced options</a>
|
||
<button class="btn btn-default">Uninstall</button>
|
||
<button class="btn btn-default">Move</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12 p-v-xxs color-bg-dark-vivid-high">
|
||
<div class="entity-list entity-list-expandable theme-alt">
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-mail"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">25.3 MB</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Mail and Calendar</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
<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%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<button class="btn btn-default theme-alt" disabled="disabled">Uninstall</button>
|
||
<button class="btn btn-default theme-alt">Move</button>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-camera"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">44.5 MB</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Camera</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<button class="btn btn-default theme-alt" disabled="disabled">Uninstall</button>
|
||
<button class="btn btn-default theme-alt">Move</button>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-report-hacked"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">Unavailable</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Defender</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<button class="btn btn-default theme-alt" disabled="disabled">Uninstall</button>
|
||
<button class="btn btn-default theme-alt" disabled="disabled">Move</button>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<img src="../lorempixel.com/30/30/technics"/>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">Unavailable</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">App</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<a href="#" class="btn btn-link btn-block theme-alt">Advanced options</a>
|
||
<button class="btn btn-default theme-alt">Uninstall</button>
|
||
<button class="btn btn-default theme-alt">Move</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<pre><code class="language-xml"> <div class="entity-list entity-list-expandable">
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-mail"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">25.3 MB</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Mail and Calendar</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
<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>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<button class="btn btn-default" disabled="disabled">Uninstall</button>
|
||
<button class="btn btn-default">Move</button>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-camera"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">44.5 MB</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Camera</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<button class="btn btn-default" disabled="disabled">Uninstall</button>
|
||
<button class="btn btn-default">Move</button>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-report-hacked"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">Unavailable</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Defender</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<button class="btn btn-default" disabled="disabled">Uninstall</button>
|
||
<button class="btn btn-default" disabled="disabled">Move</button>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<img src="http://lorempixel.com/30/30/technics"/>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">Unavailable</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">App</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<a href="#" class="btn btn-link btn-block">Advanced options</a>
|
||
<button class="btn btn-default">Uninstall</button>
|
||
<button class="btn btn-default">Move</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<h4 class="section-title">
|
||
Non-expandable entity list
|
||
</h4>
|
||
</div>
|
||
<div class="col-md-12 p-r-sm p-v-xxs">
|
||
<div class="entity-list">
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-mail"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Mail and Calendar</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-camera"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Camera</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-report-hacked"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Defender</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-mail"></span>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Mail and Calendar</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<img src="../lorempixel.com/30/30/technics"/>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">Unavailable</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">App</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12 p-v-xxs color-bg-dark-vivid-high">
|
||
<div class="entity-list theme-alt">
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-mail"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<button type="button" data-toggle="button" class="btn btn-toggle-switch theme-alt" autocomplete="off" aria-pressed="false">
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Mail and Calendar</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-camera"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<button type="button" data-toggle="button" class="btn btn-toggle-switch theme-alt" autocomplete="off" aria-pressed="false">
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Camera</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-report-hacked"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<button type="button" data-toggle="button" class="btn btn-toggle-switch theme-alt" autocomplete="off" aria-pressed="false">
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Defender</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-mail"></span>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Mail and Calendar</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
<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%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<img src="../lorempixel.com/30/30/technics"/>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">Unavailable</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">App</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<pre><code class="language-xml"> <div class="entity-list">
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-mail"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Mail and Calendar</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-camera"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Camera</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-report-hacked"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Defender</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-mail"></span>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Mail and Calendar</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<img src="http://lorempixel.com/30/30/technics"/>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">Unavailable</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">App</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<h4 class="section-title">
|
||
Entity list Add Item button
|
||
</h4>
|
||
</div>
|
||
<div class="col-md-12 p-r-sm p-v-xxs">
|
||
<div class="entity-list entity-list-add-item-button">
|
||
<a class="entity-list-item" href="#">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-add"></span>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Add features</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="entity-list entity-list-expandable">
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-mail"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">25.3 MB</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Mail and Calendar</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
<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>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<button class="btn btn-default" disabled="disabled">Uninstall</button>
|
||
<button class="btn btn-default">Move</button>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-camera"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">44.5 MB</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Camera</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<button class="btn btn-default" disabled="disabled">Uninstall</button>
|
||
<button class="btn btn-default">Move</button>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-report-hacked"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">Unavailable</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Defender</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<button class="btn btn-default" disabled="disabled">Uninstall</button>
|
||
<button class="btn btn-default" disabled="disabled">Move</button>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<img src="../lorempixel.com/30/30/technics"/>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">Unavailable</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">App</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<a href="#" class="btn btn-link btn-block">Advanced options</a>
|
||
<button class="btn btn-default">Uninstall</button>
|
||
<button class="btn btn-default">Move</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12 p-v-xxs color-bg-dark-vivid-high">
|
||
<div class="entity-list entity-list-add-item-button theme-alt">
|
||
<a class="entity-list-item" href="#">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-add"></span>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Add an item</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="entity-list entity-list-expandable theme-alt">
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-mail"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">25.3 MB</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Mail and Calendar</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
<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%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<button class="btn btn-default theme-alt" disabled="disabled">Uninstall</button>
|
||
<button class="btn btn-default theme-alt">Move</button>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-camera"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">44.5 MB</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Camera</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<button class="btn btn-default theme-alt" disabled="disabled">Uninstall</button>
|
||
<button class="btn btn-default theme-alt">Move</button>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-report-hacked"></span>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">Unavailable</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Defender</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<button class="btn btn-default theme-alt" disabled="disabled">Uninstall</button>
|
||
<button class="btn btn-default theme-alt" disabled="disabled">Move</button>
|
||
</div>
|
||
</div>
|
||
<div class="entity-list-item">
|
||
<div class="item-icon">
|
||
<img src="../lorempixel.com/30/30/technics"/>
|
||
</div>
|
||
<div class="item-content-secondary">
|
||
<div class="content-text-primary">Unavailable</div>
|
||
<div class="content-text-secondary">25/08/2016</div>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">App</div>
|
||
<div class="content-text-secondary">Microsoft Corporation</div>
|
||
</div>
|
||
<div class="item-content-expanded">
|
||
<a href="#" class="btn btn-link btn-block theme-alt">Advanced options</a>
|
||
<button class="btn btn-default theme-alt">Uninstall</button>
|
||
<button class="btn btn-default theme-alt">Move</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<pre><code class="language-xml"> <div class="entity-list entity-list-add-item-button">
|
||
<a class="entity-list-item" href="#">
|
||
<div class="item-icon">
|
||
<span class="glyph glyph-add"></span>
|
||
</div>
|
||
<div class="item-content-primary">
|
||
<div class="content-text-primary">Add an item</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<hr />
|
||
<section class="section" id="pagination">
|
||
<header class="section-header row">
|
||
<h1 class="section-title col-xs-24">
|
||
<a href="#pagination">Pagination</a>
|
||
</h1>
|
||
</header>
|
||
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<h4>Default</h4>
|
||
<nav>
|
||
<ul class="pagination">
|
||
<li class="pagination-prev">
|
||
<a href="#" aria-label="Previous">
|
||
<i aria-hidden="true" class="glyph glyph-chevron-left-2"></i>
|
||
</a>
|
||
</li>
|
||
|
||
<li><a href="#">1</a></li>
|
||
|
||
<li class="pagination-ellipsis"><span>…</span></li>
|
||
|
||
<li><a href="#">5</a></li>
|
||
<li><a href="#">6</a></li>
|
||
|
||
<li class="active"><a href="#">7</a></li>
|
||
|
||
<li><a href="#">8</a></li>
|
||
<li><a href="#">9</a></li>
|
||
|
||
<li class="pagination-ellipsis"><span>…</span></li>
|
||
|
||
<li><a href="#">15</a></li>
|
||
|
||
<li class="pagination-next">
|
||
<a href="#" aria-label="Next">
|
||
<i aria-hidden="true" class="glyph glyph-chevron-right-2"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<h4>Alt</h4>
|
||
<div class="color-black">
|
||
<nav>
|
||
<ul class="pagination theme-alt">
|
||
<!-- Add a disabled class to a li element to hide it -->
|
||
<li class="pagination-prev">
|
||
<a href="#" aria-label="Previous">
|
||
<i aria-hidden="true" class="glyph glyph-chevron-left-2"></i>
|
||
</a>
|
||
</li>
|
||
|
||
<li><a href="#">1</a></li>
|
||
|
||
<li class="pagination-ellipsis"><span>…</span></li>
|
||
|
||
<li><a href="#">5</a></li>
|
||
<li><a href="#">6</a></li>
|
||
|
||
<li class="active"><a href="#">7</a></li>
|
||
|
||
<li><a href="#">8</a></li>
|
||
<li><a href="#">9</a></li>
|
||
|
||
<li class="pagination-ellipsis"><span>…</span></li>
|
||
|
||
<li><a href="#">15</a></li>
|
||
|
||
<li class="pagination-next">
|
||
<a href="#" aria-label="Next">
|
||
<i aria-hidden="true" class="glyph glyph-chevron-right-2"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><nav>
|
||
<ul class="pagination">
|
||
<li class="pagination-prev">
|
||
<a href="#" aria-label="Previous">
|
||
<i aria-hidden="true" class="glyph glyph-chevron-left-2"></i>
|
||
</a>
|
||
</li>
|
||
|
||
<li><a href="#">1</a></li>
|
||
|
||
<li class="pagination-ellipsis"><span>&hellip;</span></li>
|
||
|
||
<li><a href="#">5</a></li>
|
||
<li><a href="#">6</a></li>
|
||
|
||
<li class="active"><a href="#">7</a></li>
|
||
|
||
<li><a href="#">8</a></li>
|
||
<li><a href="#">9</a></li>
|
||
|
||
<li class="pagination-ellipsis"><span>&hellip;</span></li>
|
||
|
||
<li><a href="#">15</a></li>
|
||
|
||
<li class="pagination-next">
|
||
<a href="#" aria-label="Next">
|
||
<i aria-hidden="true" class="glyph glyph-chevron-right-2"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<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>
|
||
<li>Add a <code>.disabled</code> class to a <code><li></code> element to hide it.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr />
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<h2>Pager</h2>
|
||
<h4>Default</h4>
|
||
<nav>
|
||
<ul class="pager">
|
||
<li class="pager-prev">
|
||
<a href="#" aria-label="Previous">
|
||
<i aria-hidden="true" class="glyph glyph-chevron-left-2"></i>
|
||
</a>
|
||
</li>
|
||
<li class="pager-next">
|
||
<a href="#" aria-label="Next">
|
||
<i aria-hidden="true" class="glyph glyph-chevron-right-2"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<h4>Alt</h4>
|
||
<div class="color-black">
|
||
<nav>
|
||
<ul class="pager theme-alt">
|
||
<li class="pager-prev">
|
||
<a href="#" aria-label="Previous">
|
||
<i aria-hidden="true" class="glyph glyph-chevron-left-2"></i>
|
||
</a>
|
||
</li>
|
||
<li class="pager-next">
|
||
<a href="#" aria-label="Next">
|
||
<i aria-hidden="true" class="glyph glyph-chevron-right-2"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><nav>
|
||
<ul class="pager">
|
||
<li class="pager-prev">
|
||
<a href="#" aria-label="Previous">
|
||
<i aria-hidden="true" class="glyph glyph-chevron-left-2"></i>
|
||
</a>
|
||
</li>
|
||
<li class="pager-next">
|
||
<a href="#" aria-label="Next">
|
||
<i aria-hidden="true" class="glyph glyph-chevron-right-2"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<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>
|
||
<li>Add a <code>.disabled</code> class to a <code><li></code> element to hide it.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</section>
|
||
<hr />
|
||
</div>
|
||
<!-- Since Jumbotron is outside the grid... -->
|
||
<div class="container">
|
||
<section class="section" id="jumbotron">
|
||
<header class="section-header row">
|
||
<h1 class="section-title col-xs-24">
|
||
<a href="#jumbotron">Jumbotron</a>
|
||
</h1>
|
||
</header>
|
||
<div class="row">
|
||
<div class="col-md-18">
|
||
<p>Also known as <i>Hero</i>, Jumbotron is a lightweight container for different types of content meant to be emphasized at the top of a page. Heros and Jumbotrons jump outside the grid to allow full-bleed, edge to edge display.</p>
|
||
<p>Jumbotron has basic defaults designed to be flexibile for different types of content. Use defaults with combinations of text and spacer classes to achieve specific designs (see centered example below).</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- Since Jumbotron is outside the grid... -->
|
||
<div class="jumbotron theme-light">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12 col-md-push-12 text-center">
|
||
<img class="img-responsive visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block visible-xl-inline-block" alt="" src="http://dri2.img.digitalrivercontent.net/Storefront/Site/msusa/images/promo/Xbox/en-US-Xbox-Mod-F-360-Console-Holiday15-mobile.png" data-source-index="2">
|
||
</div>
|
||
<div class="col-md-12 col-md-pull-12">
|
||
<div class="type-h3">
|
||
Xbox for Christmas
|
||
</div>
|
||
<div class="type-sh3">
|
||
Make the holidays special with Xbox
|
||
</div>
|
||
<p>Espresso served best with whole milk. Dripper aromatic sugar beans steamed breve half and half. Pumpkin spice and kopi-luwak seasonal, mug, java lungo mazagran ristretto and body espresso. Macchiato doppio pumpkin spice sit strong bar shop lungo trifecta.</p>
|
||
<div class="btn-group">
|
||
<button class="btn btn-primary" href="#">Buy Xbox</button>
|
||
<button class="btn btn-secondary" href="#">Read more</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container m-v-xs">
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<pre><code class="language-xml"><div class="jumbotron theme-light">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12 col-md-push-12 text-center">
|
||
<img class="img-responsive visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block visible-xl-inline-block" alt="" src="http://dri2.img.digitalrivercontent.net/Storefront/Site/msusa/images/promo/Xbox/en-US-Xbox-Mod-F-360-Console-Holiday15-mobile.png" data-source-index="2">
|
||
</div>
|
||
<div class="col-md-12 col-md-pull-12">
|
||
<div class="type-h3">
|
||
Xbox for Christmas
|
||
</div>
|
||
<div class="type-sh3">
|
||
Make the holidays special with Xbox
|
||
</div>
|
||
<p>Espresso served best with whole milk. Dripper aromatic sugar beans steamed breve half and half. Pumpkin spice and kopi-luwak seasonal, mug, java lungo mazagran ristretto and body espresso. Macchiato doppio pumpkin spice sit strong bar shop lungo trifecta.</p>
|
||
<div class="btn-group">
|
||
<button class="btn btn-primary" href="#">Buy Xbox</button>
|
||
<button class="btn btn-secondary" href="#">Read more</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Since Jumbotron is outside the grid... -->
|
||
<div class="jumbotron theme-dark">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-24 text-center">
|
||
<h3>This is a centered Heading 3</h3>
|
||
<div class="type-sh3">
|
||
And this is it's Subheading 3
|
||
</div>
|
||
<div class="col-md-12 col-md-offset-6">
|
||
<div class="type-p3">You can create any Hero configuration with the combination of default settings and standard text/spacer classes. Take a look at the marukup to see it in action.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container m-t-xs">
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<pre><code class="language-xml"><div class="jumbotron theme-dark">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-24 text-center">
|
||
<h3>This is a centered Heading 3</h3>
|
||
<div class="type-sh3">
|
||
And this is it's Subheading 3
|
||
</div>
|
||
<div class="col-md-12 col-md-offset-6">
|
||
<div class="type-p3">You can create any Hero configuration with the combination of default settings and standard text/spacer classes. Take a look at the marukup to see it in action.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</code></pre>
|
||
</div>
|
||
<div class="col-md-24">
|
||
<div class="guidance guidance-usage m-t-xs">
|
||
<ul>
|
||
<li>Do not put <code>.jumbotron</code> inside <code>.container</code> or <code>.container-fluid</code>. Instead, close the container before adding Jumbotron to the page, then follow it by opening a new container afterward if necessary.</li>
|
||
<li>You can use the <code>.jumbotron</code> and <code>.hero</code> classes interchangably. Microsoft sites call this component <em>Hero</em> which is why the class is offered here.</li>
|
||
<li>Add theme classes <code>.theme-default</code>, <code>.theme-light</code>, <code>.theme-dark</code>, and <code>.theme-alt</code> at the <code>.jumbotron</code> level.</li>
|
||
<li>Each theme class has default background-colors because Bootsrap explicitly sets background color for <code>.jumbotron</code>.</li>
|
||
</ul>
|
||
</div>
|
||
</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/components.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 09 Jun 2020 16:14:36 GMT -->
|
||
</html>
|