almost every mobile app contains some fundamental elements. usually those elements include a header and a footer that will cover the top and the bottom part of the screen. all the other elements will be placed between these two. ionic provides ion-content element that serves as a container that will wrap all the other elements that we want to create.
this container has some unique characteristics, but since this is a javascript based component which we will cover in the later part of this tutorial.
<div class = "bar bar-header"> <h1 class = "title">header</h1> </div> <div class = "list"> <label class = "item item-input"> <input type = "text" placeholder = "placeholder 1" /> </label> <label class = "item item-input"> <input type = "text" placeholder = "placeholder 2" /> </label> </div> <div class = "bar bar-footer"> <h1 class = "title">footer</h1> </div>