ionicCSS01_头部、底部和按钮

头部导入ionic.min.css

1.ionic 头部与底部

1.1 header头部

1）Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮

2）头部样式通过用class属性名引入，

3）bar和bar-header为必须选项，

4）bar-light表示标题栏背景颜色，不选择默认白底，也可以换成其他属性名bar-stable，bar-positive，bar-calm，bar-balanced，bar-energized，bar-assertive，bar-royal，bar-dark等

5）p和h1标签可以换成其他的块级标签

6）可以在头部标题栏添加按钮

<p class="bar bar-header bar-dark">
		<button class="button icon ion-navicon"></button>
	  <h1 class="title">Header</h1>
</p>

1.2 sub header副标题

1)Sub Header同样是固定在顶部,位于headr下面，即使没有Header，它的样式举例顶部也有一段距离

2）bar bar-subheader必选，其他样式同header

<p class="bar bar-subheader bar-calm">
		<h2 class="title">Sub Header</h2>
</p>

1.3 Footer(底部)

1）Footer是在屏幕的最下方，可以包含多种内容类型。

2）Footer同上面的Header，只是把样式名bar-header换做bar-footer

<p class="bar bar-footer bar-balanced">  
      <p class="title">Footer</p>  
</p>

2.ionic按钮

1）button是必选

2）颜色样式属性：button-light，button-stable，button-positive，button-calm，button-balanced，button-energized，button-assertive，button-royal，button-dark

3）添加button-block到按钮使按钮以display: block方式显示.一个block的按钮会100%集成他的父元素的宽度.在下面这个例子当中,按钮包含的内容同时也应用了padding,所以在按钮和显示屏边框之间会有一定的空隙.

4）添加 button-full到按钮不仅将应用display: block到按钮,同时还将移除按钮的左右边距,任何边框圆角也可能被应用.当按钮需要撑满整个屏幕的时候,这种样式将非常有用.另外,按钮的父元素不会 有 padding被应用

5）添加 button-large到按钮会让按钮变大,添加button-small让它变小.

6）添加 button-outline到按钮以应用空白背景,只有边框按钮的风格.按钮文字和边框颜色会使用按钮的颜色样式,就是说button-positive会使文字和边框变成蓝色,背景却是透明的.

7）添加 button-clear会移除按钮的边框.按钮文字和边框颜色会使用按钮的颜色样式,就是说button-positive会使文字的颜色变成蓝色,蓝色背景也将会被无边框取代.

8）添加按钮图标

图标可以使用第三方图标或ionic自带图标（https://ionicons.com/）图标能可以子元素的形式被放在按钮内部（比如span）,不过,直接把图标分配给按钮将减少DOM的数量.

使用icon-left或icon-right或icon定位图标在按钮的左边或右侧或中间，后面再添加图标的样式

使用button-icon添加仅含有图标的按钮

使用ion-navicon和button-balanced在按钮上添加选项标签图标

<p class="content has-header has-subheader padding">  
        <button class="button button-positive">  
          <i class="icon ion-loading-c"></i>子元素图标  
        </button>  
        <button class="button button-positive icon-left ion-home">直接分配图标</button>  
        <button class="button button-block icon-left ion-star button-positive">左侧</button>  
        <a class="button button-block icon-right ion-chevron-right button-calm">右侧</a>  
        <button class="button button-block icon ion-gear-a">中间</button>  
        <a class="button button-icon icon ion-settings"></a>  
        <a class="button button-block button-outline icon-right ion-navicon button-balanced">Reorder</a>  
        <button class="button button-block button-positive">  
          Block Button  
        </button>  
        <button class="button button-full button-positive">  
          Full Width Block Button  
        </button>  
</p>  

注意：由于这里使用的是p布局而不是ionic规定的标签，所以在使用content属性时，p的内部末尾有一部分的内容显示不出来，比如最后一个按钮不显示或者只显示一部分，若要查看效果，可将html文件中的<DOCTYPE html>声明去掉然后在谷歌或safari浏览器中打开查看，或者给content加一个高度亦可以。