Getting Started with T

1. Twitter
Bootstrap
(It’s ironic I used this font for something so
modern, isn’t it?)

2. ©Runningnotes
Kathy Brown
• Consultant with PSC Group
• Twitter addict (15 accounts and
counting) @RunningKathy
• Blogger at www.runningnotes.net
• Runner, Mom, Geek, and Loud Laugher

3. ©Runningnotes
What is Twitter
Bootstrap?
• So what is it really?
• It’s a thing that makes your stuff
prettier and easier to use.

4. ©Runningnotes
Getting Started
• Go here and get the download:
• http://twitter.github.com/bootstrap/
getting-started.html
• Create a new NSF or select the one you
want to add bootstrap to
• Go to the Package Explorer view
• Window, Show Eclipse View, Package
Explorer

5. ©Runningnotes
Add Bootstrap Files
• Find your new NSF in Package
Explorer (or your app)
• Find the Web Content folder
• Right-click and select Import... File
System
• Select the folders (all, for now)
• Click Finish

6. ©Runningnotes
Add the Resources
• css/bootstrap-responsive.min.css
• css/bootstrap.min.css
• js/bootstrap.min.js

7. ©Runningnotes
Start Doing Stuff
• The grid
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>

8. ©Runningnotes
Beg, Borrow, and Steal
• http://twitter.github.io/bootstrap/
base-css.html
• Buttons, and tables, and images, oh my!

9. ©Runningnotes
Tooltips
• Drag an input box onto the page
• Go to the All Properties tab
• Under basics, click the + next to attrs
• For the name, enter “data-toggle”
• For the value, enter “tooltip”
• Add an attribute with the name of “title”
and enter tooltip text for the value

10. ©Runningnotes
Typeahead
• Deprecated, but still a good example
• styleClass = “typeahead”
<script>
var stringval=$('.HiddenValues').val();
var names=stringval.split(",");
$('.typeahead').typeahead({source: names});
</script>

11. ©Runningnotes
Questions
• @RunningKathy
• kathy@runningnotes.net