Skip to content

Instantly share code, notes, and snippets.

@mnewt

mnewt/bootstrap-tabs.html

Created December 6, 2012 20:28
Show Gist options
  • Save mnewt/4228037 to your computer and use it in GitHub Desktop.
Save mnewt/4228037 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mnewt created this gist Dec 6, 2012.
    58 changes: 58 additions & 0 deletions bootstrap-tabs.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,58 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <!-- Le styles -->
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    </head>

    <body>

    <div class="container">

    <!-------->
    <div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
    <li><a href="#orange" data-toggle="tab">Orange</a></li>
    <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
    <li><a href="#green" data-toggle="tab">Green</a></li>
    <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
    <div class="tab-pane active" id="red">
    <h1>Red</h1>
    <p>red red red red red red</p>
    </div>
    <div class="tab-pane" id="orange">
    <h1>Orange</h1>
    <p>orange orange orange orange orange</p>
    </div>
    <div class="tab-pane" id="yellow">
    <h1>Yellow</h1>
    <p>yellow yellow yellow yellow yellow</p>
    </div>
    <div class="tab-pane" id="green">
    <h1>Green</h1>
    <p>green green green green green</p>
    </div>
    <div class="tab-pane" id="blue">
    <h1>Blue</h1>
    <p>blue blue blue blue blue</p>
    </div>
    </div>
    </div>


    <script type="text/javascript">
    jQuery(document).ready(function ($) {
    $('#tabs').tab();
    });
    </script>
    </div> <!-- container -->


    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>

    </body>
    </html>