diff options
| author | Mark Otto <[email protected]> | 2011-12-26 16:47:10 -0600 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2011-12-26 16:47:10 -0600 |
| commit | 544120264d33945c1537b6621b29c71be3405d07 (patch) | |
| tree | 53513d3d5abf3eaa0bebfe228eb2e5e04b2855dc /docs/components.html | |
| parent | 690d3f4d1aeb97a76d22a4dfe056e33606e0bd94 (diff) | |
| parent | 12868933b9141ff9c63277efe36665cc7a8815df (diff) | |
| download | bootstrap-544120264d33945c1537b6621b29c71be3405d07.tar.xz bootstrap-544120264d33945c1537b6621b29c71be3405d07.zip | |
Merge branch '2.0-wip' of github.com:twitter/bootstrap into 2.0-wip
Conflicts:
bootstrap.css
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 90 |
1 files changed, 43 insertions, 47 deletions
diff --git a/docs/components.html b/docs/components.html index 2f359ab57..c6a349ff4 100644 --- a/docs/components.html +++ b/docs/components.html @@ -22,18 +22,6 @@ <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png"> - - <!-- Le javascript --> - <!-- Placed at the end of the document so the pages load faster --> - <script src="http://code.jquery.com/jquery-1.7.min.js"></script> - <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script> - <script src="assets/js/google-code-prettify/prettify.js"></script> - <script>$(function () { prettyPrint() })</script> - <script src="../js/bootstrap-transitions.js"></script> - <script src="../js/bootstrap-dropdown.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> - <script src="../js/bootstrap-scrollspy.js"></script> - <script src="assets/js/application.js"></script> </head> <body> @@ -242,7 +230,7 @@ <h1>Navbar</h1> </div> <h2>Fixed navbar</h2> - <div class="navbar navbar-static"> + <div class="navbar navbar-static" > <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="brand" href="#">Project Name</a> @@ -321,8 +309,8 @@ <li><a href="#">Messages</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Contact</a></li> - <li class="dropdown" data-dropdown="dropdown"> - <a href="#" class="dropdown-toggle">Dropdown</a> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> @@ -344,11 +332,11 @@ <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p> <div class="tabbable"> - <ul class="tabs" data-tabs="tabs"> - <li class="active"><a href="#1">Section 1</a></li> - <li><a href="#2">Section 2</a></li> - <li><a href="#3">Section 3</a></li> - <li><a href="#4">Section 4</a></li> + <ul class="tabs"> + <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li> + <li><a href="#2" data-toggle="tab">Section 2</a></li> + <li><a href="#3" data-toggle="tab">Section 3</a></li> + <li><a href="#4" data-toggle="tab">Section 4</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="1"> @@ -369,21 +357,21 @@ <div class="row"> <div class="span4"> <div class="tabbable tabs-left"> - <ul class="tabs" data-tabs="tabs"> - <li class="active"><a href="#1">Section 1</a></li> - <li><a href="#2">Section 2</a></li> - <li><a href="#3">Section 3</a></li> + <ul class="tabs"> + <li class="active"><a href="#5" data-toggle="tab">Section 1</a></li> + <li><a href="#6" data-toggle="tab">Section 2</a></li> + <li><a href="#7" data-toggle="tab">Section 3</a></li> </ul> <div class="tab-content" id="myTabContent2"> - <div class="tab-pane active" id="1"> + <div class="tab-pane active" id="5"> <h4>Section 1</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> - <div class="tab-pane" id="2"> + <div class="tab-pane" id="6"> <h4>Section 2</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> - <div class="tab-pane" id="3"> + <div class="tab-pane" id="7"> <h4>Section 3</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> @@ -392,21 +380,21 @@ </div> <div class="span4 offset1"> <div class="tabbable tabs-right"> - <ul class="tabs" data-tabs="tabs"> - <li class="active"><a href="#1">Section 1</a></li> - <li><a href="#2">Section 2</a></li> - <li><a href="#3">Section 3</a></li> + <ul class="tabs"> + <li class="active"><a href="#8" data-toggle="tab">Section 1</a></li> + <li><a href="#9" data-toggle="tab">Section 2</a></li> + <li><a href="#10" data-toggle="tab">Section 3</a></li> </ul> <div class="tab-content" id="myTabContent3"> - <div class="tab-pane active" id="1"> + <div class="tab-pane active" id="8"> <h4>Section 1</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> - <div class="tab-pane" id="2"> + <div class="tab-pane" id="9"> <h4>Section 2</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> - <div class="tab-pane" id="3"> + <div class="tab-pane" id="10"> <h4>Section 3</h4> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p> </div> @@ -417,24 +405,24 @@ <div class="tabbable tabs-bottom"> <div class="tab-content"> - <div class="tab-pane active" id="1"> + <div class="tab-pane active" id="11"> <p>Oh hai #1!</p> </div> - <div class="tab-pane" id="2"> + <div class="tab-pane" id="12"> <p>Oh hai #2!</p> </div> - <div class="tab-pane" id="3"> + <div class="tab-pane" id="13"> <p>Oh hai #3!</p> </div> - <div class="tab-pane" id="4"> + <div class="tab-pane" id="14"> <p>Oh hai #4!</p> </div> </div> - <ul class="tabs" data-tabs="tabs"> - <li class="active"><a href="#1">Section 1</a></li> - <li><a href="#2">Section 2</a></li> - <li><a href="#3">Section 3</a></li> - <li><a href="#4">Section 4</a></li> + <ul class="tabs"> + <li class="active"><a href="#11" data-toggle="tab">Section 1</a></li> + <li><a href="#12" data-toggle="tab">Section 2</a></li> + <li><a href="#13" data-toggle="tab">Section 3</a></li> + <li><a href="#14" data-toggle="tab">Section 4</a></li> </ul> </div> @@ -768,7 +756,7 @@ <div class="twipsies well"> <div style="position: relative"> <p class="muted" style="margin-bottom: 0"> -Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="above">rem</a> quae aut veritatis quasi quae. +Lorem ipsum dolar sit amet illo error <a href="#" title="bottom">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="top">rem</a> quae aut veritatis quasi quae. </p> </div> </div> @@ -811,9 +799,6 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita </div><!-- /row --> </section> - - - <!-- Footer ================================================== --> <footer class="footer"> @@ -823,5 +808,16 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> </footer> </div><!-- /container --> + + <!-- Le javascript --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="http://code.jquery.com/jquery-1.7.min.js"></script> + <script src="assets/js/google-code-prettify/prettify.js"></script> + <script src="../js/bootstrap-transition.js"></script> + <script src="../js/bootstrap-dropdown.js"></script> + <script src="../js/bootstrap-tab.js"></script> + <script src="../js/bootstrap-scrollspy.js"></script> + <script src="../js/bootstrap-twipsy.js"></script> + <script src="assets/js/application.js"></script> </body> </html> |
