Hi,
Below is simple example of bootstrap library.Its very rich UI library.
- <html lang=“en”>
- <head>
- <meta charset=“utf-8″>
- <title>Upgrading · Twitter Bootstrap</title>
- <meta name=“viewport” content=“width=device-width, initial-scale=1.0″>
- <!– Le styles –>
- <link href=“assets/css/bootstrap.css” rel=“stylesheet”>
- <link href=“assets/css/bootstrap-responsive.css” rel=“stylesheet”>
- <link href=“assets/css/docs.css” rel=“stylesheet”>
- </head>
- <body>
- <div class=“navbar navbar-fixed-top”>
- <div class=“tab-content”>
- <div id=“lA” class=“tab-pane active”>
- <p>I’m in Section A.</p>
- </div>
- <div id=“lB” class=“tab-pane”>
- <p>Howdy, I’m in Section B.</p>
- </div>
- <div id=“lC” class=“tab-pane”>
- <p>What up girl, this is Section C.</p>
- </div>
- </div>
- </div>
- <script type=“text/javascript” src=“http://platform.twitter.com/widgets.js”></script>
- <script src=“assets/js/jquery.js”></script>
- <script src=“assets/js/google-code-prettify/prettify.js”></script>
- <script src=“assets/js/bootstrap-transition.js”></script>
- <script src=“assets/js/bootstrap-alert.js”></script>
- <script src=“assets/js/bootstrap-modal.js”></script>
- <script src=“assets/js/bootstrap-dropdown.js”></script>
- <script src=“assets/js/bootstrap-scrollspy.js”></script>
- <script src=“assets/js/bootstrap-tab.js”></script>
- <script src=“assets/js/bootstrap-tooltip.js”></script>
- <script src=“assets/js/bootstrap-popover.js”></script>
- <script src=“assets/js/bootstrap-button.js”></script>
- <script src=“assets/js/bootstrap-collapse.js”></script>
- <script src=“assets/js/bootstrap-carousel.js”></script>
- <script src=“assets/js/bootstrap-typeahead.js”></script>
- </body>
- </html>
<!– Le styles –>
<link href=”assets/css/bootstrap.css” rel=”stylesheet”>
<link href=”assets/css/bootstrap-responsive.css” rel=”stylesheet”>
<link href=”assets/css/docs.css” rel=”stylesheet”>
</head>
<body>
<div class=”navbar navbar-fixed-top”>
<div class=”tab-content”>
<div id=”lA” class=”tab-pane active”>
<p>I’m in Section A.</p>
</div>
<div id=”lB” class=”tab-pane”>
<p>Howdy, I’m in Section B.</p>
</div>
<div id=”lC” class=”tab-pane”>
<p>What up girl, this is Section C.</p>
</div>
</div>
</div>
<script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script>
<script src=”assets/js/jquery.js”></script>
<script src=”assets/js/google-code-prettify/prettify.js”></script>
<script src=”assets/js/bootstrap-transition.js”></script>
<script src=”assets/js/bootstrap-alert.js”></script>
<script src=”assets/js/bootstrap-modal.js”></script>
<script src=”assets/js/bootstrap-dropdown.js”></script>
<script src=”assets/js/bootstrap-scrollspy.js”></script>
<script src=”assets/js/bootstrap-tab.js”></script>
<script src=”assets/js/bootstrap-tooltip.js”></script>
<script src=”assets/js/bootstrap-popover.js”></script>
<script src=”assets/js/bootstrap-button.js”></script>
<script src=”assets/js/bootstrap-collapse.js”></script>
<script src=”assets/js/bootstrap-carousel.js”></script>
<script src=”assets/js/bootstrap-typeahead.js”></script>
</body>
</html>