26.06.2017 Views

Bootstrap for ASP.NET MVC

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Chapter 4<br />

Tabs<br />

Tabs provide an option to split your content into separate pages. This is an ideal<br />

component when you have a particularly large <strong>for</strong>m, which you want to split up into<br />

a logical grouping. For example, when you're editing a customer's record, you might<br />

want to split their contact details from their address details, as illustrated in the<br />

following screenshot:<br />

<strong>Bootstrap</strong> tabs are divided into two parts. You irst need to specify the tab names and<br />

the ID of the corresponding element to show when the user clicks on the tab.<br />

This is done by creating a standard unordered list element with the tab names<br />

as child list items . The element's class must be set to nav nav-tabs or nav<br />

nav-pills, as illustrated in the following script:<br />

<br />

Customer<br />

Info<br />

Address<br />

<br />

[ 83 ]

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!