Instructions:

Our final web site project will have features from twitter bootstrap that we have learned so far plus a few more tricks. Use the previous lessons for a templete to start a new project (maybe copying the html file into a new folder called 'finalProject' in order to save the old lessons). Or you can use Bootswatch to copy and paste a new css file. The Bootswatch themes can make your project look sharp. Be meticulous in linking any new css files.

Examples to use in the final webpage project. Please include at least two new features from below or from Twitter-Bootstrap collection.

Mail To forms

code for above

<form action="mailto:me@gmail" method="get" enctype="text/plain">
  <p>Name: <input type="text" name="name" /></p>
  <p>Email: <input type="text" name="email" /></p>
  <p>Comments:<br />
  <textarea cols="30" rows="20" name="comments"></textarea></p>
  <p><input type="submit" name="submit" value="Send" />
  <input type="reset" name="reset" value="Clear Form" /></p>
</form>
                    

jQuery trick to show or hide panel of text

Collapsible Header 1 - Click to toggle

code for html body

<div class="togglePanel"><h2>Collapsible Header</h2></div>
<div class="panel">
    content 1
</div>
                    

code inside &script type="text/javascript"> in head tag

$(document).ready(function() {
$(".flip").click(function(){
        $(".panel").slideToggle("medium");
    });
});
                    

Below was not working for me, but may work for you. From twitter-bootstrap.

Text or Content Collapse (data-toggles view or not view)

More Information

code for above

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">More Information</button>
<div id="demo" class="collapse in"> Your content goes here</div>