Bootstrap tabs
Brief introduction
In this tutorial, we will see how to use the Bootstrap Create tab.
Collate multiple pages
If you want to create a page for your online application or website or app search results, you can use this type of tab.
bootstrap.css the CSS class "pagination", located on the line number 2756-1814 saved create this type of page styles.
The other two CSS classes "disabled" and "active" can be used to customize the tab links are clickable or non-clickable. Line number 2793-2797 to save the class for pagination "disabled" and some other class of style. Line number 2786-2792 to save the "active" class styles for pagination.
To set the alignment of the paging links, use the "pagination-centered" and "pagination-right" CSS class. Both class is located bootstrap.css line number 2809-2814 (version 2.0.1).
Examples of multi-page tab
Examples
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Bootstrap multiple page tabs Examples </ title>
<Meta name = "description" content = "Twitter Bootstrap Multicon-page pagination example">
<Link href = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / css / bootstrap.css" rel = "stylesheet">
<Style type = "text / css">
body {
margin: 50px;
}
</ Style>
</ Head>
<Body>
<Div class = "pagination">
<Ul>
<Li> <a href="#"> Prev </a> </ li>
<Li class = "active">
<a href="#"> 1 </a>
</ Li>
<Li> <a href="#"> 2 </a> </ li>
<Li> <a href="#"> 3 </a> </ li>
<Li> <a href="#"> 4 </a> </ li>
<Li> <a href="#"> Next </a> </ li>
</ Ul>
</ Div>
</ Body>
</ Html>
View online examples
Note that adding an extra element of style margins to the body just to demonstrate examples.
Flip
Sometimes, you may need to type the first page of this tutorial section above. But, sometimes, you may only need something like next / previous or old / new this simple link to the user to navigate. This can be achieved by page.
"Pager" CSS class is located bootstrap.css line number 2815-2850 (version 2.0.1). Here, you can apply the "disabled" CSS class to make the link not clickable.
Examples of previous and next page with the
Examples
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Bootstrap page with next and previous instances of </ title>
<Meta name = "description" content = "Twitter Bootstrap pager with next and previous example">
<Link href = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / css / bootstrap.css" rel = "stylesheet">
<Style type = "text / css">
body {
margin: 50px;
}
</ Style>
</ Head>
<Body>
<Ul class = "pager">
<Li>
<a href="#"> Previous </a>
</ Li>
<Li>
<a href="#"> Next </a>
</ Li>
</ Ul>
</ Body>
</ Html>
View online examples
Examples of old and new with a flip of
Examples
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Bootstrap page with old and new instances of </ title>
<Meta name = "description" content = "Twitter Bootstrap pager with older and newer example">
<Link href = "/ twitter-bootstrap / twitter-bootstrap-v2 / docs / assets / css / bootstrap.css" rel = "stylesheet">
<Style type = "text / css">
body {
margin: 50px;
}
</ Style>
</ Head>
<Body>
<Ul class = "pager">
<Li class = "previous">
<a href="#"> ← Older </a>
</ Li>
<Li class = "next">
<a href="#"> Newer → </a>
</ Li>
</ Ul>
</ Body>
</ Html>
View online examples
Click here to download the tutorial to use all the HTML, CSS, JS and image files.