Working with footers

Footers are going to be, for the most part, much like headers. We previously demonstrated the use of data-role to create a footer:

<div data-role="footer"><h4>My Footer</h4></div>

As with headers, you can include buttons in the footer. Unlike headers, the buttons in a footer do not automatically position themselves to the left and right of the text. Rather, they simply line up from the left-hand side. The following is a simple example with two buttons:

<div data-role="footer">
  <a href="credits.html">Credits</a>
  <a href="contact.html">Contact</a>
</div>

The following screenshot demonstrates this feature:

This works, but note that the buttons don't have much space around them. You can improve this by adding a class called ui-bar to your footer div tag, as shown in the following code snippet:

<div data-role="footer" class="ui-bar">
  <a href...