Cheap VPS & Xen Server


Residential Proxy Network - Hourly & Monthly Packages

Bootstrap Tabs and Pills

Bootstrap Menus

Menus are used in most of the web pages. These are defined in an unordered list <ul>. You have to add the .list-inline class to <ul> to create a horizontal menu.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  9. </head>
  10. <body>
  12. <div class=“container”>
  13.   <h3>Inline List</h3>
  14.   <ul class=“list-inline”>
  15.     <li><a href=“#”>Home</a></li>
  16.     <li><a href=“#”>Menu 1</a></li>
  17.     <li><a href=“#”>Menu 2</a></li>
  18.     <li><a href=“#”>Menu 3</a></li>
  19.   </ul>
  20. </div>
  21. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  22. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  23. </body>
  24. </html>

Test it Now

Bootstrap Tabs

You can create a basic navigation tag with <ul class=”nav nav-tabs”>. You can also mark the current page with <li class=”active”>.

The following example specifies how to create a simple navigation tab.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  9. </head>
  10. <body>
  12. <div class=“container”>
  13.   <h3>Tabs</h3>
  14.   <ul class=“nav nav-tabs”>
  15.     <li class=“active”><a href=“#”>Home</a></li>
  16.     <li><a href=“#”>Menu 1</a></li>
  17.     <li><a href=“#”>Menu 2</a></li>
  18.     <li><a href=“#”>Menu 3</a></li>
  19.   </ul>
  20.   <br>
  22. </div>
  23. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  24. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  25. </body>
  26. </html>

Test it Now

Bootstrap Tabs with Dropdown Menu

You can also use tabs in a dropdown menu.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  9. </head>
  10. <body>
  12. <div class=“container”>
  13.   <h3>Tabs With Dropdown Menu</h3>
  14.   <ul class=“nav nav-tabs”>
  15.     <li class=“active”><a href=“#”>Home</a></li>
  16.     <li class=“dropdown”>
  17.       <a class=“dropdown-toggle” data-toggle=“dropdown” href=“#”>Menu 1 <span class=“caret”></span></a>
  18.       <ul class=“dropdown-menu”>
  19.         <li><a href=“#”>Submenu 1-1</a></li>
  20.         <li><a href=“#”>Submenu 1-2</a></li>
  21.         <li><a href=“#”>Submenu 1-3</a></li>
  22.       </ul>
  23.     </li>
  24.     <li><a href=“#”>Menu 2</a></li>
  25.     <li><a href=“#”>Menu 3</a></li>
  26.   </ul>
  27. </div>
  28. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  29. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  30. </body>
  31. </html>

Test it Now

Bootstrap Toggleable / Dynamic Tabs

Add the data-toggle=”tab” attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content, to make tags toggleable.

If you want the tabs to fade in and out when clicking on them, add the .fade class to .tab-pane .

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  9. </head>
  10. <body>
  12. <div class=“container”>
  13.   <h2>Dynamic Tabs</h2>
  14.   <ul class=“nav nav-tabs”>
  15.     <li class=“active”><a data-toggle=“tab” href=“#home”>Home</a></li>
  16.     <li><a data-toggle=“tab” href=“#menu1”>Menu 1</a></li>
  17.     <li><a data-toggle=“tab” href=“#menu2”>Menu 2</a></li>
  18.     <li><a data-toggle=“tab” href=“#menu3”>Menu 3</a></li>
  19.   </ul>
  21.   <div class=“tab-content”>
  22.     <div id=“home” class=“tab-pane fade in active”>
  23.       <h3>HOME</h3>
  24.       <p>A markup language is a programming language that is used make text more
  25.            interactive and dynamic. It can turn a text into images, tables, links etc.</p>
  26.     </div>
  27.     <div id=“menu1” class=“tab-pane fade”>
  28.       <h3>Menu 1</h3>
  29.       <p>Java is a high level, robust, secured and object-oriented programming language.</p>
  30.     </div>
  31.     <div id=“menu2” class=“tab-pane fade”>
  32.       <h3>Menu 2</h3>
  33.       <p>SQL is just a query language, it is not a database. To perform SQL queries,
  34.      you need to install any database for example Oracle, MySQL, MongoDB, PostGre SQL, SQL Server, DB2 etc.</p>
  35.     </div>
  36.     <div id=“menu3” class=“tab-pane fade”>
  37.       <h3>Menu 3</h3>
  38.       <p>The C Language is developed for creating system applications that direct
  39.       interacts to the hardware devices such as drivers, kernals etc.</p>
  40.     </div>
  41.   </div>
  42. </div>
  43. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  44. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  45. </body>
  46. </html>

Test it Now

Bootstrap Pills

You can create pills with <ul class=”nav nav-pills”>. You can also mark the current page with <li class=”active”>.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  9. </head>
  10. <body>
  12. <div class=“container”>
  13.   <h3>Pills</h3>
  14.   <ul class=“nav nav-pills”>
  15.     <li class=“active”><a href=“#”>Home</a></li>
  16.     <li><a href=“#”>Menu 1</a></li>
  17.     <li><a href=“#”>Menu 2</a></li>
  18.     <li><a href=“#”>Menu 3</a></li>
  19.   </ul>
  20. </div>
  21. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  22. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  23. </body>
  24. </html>

