* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Wed Dec 21 13:29:41 PST 2011
+ * Date: Wed Dec 21 18:41:55 PST 2011
*/
html, body {
margin: 0;
$(function(){
- // table sort example
- // ==================
+ // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+ // IT'S ALL JUST JUNK FOR OUR DOCS!
+ // ++++++++++++++++++++++++++++++++++++++++++
- $("#sortTableExample").tablesorter( { sortList: [[ 1, 0 ]] } )
+ // make code pretty
+ prettyPrint && prettyPrint()
+ // table sort example
+ if ($.fn.tableSorter) {
+ $("#sortTableExample").tablesorter( { sortList: [[ 1, 0 ]] } )
+ }
// add on logic
- // ============
-
- $('.add-on :checkbox').click(function () {
- if ($(this).attr('checked')) {
- $(this).parents('.add-on').addClass('active')
- } else {
- $(this).parents('.add-on').removeClass('active')
- }
+ $('.add-on :checkbox').on('click', function () {
+ var $this = $(this)
+ , method = $this.attr('checked') ? 'addClass' : 'removeClass'
+ $(this).parents('.add-on')[method]('active')
})
-
// Disable certain links in docs
- // =============================
- // Please do not carry these styles over to your projects, it's merely here to prevent button clicks form taking you away from your spot on page
+ // Please do not carry these styles over to your projects
+ // it's merely here to prevent button clicks form taking you
+ // away from your spot on page!!
- $('ul.tabs a, ul.pills a, .pagination a, .well .btn, .actions .btn, .alert-message .btn, a.close').click(function (e) {
+ $('[href^=#]').click(function (e) {
e.preventDefault()
})
// Copy code blocks in docs
- $(".copy-code").focus(function () {
- var el = this;
- // push select to event loop for chrome :{o
- setTimeout(function () { $(el).select(); }, 1);
- });
-
-
- // POSITION STATIC TWIPSIES
- // ========================
-
- $(window).on('load resize', function () {
- $(".twipsies a").each(function () {
- $(this)
- .twipsy({
- live: false
- , placement: $(this).attr('title')
- , trigger: 'manual'
- , offset: 2
- })
- .twipsy('show')
- })
+ $(".copy-code").on('focus', function () {
+ var el = this
+ setTimeout(function () { $(el).select() }, 0)
})
-});
+
+ if ($.fn.twipsy) {
+
+ // position static twipsies for components page
+ if ($(".twipsies a").length) {
+ $(window).on('load resize', function () {
+ $(".twipsies a").each(function () {
+ $(this)
+ .twipsy({
+ placement: $(this).attr('title')
+ , trigger: 'manual'
+ })
+ .twipsy('show')
+ })
+ })
+ }
+
+ // add tipsies to grid for scaffolding
+ if ($('#grid-system').length) {
+
+ $('#grid-system').twipsy({
+ selector: '.show-grid > div'
+ , title: function () { return $(this).width() + 'px' }
+ })
+
+ }
+ }
+
+})
\ No newline at end of file
<!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster -->
- <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
-
- <script type="text/javascript">
- // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
- $(document).ready(function() {
- $('.nav .active').click(function(e) {
- e.preventDefault();
- $(this).siblings().toggle();
- });
- });
- </script>
-
- <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
+ <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> -->
+ <script src="../js/tests/vendor/jquery.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>
</body>
</html>
<h1>Navigation</h1>
</div>
<h2>Fixed navbar</h2>
- <div class="navbar navbar-static" data-dropdown="dropdown">
+ <div class="navbar navbar-static" >
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">Project Name</a>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
- <a href="#" class="dropdown-toggle">Dropdown</a>
+ <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>
<ul class="nav secondary-nav">
<li class="divider"></li>
<li class="dropdown">
- <a href="#" class="dropdown-toggle">Dropdown</a>
+ <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>
<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>
<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">
<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="#4" data-toggle="tab">Section 1</a></li>
+ <li><a href="#5" data-toggle="tab">Section 2</a></li>
+ <li><a href="#6" 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="4">
<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="5">
<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="6">
<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>
</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="#7" data-toggle="tab">Section 1</a></li>
+ <li><a href="#8" data-toggle="tab">Section 2</a></li>
+ <li><a href="#9" 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="7">
<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="8">
<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="9">
<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>
<div class="tabbable tabs-bottom">
<div class="tab-content">
- <div class="tab-pane active" id="1">
+ <div class="tab-pane active" id="10">
<p>Oh hai #1!</p>
</div>
- <div class="tab-pane" id="2">
+ <div class="tab-pane" id="11">
<p>Oh hai #2!</p>
</div>
- <div class="tab-pane" id="3">
+ <div class="tab-pane" id="12">
<p>Oh hai #3!</p>
</div>
- <div class="tab-pane" id="4">
+ <div class="tab-pane" id="13">
<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="#10" data-toggle="tab">Section 1</a></li>
+ <li><a href="#11" data-toggle="tab">Section 2</a></li>
+ <li><a href="#12" data-toggle="tab">Section 3</a></li>
+ <li><a href="#13" data-toggle="tab">Section 4</a></li>
</ul>
</div>
<!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster -->
- <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
-
- <script type="text/javascript">
- // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
- $(document).ready(function() {
- $('.nav .active').click(function(e) {
- e.preventDefault();
- $(this).siblings().toggle();
- });
- });
- </script>
-
- <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
+ <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> -->
+ <script src="../js/tests/vendor/jquery.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-transition.js"></script>
<script src="../js/bootstrap-twipsy.js"></script>
- <script src="../js/bootstrap-scrollspy.js"></script>
+ <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-tab.js"></script>
+
<script src="assets/js/application.js"></script>
</body>
</html>
<li class="divider">·</li>
<li class="follow-btn">
- <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
+ <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-width="145px" data-link-color="#0069D6" data-show-count="false">Follow @twbootstrap</a>
</li>
<li class="tweet-btn">
- <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+ <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
</li>
</ul>
<!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster -->
- <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
-
- <script type="text/javascript">
- // When ready...
- window.addEventListener("load",function() {
- // Set a timeout...
- setTimeout(function(){
- // Hide the address bar!
- window.scrollTo(0, 1);
- }, 0);
- });
-
- // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
- $(document).ready(function() {
- $('.nav .active').click(function(e) {
- e.preventDefault();
- $(this).siblings().toggle();
- });
- });
- </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>
-
+ <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</body>
-</html>
+</html>
\ No newline at end of file
<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">
- <!-- Le javascript -->
- <!-- placed up here so that the inline demos can be next to their markup -->
- <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> -->
- <script src="../js/tests/vendor/jquery.js"></script>
-
- <script type="text/javascript">
- // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
- $(document).ready(function() {
- $('.nav .active').click(function(e) {
- e.preventDefault();
- $(this).siblings().toggle();
- });
- });
- </script>
-
- <script src="assets/js/google-code-prettify/prettify.js"></script>
- <script>$(function () { prettyPrint() })</script>
- <script src="../js/bootstrap-transition.js"></script>
- <script src="../js/bootstrap-alert.js"></script>
- <script src="../js/bootstrap-modal.js"></script>
- <script src="../js/bootstrap-dropdown.js"></script>
- <script src="../js/bootstrap-scrollspy.js"></script>
- <script src="../js/bootstrap-tab.js"></script>
- <script src="../js/bootstrap-twipsy.js"></script>
- <script src="../js/bootstrap-popover.js"></script>
- <script src="../js/bootstrap-button.js"></script>
- <script src="../js/bootstrap-collapse.js"></script>
- <script>
- $(function () {
- // twipsy demo
- $('.twipsy-demo.well').twipsy({
- selector: "a[rel=twipsy]"
- })
-
- //popover demo
- $("a[rel=popover]")
- .popover()
- .click(function(e) {
- e.preventDefault()
- })
- })
- </script>
-
</head>
<body id="bootstrap-js">
<button id="fat-btn" data-loading-text="loading..." class="btn">
Loading State
</button>
- <script>
- $(function() {
- var btn = $('#fat-btn').click(function () {
- btn.button('loading')
- setTimeout(function () {
- btn.button('reset')
- }, 3000)
- })
- })
- </script>
</td>
</tr>
<tr>
<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="../js/tests/vendor/jquery.js"></script>
+ <script src="assets/js/google-code-prettify/prettify.js"></script>
+ <script src="../js/bootstrap-transition.js"></script>
+ <script src="../js/bootstrap-alert.js"></script>
+ <script src="../js/bootstrap-modal.js"></script>
+ <script src="../js/bootstrap-dropdown.js"></script>
+ <script src="../js/bootstrap-scrollspy.js"></script>
+ <script src="../js/bootstrap-tab.js"></script>
+ <script src="../js/bootstrap-twipsy.js"></script>
+ <script src="../js/bootstrap-popover.js"></script>
+ <script src="../js/bootstrap-button.js"></script>
+ <script src="../js/bootstrap-collapse.js"></script>
+ <script src="assets/js/application.js"></script>
+ <script>
+ $(function () {
+ // twipsy demo
+ $('.twipsy-demo.well').twipsy({
+ selector: "a[rel=twipsy]"
+ })
+
+ //popover demo
+ $("a[rel=popover]")
+ .popover()
+ .click(function(e) {
+ e.preventDefault()
+ })
+
+ $('#fat-btn')
+ .click(function () {
+ var btn = $(this)
+ btn.button('loading')
+ setTimeout(function () {
+ btn.button('reset')
+ }, 3000)
+ })
+ })
+ </script>
</body>
</html>
<!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster -->
- <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
-
- <script type="text/javascript">
- // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
- $(document).ready(function() {
- $('.nav .active').click(function(e) {
- e.preventDefault();
- $(this).siblings().toggle();
- });
- });
- </script>
-
- <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
+ <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> -->
+ <script src="../js/tests/vendor/jquery.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>
</body>
</html>
<h2>Default 940px grid</h2>
<div class="row show-grid">
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
- <div class="span1" title="60px">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
+ <div class="span1">1</div>
</div>
<div class="row show-grid">
- <div class="span4" title="300px">4</div>
- <div class="span4" title="300px">4</div>
- <div class="span4" title="300px">4</div>
+ <div class="span4">4</div>
+ <div class="span4">4</div>
+ <div class="span4">4</div>
</div>
<div class="row show-grid">
- <div class="span4" title="300px">4</div>
- <div class="span8" title="620px">8</div>
+ <div class="span4">4</div>
+ <div class="span8">8</div>
</div>
<div class="row show-grid">
- <div class="span6" title="460px">6</div>
- <div class="span6" title="460px">6</div>
+ <div class="span6">6</div>
+ <div class="span6">6</div>
</div>
<div class="row show-grid">
- <div class="span12" title="940px">12</div>
+ <div class="span12">12</div>
</div>
<div class="row">
</section>
-
<!-- Footer
================================================== -->
<footer class="footer">
<!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster -->
- <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
-
- <script type="text/javascript">
- // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
- $(document).ready(function() {
- $('.nav .active').click(function(e) {
- e.preventDefault();
- $(this).siblings().toggle();
- });
- });
- </script>
-
- <script type="text/javascript">
- // Show grid dimensions on hover
- $(document).ready(function() {
- $('.show-grid > div').hover(function() {
- var width = $(this).width();
- $(this).attr('title', width);
- $(this).twipsy();
- });
- });
- </script>
-
- <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
+ <!-- <script src="http://code.jquery.com/jquery-1.7.min.js"></script> -->
+ <script src="../js/tests/vendor/jquery.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-transition.js"></script>
<script src="../js/bootstrap-twipsy.js"></script>
- <script src="../js/bootstrap-scrollspy.js"></script>
<script src="assets/js/application.js"></script>
</body>
-</html>
+</html>
\ No newline at end of file
<li>Added button bar options</li>
</ul>
</li>
- <li>
- <ul>
- <li></li>
- </ul>
- </li>
</ul>
-
-<!--
-
-
-
--->
-
-
-
-
-
<!-- Footer
================================================== -->
<footer class="footer">
<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.5.2.min.js"></script>
-
- <script type="text/javascript">
- // NOT FINAL BY ANY MEANS, JUST MAH JANK CODE BRO
- $(document).ready(function() {
- $('.nav .active').click(function(e) {
- e.preventDefault();
- $(this).siblings().toggle();
- });
- });
- </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>
</body>
</html>