HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Header assembly is fixed to the top of the screen, you can pack such as the title and function buttons around.
ionic default provides many kinds of color style, you can call a different style name, of course, you can customize a.
<div class="bar bar-header bar-light"> <h1 class="title">bar-light</h1> </div>
<div class="bar bar-header bar-stable"> <h1 class="title">bar-stable</h1> </div>
<div class="bar bar-header bar-positive"> <h1 class="title">bar-positive</h1> </div>
<div class="bar bar-header bar-calm"> <h1 class="title">bar-calm</h1> </div>
<div class="bar bar-header bar-balanced"> <h1 class="title">bar-balanced</h1> </div>
<div class="bar bar-header bar-energized"> <h1 class="title">bar-energized</h1> </div>
<div class="bar bar-header bar-assertive"> <h1 class="title">bar-assertive</h1> </div>
<div class="bar bar-header bar-royal"> <h1 class="title">bar-royal</h1> </div>
<div class="bar bar-header bar-dark"> <h1 class="title">bar-dark</h1> </div>
Sub Header is also fixed at the top, just below the Header it is, even if this did not write Header, Sub Header This style also has a Header from the top of the distance. Color style with Header.
<div class="bar bar-header"> <h1 class="title">Header</h1> </div> <div class="bar bar-subheader"> <h2 class="title">Sub Header</h2> </div>
Footer is at the bottom of the screen can contain multiple content types.
<div class="bar bar-footer bar-balanced"> <div class="title">Footer</div> </div>
Footer with the above Header, only the style name bar-header for doing bar-footer.
<div class="bar bar-footer"> <button class="button button-clear">Left</button> <div class="title">Title</div> <button class="button button-clear">Right</button> </div>
In addition, if the bottom has no title, but they need the right button, you need the right-hand button to add pull-right, such as:
<div class="bar bar-footer"> <button class="button button-clear pull-right">Right</button> </div>