Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tag: v0.9.0
Fetching contributors…

Cannot retrieve contributors at this time

581 lines (548 sloc) 32.272 kB
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">
<title>Wide · BootMetro</title>
<meta name="robots" content="noindex, nofollow">
<meta name="description" content="BootMetro : Simple and complete web UI framework to create web apps with Windows 8 Metro user interface." />
<meta name="keywords" content="bootmetro, modern ui, modern-ui, metro, metroui, metro-ui, metro ui, windows 8, metro style, bootstrap, framework, web framework, css, html" />
<meta name="author" content="AozoraLabs by Marcello Palmitessa"/>
<!-- remove or comment this line if you want to use the local fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<!--<link rel="stylesheet" type="text/css" href="content/css/bootstrap.css">-->
<link rel="stylesheet" type="text/css" href="content/css/bootmetro-icons.css">
<link rel="stylesheet" type="text/css" href="content/css/bootmetro.css">
<link rel="stylesheet" type="text/css" href="content/css/bootmetro-responsive.css">
<link rel="stylesheet" type="text/css" href="content/css/bootmetro-ui-light.css">
<link rel="stylesheet" type="text/css" href="content/css/datepicker.css">
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="content/css/bootmetro-icons-ie7.css">
<![endif]-->
<!-- these two css are to use only for documentation -->
<link rel="stylesheet" type="text/css" href="content/css/demo.css">
<link rel="stylesheet" type="text/css" href="scripts/google-code-prettify/prettify.css" >
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="content/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="content/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="content/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="content/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="content/ico/apple-touch-icon-57-precomposed.png">
<!-- All JavaScript at the bottom, except for Modernizr and Respond.
Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
<script src="scripts/modernizr-2.6.2.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3182578-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Header
================================================== -->
<header id="nav-bar" class="container">
<div class="row">
<div class="span12">
<div id="header-container">
<a id="backbutton" class="win-backbutton" href="./tiles-templates.html"></a>
<h5>BootMetro</h5>
<div class="dropdown">
<a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
Wide Tiles Templates
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="./metro-layouts.html">Metro Layouts</a></li>
<li><a href="./hub.html">Hub</a></li>
<li><a href="./tiles-templates.html">Tile Templates</a></li>
<li><a href="./listviews.html">ListViews</a></li>
<li><a href="./appbar-demo.html">App-Bar Demo</a></li>
<li><a href="./table.html">Table Demo</a></li>
<li><a href="./wizard.html">Wizard</a></li>
<li><a href="./icons.html">Icons</a></li>
<li><a href="./toast.html">Toast Notifications</a></li>
<li><a href="./pivot.html">Pivot</a></li>
<li><a href="./metro-components.html">Metro Components</a></li>
<li class="divider"></li>
<li><a href="./scaffolding.html">Bootstrap Scaffolding</a></li>
<li><a href="./base-css.html">Bootstrap Base CSS</a></li>
<li><a href="./components.html">Bootstrap Components</a></li>
<li><a href="./javascript.html">Bootstrap Javascript</a></li>
<li class="divider"></li>
<li><a href="./index.html">Home</a></li>
</ul>
</div>
</div>
<div id="top-info" class="pull-right">
<a id="settings" href="#" class="win-command pull-right">
<span class="win-commandicon win-commandring icon-settings"></span>
</a>
</div>
</div>
</div>
</header>
<div class="container">
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#textonly">Wide Text Only Tiles</a></li>
<li><a href="#imageonly">Wide Image Only Tiles</a></li>
<li><a href="#imageandtext">Wide image-and-text Tiles</a></li>
</ul>
</div>
</div>
<div class="container metro">
<div class="row">
<div class="span12">
<table id="apptile" class="table">
<caption><h3>App Tile</h3></caption>
<thead>
<tr>
<th>Template Name</th>
<th>Description</th>
<th>Tile</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Wide App Tile</strong></td>
<td></td>
<td>
<a class="tile wide app" href="#">
<div class="image-wrapper">
<img src="content/img/Windows 8.png" alt=""/>
</div>
<div class="app-label">AppName</div>
<div class="app-count">12</div>
</a>
</td>
</tr>
</tbody>
</table>
<table id="textonly" class="table">
<caption><h3>Wide Text Only Tiles</h3></caption>
<thead>
<tr>
<th>Template Name</th>
<th>Description</th>
<th>Tile</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>TileWideText01</strong></td>
<td>One header string in larger text on the first line, four strings of regular text on the next four lines. Text does not wrap.</td>
<td>
<a class="tile wide text" href="#">
<div class="text-header">Header</div>
<div class="text">Text field 1</div>
<div class="text">Text field 2</div>
<div class="text">Text field 3</div>
<div class="text">Text field 4</div>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideText02</strong></td>
<td>One header string in larger text over eight short strings arranged in two columns of four lines each. Columns are of equal width.</td>
<td>
<a class="tile wide text" href="#">
<div class="text-header">Header</div>
<div class="column">
<div class="text">Text field 1</div>
<div class="text">Text field 2</div>
<div class="text">Text field 3</div>
<div class="text">Text field 4</div>
</div>
<div class="column">
<div class="text">Text field 5</div>
<div class="text">Text field 6</div>
<div class="text">Text field 7</div>
<div class="text">Text field 8</div>
</div>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideText03</strong></td>
<td>One string of large text wrapped over a maximum of three lines.</td>
<td>
<a class="tile wide text" href="#">
<div class="text-header3">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula</div>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideText04</strong></td>
<td>One string of regular text wrapped over a maximum of five lines.</td>
<td>
<a class="tile wide text" href="#">
<div class="text5">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideText05</strong></td>
<td>Five strings of regular text on five lines. Text does not wrap.</td>
<td>
<a class="tile wide text" href="#">
<div class="text">Text field 1 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
<div class="text">Text field 2 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
<div class="text">Text field 3 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
<div class="text">Text field 4 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
<div class="text">Text field 5 Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</div>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideText06</strong></td>
<td>Ten short strings of regular text, arranged in two columns of five lines each. Columns are of equal width.</td>
<td>
<a class="tile wide text" href="#">
<div class="column">
<div class="text">Text field 1</div>
<div class="text">Text field 2</div>
<div class="text">Text field 3</div>
<div class="text">Text field 4</div>
</div>
<div class="column">
<div class="text">Text field 5</div>
<div class="text">Text field 6</div>
<div class="text">Text field 7</div>
<div class="text">Text field 8</div>
</div>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideText07</strong></td>
<td>One header string in larger text over eight short strings of regular text arranged in two columns of four lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText10, but the first column is wider.</td>
<td>
<a class="tile wide text" href="#">
<div class="text-header">Header</div>
<div class="column2-label">
<div class="text">label 1</div>
<div class="text">label 2</div>
<div class="text">label 3</div>
<div class="text">label 4</div>
</div>
<div class="column2-text">
<div class="text">Vivamus elementum semper nisi</div>
<div class="text">Vivamus elementum semper nisi</div>
<div class="text">Vivamus elementum semper nisi</div>
<div class="text">Vivamus elementum semper nisi</div>
</div>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideText08</strong></td>
<td>Ten short strings of regular text arranged in two columns of five lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText11, but the first column is wider.</td>
<td>
<a class="tile wide text" href="#">
<div class="column2-label">
<div class="text">label 1</div>
<div class="text">label 2</div>
<div class="text">label 3</div>
<div class="text">label 4</div>
<div class="text">label 5</div>
</div>
<div class="column2-text">
<div class="text">Vivamus elementum semper nisi</div>
<div class="text">Vivamus elementum semper nisi</div>
<div class="text">Vivamus elementum semper nisi</div>
<div class="text">Vivamus elementum semper nisi</div>
<div class="text">Vivamus elementum semper nisi</div>
</div>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideText09</strong></td>
<td>One header string in larger text over one string of regular text wrapped over a maximum of four lines.</td>
<td>
<a class="tile wide text" href="#">
<div class="text-header">Header</div>
<div class="text4">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideText10</strong></td>
<td>One header string in larger text over eight short strings of regular text arranged in two columns of four lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText07, but the first column is narrower.</td>
<td>
<a class="tile wide text" href="#">
<div class="text-header">Header</div>
<div class="column3-label">
<div class="text">Viva</div>
<div class="text">Viva</div>
<div class="text">Viva</div>
<div class="text">Viva</div>
</div>
<div class="column3-text">
<div class="text">Vivamus elementum semper nisi</div>
<div class="text">Vivamus elementum semper nisi</div>
<div class="text">Vivamus elementum semper nisi</div>
<div class="text">Vivamus elementum semper nisi</div>
</div>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideText11</strong></td>
<td>Ten short strings of regular text arranged in two columns of five lines each. The column widths are such that the first column acts as a label and the second column as the content. This template is similar to TileWideText08, but the first column is narrower.</td>
<td>
<a class="tile wide text" href="#">
<div class="column3-label">
<div class="text">Viva</div>
<div class="text">Viva</div>
<div class="text">Viva</div>
<div class="text">Viva</div>
</div>
<div class="column3-text">
<div class="text">Vivamus elementum semper nisi</div>
<div class="text">Vivamus elementum semper nisi</div>
<div class="text">Vivamus elementum semper nisi</div>
<div class="text">Vivamus elementum semper nisi</div>
</div>
</a>
</td>
</tr>
</tbody>
</table>
<table id="imageonly" class="table">
<caption><h3>Wide Image Only Tiles</h3></caption>
<thead>
<tr>
<th>Template Name</th>
<th>Description</th>
<th>Tile</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>TileWideImage</strong></td>
<td>One wide image that fills the entire tile, no text.</td>
<td>
<a class="tile wide image" href="#">
<img src="content/img/tile-wide.jpg" alt=""/>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideImageCollection</strong></td>
<td>One large square image with four smaller square images to its right, no text.</td>
<td>
<a class="tile wide image collection" href="#">
<img class="tile-image-main" src="content/img/sample1.png" alt=""/>
<div class="mini-tiles">
<img src="content/img/tile-wide-collection-1.jpg" alt=""/>
<img src="content/img/tile-wide-collection-2.png" alt=""/>
<img src="content/img/tile-wide-collection-3.gif" alt=""/>
<img src="content/img/tile-wide-collection-4.png" alt=""/>
</div>
</a>
</td>
</tr>
</tbody>
</table>
<table id="imageandtext" class="table">
<caption><h3>Wide image-and-text templates</h3></caption>
<thead>
<tr>
<th>Template Name</th>
<th>Description</th>
<th>Tile</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>TileWideImageAndText01</strong></td>
<td>One wide image over one string of regular text wrapped over a maximum of two lines.</td>
<td>
<a class="tile wide imagetext wideimage" href="#">
<img src="content/img/tile-wide.jpg" alt=""/>
<div class="textover-wrapper">
<div class="text2">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
</div>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideImageAndText02</strong></td>
<td>One wide image over one string of regular text wrapped over a maximum of two lines.</td>
<td>
<a class="tile wide imagetext wideimage" href="#">
<img src="content/img/tile-wide.jpg" alt=""/>
<div class="textover-wrapper">
<div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
<div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
</div>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideBlockAndText01</strong></td>
<td>Four strings of regular, unwrapped text on the left; large block text over a single, short string of bold, regular text on the right.</td>
<td>
<a class="tile wide text" href="#">
<div class="column-text">
<div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
<div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
<div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
<div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
</div>
<div class="column-text-big">
<div class="text-big">22</div>
<div class="text">Aliquam</div>
</div>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideBlockAndText02</strong></td>
<td>One string of regular text wrapped over a maximum of four lines on the left; large block text over a single, short string of bold, regular text on the right.</td>
<td>
<a class="tile wide text" href="#">
<div class="column-text">
<div class="text4">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
</div>
<div class="column-text-big">
<div class="text-big">22</div>
<div class="text">Aliquam</div>
</div>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideSmallImageAndText01</strong></td>
<td>On the left, one small image; on the right, one string of large text wrapped over a maximum of three lines.</td>
<td>
<a class="tile wide imagetext" href="#">
<div class="image-wrapper">
<img src="content/img/tile-wide-collection-3.gif" alt=""/>
</div>
<div class="column-text">
<div class="text-header3">Adipisci velit, sed quia non numquam eius modi tempora.</div>
</div>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideSmallImageAndText02</strong></td>
<td>On the left, one small image; on the right, one header string in larger text on the first line over four strings of regular text on the next four lines. Text does not wrap.</td>
<td>
<a class="tile wide imagetext" href="#">
<div class="image-wrapper">
<img src="content/img/tile-wide-collection-3.gif" alt=""/>
</div>
<div class="column-text">
<div class="text-header">Adipisci velit, sed quia non numquam eius modi tempora.</div>
<div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
<div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
<div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
<div class="text">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
</div>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideSmallImageAndText03</strong></td>
<td>On the left, one small image; on the right, one string of regular text wrapped over a maximum of five lines.</td>
<td>
<a class="tile wide imagetext" href="#">
<div class="image-wrapper">
<img src="content/img/tile-wide-collection-3.gif" alt=""/>
</div>
<div class="column-text">
<div class="text5">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
</div>
</a>
</td>
</tr>
<tr>
<td><strong>TileWideSmallImageAndText04</strong></td>
<td>On the left, one small image; on the right, one header string in larger text on the first line over four strings of regular text on the next four lines. Text does not wrap.</td>
<td>
<a class="tile wide imagetext" href="#">
<div class="image-wrapper">
<img src="content/img/tile-wide-collection-3.gif" alt=""/>
</div>
<div class="column-text">
<div class="text-header">Adipisci velit, sed quia non numquam eius modi tempora.</div>
<div class="text4">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
</div>
</a>
</td>
</tr>
<tr>
<td><strong>[TODO] TileWideSmallImageAndText05</strong></td>
<td>On the left, one header string in larger text over one string of regular text wrapped over a maximum of four lines; on the right, one small image with 3:4 dimensions.</td>
<td>
<a class="tile tilewideblockandtext02" href="#">
<div class="tile-column">
<img src="content/img/tile-wide.jpg" alt=""/>
</div>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div> <div id="charms" class="win-ui-dark slide">
<div id="theme-charms-section" class="charms-section">
<div class="charms-header">
<a href="#" class="close-charms win-backbutton"></a>
<h2>Settings</h2>
</div>
<div class="row-fluid">
<div class="span12">
<form class="">
<label for="win-theme-select">Change theme:</label>
<select id="win-theme-select" class="">
<option value="metro-ui-light">Light</option>
<option value="metro-ui-dark">Dark</option>
</select>
</form>
</div>
</div>
</div>
</div>
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='scripts/jquery-1.8.3.min.js'>\x3C/script>")</script>
<script type="text/javascript" src="scripts/google-code-prettify/prettify.js"></script>
<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/bootmetro-panorama.js"></script>
<script type="text/javascript" src="scripts/bootmetro-pivot.js"></script>
<script type="text/javascript" src="scripts/bootmetro-charms.js"></script>
<script type="text/javascript" src="scripts/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="scripts/jquery.nicescroll.js"></script>
<!--<script type="text/javascript" src="scripts/jquery.touchSwipe.js"></script>-->
<script type="text/javascript" src="scripts/demo.js"></script>
<script type="text/javascript" src="scripts/holder.js"></script>
<script type="text/javascript">
$('.panorama').panorama({
nicescroll: true,
showscrollbuttons: true,
keyboard: true
});
$('#pivot').pivot();
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.