Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
javascript.html 59.59 KiB
1 
<!DOCTYPE html>
2 
<html lang="en">
3 
  <head>
4 
    <meta charset="utf-8">
5 
    <title>Bootstrap, from Twitter</title>
6 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 
    <meta name="description" content="">
8 
    <meta name="author" content="">
9
10 
    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
11 
    <!--[if lt IE 9]>
12 
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
13 
    <![endif]-->
14
15 
    <!-- Le styles -->
16 
    <link href="../bootstrap.css" rel="stylesheet">
17 
    <link href="assets/css/docs.css" rel="stylesheet">
18 
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
19
20 
    <!-- Le fav and touch icons -->
21 
    <link rel="shortcut icon" href="images/favicon.ico">
22 
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
23 
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
24 
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
25
26 
    <!-- Le javascript -->
27 
    <!-- placed up here so that the inline demos can be next to their markup -->
28 
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
29
30 
    <script type="text/javascript">
31 
      // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
32 
      $(document).ready(function() {
33 
        $('.nav .active').click(function(e) {
34 
          e.preventDefault();
35 
          $(this).siblings().toggle();
36 
        });
37 
      });
38 
    </script>
39
40 
    <script src="assets/js/google-code-prettify/prettify.js"></script>
41 
    <script>$(function () { prettyPrint() })</script>
42 
    <script src="../js/bootstrap-transition.js"></script>
43 
    <script src="../js/bootstrap-alert.js"></script>
44 
    <script src="../js/bootstrap-modal.js"></script>
45 
    <script src="../js/bootstrap-dropdown.js"></script>
46 
    <script src="../js/bootstrap-scrollspy.js"></script>
47 
    <script src="../js/bootstrap-tab.js"></script>
48 
    <script src="../js/bootstrap-twipsy.js"></script>
49 
    <script src="../js/bootstrap-popover.js"></script>
50 
    <script src="../js/bootstrap-button.js"></script>
51 
    <script>
52 
      $(function () {
53 
        // twipsy demo
54 
        $("a[rel=twipsy]").twipsy({
55 
          live: true
56 
        })
57
58 
        //popover demo
59 
        $("a[rel=popover]")
60 
          .popover({
61 
            offset: 10
62 
          })
63 
          .click(function(e) {
64 
            e.preventDefault()
65 
          })
66 
      })
67 
    </script>
68
69 
  </head>
70
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
<body id="bootstrap-js"> <!-- Navbar ================================================== --> <div class="navbar navbar-fixed"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="./index.html">Bootstrap</a> <ul class="nav"> <li><a href="./index.html">Overview</a></li> <li><a href="./scaffolding.html">Scaffolding</a></li> <li><a href="./base-css.html">Base CSS</a></li> <li><a href="./components.html">Components</a></li> <li class="active"><a href="./javascript.html">Javascript plugins</a></li> <li><a href="./less.html">Using LESS</a></li> </ul> </div> </div> </div> <div class="container"> <!-- Masthead ================================================== --> <header class="jumbotron subhead" id="overview"> <h1>Javascript for Bootstrap</h1> <p class="lead">Bring Bootstrap's components to life &mdash; now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. </header> <!-- Using Javascript w/ Bootstrap ================================================== --> <section id="javascript"> <div class="page-header"> <h1>Using javascript with Bootstrap <small>An index of plugins to get you started</small></h1> </div> <div class="row"> <div class="span3"> <h2>Getting started</h2> <p>Integrating javascript with the Bootstrap library is super easy. Here we go over the basics and provide you with some awesome plugins to get you started!</p> </div> <div class="span9"> <h3>What's included</h3> <p>Bring some of Bootstrap's primary components to life with custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. We encourage you to extend and modify them to fit your specific development needs.</p> <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 150px;">File</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><a href="./javascript.html#transition">bootstrap-transition.js</a></td> <td>The transition plugin is required for adding animation to other bootstrap plugins. Include this plugin (only once) when sliding in modals or fading out alerts.</td> </tr> <tr> <td><a href="./javascript.html#modal">bootstrap-modal.js</a></td> <td>Our Modal plugin is a super slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require here at twitter.</td> </tr> <tr> <td><a href="./javascript.html#dropdown">bootstrap-dropdown.js</a></td> <td>This plugin is for adding generic dropdown interactions to things like navigation top bars and tabs.</td> </tr> <tr> <td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td> <td>The ScrollSpy plugin is for automatically updating nav targets based on scroll position.</td> </tr> <tr> <td><a href="./javascript.html#tab">bootstrap-tab.js</a></td>