Bootstrap Tab Plugins Examples

First Page
Next Page

Bootstrap Tab Plugins

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <script src="/scripts/jquery.min.js"></script>
      <script src="/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <ul id="myTab" class="nav nav-tabs">
         <li class="active">
            <a href="#home" data-toggle="tab">
               Home
            </a>
         </li>
         <li><a href="#Article" data-toggle="tab">article</a></li>
         <li class="dropdown">
            <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">
            Tutorials
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
               <li><a href="#JavaScript" tabindex="-1" data-toggle="tab">JavaScript</a></li>
               <li><a href="#CSS" tabindex="-1" data-toggle="tab">CSS</a></li>
            </ul>
         </li>
      </ul>
      <div id="myTabContent" class="tab-content">
         <div class="tab-pane fade in active" id="home">
            <p>This is home page.</p>
         </div>
         <div class="tab-pane fade" id = "article">
            <p>The following are the article:</p>
         </div>
         <div class="tab-pane fade" id="JavaScript">
            <p>JavaScript is the programming language of HTML and the Web.</p>
         </div>
         <div class="tab-pane fade" id="CSS">
            <p>CSS is a language that describes the style of an HTML document.</p>
         </div>
      </div>
   </body>
</html>

Output

First Page
Next Page