1302 lines
52 KiB
HTML
1302 lines
52 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<!-- Mirrored from winstrap.mwspace.it/layout.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 09 Jun 2020 16:11:28 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" id="page-header">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h1>Layout</h1>
|
|
|
|
<ul class="nav nav-pills" data-scroll="smooth">
|
|
<li role="presentation">
|
|
<a href="#page-header">Page header</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#grid">Grid</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#grid-small-gutters">Small gutters</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#spacers">Spacers</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
|
|
<section class="section">
|
|
<header class="section-header row">
|
|
<h1 class="section-title col-xs-24">
|
|
<a href="#page-header">Page header</a>
|
|
</h1>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<p>
|
|
The basic structure:
|
|
</p>
|
|
|
|
<pre><code class="language-xml"><div class="page-header">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h1>This is a page header</h1>
|
|
<p>With some content</p>
|
|
|
|
<ul class="nav nav-pills">
|
|
<li role="presentation" class="active">
|
|
<a href="#nav-item-1">Nav item 1</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#nav-item-2">Nav item 2</a>
|
|
</li>
|
|
<li role="presentation">
|
|
<a href="#nav-item-3">Nav item 3</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<p>
|
|
The JavaScript code to enable smooth scrolling:
|
|
</p>
|
|
|
|
<pre><code class="language-javascript">$(function () {
|
|
$('[data-scroll="smooth"] a[href*=#]:not([href=#])').click(function () {
|
|
if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') &&
|
|
location.hostname === this.hostname) {
|
|
|
|
var target = $(this.hash);
|
|
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
|
|
|
|
if (target.length) {
|
|
$('html, body').animate({
|
|
scrollTop: target.offset().top
|
|
}, 1500);
|
|
|
|
return false; // prevent default href
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>Add the <code>data-scroll="smooth"</code> attribute to the <code><ul class="nav nav-pills"></code> tag and the JS code above to enable smooth scrolling.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
<hr/>
|
|
|
|
</div>
|
|
|
|
<div class="container">
|
|
<section class="section" id="grid">
|
|
<header class="section-header row">
|
|
<h1 class="section-title col-xs-24">
|
|
<a href="#grid">Grid</a>
|
|
</h1>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-24">
|
|
<p>Grid system in Winstrap scales up to 24 columns.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row section-gallery" style="margin-top: 2em;">
|
|
<div class="col-md-2">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-2">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-2">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-2">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-2">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-2">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-2">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-2">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-2">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-2">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-2">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-2">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row section-gallery">
|
|
<div class="col-md-3">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-movie">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/800/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row section-gallery">
|
|
|
|
<div class="col-md-6">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-2-1">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/800/400/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-2-1">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/800/400/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-2-1">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/800/400/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-2-1">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/800/400/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-24">
|
|
<pre><code class="language-xml"><!-- Row with 12 elements -->
|
|
<div class="row section-gallery">
|
|
<div class="col-md-2">
|
|
…
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row with 8 elements -->
|
|
<div class="row section-gallery">
|
|
<div class="col-md-3">
|
|
…
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row with 4 elements -->
|
|
<div class="row section-gallery">
|
|
<div class="col-md-6">
|
|
…
|
|
</div>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>Add the optional class <code>.section-gallery</code> to each <code><div class="row"></code> in order to add vertical spacing below the media elements.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
<hr />
|
|
<section class="section" id="grid-small-gutters">
|
|
<header class="section-header row">
|
|
<h1 class="section-title col-xs-24">
|
|
<a href="#grid-small-gutters">Grid with small gutters</a>
|
|
</h1>
|
|
</header>
|
|
|
|
<div class="row row-sm section-gallery">
|
|
|
|
<div class="col-md-6">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-2-1">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/200/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-2-1">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/200/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-2-1">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/200/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
|
|
<figure class="media">
|
|
<div class="media-img ratio-2-1">
|
|
<a href="#">
|
|
<img src="../lorempixel.com/400/200/nature/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>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<pre><code class="language-xml"><div class="container">
|
|
<div class="row row-sm">
|
|
<div class="col-md-6">
|
|
…
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-24">
|
|
<div class="guidance guidance-usage m-t-xs">
|
|
<ul>
|
|
<li>Add the optional class <code>.row-sm</code> to each <code><div class="row"></code> in order to get small gutters.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
<hr />
|
|
<section class="section" id="spacers">
|
|
<header class="section-header row">
|
|
<h1 class="section-title col-xs-24">
|
|
<a href="#spacers">Spacers</a>
|
|
</h1>
|
|
</header>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<p>By default, all controls and HTML elements have responsive top margins. If you need to add or modify the spacing between elements, use the following utility classes, mixin, or function. We recommend you don't add bottom margins or padding to an element. Instead, add a top margin or padding to the element below it.</p>
|
|
</div>
|
|
|
|
<div class="col-xs-24">
|
|
<h3>Spacer classes</h3>
|
|
<pre><code class="language-xml"><element class="property-direction-size"></element>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-xs-24">
|
|
<p>A spacer class is constructed using the following available arguments:</p>
|
|
|
|
<div class="col-xs-12">
|
|
<p>Properties</p>
|
|
<ul>
|
|
<li><code>m</code> margin</li>
|
|
<li><code>p</code> padding</li>
|
|
</ul>
|
|
|
|
<p>Directions</p>
|
|
<ul>
|
|
<li><code>t</code> top</li>
|
|
<li><code>r</code> right</li>
|
|
<li><code>b</code> bottom</li>
|
|
<li><code>l</code> left</li>
|
|
<li><code>v</code> vertical: top and bottom</li>
|
|
<li><code>h</code> horizontal: left and right</li>
|
|
<li><code>[empty]</code> all: top, right, bottom, and left</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="col-xs-12">
|
|
<p>Sizes</p>
|
|
<ul>
|
|
<li><code>xxl</code> 84px</li>
|
|
<li><code>xl</code> 72px</li>
|
|
<li><code>lg</code> 64px</li>
|
|
<li><code>md</code> 48px</li>
|
|
<li><code>sm</code> 36px</li>
|
|
<li><code>xs</code> 24px</li>
|
|
<li><code>xxs</code> 12px</li>
|
|
<li><code>xxxs</code> 8px</li>
|
|
<li><code>n</code> 0px</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h4>Examples</h4>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<p>Add medium size right margin:</p>
|
|
<pre><code class="language-xml"><element class="m-r-md"></element>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<p>Add small padding to all sides:</p>
|
|
<pre><code class="language-xml"><element class="p-sm"></element>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h3>Sass mixin</h3>
|
|
<p>This mixin is used to generate the spacer classes above. You can use it to set margins and padding in Sass.</p>
|
|
<pre><code class="language-scss">.selector {
|
|
@include spacer( property, direction, size );
|
|
}
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<p>A mixin class must be constructed using the following available arguments:</p>
|
|
|
|
<div class="col-xs-12">
|
|
<p>Properties</p>
|
|
<ul>
|
|
<li><code>margin</code></li>
|
|
<li><code>padding</code></li>
|
|
</ul>
|
|
|
|
<p>Directions</p>
|
|
<ul>
|
|
<li><code>top</code></li>
|
|
<li><code>right</code></li>
|
|
<li><code>bottom</code></li>
|
|
<li><code>left</code></li>
|
|
<li><code>vertical</code></li>
|
|
<li><code>horizontal</code></li>
|
|
<li><code>all</code></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="col-xs-12">
|
|
<p>Sizes</p>
|
|
<ul>
|
|
<li><code>xxl</code></li>
|
|
<li><code>xl</code></li>
|
|
<li><code>lg</code></li>
|
|
<li><code>md</code></li>
|
|
<li><code>sm</code></li>
|
|
<li><code>xs</code></li>
|
|
<li><code>xxs</code></li>
|
|
<li><code>xxxs</code></li>
|
|
<li><code>n</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h4>Examples</h4>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<p>Add a medium size top margin:</p>
|
|
<pre><code class="language-scss">.selector {
|
|
@include spacer( margin, top, md );
|
|
}
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<p>Add extra small top and bottom padding:</p>
|
|
<pre><code class="language-scss">.selector {
|
|
@include spacer( padding, vertical, xs );
|
|
}
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h3>Sass function</h3>
|
|
<p>This function is used by the above mixin to get the correct spacing value for each size. The <code>size</code> argument is required. <code>shim</code> is optional.</p>
|
|
<pre><code class="language-scss">.selector {
|
|
property: spacing( size, shim );
|
|
}
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<p><code>size</code> must be one of the following:</p>
|
|
<ul>
|
|
<li><code>xxl</code></li>
|
|
<li><code>xl</code></li>
|
|
<li><code>lg</code></li>
|
|
<li><code>md</code></li>
|
|
<li><code>sm</code></li>
|
|
<li><code>xs</code></li>
|
|
<li><code>xxs</code></li>
|
|
<li><code>xxxs</code></li>
|
|
<li><code>n</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-24">
|
|
<h4>Examples</h4>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<p>Set a small size top padding:</p>
|
|
<pre><code class="language-scss">.selector {
|
|
padding-top: spacing( sm );
|
|
}
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<p>Set large left and right margins:</p>
|
|
<pre><code class="language-scss">.selector {
|
|
margin: 0 spacing( lg );
|
|
}
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</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/layout.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 09 Jun 2020 16:12:29 GMT -->
|
|
</html>
|