mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
280 lines
5.5 KiB
HTML
280 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="ionic">
|
|
<head>
|
|
<script src="../../dist/js/ionic.bundle.js"></script>
|
|
<meta charset="utf-8">
|
|
<title>Grid</title>
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
|
|
<link href="../../dist/css/ionic.css" rel="stylesheet">
|
|
<style>
|
|
h4 {
|
|
padding-top: 20px;
|
|
}
|
|
.col > * {
|
|
border: 1px solid #ccc;
|
|
background: #eee;
|
|
text-align: center;
|
|
color: #444;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="bar bar-header bar-dark">
|
|
<h1 class="title">Grid</h1>
|
|
</header>
|
|
|
|
<div class="content has-header">
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<div>
|
|
.col
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.col
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.col
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.col
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col col-50">
|
|
<div>
|
|
.col.col-50
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.col
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.col
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col col-25">
|
|
<div>
|
|
.col.col-25
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.col
|
|
</div>
|
|
</div>
|
|
<div class="col col-25">
|
|
<div>
|
|
.col.col-25
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col col-25">
|
|
<div>
|
|
.col.col-25
|
|
</div>
|
|
</div>
|
|
<div class="col col-25 col-offset-25">
|
|
<div>
|
|
.col.col-25.col-offset-25
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<div>
|
|
.col
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.col<br>#
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.col<br>#<br>#
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.col<br>#<br>#<br>#
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col col-top">
|
|
<div>
|
|
.col.col-top
|
|
</div>
|
|
</div>
|
|
<div class="col col-center">
|
|
<div>
|
|
.col.col-center
|
|
</div>
|
|
</div>
|
|
<div class="col col-bottom">
|
|
<div>
|
|
.col.col-bottom
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.col<br>#<br>#
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row row-top">
|
|
<div class="col">
|
|
<div>
|
|
.row-top .col
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.row-top .col
|
|
</div>
|
|
</div>
|
|
<div class="col col-bottom">
|
|
<div>
|
|
.row-top .col.col-bottom
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.col<br>#<br>#
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row row-center">
|
|
<div class="col">
|
|
<div>
|
|
.row-center .col
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.row-center .col
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.row-center .col
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.col<br>#<br>#
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row row-bottom">
|
|
<div class="col">
|
|
<div>
|
|
.row-bottom .col
|
|
</div>
|
|
</div>
|
|
<div class="col col-top">
|
|
<div>
|
|
.row-bottom .col.col-top
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.row-bottom .col
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.col<br>#<br>#
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row responsive-sm">
|
|
<div class="col">
|
|
<div>
|
|
.responsive-sm .col
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.responsive-sm .col
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.responsive-sm .col
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.responsive-sm .col
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row responsive-md">
|
|
<div class="col">
|
|
<div>
|
|
.responsive-md .col
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.responsive-md .col
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.responsive-md .col
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div>
|
|
.responsive-md .col
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row responsive-lg">
|
|
<div class="col col-50 col-offset-25">
|
|
<div>
|
|
.responsive-lg .col.col-50.col-offset-25
|
|
</div>
|
|
</div>
|
|
<div class="col col-25">
|
|
<div>
|
|
.responsive-lg .col.col-25
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|