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,574 views

Published on

Getting Started with T

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,574
On SlideShare
0
From Embeds
0
Number of Embeds
560
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×