Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
TwitterBootstrap(It’s ironic I used this font for something somodern, isn’t it?)
©RunningnotesKathy Brown• Consultant with PSC Group• Twitter addict (15 accounts andcounting) @RunningKathy• Blogger at ww...
©RunningnotesWhat is TwitterBootstrap?• So what is it really?• It’s a thing that makes your stuffprettier and easier to use.
©RunningnotesGetting Started• Go here and get the download:• http://twitter.github.com/bootstrap/getting-started.html• Cre...
©RunningnotesAdd Bootstrap Files• Find your new NSF in PackageExplorer (or your app)• Find the Web Content folder• Right-c...
©RunningnotesAdd the Resources• css/bootstrap-responsive.min.css• css/bootstrap.min.css• js/bootstrap.min.js
©RunningnotesStart Doing Stuff• The grid<div class="row"><div class="span4">...</div><div class="span8">...</div></div>
©RunningnotesBeg, Borrow, and Steal• http://twitter.github.io/bootstrap/base-css.html• Buttons, and tables, and images, oh...
©RunningnotesTooltips• Drag an input box onto the page• Go to the All Properties tab• Under basics, click the + next to at...
©RunningnotesTypeahead• Deprecated, but still a good example• styleClass = “typeahead”<script>var stringval=$(.HiddenValue...
©RunningnotesQuestions• @RunningKathy• kathy@runningnotes.net
Upcoming SlideShare
Loading in …5
×

Twitter Bootstrap

1,626 views

Published on

Getting Started with T

Published in: Technology
  • Be the first to comment

Twitter Bootstrap

  1. 1. TwitterBootstrap(It’s ironic I used this font for something somodern, isn’t it?)
  2. 2. ©RunningnotesKathy Brown• Consultant with PSC Group• Twitter addict (15 accounts andcounting) @RunningKathy• Blogger at www.runningnotes.net• Runner, Mom, Geek, and Loud Laugher
  3. 3. ©RunningnotesWhat is TwitterBootstrap?• So what is it really?• It’s a thing that makes your stuffprettier and easier to use.
  4. 4. ©RunningnotesGetting Started• Go here and get the download:• http://twitter.github.com/bootstrap/getting-started.html• Create a new NSF or select the one youwant to add bootstrap to• Go to the Package Explorer view• Window, Show Eclipse View, PackageExplorer
  5. 5. ©RunningnotesAdd Bootstrap Files• Find your new NSF in PackageExplorer (or your app)• Find the Web Content folder• Right-click and select Import... FileSystem• Select the folders (all, for now)• Click Finish
  6. 6. ©RunningnotesAdd the Resources• css/bootstrap-responsive.min.css• css/bootstrap.min.css• js/bootstrap.min.js
  7. 7. ©RunningnotesStart Doing Stuff• The grid<div class="row"><div class="span4">...</div><div class="span8">...</div></div>
  8. 8. ©RunningnotesBeg, Borrow, and Steal• http://twitter.github.io/bootstrap/base-css.html• Buttons, and tables, and images, oh my!
  9. 9. ©RunningnotesTooltips• 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. 10. ©RunningnotesTypeahead• Deprecated, but still a good example• styleClass = “typeahead”<script>var stringval=$(.HiddenValues).val();var names=stringval.split(",");$(.typeahead).typeahead({source: names});</script>
  11. 11. ©RunningnotesQuestions• @RunningKathy• kathy@runningnotes.net

×