Ionic 3网格系统教程

•分享于 

•

2分钟阅读

ionic

  •繁體

了解Ionic 3网格系统

Ionic 3中的网格布局系统允许你通过行和列构建复杂的用户界面，就像流行的CSS框架，如Bootstrap和Foundation。

网格布局使用行(ion-row )和列(ion-col )来拆分可用空间。

创建行需要使用ion-row指令，对于列使用ion-col指令。

例如：


 <ion-grid>
 <ion-row>
 <ion-col ></ion-col>
 <ion-col ></ion-col>
 </ion-row>
 </ion-grid>

Ionic3网格系统使用12列来指定列的大小，只要用col属性（ col-width ）设置一个从1到12的数字，例如：


 <ion-grid>
 <ion-row>
 <ion-col col-1>This column will take 1/12 of available horizontal area (1 column of 12)</ion-col>
 </ion-row>
 <ion-row>
 <ion-col col-12>This column will take the whole row (12 columns)</ion-col>
 </ion-row>
 </ion-grid>

就像Bootstrap一样，你可以为不同的断点提供不同的大小。

要根据屏幕的大小创建不同大小的列，只需使用以下语法：


 col-<breakpoint>-<width>

  • 宽度可以是1到12的任意值。

  • 断点可以是xl (特小)，sm(small)，md(medium)或lg(large)。

    • 例如，创建一个包含两列的一行的网格。

    对于大/中型桌面屏幕或平板电脑，这两列将划分它们之间的行空间。

    对于小型移动屏幕，每列将占用整个行空间。

    
 <ion-grid>
 <ion-row>

 <ion-col col-sm-12 col-xl-12 col-md-6 col-lg-6 ></ion-col>
 <ion-col col-sm-12 col-xl-12 col-md-6 col-lg-6 ></ion-col>

 </ion-row>
 </ion-grid>

    结论

    使用网格系统，你可以为Ionic 3应用程序构建复杂的用户界面。


    SYS  系统  GRID  教程  ION  Ionic  
    相关文章