mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
272 lines
5.8 KiB
HTML
272 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html dir="ltr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Ionic Grid</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<script src="/dist/ionic.js"></script>
|
|
</head>
|
|
<body>
|
|
<ion-app>
|
|
<ion-content class="grid-demo">
|
|
<ion-grid>
|
|
<ion-row>
|
|
<ion-col>
|
|
<div>
|
|
ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div>
|
|
ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div>
|
|
ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div>
|
|
ion-col
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col col-6>
|
|
<div>
|
|
ion-col[width-50]
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div>
|
|
ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div>
|
|
ion-col
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col col-3>
|
|
<div>
|
|
ion-col[width-25]
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div>
|
|
ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col col-3>
|
|
<div>
|
|
ion-col[width-25]
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col col-3>
|
|
<div>
|
|
ion-col[width-25]
|
|
</div>
|
|
</ion-col>
|
|
<ion-col col-3 offset-3>
|
|
<div>
|
|
ion-col[width-25][offset-25]
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col>
|
|
<div>
|
|
ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div>
|
|
ion-col<br>#
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div>
|
|
ion-col<br>#<br>#
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div>
|
|
ion-col<br>#<br>#<br>#
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col align-self-start>
|
|
<div>
|
|
ion-col[top]
|
|
</div>
|
|
</ion-col>
|
|
<ion-col align-self-center>
|
|
<div>
|
|
ion-col[center]
|
|
</div>
|
|
</ion-col>
|
|
<ion-col align-self-end>
|
|
<div>
|
|
ion-col[bottom]
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div>
|
|
ion-col<br>#<br>#
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row align-items-start>
|
|
<ion-col>
|
|
<div>
|
|
[top] ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div>
|
|
[top] ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col align-self-end>
|
|
<div>
|
|
[top] ion-col[bottom]
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div>
|
|
ion-col<br>#<br>#
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row align-items-center>
|
|
<ion-col>
|
|
<div>
|
|
[center] ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div>
|
|
[center] ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div>
|
|
[center] ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div>
|
|
ion-col<br>#<br>#
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row align-items-end>
|
|
<ion-col>
|
|
<div>
|
|
[bottom] ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col align-self-start>
|
|
<div>
|
|
[bottom] ion-col[top]
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div>
|
|
[bottom] ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col>
|
|
<div>
|
|
ion-col<br>#<br>#
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col col-12 col-sm>
|
|
<div>
|
|
[responsive-sm] ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col col-12 col-sm>
|
|
<div>
|
|
[responsive-sm] ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col col-12 col-sm>
|
|
<div>
|
|
[responsive-sm] ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col col-12 col-sm>
|
|
<div>
|
|
[responsive-sm] ion-col
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col col-12 col-md>
|
|
<div>
|
|
[responsive-md] ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col col-12 col-md>
|
|
<div>
|
|
[responsive-md] ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col col-12 col-md>
|
|
<div>
|
|
[responsive-md] ion-col
|
|
</div>
|
|
</ion-col>
|
|
<ion-col col-12 col-md>
|
|
<div>
|
|
[responsive-md] ion-col
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row responsive-lg>
|
|
<ion-col col-6 offset-3>
|
|
<div>
|
|
[responsive-lg] ion-col[width-50][offset-25]
|
|
</div>
|
|
</ion-col>
|
|
<ion-col col-3>
|
|
<div>
|
|
[responsive-lg] ion-col[width-25]
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
|
|
</ion-content>
|
|
|
|
<style>
|
|
.grid-demo ion-col div {
|
|
background-color: #f7f7f7;
|
|
border: 1px solid #ddd;
|
|
padding: 10px 5px;
|
|
}
|
|
</style>
|
|
</ion-app>
|
|
</body>
|
|
</html>
|