javascript.html 67.99 KiB
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le styles -->
    <link href="../bootstrap.css" rel="stylesheet">
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
  </head>
  <body>
  <!-- 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 class="">
              <a href="./index.html">Overview</a>
            </li>
            <li class="">
              <a href="./scaffolding.html">Scaffolding</a>
            </li>
            <li class="">
              <a href="./base-css.html">Base CSS</a>
            </li>
            <li class="">
              <a href="./components.html">Components</a>
            </li>
            <li class="active">
              <a href="./javascript.html">Javascript plugins</a>
            </li>
            <li class="">
              <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.
        <div class="subnav">
          <ul class="nav pills">
            <li><a href="./javascript.html#javascript">Overview</a></li>
            <li><a href="./javascript.html#modals">Modal</a></li>
            <li><a href="./javascript.html#dropdowns">Dropdown</a></li>
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
<li><a href="./javascript.html#scrollspy">Scrollspy</a></li> <li><a href="./javascript.html#tabs">Tab</a></li> <li><a href="./javascript.html#tooltips">Tooltip</a></li> <li><a href="./javascript.html#popovers">Popover</a></li> <li><a href="./javascript.html#alerts">Alert</a></li> <li><a href="./javascript.html#buttons">Button</a></li> <li><a href="./javascript.html#collapse">Collapse</a></li> <li><a href="./javascript.html#carousel">Carousel</a></li> <li><a href="./javascript.html#typeahead">Typeahead</a></li> </ul> </div> </header> <!-- Using Javascript w/ Bootstrap ================================================== --> <section id="javascript"> <div class="page-header"> <h1>jQuery plugins <small>A dozen Bootstrap plugins to get you started</small></h1> </div> <div class="row"> <div class="span3"> <label> <h3><a href="./javascript.html#modals">Modals</a><input checked="true" value="bootstrap-modal.js" type="checkbox"></h3> <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p> </label> </div> <div class="span3"> <label> <h3><a href="./javascript.html#dropdowns">Dropdowns</a><input checked="true" value="bootstrap-dropdown.js" type="checkbox"></h3> <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p> </label> </div> <div class="span3"> <label> <h3><a href="./javascript.html#scrollspy">Scrollspy</a><input checked="true" value="bootstrap-scrollspy.js" type="checkbox"></h3> <p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p> </label> </div> <div class="span3"> <label> <h3><a href="./javascript.html#tabs">Togglable tabs</a><input checked="true" value="bootstrap-tab.js" type="checkbox"></h3> <p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p> </label> </div> </div> <!-- /row --> <div class="row"> <div class="span3"> <label> <h3><a href="./javascript.html#tooltips">Tooltips</a><input checked="true" value="bootstrap-tooltip.js" type="checkbox"></h3> <p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.</p> </label> </div> <div class="span3"> <label> <h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small><input checked="true" value="bootstrap-popover.js" type="checkbox"></h3> <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p> <p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltips</a> to be included</p> </label> </div> <div class="span3"> <label> <h3><a href="./javascript.html#alerts">Alert messages</a><input checked="true" value="bootstrap-alert.js" type="checkbox"></h3> <p>The alert plugin is a tiny class for adding close functionality to alerts.</p> </label> </div> <div class="span3"> <label> <h3><a href="./javascript.html#buttons">Buttons</a><input checked="true" value="bootstrap-button.js" type="checkbox"></h3> <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>