mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
227 lines
4.4 KiB
HTML
227 lines
4.4 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Grid</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<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">
|
|
|
|
<h3>.row</h3>
|
|
|
|
<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>
|
|
|
|
<hr>
|
|
|
|
<div class="padding">
|
|
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html> |