Twitter Bootstrap
Upcoming SlideShare
Loading in...5
×
 

Twitter Bootstrap

on

  • 1,606 views

Getting Started with T

Getting Started with T

Statistics

Views

Total Views
1,606
Views on SlideShare
1,117
Embed Views
489

Actions

Likes
0
Downloads
10
Comments
0

4 Embeds 489

http://www.runningnotes.net 443
http://feeds.feedburner.com 25
http://runningnotes.net 18
http://planetlotus.org 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Twitter Bootstrap Twitter Bootstrap Presentation Transcript

  • 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 www.runningnotes.net• Runner, Mom, Geek, and Loud Laugher
  • ©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• Create a new NSF or select the one youwant to add bootstrap to• Go to the Package Explorer view• Window, Show Eclipse View, PackageExplorer
  • ©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
  • ©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 my!
  • ©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
  • ©RunningnotesTypeahead• Deprecated, but still a good example• styleClass = “typeahead”<script>var stringval=$(.HiddenValues).val();var names=stringval.split(",");$(.typeahead).typeahead({source: names});</script>
  • ©RunningnotesQuestions• @RunningKathy• kathy@runningnotes.net