kero
Version:
109 lines • 4.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="http://design.yyuap.com/static/uui/latest/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="http://design.yyuap.com/static/uui/latest/css/tree.css">
<link rel="stylesheet" type="text/css" href="http://design.yyuap.com/static/uui/latest/css/grid.css">
<link rel="stylesheet" type="text/css" href="http://design.yyuap.com/static/uui/latest/css/u.css">
<link rel="stylesheet" type="text/css" href="http://design.yyuap.com/static/uui/latest/css/u-extend.css">
<link rel="stylesheet" type="text/css" href="widget.css">
</head>
<body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="../../../vendor/uui/css/u.css">
<style>
.u-row>div{
box-sizing: border-box;
background-color: #BDBDBD;
border:solid 1px #ddd;
height: 200px;
padding-left: 8px;
padding-top: 4px;
color: white;
}
</style>
</head>
<body>
<div class="u-row">
<div class="u-col-1">1</div>
<div class="u-col-1">1</div>
<div class="u-col-1">1</div>
<div class="u-col-1">1</div>
<div class="u-col-1">1</div>
<div class="u-col-1">1</div>
<div class="u-col-1">1</div>
<div class="u-col-1">1</div>
<div class="u-col-1">1</div>
<div class="u-col-1">1</div>
<div class="u-col-1">1</div>
<div class="u-col-1">1</div>
</div>
<div class="u-row">
<div class="u-col-4">4</div>
<div class="u-col-4">4</div>
<div class="u-col-4">4</div>
</div>
<div class="u-row">
<div class="u-col-6">6</div>
<div class="u-col-4">4</div>
<div class="u-col-2">2</div>
</div>
<div class="u-row">
<div class="u-col-2 u-col-xs-4">CS 2 (4 on phone)</div>
<div class="u-col-2 u-col-xs-4">CS 2 (4 on phone)</div>
<div class="u-col-2 u-col-xs-4">CS 2 (4 on phone)</div>
<div class="u-col-2 u-col-xs-4">CS 2 (4 on phone)</div>
</div>
<div class="u-row">
<div class="u-col-6 u-col-sm-8">CS 6 (8 on tablet)</div>
<div class="u-col-6 u-col-sm-8">CS 6 (8 on tablet)</div>
<div class="u-col-6 u-col-sm-8">CS 6 (8 on tablet)</div>
</div>
<div class="u-row">
<div class="u-col-6 u-col-md-6">CS 6 (6 on desktop)</div>
<div class="u-col-6 u-col-md-6">CS 6 (6 on desktop)</div>
<div class="u-col-6 u-col-md-6">CS 6 (6 on desktop)</div>
</div>
<div class="u-row">
<div class="u-col-6 u-col-md-6">CS 6 (6 on large desktop)</div>
<div class="u-col-6 u-col-md-6">CS 6 (6 on large desktop)</div>
</div>
<div class="u-row">
<div class="u-col-6">6</div>
<div class="u-col-4">4</div>
<div class="u-col-2">2</div>
</div>
<div class="u-row">
<div class="u-col-md-4">u-col-md-4</div>
<div class="u-col-md-4 u-col-md-offset-4">u-col-md-4 u-col-md-offset-4</div>
</div>
<div class="u-row">
<div class="u-col-md-3 u-col-md-offset-3">u-col-md-3 u-col-md-offset-3</div>
<div class="u-col-md-3 u-col-md-offset-3">u-col-md-3 u-col-md-offset-3</div>
</div>
<div class="u-row">
<div class="u-col-md-6 u-col-md-offset-3">u-col-md-6 u-col-md-offset-3</div>
</div>
<div class="u-row">
<div class="u-col-md-9 u-col-md-order-1">u-col-md-9 u-col-md-order-1</div>
<div class="u-col-md-3 u-col-md-order-0">u-col-md-3 u-col-md-order-0</div>
</div>
</body>
</html>
<script src="http://design.yyuap.com/static/jquery/jquery-1.9.1.min.js"></script>
<script src="http://design.yyuap.com/static/knockout/knockout-3.2.0.debug.js"></script>
<script src="http://design.yyuap.com/static/uui/latest/js/u-polyfill.js"></script>
<script src="http://design.yyuap.com/static/uui/latest/js/u.js"></script>
<script src="http://design.yyuap.com/static/uui/latest/js/u-tree.js"></script>
<script src="http://design.yyuap.com/static/uui/latest/js/u-grid.js"></script>
<script src="http://design.yyuap.com/static/requirejs/require.debug.js"></script>
<script src="widget.js"></script>
</body>
</html>