Test it Now

Bootstrap Vertical Pills

Add the .nav-stacked class to display the pills vertically.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  9. </head>
  10. <body>
  12. <div class=“container”>
  13.   <h3>Vertical Pills</h3>
  14.   <ul class=“nav nav-pills nav-stacked”>
  15.     <li class=“active”><a href=“#”>Home</a></li>
  16.     <li><a href=“#”>Menu 1</a></li>
  17.     <li><a href=“#”>Menu 2</a></li>
  18.     <li><a href=“#”>Menu 3</a></li>
  19.   </ul>
  20. </div>
  21. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  22. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  23. </body>
  24. </html>

Test it Now

Bootstrap Pills with Dropdown Menu

You can also use dropdown menu with pills.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  9. </head>
  10. <body>
  12. <div class=“container”>
  13.   <h3>Pills With Dropdown Menu</h3>
  14.   <ul class=“nav nav-pills nav-stacked”>
  15.     <li class=“active”><a href=“#”>Home</a></li>
  16.     <li class=“dropdown”>
  17.       <a class=“dropdown-toggle” data-toggle=“dropdown” href=“#”>Menu 1 <span class=“caret”></span></a>
  18.       <ul class=“dropdown-menu”>
  19.         <li><a href=“#”>Submenu 1-1</a></li>
  20.         <li><a href=“#”>Submenu 1-2</a></li>
  21.         <li><a href=“#”>Submenu 1-3</a></li>
  22.       </ul>
  23.     </li>
  24.     <li><a href=“#”>Menu 2</a></li>
  25.     <li><a href=“#”>Menu 3</a></li>
  26.   </ul>
  27. </div>
  28. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  29. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  30. </body>
  31. </html>

Test it Now

Bootstrap Toggleable Dynamic Pills

It is same as toggleable dynamic tabs, the only change is the data-toggle attribute to data-toggle=”pill” .

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  9. </head>
  10. <body>
  12. <div class=“container”>
  13.   <h2>Dynamic Pills</h2>
  14.   <ul class=“nav nav-pills”>
  15.     <li class=“active”><a data-toggle=“pill” href=“#home”>Home</a></li>
  16.     <li><a data-toggle=“pill” href=“#menu1”>Menu 1</a></li>
  17.     <li><a data-toggle=“pill” href=“#menu2”>Menu 2</a></li>
  18.     <li><a data-toggle=“pill” href=“#menu3”>Menu 3</a></li>
  19.   </ul>
  21.   <div class=“tab-content”>
  22.     <div id=“home” class=“tab-pane fade in active”>
  23.       <h3>HOME</h3>
  24.       <p>A markup language is a programming language that is used make text more interactive and
  25.         dynamic. It can turn a text into images, tables, links etc.</p>
  26.     </div>
  27.     <div id=“menu1” class=“tab-pane fade”>
  28.       <h3>Menu 1</h3>
  29.       <p>Java is a high level, robust, secured and object-oriented programming language.</p>
  30.     </div>
  31.     <div id=“menu2” class=“tab-pane fade”>
  32.       <h3>Menu 2</h3>
  33.       <p>SQL is just a query language, it is not a database. To perform SQL queries,
  34.       you need to install any database for example Oracle, MySQL, MongoDB, PostGre SQL, SQL Server, DB2 etc.</p>
  35.     </div>
  36.     <div id=“menu3” class=“tab-pane fade”>
  37.       <h3>Menu 3</h3>
  38.       <p>The C Language is developed for creating system applications that direct
  39.        interacts to the hardware devices such as drivers, kernals etc.</p>
  40.     </div>
  41.   </div>
  42. </div>
  43. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  44. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  45. </body>
  46. </html>

Comments

comments

Filed UnderBootstrap Bootstrap Advance Java

July 25, 2016Sraboni Mandal0 Comments

Tagged With


Recent Tutorials

Using Component Metrics In Your SEO Analysis

Using Component Metrics In Your SEO Analysis

No thumbnail available

How to install tracker-extract on Debian Unstable (Sid)

No thumbnail available

How to install python3-nmea2 on Debian Unstable (Sid)

No thumbnail available

How to install libvisp-tt-dev on Debian Unstable (Sid)

No thumbnail available

How to install xbmc-pvr-wmc on Debian Unstable (Sid)


Tutorials You May Like

No thumbnail available

How To Configure ISA Proxy/Auth Setting For Yum

How To Prep For The Pending Penguin Update & Ensure You’re Penalty Free In 2016

How To Prep For The Pending Penguin Update & Ensure You’re Penalty Free In 2016

No thumbnail available

How to install plasma-framework on Debian Unstable (Sid)

No thumbnail available

How to install sqlite3-doc on Debian Unstable (Sid)

No thumbnail available

How to install proftpd-mod-msg on Debian Unstable (Sid)


More Tutorials

No thumbnail available

How to install ruby-phonon on Debian Unstable (Sid)

Adding Two-Factor Authentication To OpenVPN AS With The WiKID Strong Authentication Server

Adding Two-Factor Authentication To OpenVPN AS With The WiKID Strong Authentication Server

No thumbnail available

jQuery UI Dialog

No thumbnail available

String concat()

No thumbnail available

How to install task-british-desktop on Debian Unstable (Sid)