aboutsummaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
authorPiotrek Okoński <[email protected]>2011-11-26 19:41:17 +0100
committerPiotrek Okoński <[email protected]>2012-01-07 13:39:46 +0100
commit3eb80591b2c8bb2850caf27da7d6b8c8b747063a (patch)
treeedd19fb4fa64253f05af4f9022fbef34359b4d24 /docs
parentb6d50c892d6ae8ed42ff0bfbba4252c7dc47417e (diff)
downloadbootstrap-3eb80591b2c8bb2850caf27da7d6b8c8b747063a.tar.xz
bootstrap-3eb80591b2c8bb2850caf27da7d6b8c8b747063a.zip
Progress bars
Diffstat (limited to 'docs')
-rw-r--r--docs/components.html41
-rw-r--r--docs/javascript.html43
2 files changed, 84 insertions, 0 deletions
diff --git a/docs/components.html b/docs/components.html
index 5bafc5a60..0974a233f 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -925,6 +925,47 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="bottom">ipsum</a> verit
</div><!-- /row -->
</section>
+<!-- Progress bars
+================================================== -->
+ <section id="progresss">
+ <div class="page-header">
+ <h1>Progress bars <small>... for indicating progress</small></h1>
+ </div>
+ <div class="row">
+ <div class="span3">
+ <h2>Basic bars</h2>
+ <p>Default look of progress bars. Absolute minimum.</p>
+ </div>
+ <div class="span9">
+ <div class="progress">
+ <div class="bar" style="width: 50%;"></div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="span3">
+ <h2>Striped bars</h2>
+ <p>Bars with stripes painted.</p>
+ </div>
+ <div class="span9">
+ <div class="progress info striped">
+ <div class="bar" style="width: 20%;"></div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="span3">
+ <h2>Active state</h2>
+ <p>Animated stripes! <small>Not on Opera, though :(</small></p>
+ </div>
+ <div class="span3">
+ <div class="progress danger active striped">
+ <div class="bar" style="width: 45%"></div>
+ </div>
+ </div>
+ </div>
+ </section>
+
<!-- Footer
================================================== -->
<footer class="footer">
diff --git a/docs/javascript.html b/docs/javascript.html
index 0aebf8609..7e10d63b9 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -23,6 +23,49 @@
<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 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>
+ $(function () {
+ // twipsy demo
+ $("a[rel=twipsy]").twipsy({
+ live: true
+ })
+
+ //popover demo
+ $("a[rel=popover]")
+ .popover({
+ offset: 10
+ })
+ .click(function(e) {
+ e.preventDefault()
+ })
+ })
+ </script>
+
</head>
<body id="bootstrap-js">