您的位置：首页 > 其它

Ionic Grid栅格布局居中实例

2017-02-02 21:36 831 查看

一、目录结构

二、引用指定

<link href="../scripts/ionic/css/ionic.css" rel="stylesheet" />
<style>
.responsive-sm .col {
background: gray;
}
</style>

<script src="../scripts/ionic/js/angular/angular.min.js"></script>
<script src="../scripts/ionic/js/ionic.min.js"></script>

三、代码说明

1.默认row下的col都是平均分布一行，row仅代表一行

2.responsive-sm可以指定在小屏幕时每个col代表一行

3.默认button为inline-block类型，所以想要一行内居中，可以使用text-center

4.当button指定button-block时，会填充整个单元格。

<body class="content">
<div class="row responsive-sm">
<div class="col ">
col1
</div>
<div class="col col-offset-10">
col1
</div>
<div class="col col-offset-10">
col1
</div>
<div class="col col-offset-10">
col1
</div>
</div>
<hr />
<div class="row row-center">
<div class="col text-center">
<button class="button button-assertive">
assertive按钮
</button>
</div>
<div class="col text-center">
<button class="button button-balanced">
stable按钮
</button>
</div>
</div>
<hr />
<div class="row row-center">
<div class="col">
<button class="button button-block button-assertive">
assertive按钮
</button>
</div>
<div class="col">
<button class="button button-block button-balanced">
stable按钮
</button>
</div>
</div>
<hr />
<script src="../scripts/ionic/js/angular/angular.min.js"></script>
<script src="../scripts/ionic/js/ionic.min.js"></script>
</body>

更多：

Ionic相关整理

Framework7特色的HTML框架WebApp开源前端框架

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航