Home Explore Help
Sign In
fgm
/
js__bootstrap_demos
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Chapter 4 in progress.

Frederic G. MARAND 10 years ago
parent
aa5ede4106
commit
112490bc3f
6 changed files with 388 additions and 0 deletions
Unified View Show Diff Stats
  1. 53 0
      chapter4/01dropdown.html
  2. 58 0
      chapter4/02dropdown-js.html
  3. 49 0
      chapter4/03alert.html
  4. 99 0
      chapter4/04buttons.html
  5. 106 0
      chapter4/05scrollspy.html
  6. 23 0
      chapter4/06tabs.html

+ 53 - 0
chapter4/01dropdown.html
View File 

@@ -0,0 +1,53 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>Blasting off with Bootstrap</title>
 
+  <meta charset="utf-8" />
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="panel">
 
+    <div class="dropdown">
 
+      <!-- right-clicking this link to open in a new tab will take you to the href -->
 
+      <a data-toggle="dropdown" data-target="#" href="http://google.fr">
 
+        Dropdown<span class="caret"></span>
 
+      </a>
 
+      <ul class="dropdown-menu">
 
+        <li><a href="#">Item 1</a></li>
 
+        <li><a href="#">Item 2</a></li>
 
+        <li><a href="#">Item 3</a></li>
 
+        <li><a href="#">Item 4</a></li>
 
+      </ul>
 
+    </div>
 
+  </div>
 
+
 
+  <div class="panel">
 
+    <ul class="nav nav-pills">
 
+      <li class="active"><a href="#">Home</a></li>
 
+      <li class="dropdown">
 
+        <a data-toggle="dropdown" data-target="#" href="http://google.fr">Profile<span class="caret"></span></a>
 
+        <ul class="dropdown-menu">
 
+          <li><a href="#">Item 1</a></li>
 
+          <li><a href="#">Item 2</a></li>
 
+          <li><a href="#">Item 3</a></li>
 
+          <li><a href="#">Item 4</a></li>
 
+        </ul>
 
+      </li>
 
+      <li><a href="#">Messages</a></li>
 
+    </ul>
 
+  </div>
 
+
 
+  <!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
 
+  <script src="../js/jquery-1.11.2.min.js"></script>
 
+  <script src="../js/bootstrap.js"></script>
 
+</div>
 
+</body>
 
+</html>

+ 58 - 0
chapter4/02dropdown-js.html
View File 

@@ -0,0 +1,58 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>Blasting off with Bootstrap</title>
 
+  <meta charset="utf-8" />
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="panel">
 
+    <div class="dropdown" id="myDropdown">
 
+      <!-- right-clicking this link to open in a new tab will take you to the href -->
 
+      <a class="myDropdownHandle" href="http://google.fr"
 
+         data-toggle="dropdown" data-target="#">
 
+        Dropdown<span class="caret"></span>
 
+      </a>
 
+      <ul class="dropdown-menu">
 
+        <li><a href="#">Item 1</a></li>
 
+        <li><a href="#">Item 2</a></li>
 
+        <li><a href="#">Item 3</a></li>
 
+        <li><a href="#">Item 4</a></li>
 
+      </ul>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
 
+  <script src="../js/jquery-1.11.2.min.js"></script>
 
+  <script src="../js/bootstrap.js"></script>
 
+
 
+  <script type="text/javascript">
 
+    $(document).ready(function () {
 
+      $('#myDropdown .myDropdownHandle').dropdown('toggle');
 
+    });
 
+
 
+    $('#myDropdown').on('show.bs.dropdown', function () {
 
+      console.log('Opening dropdown');
 
+    });
 
+    $('#myDropdown').on('shown.bs.dropdown', function () {
 
+      console.log('Dropdown Opened');
 
+    });
 
+    $('#myDropdown').on('hide.bs.dropdown', function () {
 
+      console.log('Hiding dropdown');
 
+    });
 
+    $('#myDropdown').on('hidden.bs.dropdown', function () {
 
+      console.log('Dropdown hidden');
 
+    });
 
+  </script>
 
+
 
+</div>
 
+</body>
 
+</html>

+ 49 - 0
chapter4/03alert.html
View File 

@@ -0,0 +1,49 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>Blasting off with Bootstrap</title>
 
+  <meta charset="utf-8" />
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="alert alert-info">
 
+    Funds are being transferred.
 
+  </div>
 
+
 
+  <div class="alert alert-warning">
 
+    Something seems suspicious
 
+  </div>
 
+
 
+  <div class="alert alert-danger">
 
+    Oh no, someone stopped the transfer
 
+  </div>
 
+
 
+  <div class="alert alert-success alert-dismissable">
 
+    <a class="alert-link" href="http://en.wikipedia.org/wiki/Chuck_Norris_facts">Chuck Norris</a> caught them, the funds have been transferred correctly.
 
+    <button type="button" class="close" data-dismiss="alert">&times;</button>
 
+  </div>
 
+
 
+  <!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
 
+  <script src="../js/jquery-1.11.2.min.js"></script>
 
+  <script src="../js/bootstrap.js"></script>
 
+
 
+  <script type="text/javascript">
 
+    $('.alert').on('close.bs.alert', function () {
 
+      console.log('Closing alert');
 
+    });
 
+
 
+    $('.alert').on('closed.bs.alert', function () {
 
+      console.log('Alert closed');
 
+    });
 
+  </script>
 
+</div>
 
+</body>
 
+</html>

+ 99 - 0
chapter4/04buttons.html
View File 

@@ -0,0 +1,99 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>Blasting off with Bootstrap</title>
 
