如何利用ionic框架设置头部header样式
的有关信息介绍如下:
ionic框架分为由头部(header)、副标题(sub header)和底部(footer)等组成。其中,头部header就有很多种样式,如bar-assertive、bar-calm等等。下面利用一个具体的实例来说明,详细情况如下:
第一步,在创建好的静态页面header.html,引入相关的JS和CSS文件(ionic和AngularJS),并修改title里内容,如下图所示:
第二步,在静态标签元素body主体内插入div标签,并设置样式class为bar、bar-header、bar-assertive,如下图所示:
第三步,诉吐保存上述代码后,在浏览器中预览页面,这时页面展示一个含有“头部标题一”字样的红色背景框,如下图所示:
第四步,按照步骤二的操作,在上述代码后插入设置样式为bar-balanced,并设置标题样式为title-left,如下图所示:
第五步,预览步骤四中代码效果,会看到一个绿色背景含有“头部标题二”字样的框裹之歌框,如下图所示:
第六步,接着再次插入代码,样式class中含为bar-calm,设置完毕保存后预览页面,如下趣腊图所示:



