534 lines
28 KiB
HTML
534 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<!-- Mirrored from winstrap.mwspace.it/alerts.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 09 Jun 2020 16:14:36 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="alert-stack">
|
||
|
||
<div class="alert alert-warning alert-dismissible fade in" role="alert">
|
||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||
<span aria-hidden="true"><i class="glyph glyph-cancel"></i></span>
|
||
</button>
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-20">
|
||
<p>Alert example. If your playback didn’t start, it’s likely because you don’t have the Video app installed. Alert example. If your playback didn’t start, it’s likely because you don’t have the Video app installed.</p>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<p>
|
||
<a href="#" class="pull-right hidden-xs hidden-sm">Click here</a>
|
||
<a href="#" class="visible-xs-inline visible-sm-inline hidden-md">Click here</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="alert alert-warning alert-dismissible fade in" role="alert">
|
||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||
<span aria-hidden="true"><i class="glyph glyph-cancel"></i></span>
|
||
</button>
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<p>Another stacked alert example.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="page-header">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<h1>Alerts</h1>
|
||
|
||
<ul class="nav nav-pills" data-scroll="smooth">
|
||
<li role="presentation">
|
||
<a href="#stack">Alert stack</a>
|
||
</li>
|
||
<li role="presentation">
|
||
<a href="#inline">Inline alerts</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="#stack">Alert stack</a>
|
||
</h1>
|
||
</header>
|
||
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<p>These are the full width alerts you see stacked above.</p>
|
||
</div>
|
||
<div class="col-xs-24">
|
||
|
||
<pre><code class="language-xml"><!-- This tag should be a child of the body -->
|
||
<div class="alert-stack">
|
||
|
||
<div class="alert alert-warning alert-dismissible fade in" role="alert">
|
||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||
<span aria-hidden="true"><i class="glyph glyph-cancel"></i></span>
|
||
</button>
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-20">
|
||
<p>Alert example. If your playback didn’t start, it’s likely because you don’t have the Video app installed.</p>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<p>
|
||
<a href="#" class="pull-right hidden-xs hidden-sm">Click here</a>
|
||
<a href="#" class="visible-xs-inline visible-sm-inline hidden-md">Click here</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- We can stack other alert components here -->
|
||
</div>
|
||
</code></pre>
|
||
|
||
<p>The required JavaScript to initialize the <a href="http://getbootstrap.com/javascript/#affix" target="_blank">Affix Boostrap component</a>:</p>
|
||
|
||
<pre><code class="language-javascript">$(function () {
|
||
var alertStack = $('.alert-stack');
|
||
|
||
if (alertStack.length == 0) {
|
||
return;
|
||
}
|
||
|
||
alertStack.affix({
|
||
offset: {
|
||
top: alertStack.offset().top
|
||
}
|
||
});
|
||
});
|
||
</code></pre>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="inline">
|
||
<header class="section-header row">
|
||
<h1 class="section-title col-xs-24">
|
||
<a href="#inline">Inline alert</a>
|
||
</h1>
|
||
</header>
|
||
|
||
<div class="row">
|
||
<div class="col-xs-24">
|
||
<p>Caption row uses two columns to ensure action link is right aligned at md viewport and up. It stacks at sm and below.</p>
|
||
<p>Action link needs to float right on large viewports and float left on small ones, hence the hiding and showing.</p>
|
||
</div>
|
||
<div class="col-xs-24">
|
||
|
||
<div class="alert alert-info alert-dismissible m-t-xs fade in" role="alert">
|
||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||
<span aria-hidden="true"><i class="glyph glyph-cancel"></i></span>
|
||
</button>
|
||
<div class="row">
|
||
<div class="col-md-20">
|
||
<p>This is an inline alert with no title.</p>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<p>
|
||
<a href="#" class="pull-right hidden-xs hidden-sm">Click here</a>
|
||
<a href="#" class="visible-xs-inline visible-sm-inline hidden-md">Click here</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="alert alert-warning alert-dismissible fade in" role="alert">
|
||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||
<span aria-hidden="true"><i class="glyph glyph-cancel"></i></span>
|
||
</button>
|
||
<div class="alert-title">Warning example</div>
|
||
<div class="row">
|
||
<div class="col-md-20">
|
||
<p>This is a warning inline alert without an glyph.</p>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<p>
|
||
<a href="#" class="pull-right hidden-xs hidden-sm">Click here</a>
|
||
<a href="#" class="visible-xs-inline visible-sm-inline hidden-md">Click here</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="alert with-glyph alert-danger alert-dismissible fade in" role="alert">
|
||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||
<span aria-hidden="true"><i class="glyph glyph-cancel"></i></span>
|
||
</button>
|
||
<span class="alert-glyph"><i class="glyph-info"></i></span>
|
||
<div class="alert-title">Danger alert with glyph example</div>
|
||
<div class="row">
|
||
<div class="col-md-20">
|
||
<p>This is a danger inline alert with a glyph. Want to know more about what glyphs you can use?</p>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<p>
|
||
<a href="#" class="pull-right hidden-xs hidden-sm">Click here</a>
|
||
<a href="#" class="visible-xs-inline visible-sm-inline hidden-md">Click here</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<pre><code class="language-xml"><div class="alert [alert-info] [alert-warning] [alert-danger] [with-glyph] alert-dismissible fade in" role="alert">
|
||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||
<span aria-hidden="true">
|
||
<i class="glyph glyph-cancel"></i>
|
||
</span>
|
||
</button>
|
||
<span class="alert-glyph">
|
||
<i class="glyph-info"></i>
|
||
</span>
|
||
<div class="alert-title">Danger alert with glyph example</div>
|
||
<div class="row">
|
||
<div class="col-md-20">
|
||
<p>This is a danger inline alert with an glyph. Want to know more about what glyphs you can use?</p>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<p>
|
||
<a href="#" class="pull-right hidden-xs hidden-sm">Click here</a>
|
||
<a href="#" class="visible-xs-inline visible-sm-inline hidden-md">Click here</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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/alerts.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 09 Jun 2020 16:14:36 GMT -->
|
||
</html>
|