Grid(网格)
ionic 的网格(Grid)和其他大部分框架有所不同，它采用了弹性盒子模型(Flexible Box Model) 。 而且在移动端，基本上的手机都支持flexbox。row 样式指定行，col 样式指定列。
在row简单添加columns,columns会被平分row的空间. 如果有三列,就添加三列, 有五列就添加五列. 不像 bootstrap, ionic没有12列的限制,也没有列大小的限制. 你还可以在每个列中设置垂直居中.
row 类是用来定义行,col 是用来定义列. 在下边的demo里面,我们有4列和2列.但我们也可以用3, 6, 7, 23 等等, 不重要. 关键在于创建你想要的列,不用担心他们的占位百分比, 因为都是自动的.
注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.
Grid: Evenly Spaced Columns(同等大小网格)
在带有 row 的样式的元素里如果包含了 col 的样式，col 就会设置为同等大小。 以下实例中 row 的样式包含了 5 个 col 样式，每个col 的宽度为 20%。
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.
Grid: Explicit Column Sizes(指定列宽)
你 可以 设定一行中各个列的大小不一样。默认情况下，列都会被划分为同等大小。但你也可以按百分比来设置列的宽度（一行为 12 个网格）。
使用栅格系统的好处在于你只需要指明你需要的列占位百分比即可,其他的列就会被平均分配使用剩下的空间.
<div class="row">
<div class="col col-50">.col.col-50</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col col-75">.col.col-75</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col">.col</div>
<div class="col col-75">.col.col-75</div>
</div>
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
</div>
注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.
下面列出了指定列宽的一些百分比的样式名:
Grid: Offset Columns(有偏移量的网格)
列可以设置左侧偏移量，实例如下：
<div class="row">
<div class="col col-33 col-offset-33">.col</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col col-33">.col</div>
<div class="col col-33 col-offset-33">.col</div>
</div>
<div class="row">
<div class="col col-33 col-offset-67">.col</div>
</div>
注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.
下面列出了指定列宽的一些百分比的样式名:
Grid: Wrap Columns(换行网格)
默认为不换行当我们需要换行的时候只需要添加row-wrap即可
<div class="row row-wrap">
<div class="col col-25">.col-1</div>
<div class="col col-25">.col-2</div>
<div class="col col-25">.col-3</div>
<div class="col col-25">.col-4</div>
<div class="col col-25">.col-5</div>
<div class="col col-25">.col-6</div>
</div>
Grid: Vertically Align Columns(纵向对齐网格)
弹性盒子模型可以很容易设置列纵向对齐。纵向对齐包含顶部，中间部分，底部，可以应用到每一行的列，或者指定的某列。
实例中，最后一列设置了最高的内容用于更好的演示纵向对齐网格。
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row">
<div class="col col-top">.col</div>
<div class="col col-center">.col</div>
<div class="col col-bottom">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row row-top">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row row-center">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row row-bottom">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.
Responsive Grid(响应式网格)
手持设备屏幕在切换时，例如横屏，竖屏等。就需要设置每行的网格可以实现根据不同宽度自适应大小。
不同设备响应式类的样式如下:
<div class="row responsive-sm">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.
以后配置中, 每一个使用Sass变量的类都可以替换为你喜欢的样式. 你还可以使用responsive-grid-break来创建你自己的类.
网友评论