+  <meta charset="utf-8" />
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="panel">
 
+    <button class="btn btn-lg btn-default" data-toggle="button">
 
+      Toggle me!
 
+    </button>
 
+
 
+    <p>Need to focus elsewhere to see the button return to normal.</p>
 
+  </div>
 
+
 
+  <div class="panel">
 
+    <div class="panel-heading"><h3>Checkboxes</h3></div>
 
+    <div class="panel-body">
 
+      <div class="btn-group" data-toggle="buttons">
 
+        <label class="btn btn-default">
 
+          <input type="checkbox" />Option 1
 
+        </label>
 
+        <label class="btn btn-default">
 
+          <input type="checkbox" />Option 2
 
+        </label>
 
+        <label class="btn btn-default">
 
+          <input type="checkbox" />Option 3
 
+        </label>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <div class="panel">
 
+    <div class="panel-heading"><h3>Radios</h3></div>
 
+    <div class="panel-body">
 
+      <div class="btn-group" data-toggle="buttons">
 
+        <label class="btn btn-info">
 
+          <input name="options" type="radio" />Option 1
 
+        </label>
 
+        <label class="btn btn-info">
 
+          <input name="options" type="radio" />Option 2
 
+        </label>
 
+        <label class="btn btn-info">
 
+          <input name="options" type="radio" />Option 3
 
+        </label>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <div class="panel">
 
+    <div class="panel-heading"><h3>Progress / complete</h3></div>
 
+    <div class="panel-body">
 
+      <button id="myLoadingButton" type="button" class="btn btn-primary"
 
+        data-loading-text="Loading stuff..."
 
+        data-complete-text="Fully loaded!">
 
+        Load data
 
+      </button>
 
+      <p>Note that, when in the "loading" state, Bootstrap sets .disabled and @disabled on the button.</p>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
 
+  <script src="../js/jquery-1.11.2.min.js"></script>
 
+  <script src="../js/bootstrap.js"></script>
 
+
 
+  <script type="text/javascript">
 
+    $(document).ready(function () {
 
+      $('#myLoadingButton').click(function () {
 
+        console.log("Setting loading");
 
+        var that = this;
 
+        $(this).button('loading');
 
+        setTimeout(function () {
 
+          console.log("Setting complete");
 
+          $(that).button('complete');
 
+          setTimeout(function () {
 
+            console.log("Setting reset");
 
+            $(that).button('reset');
 
+          }, 2000);
 
+        }, 2000);
 
+      });
 
+
 
+//      $('#myLoadingButton').click(function () {
 
+//        $(this).button('reset');
 
+//      });
 
+    });
 
+  </script>
 
+
 
+</div>
 
+</body>
 
+</html>

+ 106 - 0
chapter4/05scrollspy.html
View File 

@@ -0,0 +1,106 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="utf-8" />
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+  <title>Bootstrap Plugins</title>
 
+  <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+
 
+  <style type="text/css">
 
+    .scrollspy-example {
 
+      position: relative;
 
+      height: 200px;
 
+      margin-top: 10px;
 
+      overflow: auto;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div id="navbarExample" class="navbar navbar-default" role="navigation">
 
+    <div class="container-fluid">
 
+      <div class="navbar-header">
 
+        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbarLinks">
 
+          <span class="icon-bar">A</span>
 
+          <span class="icon-bar">B</span>
 
+          <span class="icon-bar">C</span>
 
+        </button>
 
+        <a class="navbar-brand" href="#">SitePoint</a>
 
+      </div>
 
+
 
+      <div class="collapse navbar-collapse navbarLinks">
 
+        <ul class="nav navbar-nav">
 
+          <li class="active"><a href="#home">Home</a></li>
 
+          <li class=""><a href="#about">About</a></li>
 
+          <li class=""><a href="#contact">Contact Us</a></li>
 
+          <li class=""><a href="#map">Map</a></li>
 
+        </ul>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <div data-spy="scroll" data-target="#navbarExample" data-offset="0" class="scrollspy-example">
 
+    <h4 id="home">Home</h4>
 
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
 
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
 
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
 
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
 
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
 
+      est laborum</p>
 
+
 
+    <h4 id="about">About</h4>
 
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
 
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
 
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
 
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
 
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
 
+      est laborum</p>
 
+
 
+    <h4 id="contact">Contact us</h4>
 
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
 
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
 
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
 
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
 
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
 
+      est laborum</p>
 
+
 
+    <h4 id="map">Map</h4>
 
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
 
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
 
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
 
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
 
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
 
+      est laborum</p>
 
+  </div>
 
+
 
+  <!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
 
+  <script src="../js/jquery-1.11.2.min.js"></script>
 
+  <script src="../js/bootstrap.js"></script>
 
+
 
+  <script type="text/javascript">
 
+    /*
 
+    $(".scrollspy-example").scrollspy({
 
+      'target' : '#navbarExample'
 
+    });
 
+    $(".scrollspy-example").scrollspy('refresh');
 
+    */
 
+
 
+    $('#navbarExample').on('activate.bs.scrollspy', function () {
 
+      console.log('New link highlighted', this.id);
 
+    });
 
+
 
+  </script>
 
+
 
+</div>
 
+</body>
 
+</html>

+ 23 - 0
chapter4/06tabs.html
View File 

@@ -0,0 +1,23 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>Blasting off with Bootstrap</title>
 
+  <meta charset="utf-8"/>
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge"/>
 
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
+  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+</div>
 
+
 
+<!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
 
+<script src="../js/jquery-1.11.2.min.js"></script>
 
+<script src="../js/bootstrap.js"></script>
 
+</body>
 
+</html>